@arcblock/ux 2.1.18 → 2.1.21

package/src/NFTDisplay/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import clsx from 'clsx';
@@ -34,7 +35,7 @@ function fromBase64(v) {
 // };
 
 // 仅针对非 url type 的情况
-const getSvgEmbedder = preferredSvgEmbedder => {
+const getSvgEmbedder = (preferredSvgEmbedder) => {
   const embedders = {
     img: ImgSvgEmbedder,
     svg: InlineSvgEmbedder,
@@ -62,14 +63,14 @@ function NFTDisplay({
   onCompleted,
   ...rest
 }) {
-  const wrapRoot = children => (
+  const wrapRoot = (children) => (
     <Root as={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
       {children}
     </Root>
   );
 
   try {
-    const parsed = React.useRef(data);
+    const parsed = useRef(data);
     // 如果是 raw data 先解析
     if (typeof parsed.current === 'string') {
       parsed.current = JSON.parse(data);
@@ -88,19 +89,21 @@ function NFTDisplay({
     const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
     // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
 
-    React.useEffect(() => {
+    useEffect(() => {
       let timer;
       if (minimumLoadingTime > 0) {
         timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
       }
       return () => clearTimeout(timer);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     // onCompleted
-    React.useEffect(() => {
+    useEffect(() => {
       if ((!state.loading && minimumLoadingReady) || state.error) {
         onCompleted();
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [state, minimumLoadingReady]);
 
     if (state.error) {
@@ -168,8 +171,7 @@ function NFTDisplay({
 
     return wrapRoot(
       <>
-        {(state.loading || !minimumLoadingReady) &&
-          (renderLoading ? renderLoading() : <DefaultLoading />)}
+        {(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : <DefaultLoading />)}
         {renderNFT()}
       </>
     );

package/src/NFTDisplay/loading.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 export default function Loading() {

package/src/NFTDisplay/svg-embedder/img.js

@@ -1,8 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import InlineSvgEmbedder from './inline-svg';
 
-const svgToImgUrl = svg => {
+const svgToImgUrl = (svg) => {
   // fix: #225, https://stackoverflow.com/a/52135328)
   const blob = new Blob([svg], { type: 'image/svg+xml' });
   return URL.createObjectURL(blob);

package/src/NFTDisplay/svg-embedder/inline-svg.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import root from 'react-shadow/styled-components';

package/src/NavMenu/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './nav-menu';

package/src/NavMenu/nav-menu.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState, useRef } from 'react';
+import { Children, useEffect, createContext, useContext, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -9,9 +9,7 @@ const NavMenuContext = createContext();
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
   if (children) {
-    return React.Children.toArray(children).filter(
-      child => child.type === Item || child.type === Sub
-    );
+    return Children.toArray(children).filter((child) => child.type === Item || child.type === Sub);
   }
   return null;
 }
@@ -24,17 +22,7 @@ function useUniqueId(id) {
 /**
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
  */
-function NavMenu({
-  items,
-  mode,
-  children,
-  defaultActiveId,
-  textColor,
-  activeTextColor,
-  bgColor,
-  onSelected,
-  ...rest
-}) {
+function NavMenu({ items, mode, children, defaultActiveId, textColor, activeTextColor, bgColor, onSelected, ...rest }) {
   // eslint-disable-next-line no-param-reassign
   children = filterItems(children);
   if (!items?.length && !children?.length) {
@@ -45,18 +33,18 @@ function NavMenu({
     return {
       ...state,
       mode,
-      activate: id => {
-        setState(prev => ({ ...prev, activeId: id }));
+      activate: (id) => {
+        setState((prev) => ({ ...prev, activeId: id }));
         onSelected?.(id);
       },
-      open: id => {
-        setState(prev => ({ ...prev, openedIds: [...prev.openedIds, id] }));
+      open: (id) => {
+        setState((prev) => ({ ...prev, openedIds: [...prev.openedIds, id] }));
       },
-      close: id => {
-        setState(prev => ({ ...prev, openedIds: prev.openedIds.filter(item => item !== id) }));
+      close: (id) => {
+        setState((prev) => ({ ...prev, openedIds: prev.openedIds.filter((item) => item !== id) }));
       },
     };
-  }, [state]);
+  }, [state, mode, onSelected]);
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
   const renderItem = (item, index) => {
     if (item.children) {
@@ -116,10 +104,11 @@ function Item({ id: _id, icon, label, active, onClick, ...rest }) {
   const id = useUniqueId(_id);
   const { activeId, activate } = useContext(NavMenuContext);
   const classes = clsx('navmenu-item', { 'navmenu-item--active': activeId === id }, rest.className);
-  React.useEffect(() => {
+  useEffect(() => {
     if (active) {
       activate(id);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
   const handleClick = () => {
     onClick?.();
@@ -169,16 +158,14 @@ function Sub({ id: _id, icon, label, children, expandIcon, ...rest }) {
   // inline mode, 避免点击子菜单项时触发父菜单的 open/close
   const containerProps = isInlineMode
     ? {
-        onClick: e => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
       }
     : {};
   return (
     <li {...rest} className={classes} {...props}>
       {icon && <span className="navmenu-sub-icon">{icon}</span>}
       <span className="navmenu-sub-label">{label}</span>
-      {expandIcon && (
-        <span className="navmenu-sub-expand-icon">{expandIcon?.({ isOpen }) || expandIcon}</span>
-      )}
+      {expandIcon && <span className="navmenu-sub-expand-icon">{expandIcon?.({ isOpen }) || expandIcon}</span>}
       <div className="navmenu-sub-container" {...containerProps}>
         <ul className="navmenu-sub-list">{filterItems(children)}</ul>
       </div>

package/src/NavMenu/style.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const NavMenuBase = styled.nav`
-  background-color: ${props => props.$bgColor};
+  background-color: ${(props) => props.$bgColor};
   font-size: 14px;
   ul {
     list-style: none;
@@ -19,12 +19,12 @@ const NavMenuBase = styled.nav`
   /* active/hover */
   .navmenu-item,
   .navmenu-sub {
-    color: ${props => props.$textColor};
+    color: ${(props) => props.$textColor};
   }
   .navmenu-item--active,
   .navmenu-item:hover,
   .navmenu-sub--opened {
-    color: ${props => props.$activeTextColor};
+    color: ${(props) => props.$activeTextColor};
   }
 
   .navmenu-item {

package/src/PageScroller/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
@@ -31,7 +31,7 @@ let isBodyScrollEnabled = true;
 let isTransitionAfterComponentsToRenderChanged = false;
 const containers = [];
 
-const PageScroller = ({
+function PageScroller({
   animationTimer,
   blockScrollDown,
   blockScrollUp,
@@ -43,26 +43,21 @@ const PageScroller = ({
   onChange,
   renderAllPagesOnFirstRender,
   transitionTimingFunction,
-}) => {
+}) {
   const [componentIndex, setComponentIndex] = useState(DEFAULT_COMPONENT_INDEX);
-  const [componentsToRenderLength, setComponentsToRenderLength] = useState(
-    DEFAULT_COMPONENTS_TO_RENDER_LENGTH
-  );
+  const [componentsToRenderLength, setComponentsToRenderLength] = useState(DEFAULT_COMPONENTS_TO_RENDER_LENGTH);
   const prevComponentIndex = usePrevious(componentIndex);
   const pageContainer = useRef(null);
 
   const addNextComponent = useCallback(
-    componentsToRenderOnMountLength => {
+    (componentsToRenderOnMountLength) => {
       let tempComponentsToRenderLength = 0;
 
       if (!isNil(componentsToRenderOnMountLength)) {
         tempComponentsToRenderLength = componentsToRenderOnMountLength;
       }
 
-      tempComponentsToRenderLength = Math.max(
-        tempComponentsToRenderLength,
-        componentsToRenderLength
-      );
+      tempComponentsToRenderLength = Math.max(tempComponentsToRenderLength, componentsToRenderLength);
 
       if (tempComponentsToRenderLength <= componentIndex + 1) {
         if (!isNil(children[componentIndex + 1])) {
@@ -77,7 +72,7 @@ const PageScroller = ({
 
   const checkRenderOnMount = useCallback(() => {
     if (renderAllPagesOnFirstRender) {
-      setComponentsToRenderLength(React.Children.count(children));
+      setComponentsToRenderLength(Children.count(children));
     } else if (!isNil(children[DEFAULT_COMPONENT_INDEX + 1])) {
       addNextComponent(DEFAULT_COMPONENTS_TO_RENDER_LENGTH + 1);
     }
@@ -113,7 +108,7 @@ const PageScroller = ({
       containers[i] = true;
       newComponentsToRender.push(
         <div key={i} style={{ height: '100%', width: '100%' }}>
-          {React.cloneElement(children[i], { ...children[i].props })}
+          {cloneElement(children[i], { ...children[i].props })}
         </div>
       );
       i++;
@@ -131,7 +126,7 @@ const PageScroller = ({
 
         setTimeout(() => {
           if (isMounted) {
-            setComponentIndex(prevState => prevState + 1);
+            setComponentIndex((prevState) => prevState + 1);
           }
         }, animationTimer + ANIMATION_TIMER_BUFFER);
       } else {
@@ -141,14 +136,7 @@ const PageScroller = ({
         }
       }
     }
-  }, [
-    animationTimer,
-    blockScrollDown,
-    componentIndex,
-    disableScroll,
-    enableDocumentScroll,
-    onScrollUnavailable,
-  ]);
+  }, [animationTimer, blockScrollDown, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
 
   const scrollWindowUp = useCallback(() => {
     if (!isScrolling && !blockScrollUp) {
@@ -159,7 +147,7 @@ const PageScroller = ({
 
         setTimeout(() => {
           if (isMounted) {
-            setComponentIndex(prevState => prevState - 1);
+            setComponentIndex((prevState) => prevState - 1);
           }
         }, animationTimer + ANIMATION_TIMER_BUFFER);
       } else {
@@ -169,17 +157,10 @@ const PageScroller = ({
         }
       }
     }
-  }, [
-    animationTimer,
-    blockScrollUp,
-    componentIndex,
-    disableScroll,
-    enableDocumentScroll,
-    onScrollUnavailable,
-  ]);
+  }, [animationTimer, blockScrollUp, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
 
   const touchMove = useCallback(
-    event => {
+    (event) => {
       if (!isNull(previousTouchMove)) {
         if (event.touches[0].clientY > previousTouchMove) {
           scrollWindowUp();
@@ -194,7 +175,7 @@ const PageScroller = ({
   );
 
   const wheelScroll = useCallback(
-    event => {
+    (event) => {
       if (event.deltaY < 0) {
         scrollWindowUp();
       } else {
@@ -205,7 +186,7 @@ const PageScroller = ({
   );
 
   const keyPress = useCallback(
-    event => {
+    (event) => {
       if (isEqual(event.keyCode, KEY_UP)) {
         scrollWindowUp();
       }
@@ -222,6 +203,7 @@ const PageScroller = ({
     return () => {
       if (pageContainer.current?.removeEventListener) {
         pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
       }
     };
@@ -234,6 +216,7 @@ const PageScroller = ({
     return () => {
       isMounted = false;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -282,6 +265,7 @@ const PageScroller = ({
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [customPageNumber]);
 
   useEffect(() => {
@@ -312,7 +296,7 @@ const PageScroller = ({
       </div>
     </div>
   );
-};
+}
 
 PageScroller.propTypes = {
   animationTimer: PropTypes.number,

package/src/PageScroller/usePrevValue.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 export default function usePrevious(value) {
   const ref = useRef({});

package/src/PricingTable/PricingPlan.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -7,36 +6,38 @@ import Button from '@mui/material/Button';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 
-const PricingPlan = ({ plan }) => (
-  <PlanCard shadow>
-    <div className="card-header">
-      <div className="title">{plan.name}</div>
-    </div>
-    <CardContent className="card-content">
-      <div className="plan-content">
-        <div className="plan-pricing">
-          <Typography component="h2" variant="h5" className="price-number">
-            {plan.price}
-          </Typography>
-        </div>
-        <div className="plan-services">
-          {plan.featureList.map(line => (
-            <Typography component="p" variant="body1" align="center" key={line}>
-              {line}
+function PricingPlan({ plan }) {
+  return (
+    <PlanCard shadow>
+      <div className="card-header">
+        <div className="title">{plan.name}</div>
+      </div>
+      <CardContent className="card-content">
+        <div className="plan-content">
+          <div className="plan-pricing">
+            <Typography component="h2" variant="h5" className="price-number">
+              {plan.price}
             </Typography>
-          ))}
+          </div>
+          <div className="plan-services">
+            {plan.featureList.map((line) => (
+              <Typography component="p" variant="body1" align="center" key={line}>
+                {line}
+              </Typography>
+            ))}
+          </div>
         </div>
-      </div>
-      <div className="plan-actions">
-        {plan.showButton && (
-          <Button fullWidth variant="outlined" color="primary" component="a" href={plan.buttonLink}>
-            {plan.buttonText}
-          </Button>
-        )}
-      </div>
-    </CardContent>
-  </PlanCard>
-);
+        <div className="plan-actions">
+          {plan.showButton && (
+            <Button fullWidth variant="outlined" color="primary" component="a" href={plan.buttonLink}>
+              {plan.buttonText}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </PlanCard>
+  );
+}
 
 export default PricingPlan;
 
@@ -53,7 +54,7 @@ const PlanCard = styled(Card)`
   }
 
   && {
-    ${props => (props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
+    ${(props) => (props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
   }
 
   .card-header {

package/src/PricingTable/index.js

@@ -1,16 +1,15 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
 
-const PricingTable = ({ plans }) => {
+function PricingTable({ plans }) {
   if (plans && plans.length > 0) {
     return (
       <Div variant="even">
         <Grid container spacing={2} justifyContent="center">
-          {plans.map(x => (
+          {plans.map((x) => (
             <Grid item className="plan-item" key={x.id} xs={12} sm={6} md={3}>
               <PricingPlan plan={x} />
             </Grid>
@@ -20,7 +19,7 @@ const PricingTable = ({ plans }) => {
     );
   }
   return null;
-};
+}
 
 export default PricingTable;
 
@@ -31,7 +30,7 @@ PricingTable.propTypes = {
 const Div = styled.div`
   padding: 100px 0;
   text-align: center;
-  background-color: ${props => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};
+  background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};
   @media (max-width: 320px) {
     padding: 50px 0;
   }

package/src/QRCode/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import QRCodeStyling from '@solana/qr-code-styling';
 
@@ -18,7 +18,7 @@ const defaults = {
 // 该组件用于生成与 android wallet 样式风格相似的 qrcode
 // 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
 function QRCode({ data, size, image, config, ...rest }) {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   const options = useMemo(() => {
     return {
       ...defaults,
@@ -47,6 +47,7 @@ function QRCode({ data, size, image, config, ...rest }) {
   useEffect(() => {
     if (!qrCode) return;
     qrCode.update(options);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, size, image, config]);
 
   return <div ref={ref} {...rest} />;

package/src/RelativeTime/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
@@ -53,10 +52,7 @@ export default function RelativeTime({ value, locale, withoutSuffix, from, to, .
   }
 
   return (
-    <Tooltip
-      title={formatToDatetime(value, { locale: localeOption })}
-      placement="top-end"
-      enterTouchDelay={0}>
+    <Tooltip title={formatToDatetime(value, { locale: localeOption })} placement="top-end" enterTouchDelay={0}>
       <span {...rest}>{innerContent}</span>
     </Tooltip>
   );

package/src/Result/common.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
-import React from 'react';
 import useTheme from '@mui/styles/useTheme';
 import InfoIcon from '@mui/icons-material/Info';
 import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
@@ -9,14 +8,14 @@ import translations from './translations';
 import { useLocaleContext } from '../Locale/context';
 
 // 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
-const useLocale = locale => {
+const useLocale = (locale) => {
   locale = ['zh', 'en'].includes(locale) ? locale : '';
   const { locale: localeFromContext } = useLocaleContext() || { locale: 'en' };
   return locale || localeFromContext;
 };
 
 // 404
-export const PageNotFound = ({ locale, ...rest }) => {
+export function PageNotFound({ locale, ...rest }) {
   locale = useLocale(locale);
   return (
     <Result
@@ -26,11 +25,11 @@ export const PageNotFound = ({ locale, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 PageNotFound.status = '404';
 
 // 403
-export const Forbidden = ({ locale, ...rest }) => {
+export function Forbidden({ locale, ...rest }) {
   locale = useLocale(locale);
   return (
     <Result
@@ -40,11 +39,11 @@ export const Forbidden = ({ locale, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 Forbidden.status = '403';
 
 // 500
-export const InternalServerError = ({ locale, ...rest }) => {
+export function InternalServerError({ locale, ...rest }) {
   locale = useLocale(locale);
   return (
     <Result
@@ -54,11 +53,11 @@ export const InternalServerError = ({ locale, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 InternalServerError.status = '500';
 
 // 通用错误
-export const Error = ({ locale, ...rest }) => {
+export function Error({ locale, ...rest }) {
   locale = useLocale(locale);
   return (
     <Result
@@ -68,11 +67,11 @@ export const Error = ({ locale, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 Error.status = 'error';
 
 // under maintenance
-export const Maintenance = ({ locale, ...rest }) => {
+export function Maintenance({ locale, ...rest }) {
   locale = useLocale(locale);
   return (
     <Result
@@ -82,11 +81,11 @@ export const Maintenance = ({ locale, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 Maintenance.status = 'maintenance';
 
 // coming soon
-export const ComingSoon = ({ locale, ...rest }) => {
+export function ComingSoon({ locale, ...rest }) {
   locale = useLocale(locale);
   return (
     <Result
@@ -96,21 +95,21 @@ export const ComingSoon = ({ locale, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 ComingSoon.status = 'coming-soon';
 
 // info, 与其它 status 不同, title/description 需要使用方自己传入
-export const Info = props => {
+export function Info(props) {
   return <Result icon={<StyledInfoIcon />} {...props} />;
-};
+}
 Info.status = 'info';
 
-const StyledErrorIcon = props => {
+function StyledErrorIcon(props) {
   const theme = useTheme();
   return <CancelRoundedIcon style={{ color: theme.palette.error.main, fontSize: 72 }} {...props} />;
-};
+}
 
-const StyledInfoIcon = props => {
+function StyledInfoIcon(props) {
   const theme = useTheme();
   return <InfoIcon style={{ color: theme.palette.info.main, fontSize: 72 }} {...props} />;
-};
+}