@arcblock/ux 2.10.0 → 2.10.2

package/lib/Blocklet/blocklet.js

@@ -62,7 +62,10 @@ const Div = styled('div')`
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
-        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+        transition:
+          transform 0.3s,
+          opacity 0.3s,
+          background-color 0.3s;
       }
       &:hover::after {
         opacity: 1;

package/lib/Blocklet/utils.js

@@ -28,7 +28,10 @@ const ActionButton = styled('div')`
       transform: scale(0.1);
       opacity: 0;
       z-index: -1;
-      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+      transition:
+        transform 0.3s,
+        opacity 0.3s,
+        background-color 0.3s;
     }
     &:hover::after {
       opacity: 1;

package/lib/BlockletNFT/index.js

@@ -92,7 +92,10 @@ const Div = styled('div')`
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
-        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+        transition:
+          transform 0.3s,
+          opacity 0.3s,
+          background-color 0.3s;
       }
       &:hover::after {
         opacity: 1;

package/lib/ClickToCopy/index.js

@@ -7,6 +7,21 @@ import { mergeProps } from '../Util';
 import { styled } from '../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export { default as CopyButton } from './copy-button';
+const Container = styled('span')`
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  align-items: center;
+  justify-content: start;
+  border-radius: 15px;
+  padding: 1px 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+`;
+const UnstyledContainer = styled('span')`
+  cursor: pointer;
+`;
 export default function ClickToCopy(props) {
   const newProps = mergeProps(props, ClickToCopy, ['style']);
   const {
@@ -74,19 +89,4 @@ ClickToCopy.defaultProps = {
   locale: 'en',
   style: {},
   unstyled: false
-};
-const Container = styled('span')`
-  display: inline;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  align-items: center;
-  justify-content: start;
-  border-radius: 15px;
-  padding: 1px 12px;
-  background-color: rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-`;
-const UnstyledContainer = styled('span')`
-  cursor: pointer;
-`;
+};

package/lib/Datatable/CustomToolbar.js

@@ -55,6 +55,7 @@ export default function CustomToolbar(props) {
     searchTextUpdate,
     searchClose
   } = props;
+  const [allPopsEl, setAllPopsEl] = useState({});
   const customToolbarEle = options.customToolbar ? options.customToolbar(props) : '';
   const {
     search,
@@ -132,7 +133,6 @@ export default function CustomToolbar(props) {
   }
   const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
   const allPops = [];
-  const [allPopsEl, setAllPopsEl] = useState({});
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode

package/lib/Datatable/index.js

@@ -58,6 +58,71 @@ import { styled } from '../Theme';
  *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
  * } & import('mui-datatables').MUIDataTableProps} DataTableProps
  */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FilterLine = styled('div')`
+  display: flex;
+  align-items: center;
+  .toolbar-filter-content {
+    margin-bottom: 8px;
+  }
+  .toolbar-filter-title {
+    font-weight: 700;
+    font-size: 14px;
+  }
+`;
+function WrapFilterList(props) {
+  const {
+    filterLabel
+  } = useDatatableContext();
+  const hasFilter = !!props.filterList.filter(e => e.length).length;
+  if (hasFilter) {
+    return /*#__PURE__*/_jsxs(FilterLine, {
+      children: [hasFilter && /*#__PURE__*/_jsx("div", {
+        className: "toolbar-filter-title",
+        children: filterLabel
+      }), /*#__PURE__*/_jsx("div", {
+        className: "toolbar-filter-content",
+        children: /*#__PURE__*/_jsx(TableFilterList, {
+          ...props
+        })
+      })]
+    });
+  }
+  return '';
+}
+WrapFilterList.propTypes = {
+  filterList: PropTypes.array
+};
+WrapFilterList.defaultProps = {
+  filterList: []
+};
+function WrapTableFooter(props) {
+  const {
+    loading,
+    disabled
+  } = useDatatableContext();
+  return /*#__PURE__*/_jsx(FooterContainer, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: `datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`,
+      children: /*#__PURE__*/_jsx(TableFooter, {
+        ...props
+      })
+    })
+  });
+}
+export const getDurableData = key => {
+  const durableKey = `datatable-durable-${key}`;
+  let localData = localStorage[durableKey];
+  if (localData) {
+    try {
+      localData = JSON.parse(localData);
+    } catch (err) {
+      console.error(`parse durable data error (key:${key}) => `, err);
+    }
+  }
+  return localData || {};
+};
 
 /**
  * @description
@@ -65,8 +130,6 @@ import { styled } from '../Theme';
  * @param {DataTableProps} props
  * @return {import('react').ReactComponentElement}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function DataTable(props) {
   return /*#__PURE__*/_jsx(DataTableProvider, {
     children: /*#__PURE__*/_jsx(ReDataTable, {
@@ -397,18 +460,6 @@ ReDataTable.defaultProps = {
   durable: '',
   durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder']
 };
-export const getDurableData = key => {
-  const durableKey = `datatable-durable-${key}`;
-  let localData = localStorage[durableKey];
-  if (localData) {
-    try {
-      localData = JSON.parse(localData);
-    } catch (err) {
-      console.error(`parse durable data error (key:${key}) => `, err);
-    }
-  }
-  return localData || {};
-};
 const alignCss = css`
   .MuiTableCell-head {
     [class*='MUIDataTableHeadCell-toolButton'] {
@@ -535,57 +586,6 @@ const TableContainer = styled('div', {
     }
   }
 `;
-const FilterLine = styled('div')`
-  display: flex;
-  align-items: center;
-  .toolbar-filter-content {
-    margin-bottom: 8px;
-  }
-  .toolbar-filter-title {
-    font-weight: 700;
-    font-size: 14px;
-  }
-`;
-function WrapFilterList(props) {
-  const {
-    filterLabel
-  } = useDatatableContext();
-  const hasFilter = !!props.filterList.filter(e => e.length).length;
-  if (hasFilter) {
-    return /*#__PURE__*/_jsxs(FilterLine, {
-      children: [hasFilter && /*#__PURE__*/_jsx("div", {
-        className: "toolbar-filter-title",
-        children: filterLabel
-      }), /*#__PURE__*/_jsx("div", {
-        className: "toolbar-filter-content",
-        children: /*#__PURE__*/_jsx(TableFilterList, {
-          ...props
-        })
-      })]
-    });
-  }
-  return '';
-}
-WrapFilterList.propTypes = {
-  filterList: PropTypes.array
-};
-WrapFilterList.defaultProps = {
-  filterList: []
-};
-function WrapTableFooter(props) {
-  const {
-    loading,
-    disabled
-  } = useDatatableContext();
-  return /*#__PURE__*/_jsx(FooterContainer, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: `datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`,
-      children: /*#__PURE__*/_jsx(TableFooter, {
-        ...props
-      })
-    })
-  });
-}
 const FooterContainer = styled('div')`
   display: flex;
   align-items: center;

package/lib/Dialog/types.d.ts

@@ -3,11 +3,11 @@ import type { ReactNode } from 'react';
 export type OpenConfirmProps = {
   title: ReactNode;
   content: ReactNode;
-  onConfirm: (close: () => void) => void;
-  onCancel: () => void;
-  showCancelButton: boolean;
-  confirmButtonText: string;
-  cancelButtonText: string;
+  onConfirm?: (close: () => void) => void;
+  onCancel?: () => void;
+  showCancelButton?: boolean;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
 };
 
 export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;

package/lib/Icon/image.js

@@ -60,6 +60,8 @@ const Div = styled('div')`
     background-color: #fe4e44;
     right: -2px;
     top: 0;
-    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0px 1px 4px rgba(0, 0, 0, 0.3),
+      0px 0px 20px rgba(0, 0, 0, 0.1);
   }
 `;

package/lib/Layout/dashboard/sidebar.js

@@ -7,19 +7,9 @@ import { styled } from '../../Theme';
 import { NavLink } from './external-link';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function renderGroup(item, index) {
-  return /*#__PURE__*/_jsxs("li", {
-    className: "layout-sidebar-group",
-    children: [/*#__PURE__*/_jsx("span", {
-      className: "layout-sidebar-group-title",
-      children: item.title
-    }), /*#__PURE__*/_jsx("ul", {
-      children: item.children.map(renderItem)
-    })]
-  }, `group-${item.title}-${index}`);
-}
 function renderItem(item, index) {
   if (item.children?.length) {
+    // eslint-disable-next-line no-use-before-define
     return renderGroup(item, index);
   }
   const {
@@ -52,6 +42,17 @@ function renderItem(item, index) {
     })
   }, `${url}-${index}`);
 }
+function renderGroup(item, index) {
+  return /*#__PURE__*/_jsxs("li", {
+    className: "layout-sidebar-group",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "layout-sidebar-group-title",
+      children: item.title
+    }), /*#__PURE__*/_jsx("ul", {
+      children: item.children.map(renderItem)
+    })]
+  }, `group-${item.title}-${index}`);
+}
 function Sidebar({
   links,
   addons,
@@ -126,7 +127,9 @@ const Root = styled('div')`
       background-color: #fe4e44;
       right: -2px;
       top: 0;
-      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+      box-shadow:
+        0px 1px 4px rgba(0, 0, 0, 0.3),
+        0px 0px 20px rgba(0, 0, 0, 0.1);
     }
   }
   .layout-sidebar-link-text {

package/lib/Locale/selector.js

@@ -152,7 +152,9 @@ const Div = styled('div', {
 
   .locales {
     background: ${props => getBackground(props)};
-    box-shadow: 0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6};
+    box-shadow:
+      0px 8px 16px 0px ${colors.gray6},
+      0px 0px 0px 1px ${colors.gray6};
     border-radius: 8px;
   }
 

package/lib/NFTDisplay/broken.js

@@ -126,7 +126,10 @@ const Root = styled(Box)`
     font-size: 13px;
     color: #9aa3b0;
     text-align: center;
-    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
+    text-shadow:
+      0 0 2px #fff,
+      0 0 2px #fff,
+      0 0 2px #fff;
     user-select: none;
   }
 `;

package/lib/NavMenu/nav-menu.js

@@ -13,6 +13,7 @@ const NavMenuContext = /*#__PURE__*/createContext();
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
   if (children) {
+    // eslint-disable-next-line no-use-before-define
     return Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
   }
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -54,12 +54,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "c4c885cb48490bcae77fb61a04e9d0bb9fbf6abc",
+  "gitHead": "01c29cd905a2baf029d7be25d41c79a261ebd959",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.0",
-    "@arcblock/nft-display": "^2.10.0",
-    "@arcblock/react-hooks": "^2.10.0",
+    "@arcblock/icons": "^2.10.2",
+    "@arcblock/nft-display": "^2.10.2",
+    "@arcblock/react-hooks": "^2.10.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Blocklet/blocklet.js

@@ -62,7 +62,10 @@ const Div = styled('div')`
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
-        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+        transition:
+          transform 0.3s,
+          opacity 0.3s,
+          background-color 0.3s;
       }
       &:hover::after {
         opacity: 1;

package/src/Blocklet/utils.js

@@ -29,7 +29,10 @@ const ActionButton = styled('div')`
       transform: scale(0.1);
       opacity: 0;
       z-index: -1;
-      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+      transition:
+        transform 0.3s,
+        opacity 0.3s,
+        background-color 0.3s;
     }
     &:hover::after {
       opacity: 1;

package/src/BlockletNFT/index.js

@@ -91,7 +91,10 @@ const Div = styled('div')`
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
-        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+        transition:
+          transform 0.3s,
+          opacity 0.3s,
+          background-color 0.3s;
       }
       &:hover::after {
         opacity: 1;

package/src/ClickToCopy/index.js

@@ -9,6 +9,23 @@ import { styled } from '../Theme';
 
 export { default as CopyButton } from './copy-button';
 
+const Container = styled('span')`
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  align-items: center;
+  justify-content: start;
+  border-radius: 15px;
+  padding: 1px 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+`;
+
+const UnstyledContainer = styled('span')`
+  cursor: pointer;
+`;
+
 export default function ClickToCopy(props) {
   const newProps = mergeProps(props, ClickToCopy, ['style']);
   const { children, content, tip, copiedTip, tipPlacement, locale, style, unstyled, ...rest } = newProps;
@@ -61,20 +78,3 @@ ClickToCopy.defaultProps = {
   style: {},
   unstyled: false,
 };
-
-const Container = styled('span')`
-  display: inline;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  align-items: center;
-  justify-content: start;
-  border-radius: 15px;
-  padding: 1px 12px;
-  background-color: rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-`;
-
-const UnstyledContainer = styled('span')`
-  cursor: pointer;
-`;

package/src/Datatable/CustomToolbar.js

@@ -52,6 +52,8 @@ export default function CustomToolbar(props) {
     searchClose,
   } = props;
 
+  const [allPopsEl, setAllPopsEl] = useState({});
+
   const customToolbarEle = options.customToolbar ? options.customToolbar(props) : '';
 
   const { search, downloadCsv, print, viewColumns, filterTable } = options.textLabels.toolbar;
@@ -137,7 +139,6 @@ export default function CustomToolbar(props) {
   const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter((e) => !!e).length > 1 && isMobile;
 
   const allPops = [];
-  const [allPopsEl, setAllPopsEl] = useState({});
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode

package/src/Datatable/index.jsx

@@ -59,6 +59,67 @@ import { styled } from '../Theme';
  * } & import('mui-datatables').MUIDataTableProps} DataTableProps
  */
 
+const FilterLine = styled('div')`
+  display: flex;
+  align-items: center;
+  .toolbar-filter-content {
+    margin-bottom: 8px;
+  }
+  .toolbar-filter-title {
+    font-weight: 700;
+    font-size: 14px;
+  }
+`;
+
+function WrapFilterList(props) {
+  const { filterLabel } = useDatatableContext();
+  const hasFilter = !!props.filterList.filter((e) => e.length).length;
+  if (hasFilter) {
+    return (
+      <FilterLine>
+        {hasFilter && <div className="toolbar-filter-title">{filterLabel}</div>}
+        <div className="toolbar-filter-content">
+          <TableFilterList {...props} />
+        </div>
+      </FilterLine>
+    );
+  }
+  return '';
+}
+
+WrapFilterList.propTypes = {
+  filterList: PropTypes.array,
+};
+
+WrapFilterList.defaultProps = {
+  filterList: [],
+};
+
+function WrapTableFooter(props) {
+  const { loading, disabled } = useDatatableContext();
+
+  return (
+    <FooterContainer>
+      <div className={`datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`}>
+        <TableFooter {...props} />
+      </div>
+    </FooterContainer>
+  );
+}
+
+export const getDurableData = (key) => {
+  const durableKey = `datatable-durable-${key}`;
+  let localData = localStorage[durableKey];
+  if (localData) {
+    try {
+      localData = JSON.parse(localData);
+    } catch (err) {
+      console.error(`parse durable data error (key:${key}) => `, err);
+    }
+  }
+  return localData || {};
+};
+
 /**
  * @description
  * @export
@@ -386,19 +447,6 @@ ReDataTable.defaultProps = {
   durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
 };
 
-export const getDurableData = (key) => {
-  const durableKey = `datatable-durable-${key}`;
-  let localData = localStorage[durableKey];
-  if (localData) {
-    try {
-      localData = JSON.parse(localData);
-    } catch (err) {
-      console.error(`parse durable data error (key:${key}) => `, err);
-    }
-  }
-  return localData || {};
-};
-
 const alignCss = css`
   .MuiTableCell-head {
     [class*='MUIDataTableHeadCell-toolButton'] {
@@ -526,54 +574,6 @@ const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 've
   }
 `;
 
-const FilterLine = styled('div')`
-  display: flex;
-  align-items: center;
-  .toolbar-filter-content {
-    margin-bottom: 8px;
-  }
-  .toolbar-filter-title {
-    font-weight: 700;
-    font-size: 14px;
-  }
-`;
-
-function WrapFilterList(props) {
-  const { filterLabel } = useDatatableContext();
-  const hasFilter = !!props.filterList.filter((e) => e.length).length;
-  if (hasFilter) {
-    return (
-      <FilterLine>
-        {hasFilter && <div className="toolbar-filter-title">{filterLabel}</div>}
-        <div className="toolbar-filter-content">
-          <TableFilterList {...props} />
-        </div>
-      </FilterLine>
-    );
-  }
-  return '';
-}
-
-WrapFilterList.propTypes = {
-  filterList: PropTypes.array,
-};
-
-WrapFilterList.defaultProps = {
-  filterList: [],
-};
-
-function WrapTableFooter(props) {
-  const { loading, disabled } = useDatatableContext();
-
-  return (
-    <FooterContainer>
-      <div className={`datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`}>
-        <TableFooter {...props} />
-      </div>
-    </FooterContainer>
-  );
-}
-
 const FooterContainer = styled('div')`
   display: flex;
   align-items: center;

package/src/Dialog/types.d.ts

@@ -3,11 +3,11 @@ import type { ReactNode } from 'react';
 export type OpenConfirmProps = {
   title: ReactNode;
   content: ReactNode;
-  onConfirm: (close: () => void) => void;
-  onCancel: () => void;
-  showCancelButton: boolean;
-  confirmButtonText: string;
-  cancelButtonText: string;
+  onConfirm?: (close: () => void) => void;
+  onCancel?: () => void;
+  showCancelButton?: boolean;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
 };
 
 export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;

package/src/Dialog/use-confirm.jsx

@@ -62,17 +62,13 @@ const ConfirmHolder = forwardRef((props, ref) => {
       state.loading = false;
     }
   }, []);
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        open,
-        close,
-        update,
-      };
-    },
-    [open, close, update]
-  );
+  useImperativeHandle(ref, () => {
+    return {
+      open,
+      close,
+      update,
+    };
+  }, [open, close, update]);
 
   return (
     <Confirm

package/src/Icon/image.js

@@ -49,6 +49,8 @@ const Div = styled('div')`
     background-color: #fe4e44;
     right: -2px;
     top: 0;
-    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0px 1px 4px rgba(0, 0, 0, 0.3),
+      0px 0px 20px rgba(0, 0, 0, 0.1);
   }
 `;

package/src/Layout/dashboard/sidebar.js

@@ -6,17 +6,9 @@ import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
 
-function renderGroup(item, index) {
-  return (
-    <li key={`group-${item.title}-${index}`} className="layout-sidebar-group">
-      <span className="layout-sidebar-group-title">{item.title}</span>
-      <ul>{item.children.map(renderItem)}</ul>
-    </li>
-  );
-}
-
 function renderItem(item, index) {
   if (item.children?.length) {
+    // eslint-disable-next-line no-use-before-define
     return renderGroup(item, index);
   }
   const { url, icon, title, showBadge, external, active } = item;
@@ -38,6 +30,15 @@ function renderItem(item, index) {
   );
 }
 
+function renderGroup(item, index) {
+  return (
+    <li key={`group-${item.title}-${index}`} className="layout-sidebar-group">
+      <span className="layout-sidebar-group-title">{item.title}</span>
+      <ul>{item.children.map(renderItem)}</ul>
+    </li>
+  );
+}
+
 function Sidebar({ links, addons, dense, ...rest }) {
   return (
     <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
@@ -105,7 +106,9 @@ const Root = styled('div')`
       background-color: #fe4e44;
       right: -2px;
       top: 0;
-      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+      box-shadow:
+        0px 1px 4px rgba(0, 0, 0, 0.3),
+        0px 0px 20px rgba(0, 0, 0, 0.1);
     }
   }
   .layout-sidebar-link-text {

package/src/Locale/selector.jsx

@@ -137,7 +137,9 @@ const Div = styled('div', {
 
   .locales {
     background: ${(props) => getBackground(props)};
-    box-shadow: 0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6};
+    box-shadow:
+      0px 8px 16px 0px ${colors.gray6},
+      0px 0px 0px 1px ${colors.gray6};
     border-radius: 8px;
   }
 

package/src/NFTDisplay/broken.js

@@ -46,7 +46,10 @@ const Root = styled(Box)`
     font-size: 13px;
     color: #9aa3b0;
     text-align: center;
-    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
+    text-shadow:
+      0 0 2px #fff,
+      0 0 2px #fff,
+      0 0 2px #fff;
     user-select: none;
   }
 `;

package/src/NavMenu/nav-menu.js

@@ -23,6 +23,7 @@ const NavMenuContext = createContext();
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
   if (children) {
+    // eslint-disable-next-line no-use-before-define
     return Children.toArray(children).filter((child) => child.type === Item || child.type === Sub);
   }
   return null;

package/src/Util/index.js

@@ -114,7 +114,9 @@ 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 = () => {