@arcblock/ux 2.1.18 → 2.1.21

package/src/Result/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Result from './result';
 import * as common from './common';
@@ -8,20 +7,20 @@ const componentsKeyByStatus = Object.keys(common).reduce(
   {}
 );
 
-const ResultWrapper = ({ status, ...rest }) => {
+function ResultWrapper({ status, ...rest }) {
   if (status) {
     if (componentsKeyByStatus[status]) {
       const Component = componentsKeyByStatus[status];
       return <Component {...rest} />;
     }
     throw new Error(
-      `Please provide a valid status for Result.status. Valid values are: ${Object.keys(
-        componentsKeyByStatus
-      ).join(', ')}`
+      `Please provide a valid status for Result.status. Valid values are: ${Object.keys(componentsKeyByStatus).join(
+        ', '
+      )}`
     );
   }
   return <Result {...rest} />;
-};
+}
 
 ResultWrapper.propTypes = {
   status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/src/Result/result.js

@@ -1,9 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Box from '@mui/material/Box';
 
-const Result = ({ icon, title, description, extra, ...rest }) => {
+function Result({ icon, title, description, extra, ...rest }) {
   return (
     <Root {...rest}>
       {icon}
@@ -26,7 +25,7 @@ const Result = ({ icon, title, description, extra, ...rest }) => {
       <Box mt={3}>{extra}</Box>
     </Root>
   );
-};
+}
 
 Result.propTypes = {
   icon: PropTypes.element,

package/src/Result/translations.js

@@ -2,8 +2,7 @@ export default {
   en: {
     404: {
       title: '404 - Page Not Found',
-      description:
-        'Sorry about that, the page you are looking for does not exist or has been moved.',
+      description: 'Sorry about that, the page you are looking for does not exist or has been moved.',
     },
     403: {
       title: '403 – Forbidden',

package/src/Screenshot/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -79,8 +79,8 @@ const childProps = {
   video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children'],
 };
 
-const createChild = child => [
-  React.createElement(
+const createChild = (child) => [
+  createElement(
     child.type,
     childProps[child.type].reduce((acc, x) => {
       acc[x] = child.props[x];
@@ -98,7 +98,7 @@ const findChildren = (children, returnArgWhenNotFound = true) => {
     }
 
     if (child.props && child.props.children) {
-      const subChildren = React.Children.toArray(child.props.children);
+      const subChildren = Children.toArray(child.props.children);
       const result = findChildren(subChildren, false);
       if (result) {
         return result;
@@ -116,7 +116,7 @@ const findChildren = (children, returnArgWhenNotFound = true) => {
 // This component is built upon the awesome device.css lib
 // By default it will find and only render img/video tags in the children
 // If neither of them are found, the whole child tree is rendered
-const Screenshot = props => {
+function Screenshot(props) {
   const newProps = mergeProps(props, Screenshot, ['style', 'width', 'height']);
   const { type, children, style, className, width, height, ...rest } = newProps;
   const { zIndex = 0, borderRadius = 0 } = types[type] || {};
@@ -130,7 +130,7 @@ const Screenshot = props => {
       contentRadius={borderRadius}
       contentZIndex={zIndex}>
       <div className="device-frame">
-        <div className="device-content">{findChildren(React.Children.toArray(children))}</div>
+        <div className="device-content">{findChildren(Children.toArray(children))}</div>
       </div>
       <div className="device-stripe" />
       <div className="device-header" />
@@ -139,19 +139,19 @@ const Screenshot = props => {
       <div className="device-power" />
     </Div>
   );
-};
+}
 
 const Div = styled.div`
-  @media (max-width: ${props => types[props.type].width}px) {
+  @media (max-width: ${(props) => types[props.type].width}px) {
     transform-origin: 0 0;
-    transform: scale(${props => types[props.type].scale});
+    transform: scale(${(props) => types[props.type].scale});
   }
   .device-content {
     overflow: hidden;
   }
   .device-content video,
   .device-content img {
-    border-radius: ${props => props.contentRadius}px;
+    border-radius: ${(props) => props.contentRadius}px;
     background-color: #fff;
     background-position: center center;
     background-size: cover;

package/src/Spinner/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 
 /**

package/src/SplitButton/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -10,24 +10,15 @@ import MenuItem from '@mui/material/MenuItem';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '../Button';
 
-export default function SplitButton({
-  size,
-  color,
-  menu,
-  children,
-  variant,
-  onClick,
-  menuButtonProps,
-  ...rest
-}) {
+export default function SplitButton({ size, color, menu, children, variant, onClick, menuButtonProps, ...rest }) {
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
 
   const onToggle = () => {
-    setOpen(prevOpen => !prevOpen);
+    setOpen((prevOpen) => !prevOpen);
   };
 
-  const handleClose = e => {
+  const handleClose = (e) => {
     if (anchorRef.current && anchorRef.current.contains(e.target)) {
       return;
     }
@@ -35,7 +26,7 @@ export default function SplitButton({
   };
 
   // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
-  const handleItemClick = e => {
+  const handleItemClick = (e) => {
     if (e.target.classList.contains('MuiListItem-root')) {
       setOpen(false);
     }
@@ -55,11 +46,7 @@ export default function SplitButton({
           <ExpandMore />
         </Button>
       </StyledButtonGroup>
-      <StyledPopper
-        open={open}
-        anchorEl={anchorRef.current}
-        placement="bottom-end"
-        disablePortal={false}>
+      <StyledPopper open={open} anchorEl={anchorRef.current} placement="bottom-end" disablePortal={false}>
         <Paper>
           <ClickAwayListener onClickAway={handleClose}>
             <MenuList onClick={handleItemClick}>{menu}</MenuList>

package/src/Switch/index.js

@@ -1,57 +1,56 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import MuiSwitch from '@mui/material/Switch';
 
 // 参考: https://mui.com/material-ui/react-switch/#customization
-const IOSSwitch = styled(props => (
-  <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
-))(({ theme }) => ({
-  width: 42,
-  height: 26,
-  padding: 0,
-  '& .MuiSwitch-switchBase': {
+const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />)(
+  ({ theme }) => ({
+    width: 42,
+    height: 26,
     padding: 0,
-    margin: 2,
-    transitionDuration: '300ms',
-    '&.Mui-checked': {
-      transform: 'translateX(16px)',
-      color: '#fff',
-      '& + .MuiSwitch-track': {
-        backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
-        opacity: 1,
-        border: 0,
+    '& .MuiSwitch-switchBase': {
+      padding: 0,
+      margin: 2,
+      transitionDuration: '300ms',
+      '&.Mui-checked': {
+        transform: 'translateX(16px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
+          opacity: 1,
+          border: 0,
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 0.5,
+        },
+      },
+      '&.Mui-focusVisible .MuiSwitch-thumb': {
+        color: '#33cf4d',
+        border: '6px solid #fff',
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
       },
       '&.Mui-disabled + .MuiSwitch-track': {
-        opacity: 0.5,
+        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
       },
     },
-    '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#33cf4d',
-      border: '6px solid #fff',
-    },
-    '&.Mui-disabled .MuiSwitch-thumb': {
-      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+    '& .MuiSwitch-thumb': {
+      boxSizing: 'border-box',
+      width: 22,
+      height: 22,
     },
-    '&.Mui-disabled + .MuiSwitch-track': {
-      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    '& .MuiSwitch-track': {
+      borderRadius: 26 / 2,
+      backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+      opacity: 1,
+      transition: theme.transitions.create(['background-color'], {
+        duration: 500,
+      }),
     },
-  },
-  '& .MuiSwitch-thumb': {
-    boxSizing: 'border-box',
-    width: 22,
-    height: 22,
-  },
-  '& .MuiSwitch-track': {
-    borderRadius: 26 / 2,
-    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
-    opacity: 1,
-    transition: theme.transitions.create(['background-color'], {
-      duration: 500,
-    }),
-  },
-}));
+  })
+);
 
 /**
  * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,

package/src/Tabs/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import MuiTabs from '@mui/material/Tabs';
@@ -32,14 +31,8 @@ export default function Tabs({ tabs, current, onChange, ...rest }) {
       indicatorColor="primary"
       {...rest}
       className={[classes.tabs, rest.className || ''].join(' ')}>
-      {tabs.map(x => (
-        <MuiTab
-          className={classes.tab}
-          key={x.value}
-          value={x.value}
-          label={x.label}
-          icon={x.icon || null}
-        />
+      {tabs.map((x) => (
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
       ))}
     </StyledMuiTabs>
   );

package/src/Tag/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -68,7 +68,7 @@ Tag.defaultProps = {
   style: {},
 };
 
-export default React.forwardRef((props, ref) => <Tag {...props} forwardedRef={ref} />);
+export default forwardRef((props, ref) => <Tag {...props} forwardedRef={ref} />);
 
 const Span = styled(Typography)`
   && {

package/src/Terminal/Player.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
-import React, { useReducer, useState, useRef, useEffect } from 'react';
+import { useReducer, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import useInterval from '@arcblock/react-hooks/lib/useInterval';
 import useWindowSize from 'react-use/lib/useWindowSize';
@@ -111,6 +111,7 @@ export default function Player(props) {
     } catch (err) {
       // Do nothing
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width, maxWidth]);
 
   // console.log('main.render', state, { totalFrame: frames.length, totalDuration });
@@ -131,7 +132,7 @@ export default function Player(props) {
   };
 
   // Emit a event
-  const emitEvent = name => {
+  const emitEvent = (name) => {
     if (typeof props[name] === 'function') {
       props[name]({ state, frames, options });
     }
@@ -154,6 +155,7 @@ export default function Player(props) {
     } else {
       doJump(Math.min(Math.abs(options.thumbnailTime), totalDuration));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Tick intervals
@@ -231,7 +233,7 @@ export default function Player(props) {
     options.frameBox.style.paddingBottom = '40px';
   }
 
-  const doJump = time => {
+  const doJump = (time) => {
     terminal.current.reset();
 
     const toFrameIndex = findFrameAt(frames, time);
@@ -240,7 +242,7 @@ export default function Player(props) {
     }
   };
 
-  const onJump = e => {
+  const onJump = (e) => {
     if (!progress.current || !terminal.current || !state.isStarted) {
       return false;
     }
@@ -331,10 +333,7 @@ export default function Player(props) {
         <div className="timer">{formatTime(state.currentTime)}</div>
         <div className="progressbar-wrapper">
           <div className="progressbar" ref={progress} onClick={onJump}>
-            <div
-              className="progress"
-              style={{ width: `${(state.currentTime / totalDuration) * 100}%` }}
-            />
+            <div className="progress" style={{ width: `${(state.currentTime / totalDuration) * 100}%` }} />
           </div>
         </div>
       </div>

package/src/Terminal/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-class-component-methods */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Terminal as XTerm } from 'xterm';
@@ -85,13 +86,13 @@ export default class Terminal extends React.Component {
     }
   }
 
-  onData = data => {
+  onData = (data) => {
     if (this.props.onData) {
       this.props.onData(data);
     }
   };
 
-  onRender = data => {
+  onRender = (data) => {
     if (this.props.onRender) {
       this.props.onRender(data);
     }
@@ -125,7 +126,7 @@ export default class Terminal extends React.Component {
     const className = ['react-xterm', this.props.className].filter(Boolean).join(' ');
     return (
       // eslint-disable-next-line no-return-assign
-      <div ref={ref => (this.container = ref)} className={className} style={this.props.style} />
+      <div ref={(ref) => (this.container = ref)} className={className} style={this.props.style} />
     );
   }
 }

package/src/Terminal/util.js

@@ -14,7 +14,7 @@
  *   - Multiply the frames delays by this factor
  */
 export const formatFrames = (frames, options) => {
-  frames.forEach(x => {
+  frames.forEach((x) => {
     let { delay } = x;
 
     // Adjust the delay according to the options
@@ -102,7 +102,7 @@ export const isFrameAt = (frames, time, frameIndex) => {
   return false;
 };
 
-export const formatTime = time => {
+export const formatTime = (time) => {
   let minutes = Math.floor(time / 60000);
   let seconds = parseInt((time - minutes * 60000) / 1000, 10);
 
@@ -137,7 +137,7 @@ export const getPlayerClass = (options, state) => {
   return playerClass.filter(Boolean).join(' ');
 };
 
-export const getFrameClass = options => {
+export const getFrameClass = (options) => {
   const frameClass = ['terminal-frame'];
   if (options.frameBox.type) {
     frameClass.push(`terminal-${options.frameBox.type}`);

package/src/TextCollapse/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import Typography from '@mui/material/Typography';
@@ -35,12 +34,7 @@ export default function TextCollapse({
   ];
 
   return (
-    <Container
-      component="span"
-      style={styles}
-      startwidth={startWidth}
-      endwidth={endWidth}
-      {...rest}>
+    <Container component="span" style={styles} startwidth={startWidth} endwidth={endWidth} {...rest}>
       <span className="start-part">{startPart}</span>
       <span className="end-part">{endPart}</span>
     </Container>
@@ -81,12 +75,12 @@ const Container = styled(Typography)`
     overflow: hidden;
   }
   .start-part {
-    max-width: calc(100% - ${props => props.endwidth});
-    min-width: ${props => props.startwidth};
+    max-width: calc(100% - ${(props) => props.endwidth});
+    min-width: ${(props) => props.startwidth};
     text-overflow: ellipsis;
   }
   .end-part {
-    max-width: calc(100% - ${props => props.startwidth});
+    max-width: calc(100% - ${(props) => props.startwidth});
     direction: rtl;
   }
 `;

package/src/Theme/index.js

@@ -8,14 +8,7 @@ const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
 
 // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
-export const create = ({
-  mode = 'light',
-  pageWidth = 'md',
-  palette,
-  typography,
-  overrides,
-  ...rest
-} = {}) => {
+export const create = ({ mode = 'light', pageWidth = 'md', palette, typography, overrides, ...rest } = {}) => {
   // palette 考虑 light & dark mode, dark mode 需要持续完善
   // - 能配合 ColorModeContext 使用
   // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置

package/src/Toast/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createRef } from 'react';
 import { SnackbarProvider, useSnackbar } from 'notistack';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
@@ -20,8 +20,8 @@ const genFn = (enqueueSnackbar, variant) => (message, opts) => {
 
 // eslint-disable-next-line react/prop-types
 function ToastProvider({ children }) {
-  const notistackRef = React.createRef();
-  const onClickDismiss = key => () => {
+  const notistackRef = createRef();
+  const onClickDismiss = (key) => () => {
     notistackRef.current.closeSnackbar(key);
   };
 
@@ -32,13 +32,9 @@ function ToastProvider({ children }) {
         horizontal: 'right',
       }}
       ref={notistackRef}
-      action={key => (
-        <IconButton
-          key="close"
-          aria-label="close"
-          color="inherit"
-          onClick={onClickDismiss(key)}
-          size="large">
+      // eslint-disable-next-line react/no-unstable-nested-components
+      action={(key) => (
+        <IconButton key="close" aria-label="close" color="inherit" onClick={onClickDismiss(key)} size="large">
           <CloseIcon style={{ fontSize: 16 }} />
         </IconButton>
       )}>

package/src/Util/index.js

@@ -7,7 +7,7 @@ export function parseQuery(str) {
   return str
     .replace(/^\?/, '')
     .split('&')
-    .map(x => x.split('='))
+    .map((x) => x.split('='))
     .filter(([key]) => !!key)
     .reduce((memo, x) => {
       const key = x[0];
@@ -73,7 +73,7 @@ export function getCookieOptions(expireInDays = 1) {
   return options;
 }
 
-export const getColor = props => {
+export const getColor = (props) => {
   if (props.color) {
     return props.color;
   }
@@ -85,7 +85,7 @@ export const getColor = props => {
   return props.theme.palette.text.primary;
 };
 
-export const getBackground = props => {
+export const getBackground = (props) => {
   if (props.background) {
     return props.background;
   }
@@ -99,14 +99,14 @@ export const getBackground = props => {
 
 export function mergeProps(props, component, jsonAttrs = []) {
   const newProps = Object.assign({}, props);
-  Object.keys(component.defaultProps || {}).forEach(x => {
+  Object.keys(component.defaultProps || {}).forEach((x) => {
     if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
       newProps[x] = component.defaultProps[x];
     }
   });
 
   if (Array.isArray(jsonAttrs)) {
-    jsonAttrs.forEach(x => {
+    jsonAttrs.forEach((x) => {
       if (typeof newProps[x] === 'string') {
         try {
           newProps[x] = JSON.parse(newProps[x]);
@@ -117,7 +117,7 @@ export function mergeProps(props, component, jsonAttrs = []) {
     });
   }
 
-  Object.keys(newProps).forEach(x => {
+  Object.keys(newProps).forEach((x) => {
     if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
       newProps[x] = '';
     }
@@ -128,9 +128,7 @@ export function mergeProps(props, component, jsonAttrs = []) {
 
 export function getCopyright(startYear = 2017) {
   const currentYear = new Date().getFullYear();
-  return `${currentYear}` === `${startYear}`
-    ? `© ArcBlock ${currentYear}`
-    : `© ArcBlock ${startYear} - ${currentYear}`;
+  return `${currentYear}` === `${startYear}` ? `© ArcBlock ${currentYear}` : `© ArcBlock ${startYear} - ${currentYear}`;
 }
 
 export const getTimezone = () => {
@@ -145,7 +143,7 @@ export const getTimezone = () => {
   return '';
 };
 
-export const str2color = str => {
+export const str2color = (str) => {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -158,7 +156,7 @@ export const str2color = str => {
   return colour;
 };
 
-export const formatUptime = uptime => {
+export const formatUptime = (uptime) => {
   const total = Math.round(uptime / 1000);
   const hours = Math.floor(total / 3600);
   const minutes = Math.floor((total - hours * 3600) / 60);
@@ -180,7 +178,7 @@ export function getDateTool() {
 }
 
 const createDateFormater =
-  format =>
+  (format) =>
   (date, { locale, tz }) => {
     if (dateTool === null) {
       throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
@@ -229,13 +227,7 @@ export function formatToDatetime(date, { locale, tz } = {}) {
   return createDateFormater('lll')(date, { locale, tz });
 }
 
-export function openWebWallet({
-  webWalletUrl,
-  action = 'login',
-  locale = 'en',
-  url,
-  windowFeatures,
-}) {
+export function openWebWallet({ webWalletUrl, action = 'login', locale = 'en', url, windowFeatures }) {
   // web wallet extension
   const webWalletExtension = window?.ABT_DEV || window.ABT;
   if (webWalletExtension && typeof webWalletExtension.open === 'function') {
@@ -259,14 +251,10 @@ export function openWebWallet({
     width: 414,
     height: 736,
   };
-  const windowUrl = `${webWalletUrl}?action=${action}&locale=${locale}&url=${encodeURIComponent(
-    url
-  )}`;
+  const windowUrl = `${webWalletUrl}?action=${action}&locale=${locale}&url=${encodeURIComponent(url)}`;
   const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
-  const getWindowWidth = win => {
-    return (
-      win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth
-    );
+  const getWindowWidth = (win) => {
+    return win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
   };
   // 默认在浏览器右上角弹出窗口
   if (!('left' in mergedWindowFeatures)) {
@@ -279,7 +267,7 @@ export function openWebWallet({
     mergedWindowFeatures.top = winTop;
   }
   const strWindowFeatures = Object.keys(mergedWindowFeatures)
-    .map(key => `${key}=${mergedWindowFeatures[key]}`)
+    .map((key) => `${key}=${mergedWindowFeatures[key]}`)
     .join(',');
   window.open(windowUrl, 'targetWindow', strWindowFeatures);
 }