@arcblock/ux 3.4.14 → 3.5.0

package/src/Datatable/utils.js

@@ -1,161 +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 = (tmpColumns) => {
-    return `${tmpColumns
-      .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 = (tmpData) => {
-    if (!tmpData.length) return '';
-    return tmpData
-      .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, tmpDownloadCSV) {
-  const csv = buildCSV(columns, data, options);
-
-  if (options.onDownload && csv === false) {
-    return;
-  }
-
-  tmpDownloadCSV(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/src/Dialog/Dialog.stories.jsx

@@ -1,21 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as WithShortContent } from './demo/with-short-content';
-export { default as CustomSize } from './demo/custom-size';
-export { default as CustomActionsPosition } from './demo/custom-actions-position';
-export { default as HeaderContentActionsStyleOverrides } from './demo/header-content-actions-style-overrides';
-export { default as ConfirmDefault } from './demo/confirm-default';
-export { default as ConfirmButtonCustomization } from './demo/confirm-button-customization';
-export { default as ConfirmWithoutCancelButton } from './demo/confirm-without-cancel-button';
-export { default as ConfirmComplexDescription } from './demo/confirm-complex-description';
-
-export default {
-  title: 'Feedback/Dialog',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'An easy-to-use dialog component based on MUI Dialog.',
-      },
-    },
-  },
-};

package/src/Dialog/confirm.jsx

@@ -1,143 +0,0 @@
-import PropTypes from 'prop-types';
-import { useMemoizedFn } from 'ahooks';
-
-import Button from '../Button';
-import Dialog from './dialog';
-
-/**
- * @typedef {import('../Button/wrap').ButtonProps} ButtonProps
- * @typedef {import('@mui/material').PaperProps} PaperProps
- * @typedef {{
- *   title: React.ReactNode,
- *   open: boolean,
- *   onConfirm: Function,
- *   onCancel: Function,
- *   children?: React.ReactNode,
- *   showCancelButton?: true | false,
- *   showCloseButton?: true | false,
- *   showConfirmButton?: true | false,
- *   fullScreen?: false | true,
- *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
- *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
- *   PaperProps?: PaperProps
- * }} ConfirmProps
- */
-
-// 注意排在 {...rest} 之后的 props 优先级更高
-/**
- *
- * @param {ConfirmProps} props
- * @returns {import('react').ReactComponentElement}
- */
-export default function Confirm({
-  title,
-  children,
-  onConfirm,
-  onCancel,
-  showCloseButton = true,
-  showCancelButton = true,
-  showConfirmButton = true,
-  fullScreen = false,
-  confirmButton = {
-    text: 'Confirm',
-  },
-  cancelButton = {
-    text: 'Cancel',
-  },
-  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 (
-    <Dialog
-      title={title}
-      PaperProps={PaperProps}
-      {...rest}
-      onClose={handleClose}
-      showCloseButton={showCloseButton}
-      fullScreen={fullScreen}
-      slotProps={{
-        header: {
-          sx: {
-            '.ux-dialog_title': {
-              lineHeight: 1,
-            },
-          },
-        },
-        content: {
-          sx: {
-            paddingTop: '0!important',
-            border: 'none!important',
-          },
-        },
-      }}
-      actions={
-        showCancelButton || showConfirmButton ? (
-          <>
-            {showCancelButton && (
-              <Button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onCancel(e, 'closeButton');
-                }}
-                color="primary"
-                {...cancelButton.props}>
-                {cancelButton.text}
-              </Button>
-            )}
-            {showConfirmButton && (
-              <Button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onConfirm(e);
-                }}
-                color="primary"
-                autoFocus
-                {...confirmButton.props}>
-                {confirmButton.text}
-              </Button>
-            )}
-          </>
-        ) : null
-      }>
-      {children}
-    </Dialog>
-  );
-}
-
-Confirm.propTypes = {
-  title: PropTypes.node.isRequired,
-  open: PropTypes.bool.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired,
-  showCancelButton: PropTypes.bool,
-  showConfirmButton: PropTypes.bool,
-  showCloseButton: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-  // 可以传入 {text: ..., props: ...}
-  confirmButton: PropTypes.shape({
-    text: PropTypes.node.isRequired,
-    props: PropTypes.object,
-  }),
-  cancelButton: PropTypes.shape({
-    text: PropTypes.node.isRequired,
-    props: PropTypes.object,
-  }),
-  PaperProps: PropTypes.object,
-};

package/src/Dialog/dialog.jsx

@@ -1,199 +0,0 @@
-import PropTypes from 'prop-types';
-import { Close as CloseIcon } from '@mui/icons-material';
-import {
-  Typography,
-  Dialog as MuiDialog,
-  DialogContent as MuiDialogContent,
-  DialogActions,
-  IconButton,
-  useMediaQuery,
-  Box,
-} from '@mui/material';
-
-import { styled, useTheme } from '../Theme';
-
-/**
- * @typedef {import('@mui/material').DialogProps} MuiDialogProps
- * @typedef {import('@mui/material').PaperProps & {
- *   minWidth?: number | string,
- *   minHeight?: number | string,
- * }} PaperStyle
- */
-
-/**
-  @typedef  {Object} UxDialogProps
-  @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 {{content: object, content: object}} [slotProps]
-  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
-*/
-
-/**
- * @typedef {Omit<MuiDialogProps, 'title' | 'children' | 'onClose' | 'PaperProps' | 'slotProps'> & UxDialogProps} DialogProps
- */
-
-/**
- * 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>}
- */
-function Dialog({
-  children,
-  title = '',
-  prepend = null,
-  toolbar = null,
-  actions = null,
-  showCloseButton = true,
-  actionsPosition = 'right',
-  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 = (
-    <IconButton className="ux-dialog_closeButton" onClick={(e) => handleOnClose(e, 'closeButton')}>
-      <CloseIcon />
-    </IconButton>
-  );
-
-  return (
-    <StyledMuiDialog fullScreen={isMobile} onClose={handleOnClose} PaperProps={PaperProps} {...rest}>
-      {showHeader && (
-        <Header {...slotProps.header} className="ux-dialog_header" isMobile={isMobile}>
-          <div className="ux-dialog_left">
-            {showCloseButton && isMobile && closeButton}
-            {prepend && <div className="ux-dialog_prepend">{prepend}</div>}
-            {title && (
-              <Typography variant="h6" className="ux-dialog_title">
-                {title}
-              </Typography>
-            )}
-          </div>
-
-          <div className="ux-dialog_right">
-            <div className="ux-dialog_toolbar">{toolbar}</div>
-            {showCloseButton && !isMobile && closeButton}
-          </div>
-        </Header>
-      )}
-      <MuiDialogContent {...slotProps.content}>{children}</MuiDialogContent>
-      {actions && <DialogActions className={`ux-dialog_actions--${actionsPosition}`}>{actions}</DialogActions>}
-    </StyledMuiDialog>
-  );
-}
-
-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,
-  }),
-  onClose: PropTypes.func,
-};
-
-/**
- * @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/src/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/src/Dialog/types.d.ts

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ButtonProps } from '@mui/material';
-
-export interface OpenConfirmProps {
-  title: ReactNode;
-  content: ReactNode;
-  onConfirm?: (close: () => void) => void;
-  onCancel?: () => void;
-  showCancelButton?: true | false;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-  confirmButtonProps?: ButtonProps;
-  cancelButtonProps?: ButtonProps;
-}
-
-export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
-
-export type OpenConfirm = (params: OpenConfirmProps) => void;
-export type CloseConfirm = () => void;
-export type UpdateConfirm = (params: UpdateConfirmProps) => void;