@arcblock/ux 2.9.91 → 2.10.1

package/es/Datatable/utils.js

@@ -1,132 +0,0 @@
-import find from 'lodash/find';
-function escapeDangerousCSVCharacters(data) {
-  if (typeof data === 'string') {
-    // Places single quote before the appearance of dangerous characters if they
-    // are the first in the data string.
-    // eslint-disable-next-line no-useless-escape
-    return data.replace(/^\+|^\-|^\=|^\@/g, "'$&");
-  }
-  return data;
-}
-function buildCSV(columns, data, options) {
-  const replaceDoubleQuoteInString = columnData => typeof columnData === 'string' ? columnData.replace(/"/g, '""') : columnData;
-
-  // eslint-disable-next-line no-shadow
-  const buildHead = columns => {
-    return `${columns.reduce((soFar, column) => column.download ? `${soFar}"${escapeDangerousCSVCharacters(replaceDoubleQuoteInString(column.label || column.name))}"${options.downloadOptions.separator}` : soFar, '').slice(0, -1)}\r\n`;
-  };
-  const CSVHead = buildHead(columns);
-
-  // eslint-disable-next-line no-shadow
-  const buildBody = data => {
-    if (!data.length) return '';
-    return data.reduce((soFar, row) => `${soFar}"${row.data.filter((_, index) => columns[index].download).map(columnData => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData))).join(`"${options.downloadOptions.separator}"`)}"\r\n`, '').trim();
-  };
-  const CSVBody = buildBody(data);
-  const csv = options.onDownload ? options.onDownload(buildHead, buildBody, columns, data) : `${CSVHead}${CSVBody}`.trim();
-  return csv;
-}
-function downloadCSV(csv, filename) {
-  const blob = new Blob([csv], {
-    type: 'text/csv'
-  });
-
-  /* taken from react-csv */
-  if (navigator && navigator.msSaveOrOpenBlob) {
-    navigator.msSaveOrOpenBlob(blob, filename);
-  } else {
-    const dataURI = `data:text/csv;charset=utf-8,${csv}`;
-    const URL = window.URL || window.webkitURL;
-    const downloadURI = typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.setAttribute('href', downloadURI);
-    link.setAttribute('download', filename);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-}
-
-// eslint-disable-next-line no-shadow
-function createCSVDownload(columns, data, options, downloadCSV) {
-  const csv = buildCSV(columns, data, options);
-  if (options.onDownload && csv === false) {
-    return;
-  }
-  downloadCSV(csv, options.downloadOptions.filename);
-}
-export function handleCSVDownload(props) {
-  const {
-    data,
-    displayData,
-    columns,
-    options,
-    columnOrder
-  } = props;
-  let dataToDownload = [];
-  let columnsToDownload = [];
-  let columnOrderCopy = Array.isArray(columnOrder) ? columnOrder.slice(0) : [];
-  if (columnOrderCopy.length === 0) {
-    columnOrderCopy = columns.map((item, idx) => idx);
-  }
-  data.forEach(row => {
-    const newRow = {
-      index: row.index,
-      data: []
-    };
-    columnOrderCopy.forEach(idx => {
-      newRow.data.push(row.data[idx]);
-    });
-    dataToDownload.push(newRow);
-  });
-  columnOrderCopy.forEach(idx => {
-    columnsToDownload.push(columns[idx]);
-  });
-  if (options.downloadOptions && options.downloadOptions.filterOptions) {
-    // check rows first:
-    if (options.downloadOptions.filterOptions.useDisplayedRowsOnly) {
-      const filteredDataToDownload = displayData.map((row, index) => {
-        let i = -1;
-
-        // Help to preserve sort order in custom render columns
-        row.index = index;
-        return {
-          data: row.data.map(column => {
-            i += 1;
-
-            // if we have a custom render, which will appear as a react element, we must grab the actual value from data
-            // that matches the dataIndex and column
-            // TODO: Create a utility function for checking whether or not something is a react object
-            let val = typeof column === 'object' && column !== null && !Array.isArray(column) ? find(data, d => d.index === row.dataIndex).data[i] : column;
-            val = typeof val === 'function' ? find(data, d => d.index === row.dataIndex).data[i] : val;
-            return val;
-          })
-        };
-      });
-      dataToDownload = [];
-      filteredDataToDownload.forEach(row => {
-        const newRow = {
-          index: row.index,
-          data: []
-        };
-        columnOrderCopy.forEach(idx => {
-          newRow.data.push(row.data[idx]);
-        });
-        dataToDownload.push(newRow);
-      });
-    }
-
-    // now, check columns:
-    if (options.downloadOptions.filterOptions.useDisplayedColumnsOnly) {
-      columnsToDownload = columnsToDownload.filter(_ => _.display === 'true');
-      dataToDownload = dataToDownload.map(row => {
-        row.data = row.data.filter((_, index) => columns[columnOrderCopy[index]].display === 'true');
-        return row;
-      });
-    }
-  }
-  createCSVDownload(columnsToDownload, dataToDownload, options, downloadCSV);
-}
-export default {
-  handleCSVDownload
-};

package/es/Dialog/confirm.js

@@ -1,123 +0,0 @@
-import PropTypes from 'prop-types';
-import { useMemoizedFn } from 'ahooks';
-import Button from '../Button';
-import Dialog from './dialog';
-
-/**
-  @typedef {Object} ConfirmProps
-  @property {boolean} open
-  @property {React.ReactNode} title
-  @property {React.ReactNode} children
-  @property {() => void | Promise<void>} onConfirm
-  @property {() => void | Promise<void>} onCancel
-  @property {boolean} [showCancelButton=true]
-  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
-  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
-  @property {import('@mui/material').PaperProps} [PaperProps={}]
-*/
-
-// 注意排在 {...rest} 之后的 props 优先级更高
-/**
- *
- * @param {ConfirmProps} props
- * @returns {import('react').ReactComponentElement}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Confirm({
-  title,
-  children,
-  onConfirm,
-  onCancel,
-  showCloseButton,
-  showCancelButton,
-  confirmButton,
-  cancelButton,
-  PaperProps,
-  ...rest
-}) {
-  // 去除 dialog 默认的 300 最小高度
-  PaperProps.style = Object.assign({
-    minHeight: 0
-  }, PaperProps.style);
-  const handleClose = useMemoizedFn((e, reason) => {
-    if (['backdropClick', 'escapeKeyDown'].includes(reason)) {
-      return;
-    }
-    e.stopPropagation();
-    onCancel(e, reason);
-  });
-  return /*#__PURE__*/_jsx(Dialog, {
-    title: title,
-    PaperProps: PaperProps,
-    ...rest,
-    onClose: handleClose,
-    showCloseButton: showCloseButton,
-    slotProps: {
-      header: {
-        sx: {
-          '.ux-dialog_title': {
-            lineHeight: 1
-          }
-        }
-      },
-      content: {
-        sx: {
-          paddingTop: '0!important',
-          border: 'none!important'
-        }
-      }
-    },
-    actions: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [showCancelButton && /*#__PURE__*/_jsx(Button, {
-        onClick: e => {
-          e.stopPropagation();
-          onCancel(e, 'closeButton');
-        },
-        color: "primary",
-        ...cancelButton.props,
-        children: cancelButton.text
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: e => {
-          e.stopPropagation();
-          onConfirm(e);
-        },
-        color: "primary",
-        autoFocus: true,
-        ...confirmButton.props,
-        children: confirmButton.text
-      })]
-    }),
-    children: children
-  });
-}
-Confirm.propTypes = {
-  title: PropTypes.node.isRequired,
-  children: PropTypes.node.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  showCancelButton: PropTypes.bool,
-  showCloseButton: PropTypes.bool,
-  // 可以传入 {text: ..., props: ...}
-  confirmButton: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    props: PropTypes.object
-  }),
-  cancelButton: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    props: PropTypes.object
-  }),
-  PaperProps: PropTypes.object
-};
-Confirm.defaultProps = {
-  showCloseButton: true,
-  showCancelButton: true,
-  confirmButton: {
-    text: 'Confirm'
-  },
-  cancelButton: {
-    text: 'Cancel'
-  },
-  PaperProps: {}
-};

package/es/Dialog/dialog.js

@@ -1,201 +0,0 @@
-import PropTypes from 'prop-types';
-import CloseIcon from '@mui/icons-material/Close';
-import { Typography, Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogActions, IconButton, useMediaQuery, Box } from '@mui/material';
-import { styled, useTheme } from '../Theme';
-
-/**
-  @typedef {import('@mui/material').PaperProps & {
-    minWidth: number | string,
-    minHeight: number | string,
-  }} PaperStyle
-*/
-
-/**
-  @typedef {Object} DialogProps
-  @property {React.ReactNode} children - The content of the dialog.
-  @property {React.ReactNode} [title] - The title of the dialog.
-  @property {React.ReactNode} [prepend] - Content to be displayed before the dialog title.
-  @property {React.ReactNode} [toolbar] - Content to be displayed in the top toolbar of the dialog.
-  @property {React.ReactNode} [actions] - Content to be displayed in the bottom actions toolbar of the dialog.
-  @property {boolean} [showCloseButton=true] - Whether or not to show the close button.
-  @property {'left'|'center'|'right'} [actionsPosition='right'] - The position of the actions toolbar.
-  @property {PaperStyle} [PaperProps] - Props to be passed down to the dialog paper.
-  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
-*/
-
-/**
- * Dialog
- *
- * - 固定尺寸或特殊的尺寸控制需求, 可使用 PaperProps.style (不再提供 width/height 等 props)
- *   注意: 当设置明确的 width 时, 可能需要同时设置 maxWidth=false (mui dialog 默认 maxWidth=sm, 设置的 width 可能受限)
- * - 添加默认最小尺寸 (300x300), 在需要 先展示 loading 再展示异步数据 的时候避免 loading 阶段窗口过小
- */
-/**
- * @description
- * @param {DialogProps} props
- * @return {React.ReactComponentElement<any, DialogProps>}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function Dialog({
-  children,
-  title,
-  prepend,
-  toolbar,
-  actions,
-  showCloseButton,
-  actionsPosition,
-  PaperProps,
-  slotProps,
-  ...rest
-}) {
-  const theme = useTheme();
-  // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const showHeader = title || showCloseButton || toolbar;
-  const handleOnClose = (e, reason) => {
-    // escapeKeyDown/backdropClick
-    const {
-      onClose
-    } = rest;
-    if (onClose) {
-      onClose(e, reason);
-    }
-  };
-  // 添加默认最小尺寸 (300x300)
-  PaperProps.style = Object.assign({
-    minWidth: 300,
-    minHeight: 300
-  }, PaperProps.style);
-  const closeButton = /*#__PURE__*/_jsx(IconButton, {
-    className: "ux-dialog_closeButton",
-    onClick: e => handleOnClose(e, 'closeButton'),
-    children: /*#__PURE__*/_jsx(CloseIcon, {})
-  });
-  return /*#__PURE__*/_jsxs(StyledMuiDialog, {
-    fullScreen: isMobile,
-    onClose: handleOnClose,
-    PaperProps: PaperProps,
-    ...rest,
-    children: [showHeader && /*#__PURE__*/_jsxs(Header, {
-      ...slotProps.header,
-      className: "ux-dialog_header",
-      isMobile: isMobile,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "ux-dialog_left",
-        children: [showCloseButton && isMobile && closeButton, prepend && /*#__PURE__*/_jsx("div", {
-          className: "ux-dialog_prepend",
-          children: prepend
-        }), title && /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          className: "ux-dialog_title",
-          children: title
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "ux-dialog_right",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "ux-dialog_toolbar",
-          children: toolbar
-        }), showCloseButton && !isMobile && closeButton]
-      })]
-    }), /*#__PURE__*/_jsx(MuiDialogContent, {
-      ...slotProps.content,
-      children: children
-    }), actions && /*#__PURE__*/_jsx(DialogActions, {
-      className: `ux-dialog_actions--${actionsPosition}`,
-      children: actions
-    })]
-  });
-}
-Dialog.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.node,
-  // 在 title 之前追加内容, 比如返回按钮
-  prepend: PropTypes.node,
-  // 顶部工具栏, 在 close button 另一侧
-  toolbar: PropTypes.node,
-  actions: PropTypes.node,
-  showCloseButton: PropTypes.bool,
-  actionsPosition: PropTypes.oneOf(['left', 'center', 'right']),
-  PaperProps: PropTypes.object,
-  slotProps: PropTypes.shape({
-    content: PropTypes.object,
-    header: PropTypes.object
-  })
-};
-Dialog.defaultProps = {
-  showCloseButton: true,
-  title: '',
-  prepend: null,
-  toolbar: null,
-  actions: null,
-  actionsPosition: 'right',
-  PaperProps: {},
-  slotProps: {}
-};
-/**
- * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
- */
-const StyledMuiDialog = styled(MuiDialog)`
-  .MuiDialog-paper {
-    ${props => props.fullScreen ? 'border-radius: 0;' : ''};
-  }
-  .MuiDialogContent-root {
-    padding: 16px 24px;
-  }
-  .MuiDialogActions-root {
-    padding: 8px 24px 16px 24px;
-  }
-  .MuiDialogActions-root.ux-dialog_actions--left {
-    justify-content: flex-start;
-  }
-  .MuiDialogActions-root.ux-dialog_actions--right {
-    justify-content: flex-end;
-  }
-  .MuiDialogActions-root.ux-dialog_actions--center {
-    justify-content: center;
-  }
-`;
-
-/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Header = styled(Box, {
-  shouldForwardProp: prop => prop !== 'isMobile'
-})`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-  .ux-dialog_left {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    min-width: 0;
-  }
-  .ux-dialog_right {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .ux-dialog_toolbar {
-    display: flex;
-    align-items: center;
-  }
-  .ux-dialog_title {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .ux-dialog_closeButton {
-    /* 使 closeButton 与 content 左/右对齐 */
-    ${props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;'}
-    transition: transform 0.3s;
-    transform: rotate(0deg);
-    &:hover {
-      transform: rotate(90deg);
-    }
-  }
-`;
-export default Dialog;

package/es/Dialog/index.js

@@ -1,4 +0,0 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './dialog';
-export { default as Confirm } from './confirm';
-export { default as useConfirm } from './use-confirm';

package/es/Dialog/types.d.ts

@@ -1,17 +0,0 @@
-import type { ReactNode } from 'react';
-
-export type OpenConfirmProps = {
-  title: ReactNode;
-  content: ReactNode;
-  onConfirm: (close: () => void) => void;
-  onCancel: () => void;
-  showCancelButton: boolean;
-  confirmButtonText: string;
-  cancelButtonText: string;
-};
-
-export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
-
-export type OpenConfirm = (params: OpenConfirmProps) => void;
-export type CloseConfirm = () => void;
-export type UpdateConfirm = (params: UpdateConfirmProps) => void;

package/es/Dialog/use-confirm.js

@@ -1,133 +0,0 @@
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-import Confirm from './confirm';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
-  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
-  // HACK: useReactive 无法存储 react-node，所以只能使用 useState
-  const [title, setTitle] = useState('');
-  const [content, setContent] = useState('');
-  const state = useReactive({
-    show: false,
-    onConfirm: noop,
-    onCancel: noop,
-    loading: false,
-    showCancelButton: true,
-    showCloseButton: true,
-    confirmButtonText: 'Confirm',
-    cancelButtonText: 'Cancel'
-  });
-  const open = useMemoizedFn((params = {}) => {
-    setTitle(params.title);
-    setContent(params.content);
-    state.onConfirm = params.onConfirm || noop;
-    state.onCancel = params.onCancel || noop;
-    state.showCloseButton = params.showCloseButton ?? true;
-    state.showCancelButton = params.showCancelButton ?? true;
-    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
-    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
-    state.loading = false;
-    state.show = true;
-  });
-  const reset = useMemoizedFn(() => {
-    setTitle('');
-    setContent('');
-    state.onConfirm = noop;
-    state.onCancel = noop;
-    state.confirmButtonText = 'Confirm';
-    state.cancelButtonText = 'Cancel';
-  });
-  const close = useMemoizedFn(() => {
-    state.show = false;
-    setTimeout(() => {
-      reset();
-    }, 300);
-  });
-  const update = useMemoizedFn(params => {
-    if (params.title) setTitle(params.title);
-    if (params.content) setContent(params.content);
-  });
-  const onCancel = useMemoizedFn((e, reason) => {
-    close();
-    state?.onCancel(e, reason);
-  }, []);
-  const onConfirm = useMemoizedFn(async e => {
-    state.loading = true;
-    try {
-      await state?.onConfirm(close, e);
-    } finally {
-      state.loading = false;
-    }
-  }, []);
-  useImperativeHandle(ref, () => {
-    return {
-      open,
-      close,
-      update
-    };
-  }, [open, close, update]);
-  return /*#__PURE__*/_jsx(Confirm, {
-    ...props,
-    open: state.show,
-    title: title,
-    onConfirm: onConfirm,
-    onCancel: onCancel,
-    confirmButton: {
-      text: state.confirmButtonText,
-      props: {
-        variant: 'contained',
-        color: 'primary',
-        loading: state.loading
-      }
-    },
-    showCloseButton: state.showCloseButton,
-    showCancelButton: state.showCancelButton,
-    cancelButton: {
-      text: state.cancelButtonText,
-      props: {
-        variant: 'outlined',
-        color: 'primary'
-      }
-    },
-    children: content
-  });
-});
-export default function useConfirm(props = {}) {
-  const confirmRef = useRef(null);
-
-  /**
-   * 打开一个弹窗
-   * @type {import('./types').OpenConfirm}
-   */
-  const open = useMemoizedFn((...args) => {
-    confirmRef.current?.open(...args);
-  });
-  /**
-   * 关闭一个弹窗
-   * @type {import('./types').CloseConfirm}
-   */
-  const close = useMemoizedFn((...args) => {
-    confirmRef.current?.close(...args);
-  });
-
-  /**
-   * 更新弹窗的 title 和 content
-   * @type {import('./types').UpdateConfirm}
-   */
-  const update = useMemoizedFn((...args) => {
-    confirmRef.current?.update(...args);
-  });
-  const confirmApi = {
-    open,
-    close,
-    update
-  };
-  return {
-    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
-      ...props,
-      ref: confirmRef
-    }),
-    confirmApi
-  };
-}

package/es/DidLogo/index.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import DidLogoIcon from '@arcblock/icons/lib/DidLogo';
-import { jsx as _jsx } from "react/jsx-runtime";
-const defaultStyle = {
-  width: 'auto',
-  height: '1em',
-  fill: 'currentColor'
-};
-export default function DidLogo({
-  style,
-  size,
-  className
-}) {
-  const height = Number(size) > 0 ? `${Number(size)}px` : size;
-  return /*#__PURE__*/_jsx(DidLogoIcon, {
-    className: `${className}`.trim(),
-    style: Object.assign({}, defaultStyle, style, height ? {
-      height
-    } : {})
-  });
-}
-DidLogo.propTypes = {
-  style: PropTypes.object,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string
-};
-DidLogo.defaultProps = {
-  style: defaultStyle,
-  size: 0,
-  className: ''
-};