@arcblock/ux 2.1.17 → 2.1.20

package/src/BlockletNFT/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Portal from '@mui/material/Portal';
@@ -32,7 +32,7 @@ function prettySize(_size, digits = 1) {
 const Div = styled.div`
   &.arcblock-blocklet {
     padding: 0 16px;
-    background: ${props => props.theme.palette.common.white};
+    background: ${(props) => props.theme.palette.common.white};
     overflow: hidden;
     box-shadow: 0px 0px 8px #f0f0f0;
     &:hover {
@@ -88,7 +88,7 @@ const Div = styled.div`
         width: 100%;
         top: 0;
         left: 0;
-        background-color: ${props => props.theme.palette.primary.main};
+        background-color: ${(props) => props.theme.palette.primary.main};
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
@@ -103,11 +103,11 @@ const Div = styled.div`
 
     &:not(.Mui-disabled) {
       background-color: transparent !important;
-      color: ${props => props.theme.palette.primary.main};
+      color: ${(props) => props.theme.palette.primary.main};
     }
     &:not(.Mui-disabled) {
       &:hover {
-        color: ${props => props.theme.palette.common.white};
+        color: ${(props) => props.theme.palette.common.white};
       }
     }
   }
@@ -271,19 +271,11 @@ export default function BlockletNFT({
               )
             )}
             <div className="arcblock-blocklet__info">
-              <Typography
-                component="h3"
-                variant="h3"
-                className="arcblock-blocklet__title"
-                title={title}>
+              <Typography component="h3" variant="h3" className="arcblock-blocklet__title" title={title}>
                 {title}
               </Typography>
               {description && (
-                <Typography
-                  component="div"
-                  variant="body2"
-                  className="arcblock-blocklet__describe"
-                  title={description}>
+                <Typography component="div" variant="body2" className="arcblock-blocklet__describe" title={description}>
                   {description}
                 </Typography>
               )}

package/src/Button/wrap.js

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable func-names */
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
 import Spinner from '../Spinner';
@@ -78,5 +78,5 @@ export default function (BaseComponent) {
     style: {},
   };
 
-  return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
+  return forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
 }

package/src/Center/index.js

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

package/src/ClickToCopy/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { createRef, useState, useEffect } from 'react';
 import Copy from 'copy-to-clipboard';
 import PropTypes from 'prop-types';
 import useWindowSize from 'react-use/lib/useWindowSize';
@@ -15,10 +15,10 @@ export default function ClickToCopy(props) {
   const { children, content, tip, copiedTip, tipPlacement, style, ...rest } = newProps;
 
   const [copied, setCopied] = useState(false);
-  const childrenRef = React.createRef();
+  const childrenRef = createRef();
   const { width } = useWindowSize();
 
-  const onCopy = e => {
+  const onCopy = (e) => {
     Copy(content || e.current.textContent);
     setCopied(true);
     if (width < 600) {
@@ -43,18 +43,11 @@ export default function ClickToCopy(props) {
 
   return (
     <ToastProvider>
-      <Tooltip
-        title={copied ? copiedTip : tip}
-        {...rest}
-        placement={tipPlacement}
-        disableFocusListener>
+      <Tooltip title={copied ? copiedTip : tip} {...rest} placement={tipPlacement} disableFocusListener>
         <Container
           ref={childrenRef}
           component="span"
-          style={Object.assign(
-            { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' },
-            style
-          )}
+          style={Object.assign({ fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' }, style)}
           onClick={() => onCopy(childrenRef)}>
           {children || content}
         </Container>

package/src/CodeBlock/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Copy from 'copy-to-clipboard';
@@ -74,12 +74,7 @@ export default function CodeBlock({ code, language, children, ...rest }) {
           dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
         />
       </span>
-      <Button
-        className="copy-button"
-        onClick={onCopy}
-        tabIndex="-1"
-        color="primary"
-        disabled={copied}>
+      <Button className="copy-button" onClick={onCopy} tabIndex="-1" color="primary" disabled={copied}>
         {!copied && <CopyIcon style={{ color: '#fff', fontSize: 16 }} />}
         {copied && <CheckIcon style={{ color: '#fff', fontSize: 16 }} />}
       </Button>

package/src/Colors/index.js

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

package/src/ContactForm/index.js

@@ -16,15 +16,15 @@ export async function submitContactForm({ formId, portalId }, fields, context) {
   return axios
     .post(url, {
       submittedAt: Date.now(),
-      fields: Object.keys(fields).map(x => ({
+      fields: Object.keys(fields).map((x) => ({
         name: x.replace(/\s+/, '').toLowerCase(),
         value: fields[x],
       })),
       context,
       skipValidation: false,
     })
-    .then(res => res.data.inlineMessage)
-    .catch(res => (res.data ? res.data.message : 'Form Submit Failed'));
+    .then((res) => res.data.inlineMessage)
+    .catch((res) => (res.data ? res.data.message : 'Form Submit Failed'));
 }
 
 export default class ContactForm extends React.Component {
@@ -56,7 +56,7 @@ export default class ContactForm extends React.Component {
     super(props);
 
     if (typeof props.fields === 'string') {
-      this.fields = props.fields.split(',').map(x => x.trim());
+      this.fields = props.fields.split(',').map((x) => x.trim());
     } else {
       this.fields = props.fields;
     }
@@ -67,7 +67,7 @@ export default class ContactForm extends React.Component {
       successMessage: '',
     };
 
-    this.fields.forEach(x => {
+    this.fields.forEach((x) => {
       this.state[x] = '';
     });
   }
@@ -102,7 +102,7 @@ export default class ContactForm extends React.Component {
           </Typography>
         )}
         <div className="form-controls">
-          {this.fields.map(x => (
+          {this.fields.map((x) => (
             <input
               required
               key={x}
@@ -145,7 +145,7 @@ export default class ContactForm extends React.Component {
     );
   }
 
-  onSubmit = async e => {
+  onSubmit = async (e) => {
     e.preventDefault();
     this.setState({ loading: true });
 
@@ -176,7 +176,7 @@ export default class ContactForm extends React.Component {
 
   getInputHandler =
     (name, state = {}) =>
-    e => {
+    (e) => {
       this.setState(
         Object.assign(state, {
           [name]: e.target.value,
@@ -193,7 +193,7 @@ const Form = styled.form`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     width: 100% !important;
   }
   max-width: 800px;
@@ -202,24 +202,24 @@ const Form = styled.form`
   .title {
     font-size: 30px;
     text-align: center;
-    color: ${props => props.theme.typography.color.main};
+    color: ${(props) => props.theme.typography.color.main};
   }
 
   .form-controls {
     width: 100%;
-    flex-direction: ${props => (props.layout === 'vertical' ? 'column' : 'row')};
+    flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
     justify-content: space-between;
     align-items: center;
 
     .input {
-      width: ${props => getInputWidth(props)};
+      width: ${(props) => getInputWidth(props)};
       height: 50px;
       border: none;
-      border-bottom: 1px solid ${props => props.theme.typography.color.main};
+      border-bottom: 1px solid ${(props) => props.theme.typography.color.main};
       font-size: 16px;
       letter-spacing: 1.8px;
       outline: none;
-      margin: ${props => (props.layout === 'vertical' ? '12px 0' : '12px')};
+      margin: ${(props) => (props.layout === 'vertical' ? '12px 0' : '12px')};
       background: transparent;
 
       &:first-of-type {
@@ -228,8 +228,8 @@ const Form = styled.form`
     }
 
     .subscribe-btn-empty {
-      margin-top: ${props => (props.layout === 'vertical' ? '40px' : '0')};
-      width: ${props => (props.layout === 'vertical' ? '100%' : 'auto')};
+      margin-top: ${(props) => (props.layout === 'vertical' ? '40px' : '0')};
+      width: ${(props) => (props.layout === 'vertical' ? '100%' : 'auto')};
     }
   }
 

package/src/CookieConsent/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Button from '@mui/material/Button';
@@ -19,7 +18,9 @@ const translations = {
   },
 };
 
-const AcceptButton = props => <Button variant="contained" {...props} />;
+function AcceptButton(props) {
+  return <Button variant="contained" {...props} />;
+}
 
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用

package/src/CountDown/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -41,7 +41,7 @@ function FixWidthNumber({ number, label, length = 2 }) {
   );
 }
 
-export default class CountDown extends React.Component {
+export default class CountDown extends Component {
   constructor(props) {
     const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
     super(newProps);
@@ -100,7 +100,7 @@ const textBackground = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0
 linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`;
 
 const Container = styled.div`
-  color: ${props => getColor(props)};
+  color: ${(props) => getColor(props)};
   font-size: 50px;
   display: flex;
   flex-direction: row;
@@ -114,10 +114,10 @@ const Container = styled.div`
     align-items: center;
     margin: 0 60px;
 
-    @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+    @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
       margin: 0 20px;
     }
-    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
       margin: 0;
     }
 
@@ -131,12 +131,12 @@ const Container = styled.div`
       width: 40px;
       height: 60px;
       line-height: 60px;
-      background-image: ${props => (props.dark ? textBackground : 'none')};
+      background-image: ${(props) => (props.dark ? textBackground : 'none')};
       text-align: center;
 
       &:first-of-type {
         margin-right: 10px;
-        @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+        @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
           margin: 0;
         }
       }
@@ -145,7 +145,7 @@ const Container = styled.div`
     .num-label {
       margin-top: 20px;
       font-size: 24px;
-      color: ${props => getColor(props)};
+      color: ${(props) => getColor(props)};
     }
   }
 `;

package/src/Datatable/CustomToolbar.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, isValidElement } from 'react';
+import { useState, useRef, useEffect, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableFilter, TableViewCol } from 'mui-datatables';
 import styled from 'styled-components';
@@ -69,7 +69,7 @@ export default function CustomToolbar(props) {
     }
   }, [loading, disabled]);
 
-  const printArea = func => {
+  const printArea = (func) => {
     return (
       <ReactToPrint content={() => props.tableRef()}>
         <PrintContextConsumer>{func}</PrintContextConsumer>
@@ -77,7 +77,7 @@ export default function CustomToolbar(props) {
     );
   };
 
-  const getPopId = key => `toolbar-pop-${toolbarId.current}-${key}`;
+  const getPopId = (key) => `toolbar-pop-${toolbarId.current}-${key}`;
 
   const defaultButtons = [];
 
@@ -96,6 +96,7 @@ export default function CustomToolbar(props) {
     defaultButtons.push({
       icon: <ViewColumnIcon />,
       title: viewColumns,
+      // eslint-disable-next-line react/no-unstable-nested-components
       popRender() {
         return (
           <TableViewColComponent
@@ -115,6 +116,7 @@ export default function CustomToolbar(props) {
     defaultButtons.push({
       icon: <FilterIcon />,
       title: filterTable,
+      // eslint-disable-next-line react/no-unstable-nested-components
       popRender() {
         return (
           <TableFilterComponent
@@ -133,8 +135,7 @@ export default function CustomToolbar(props) {
     });
   }
 
-  const showMore =
-    [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
+  const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter((e) => !!e).length > 1 && isMobile;
 
   const allPops = [];
   const [allPopsEl, setAllPopsEl] = useState({});
@@ -283,7 +284,7 @@ export default function CustomToolbar(props) {
               ref={moreBtn}
               aria-haspopup="true"
               aria-expanded={menuIconEl ? 'true' : undefined}
-              onClick={event => setMenuIconEl(event.currentTarget)}
+              onClick={(event) => setMenuIconEl(event.currentTarget)}
               style={{ flexShrink: 0 }}>
               <MoreVertIcon />
             </IconButton>
@@ -317,9 +318,7 @@ export default function CustomToolbar(props) {
       {allPops.map((e, index) => (
         <div key={getPopId(index)}>{e}</div>
       ))}
-      <ProgressContainer>
-        {loading && <LinearProgress className="toolbar-progress" />}
-      </ProgressContainer>
+      <ProgressContainer>{loading && <LinearProgress className="toolbar-progress" />}</ProgressContainer>
     </div>
   );
 }

package/src/Datatable/DatatableContext.js

@@ -1,11 +1,11 @@
-import React, { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 const DatatableContext = createContext({});
 
 const { Provider } = DatatableContext;
 
 // eslint-disable-next-line react/prop-types
-const DatatableProvide = ({ children }) => {
+function DatatableProvide({ children }) {
   const [customButtons, setCustomButtons] = useState([]);
   const [loading, setLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
@@ -23,7 +23,7 @@ const DatatableProvide = ({ children }) => {
   };
 
   return <Provider value={value}>{children}</Provider>;
-};
+}
 
 function useDatatableContext() {
   return useContext(DatatableContext);

package/src/Datatable/TableSearch.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -7,23 +7,29 @@ import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
 import styled from 'styled-components';
 
-export default function TableSearch({
-  search,
-  options,
-  searchText,
-  searchTextUpdate,
-  searchClose,
-  onSearchOpen,
-}) {
+export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
   const [inputMode, setInputMode] = useState(false);
+  const [innerSearchText, setInnerSearchText] = useState('');
+  const inputTimer = useRef(null);
+
+  const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
     setInputMode(true);
     onSearchOpen(true);
   };
 
-  const onChange = event => {
-    searchTextUpdate(event.currentTarget.value);
+  const onChange = (event) => {
+    const { value } = event.currentTarget;
+    if (searchDebounceTime) {
+      clearTimeout(inputTimer.current);
+      setInnerSearchText(value);
+      inputTimer.current = setTimeout(() => {
+        searchTextUpdate(value);
+      }, searchDebounceTime);
+    } else {
+      searchTextUpdate(value);
+    }
   };
 
   const clickClose = () => {
@@ -56,7 +62,7 @@ export default function TableSearch({
             variant="standard"
             spacing={2}
             onChange={onChange}
-            value={searchText || ''}
+            value={searchDebounceTime ? innerSearchText : searchText || ''}
             autoFocus
           />
         )}
@@ -100,11 +106,11 @@ const Container = styled.div`
       width: 260px;
       padding-left: 8px;
 
-      ${props => props.theme.breakpoints.down('md')} {
+      ${(props) => props.theme.breakpoints.down('md')} {
         width: 200px;
       }
 
-      ${props => props.theme.breakpoints.down('sm')} {
+      ${(props) => props.theme.breakpoints.down('sm')} {
         width: 180px;
       }
       &.small-textfield {

package/src/Datatable/index.js

@@ -1,9 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
 import styled from 'styled-components';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
+import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvide, useDatatableContext } from './DatatableContext';
 
@@ -47,7 +49,7 @@ function ReDatatable({
   const keys = [];
 
   // Convert Columns fields to object sets to support the width function
-  const columns = originColumns.map(e => {
+  const columns = originColumns.map((e) => {
     let tempObj;
 
     if (!isObject(e)) {
@@ -65,7 +67,7 @@ function ReDatatable({
     }
 
     const { setCellHeaderProps } = tempObj.options;
-    tempObj.options.setCellHeaderProps = columnMeta => {
+    tempObj.options.setCellHeaderProps = (columnMeta) => {
       let cellProps = {};
 
       // Complementing width while inheriting old setCellHeaderProps
@@ -91,9 +93,9 @@ function ReDatatable({
   });
 
   // Fixing object-type structures
-  const data = originData.map(e => {
+  const data = originData.map((e) => {
     if (!Array.isArray(e) && isObject(e)) {
-      return keys.map(key => e[key]);
+      return keys.map((key) => e[key]);
     }
     return e;
   });
@@ -103,7 +105,10 @@ function ReDatatable({
   useEffect(() => setDisabled(disabled), [disabled]);
 
   let textLabels = {
-    body: { noMatch: 'Sorry, no matching records found', toolTip: 'Sort' },
+    body: {
+      noMatch: <Empty>Sorry, no matching records found</Empty>,
+      toolTip: 'Sort',
+    },
     pagination: {
       next: 'Next Page',
       previous: 'Previous Page',
@@ -125,7 +130,7 @@ function ReDatatable({
 
   if (locale === 'zh') {
     textLabels = {
-      body: { noMatch: '对不起，没有找到匹配的记录', toolTip: '排序' },
+      body: { noMatch: <Empty>对不起，没有找到匹配的记录</Empty>, toolTip: '排序' },
       pagination: {
         next: '下一页',
         previous: '上一页',
@@ -232,7 +237,7 @@ const TableContainer = styled.div`
     height: 100%;
     box-shadow: none;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     [class*='MUIDataTableBody-emptyTitle'] {
       padding-left: 16px;
       width: 200%;
@@ -243,7 +248,7 @@ const TableContainer = styled.div`
   &.datatable-stripped {
     .MuiTableBody-root {
       tr:nth-of-type(odd) {
-        background-color: ${props => props.theme.palette.action.hover};
+        background-color: ${(props) => props.theme.palette.action.hover};
       }
     }
   }
@@ -261,9 +266,9 @@ const FilterLine = styled.div`
   }
 `;
 
-const WrapFilterList = props => {
+function WrapFilterList(props) {
   const { filterLabel } = useDatatableContext();
-  const hasFilter = !!props.filterList.filter(e => e.length).length;
+  const hasFilter = !!props.filterList.filter((e) => e.length).length;
   if (hasFilter) {
     return (
       <FilterLine>
@@ -275,7 +280,7 @@ const WrapFilterList = props => {
     );
   }
   return '';
-};
+}
 
 WrapFilterList.propTypes = {
   filterList: PropTypes.array,
@@ -285,7 +290,7 @@ WrapFilterList.defaultProps = {
   filterList: [],
 };
 
-const WrapTableFooter = props => {
+function WrapTableFooter(props) {
   const { loading, disabled } = useDatatableContext();
 
   return (
@@ -295,7 +300,7 @@ const WrapTableFooter = props => {
       </div>
     </FooterContainer>
   );
-};
+}
 
 const FooterContainer = styled.div`
   display: flex;