@arcblock/ux 2.9.90 → 2.10.0

package/es/DID/index.js

@@ -1,249 +0,0 @@
-import { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { getDIDMotifInfo } from '@arcblock/did-motif';
-import QRCode from 'qrcode.react';
-import { Icon } from '@iconify/react';
-import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
-import { Box, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { temp as colors } from '../Colors';
-import { DID_PREFIX } from '../Util/constant';
-import Address from '../Address';
-import Avatar from '../Avatar';
-import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
-import { translate } from '../Locale/util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const translations = {
-  en: {
-    scanQrcode: 'Scan with DID Wallet to transfer token to here',
-    download: 'Download',
-    downloadTips: "Don't have DID Wallet ?"
-  },
-  zh: {
-    scanQrcode: '扫描此二维码，用 DID Wallet 转账',
-    download: '下载',
-    downloadTips: '没有 DID Wallet ？'
-  }
-};
-const DIDPropTypes = {
-  did: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  component: PropTypes.string,
-  copyable: PropTypes.bool,
-  responsive: PropTypes.bool,
-  showCopyButtonInTooltip: PropTypes.bool,
-  showAvatar: PropTypes.bool,
-  showQrcode: PropTypes.bool,
-  inline: PropTypes.bool,
-  append: PropTypes.any,
-  compact: PropTypes.bool,
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  locale: PropTypes.oneOf(['en', 'zh']),
-  chainId: PropTypes.string
-};
-const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
-const CHAIN_ID_MAP = {
-  'main.abtnetwork.io': DEFAULT_CHAIN_ID,
-  'beta.abtnetwork.io': 'beta'
-};
-const getFontColor = (did, didMotifInfo, isEthDid) => {
-  if (isEthDid) {
-    return getDIDColor(did);
-  }
-  return didMotifInfo.color;
-};
-const isSquareMotif = roleType => {
-  const roles = {
-    0: true,
-    // ACCOUNT
-    6: true,
-    // ASSET
-    17: true // TOKEN
-  };
-  return !roles[roleType];
-};
-const getAvatarSize = (didMotifInfo, isEthDid, size) => {
-  if (isEthDid) {
-    return size * 0.75;
-  }
-  if (isSquareMotif(didMotifInfo.roleType)) {
-    return size * 0.75;
-  }
-  return size;
-};
-
-/**
- * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
- */
-const DID = /*#__PURE__*/forwardRef(({
-  did,
-  showAvatar,
-  showQrcode,
-  chainId,
-  locale,
-  ...rest
-}, ref) => {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  try {
-    if (!chainId) {
-      const chainHostUrl = window?.blocklet?.CHAIN_HOST;
-      if (chainHostUrl) {
-        const chainHost = new URL(chainHostUrl).hostname;
-        if (chainHost) {
-          // eslint-disable-next-line no-param-reassign
-          chainId = CHAIN_ID_MAP[chainHost];
-        }
-      }
-    }
-  } catch {
-    console.warn('Failed to parse chainHost');
-  }
-  const [open, setOpen] = useState(false);
-  const isEthDid = isEthereumDid(did);
-  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-  const fontSize = getFontSize(rest.size);
-  const prepend = [/*#__PURE__*/_jsx("span", {
-    style: {
-      flex: '0 0 auto',
-      fontSize,
-      color: getFontColor(did, didMotifInfo, isEthDid)
-    },
-    children: "DID:"
-  }, "prefix-did"), /*#__PURE__*/_jsx("span", {
-    className: "did-address-text",
-    style: {
-      fontSize
-    },
-    children: "ABT:"
-  }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
-    did: did,
-    size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
-    style: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      marginLeft: 2,
-      marginRight: 4
-    },
-    blockiesPadding: false,
-    className: "did-address-avatar"
-  }, "avatar")];
-  const closeQrCode = useMemoizedFn(() => {
-    setOpen(false);
-  });
-  const openQrCode = useMemoizedFn(e => {
-    e.stopPropagation();
-    e.preventDefault();
-    setOpen(true);
-  });
-  const downloadUrl = useCreation(() => {
-    if (['zh', 'en'].includes) {
-      return `https://www.didwallet.io/${locale}`;
-    }
-    return 'https://www.didwallet.io/en';
-  }, [locale]);
-  const downloadTips = useCreation(() => {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t('downloadTips'), ' ', /*#__PURE__*/_jsx(Box, {
-        component: "a",
-        href: downloadUrl,
-        target: "_blank",
-        rel: "noreferrer",
-        sx: {
-          color: colors.foregroundsFgInteractive,
-          textDecoration: 'none',
-          '&:hover': {
-            textDecoration: 'underline'
-          }
-        },
-        children: t('download')
-      })]
-    });
-  }, [downloadUrl]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Address, {
-      ref: ref,
-      locale: locale,
-      content: `${DID_PREFIX}${did}`,
-      ...rest,
-      prepend: prepend,
-      append: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [showQrcode ? /*#__PURE__*/_jsx(Box, {
-          component: Icon,
-          icon: IconQrCode,
-          onClick: openQrCode,
-          sx: {
-            cursor: 'pointer',
-            ml: rest.copyable ? 0.5 : 0,
-            color: 'grey.500'
-          }
-        }) : null, rest.append]
-      }),
-      children: did
-    }), /*#__PURE__*/_jsxs(Dialog, {
-      open: open,
-      onClose: closeQrCode,
-      maxWidth: "sm",
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        align: "center",
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h3",
-          children: t('scanQrcode')
-        })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
-        align: "center",
-        children: [/*#__PURE__*/_jsx(QRCode
-        // eslint-disable-next-line max-len
-        , {
-          value: `abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`,
-          size: 256,
-          renderAs: "svg",
-          level: "M"
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            marginTop: 1,
-            textAlign: 'center'
-          },
-          children: /*#__PURE__*/_jsx(Address, {
-            copyable: true,
-            locale: locale,
-            content: `${DID_PREFIX}${did}`,
-            prepend: prepend,
-            children: did
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "body2",
-          sx: {
-            color: colors.textSubtitle,
-            fontSize: '12px',
-            mt: 1
-          },
-          children: downloadTips
-        })]
-      })]
-    })]
-  });
-});
-export default DID;
-DID.propTypes = DIDPropTypes;
-DID.defaultProps = {
-  size: 0,
-  component: 'span',
-  copyable: true,
-  responsive: true,
-  showCopyButtonInTooltip: false,
-  showAvatar: true,
-  showQrcode: false,
-  inline: false,
-  append: null,
-  compact: false,
-  startChars: 6,
-  endChars: 6,
-  locale: 'en',
-  chainId: ''
-};

package/es/Datatable/CustomToolbar.js

@@ -1,396 +0,0 @@
-import { useState, useRef, useEffect, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import { TableFilter, TableViewCol } from 'mui-datatables';
-import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import DownloadIcon from '@mui/icons-material/CloudDownload';
-import PrintIcon from '@mui/icons-material/Print';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import FilterIcon from '@mui/icons-material/FilterList';
-import Popover from '@mui/material/Popover';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import LinearProgress from '@mui/material/LinearProgress';
-import { handleCSVDownload } from './utils';
-import TableSearch from './TableSearch';
-import { useDatatableContext } from './DatatableContext';
-import { styled, useTheme } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function useMobile() {
-  const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down('sm'));
-}
-export default function CustomToolbar(props) {
-  const [menuIconEl, setMenuIconEl] = useState(null);
-  const moreBtn = useRef(null);
-  const isMobile = useMobile();
-  const toolbarId = useRef(Math.random().toString(32).slice(2));
-  const [searchOpened, setSearchOpened] = useState(false);
-  const {
-    customButtons,
-    loading,
-    disabled
-  } = useDatatableContext();
-  const {
-    data,
-    options,
-    components,
-    columns,
-    filterList,
-    filterData,
-    filterUpdate,
-    resetFilters,
-    updateFilterByType,
-    toggleViewColumn,
-    updateColumns,
-    title,
-    searchText,
-    searchTextUpdate,
-    searchClose
-  } = props;
-  const customToolbarEle = options.customToolbar ? options.customToolbar(props) : '';
-  const {
-    search,
-    downloadCsv,
-    print,
-    viewColumns,
-    filterTable
-  } = options.textLabels.toolbar;
-  const hideSearch = options.search === false || options.search === 'false';
-  const hidePrint = options.print === false || options.print === 'false';
-  const TableFilterComponent = components.TableFilter || TableFilter;
-  const TableViewColComponent = components.TableViewCol || TableViewCol;
-  useEffect(() => {
-    if (loading || disabled) {
-      setAllPopsEl({});
-    }
-  }, [loading, disabled]);
-  const printArea = func => {
-    return /*#__PURE__*/_jsx(ReactToPrint, {
-      content: () => props.tableRef(),
-      children: /*#__PURE__*/_jsx(PrintContextConsumer, {
-        children: func
-      })
-    });
-  };
-  const getPopId = key => `toolbar-pop-${toolbarId.current}-${key}`;
-  const defaultButtons = [];
-
-  // download/viewColumns/filter button behaviours, rendered using custom button logic
-  if (!(options.download === false || options.download === 'false')) {
-    defaultButtons.push({
-      icon: /*#__PURE__*/_jsx(DownloadIcon, {}),
-      title: downloadCsv,
-      onClick: () => {
-        handleCSVDownload(props);
-      }
-    });
-  }
-  if (!(options.viewColumns === false || options.viewColumns === 'false')) {
-    defaultButtons.push({
-      icon: /*#__PURE__*/_jsx(ViewColumnIcon, {}),
-      title: viewColumns,
-      // eslint-disable-next-line react/no-unstable-nested-components
-      popRender() {
-        return /*#__PURE__*/_jsx(TableViewColComponent, {
-          data: data,
-          columns: columns,
-          options: options,
-          onColumnUpdate: toggleViewColumn,
-          updateColumns: updateColumns,
-          components: components
-        });
-      }
-    });
-  }
-  if (!(options.filter === false || options.filter === 'false')) {
-    defaultButtons.push({
-      icon: /*#__PURE__*/_jsx(FilterIcon, {}),
-      title: filterTable,
-      // eslint-disable-next-line react/no-unstable-nested-components
-      popRender() {
-        return /*#__PURE__*/_jsx(TableFilterComponent, {
-          customFooter: options.customFilterDialogFooter,
-          columns: columns,
-          options: options,
-          filterList: filterList,
-          filterData: filterData,
-          onFilterUpdate: filterUpdate,
-          onFilterReset: resetFilters,
-          updateFilterByType: updateFilterByType,
-          components: components
-        });
-      }
-    });
-  }
-  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
-  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
-    if ( /*#__PURE__*/isValidElement(e)) {
-      return e;
-    }
-    const popId = getPopId(index);
-    if (e.icon) {
-      const {
-        popRender,
-        icon
-      } = e;
-      // When popRender is present, clicking the button will bubble up the content returned by the popRender
-      if (popRender) {
-        allPops.push( /*#__PURE__*/_jsx(Popover, {
-          open: !!allPopsEl[popId],
-          anchorEl: () => allPopsEl[popId],
-          onClose: () => {
-            setAllPopsEl({});
-          },
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'right'
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            children: popRender()
-          })
-        }, popId));
-      }
-      return /*#__PURE__*/_jsx(Tooltip, {
-        title: e.title,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          "data-testid": `${e.title}-iconButton`,
-          id: `btn-${popId}`,
-          "aria-label": e.title,
-          onClick: () => {
-            if (e.onClick) {
-              e.onClick();
-            }
-            if (popRender) {
-              // On the large screen, the bubble is positioned at the corresponding button
-              setAllPopsEl({
-                [popId]: document.getElementById(`btn-${popId}`)
-              });
-            }
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            className: "custom-toolbar-icon",
-            children: icon
-          })
-        })
-      }, popId);
-    }
-    return e;
-  });
-
-  // The toolbar menu in the mobile to replace toolbarButtons
-  const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
-    const popId = getPopId(index);
-    let content;
-    if ( /*#__PURE__*/isValidElement(e)) {
-      content = e;
-    } else if (e.icon) {
-      const {
-        icon
-      } = e;
-      content = /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: icon
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          children: e.title
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsx(MenuItem, {
-      onClick: () => {
-        setMenuIconEl(null);
-        if (e.onClick) {
-          e.onClick();
-        }
-        if (e.popRender) {
-          // On the small screen, the bubbles are positioned at the three dot buttons
-          setAllPopsEl({
-            [popId]: moreBtn.current
-          });
-        }
-      },
-      children: content
-    }, popId);
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs(Container, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: `custom-toobar-title ${isMobile && searchOpened && /*#__PURE__*/isValidElement(title) ? 'toobar-title-hidden' : ''}`,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "custom-toobar-title-inner",
-          children: /*#__PURE__*/_jsx("span", {
-            children: title
-          })
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `custom-toobar-btns ${loading || disabled ? 'toobar-btns-disabled' : ''}`,
-        children: [!hideSearch && /*#__PURE__*/_jsx(TableSearch, {
-          search: search,
-          options: options,
-          searchText: searchText,
-          searchTextUpdate: searchTextUpdate,
-          searchClose: searchClose,
-          onSearchOpen: setSearchOpened
-        }), !showMore && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [!hidePrint && printArea(({
-            handlePrint
-          }) => /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(Tooltip, {
-              title: print,
-              children: /*#__PURE__*/_jsx(IconButton, {
-                "data-testid": `${print}-iconButton`,
-                "aria-label": print,
-                disabled: options.print === 'disabled',
-                onClick: handlePrint,
-                children: /*#__PURE__*/_jsx(PrintIcon, {})
-              })
-            })
-          })), toolbarButtons]
-        }), showMore && /*#__PURE__*/_jsx(IconButton, {
-          ref: moreBtn,
-          "aria-haspopup": "true",
-          "aria-expanded": menuIconEl ? 'true' : undefined,
-          onClick: event => setMenuIconEl(event.currentTarget),
-          style: {
-            flexShrink: 0
-          },
-          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-        })]
-      }), customToolbarEle]
-    }), /*#__PURE__*/_jsxs(Menu, {
-      anchorEl: menuIconEl,
-      open: !!menuIconEl,
-      onClose: () => setMenuIconEl(null),
-      MenuListProps: {
-        'aria-labelledby': 'more-button'
-      },
-      children: [!hidePrint && printArea(({
-        handlePrint
-      }) => /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => {
-          setMenuIconEl(null);
-          handlePrint();
-        },
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(PrintIcon, {
-            fontSize: "small"
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          children: print
-        })]
-      })), menuItems]
-    }), allPops.map((e, index) => /*#__PURE__*/_jsx("div", {
-      children: e
-    }, getPopId(index))), /*#__PURE__*/_jsx(ProgressContainer, {
-      children: loading && /*#__PURE__*/_jsx(LinearProgress, {
-        className: "toolbar-progress"
-      })
-    })]
-  });
-}
-CustomToolbar.propTypes = {
-  data: PropTypes.array,
-  options: PropTypes.object.isRequired,
-  components: PropTypes.object,
-  columns: PropTypes.array.isRequired,
-  filterList: PropTypes.array,
-  filterData: PropTypes.array,
-  filterUpdate: PropTypes.func.isRequired,
-  resetFilters: PropTypes.func.isRequired,
-  updateFilterByType: PropTypes.func.isRequired,
-  toggleViewColumn: PropTypes.func.isRequired,
-  updateColumns: PropTypes.func.isRequired,
-  title: PropTypes.any,
-  searchText: PropTypes.any,
-  searchTextUpdate: PropTypes.func.isRequired,
-  searchClose: PropTypes.func.isRequired,
-  tableRef: PropTypes.func.isRequired
-};
-CustomToolbar.defaultProps = {
-  data: [],
-  components: {},
-  filterList: [],
-  filterData: [],
-  title: '',
-  searchText: null
-};
-const Container = styled('div')`
-  display: flex;
-  align-items: center;
-  height: 56px;
-  .custom-toobar-title {
-    position: relative;
-    flex: 1;
-    font-size: 18px;
-    font-weight: 800;
-    height: 56px;
-    transition: all ease 0.3s;
-    &-inner {
-      line-height: 56px;
-      width: 100%;
-      height: 56px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      span {
-        display: inline-block;
-        max-width: 100%;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-  .custom-toobar-btns {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &.toobar-btns-disabled {
-      position: relative;
-      opacity: 0.5;
-      &:after {
-        position: absolute;
-        display: block;
-        z-index: 2;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        content: '';
-        cursor: not-allowed;
-      }
-    }
-    .custom-toolbar-icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 24px;
-      height: 24px;
-      font-size: 20px;
-      overflow: hidden;
-    }
-  }
-  .toobar-title-hidden {
-    opacity: 0;
-    cursor: none;
-  }
-`;
-const ProgressContainer = styled('div')`
-  width: 100%;
-  height: 2px;
-  .toolbar-progress {
-    height: 2px;
-  }
-`;

package/es/Datatable/DatatableContext.js

@@ -1,34 +0,0 @@
-import { createContext, useContext, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const DatatableContext = /*#__PURE__*/createContext({});
-const {
-  Provider
-} = DatatableContext;
-
-// eslint-disable-next-line react/prop-types
-function DatatableProvider({
-  children
-}) {
-  const [customButtons, setCustomButtons] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [disabled, setDisabled] = useState(false);
-  const [filterLabel, setFilterLabel] = useState('Filter');
-  const value = {
-    customButtons,
-    setCustomButtons,
-    filterLabel,
-    setFilterLabel,
-    loading,
-    setLoading,
-    disabled,
-    setDisabled
-  };
-  return /*#__PURE__*/_jsx(Provider, {
-    value: value,
-    children: children
-  });
-}
-function useDatatableContext() {
-  return useContext(DatatableContext);
-}
-export { DatatableProvider, useDatatableContext };