@arcblock/ux 2.13.70 → 3.0.0

package/lib/Datatable/utils.js

@@ -1,132 +1,67 @@
-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;
+import O from "lodash/find";
+function b(a) {
+  return typeof a == "string" ? a.replace(/^\+|^\-|^\=|^\@/g, "'$&") : a;
 }
-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 h(a, i, r) {
+  const l = (t) => typeof t == "string" ? t.replace(/"/g, '""') : t, o = (t) => `${t.reduce(
+    (e, d) => d.download ? `${e}"${b(l(d.label || d.name))}"${r.downloadOptions.separator}` : e,
+    ""
+  ).slice(0, -1)}\r
+`, p = o(a), n = (t) => t.length ? t.reduce(
+    (e, d) => `${e}"${d.data.filter((s, f) => a[f].download).map((s) => b(l(s))).join(`"${r.downloadOptions.separator}"`)}"\r
+`,
+    ""
+  ).trim() : "", u = n(i);
+  return r.onDownload ? r.onDownload(o, n, a, i) : `${p}${u}`.trim();
 }
-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);
+function m(a, i) {
+  const r = new Blob([a], { type: "text/csv" });
+  if (navigator && navigator.msSaveOrOpenBlob)
+    navigator.msSaveOrOpenBlob(r, i);
+  else {
+    const l = `data:text/csv;charset=utf-8,${a}`, o = window.URL || window.webkitURL, p = typeof o.createObjectURL > "u" ? l : o.createObjectURL(r), n = document.createElement("a");
+    n.setAttribute("href", p), n.setAttribute("download", i), document.body.appendChild(n), n.click(), document.body.removeChild(n);
   }
 }
-
-// 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);
+function x(a, i, r, l) {
+  const o = h(a, i, r);
+  r.onDownload && o === !1 || l(o, r.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;
+function C(a) {
+  const { data: i, displayData: r, columns: l, options: o, columnOrder: p } = a;
+  let n = [], u = [], c = Array.isArray(p) ? p.slice(0) : [];
+  if (c.length === 0 && (c = l.map((t, e) => e)), i.forEach((t) => {
+    const e = { index: t.index, data: [] };
+    c.forEach((d) => {
+      e.data.push(t.data[d]);
+    }), n.push(e);
+  }), c.forEach((t) => {
+    u.push(l[t]);
+  }), o.downloadOptions && o.downloadOptions.filterOptions) {
+    if (o.downloadOptions.filterOptions.useDisplayedRowsOnly) {
+      const t = r.map((e, d) => {
+        let s = -1;
+        return e.index = d, {
+          data: e.data.map((f) => {
+            s += 1;
+            let w = typeof f == "object" && f !== null && !Array.isArray(f) ? O(i, (y) => y.index === e.dataIndex).data[s] : f;
+            return w = typeof w == "function" ? O(i, (y) => y.index === e.dataIndex).data[s] : w, w;
           })
         };
       });
-      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;
+      n = [], t.forEach((e) => {
+        const d = { index: e.index, data: [] };
+        c.forEach((s) => {
+          d.data.push(e.data[s]);
+        }), n.push(d);
       });
     }
+    o.downloadOptions.filterOptions.useDisplayedColumnsOnly && (u = u.filter((t) => t.display === "true"), n = n.map((t) => (t.data = t.data.filter((e, d) => l[c[d]].display === "true"), t)));
   }
-  createCSVDownload(columnsToDownload, dataToDownload, options, downloadCSV);
+  x(u, n, o, m);
 }
-export default {
-  handleCSVDownload
-};
+const v = { handleCSVDownload: C };
+export {
+  v as default,
+  C as handleCSVDownload
+};

package/lib/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,20 @@
+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';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;

package/lib/Dialog/confirm.d.ts

@@ -1,3 +1,4 @@
+import { default as PropTypes } from 'prop-types';
 /**
  * @typedef {import('../Button/wrap').ButtonProps} ButtonProps
  * @typedef {import('@mui/material').PaperProps} PaperProps
@@ -21,7 +22,7 @@
  * @param {ConfirmProps} props
  * @returns {import('react').ReactComponentElement}
  */
-declare function Confirm({ title, children, onConfirm, onCancel, showCloseButton, showCancelButton, showConfirmButton, fullScreen, confirmButton, cancelButton, PaperProps, ...rest }: ConfirmProps): import("react").ReactComponentElement<any, Pick<any, string | number | symbol>>;
+declare function Confirm({ title, children, onConfirm, onCancel, showCloseButton, showCancelButton, showConfirmButton, fullScreen, confirmButton, cancelButton, PaperProps, ...rest }: ConfirmProps): import('react').ReactComponentElement<any, Pick<any, string | number | symbol>>;
 declare namespace Confirm {
     namespace propTypes {
         let title: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
@@ -43,31 +44,10 @@ declare namespace Confirm {
         }>>;
         let PaperProps: PropTypes.Requireable<object>;
     }
-    namespace defaultProps {
-        let showCancelButton_1: boolean;
-        export { showCancelButton_1 as showCancelButton };
-        let showConfirmButton_1: boolean;
-        export { showConfirmButton_1 as showConfirmButton };
-        let showCloseButton_1: boolean;
-        export { showCloseButton_1 as showCloseButton };
-        let fullScreen_1: boolean;
-        export { fullScreen_1 as fullScreen };
-        export namespace confirmButton_1 {
-            let text: string;
-        }
-        export { confirmButton_1 as confirmButton };
-        export namespace cancelButton_1 {
-            let text_1: string;
-            export { text_1 as text };
-        }
-        export { cancelButton_1 as cancelButton };
-        let PaperProps_1: {};
-        export { PaperProps_1 as PaperProps };
-    }
 }
 export default Confirm;
-export type ButtonProps = import("../Button/wrap").ButtonProps;
-export type PaperProps = import("@mui/material").PaperProps;
+export type ButtonProps = import('../Button/wrap').ButtonProps;
+export type PaperProps = import('@mui/material').PaperProps;
 export type ConfirmProps = {
     title: React.ReactNode;
     open: boolean;
@@ -88,4 +68,3 @@ export type ConfirmProps = {
     };
     PaperProps?: PaperProps;
 };
-import PropTypes from 'prop-types';

package/lib/Dialog/confirm.js

@@ -1,135 +1,109 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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,
-  showCancelButton,
-  showConfirmButton,
-  fullScreen,
-  confirmButton,
-  cancelButton,
-  PaperProps,
-  ...rest
+import { jsx as r, jsxs as C, Fragment as g } from "react/jsx-runtime";
+import o from "prop-types";
+import { useMemoizedFn as y } from "ahooks";
+import u from "../Button/index.js";
+import j from "./dialog.js";
+function q({
+  title: a,
+  children: d,
+  onConfirm: m,
+  onCancel: i,
+  showCloseButton: f = !0,
+  showCancelButton: n = !0,
+  showConfirmButton: s = !0,
+  fullScreen: x = !1,
+  confirmButton: p = {
+    text: "Confirm"
+  },
+  cancelButton: l = {
+    text: "Cancel"
+  },
+  PaperProps: t = {},
+  ...b
 }) {
-  // 去除 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);
+  t.style = Object.assign(
+    {
+      minHeight: 0
+    },
+    t.style
+  );
+  const h = y((e, c) => {
+    ["backdropClick", "escapeKeyDown"].includes(c) || (e.stopPropagation(), i(e, c));
   });
-  return /*#__PURE__*/_jsx(Dialog, {
-    title: title,
-    PaperProps: PaperProps,
-    ...rest,
-    onClose: handleClose,
-    showCloseButton: showCloseButton,
-    fullScreen: fullScreen,
-    slotProps: {
-      header: {
-        sx: {
-          '.ux-dialog_title': {
-            lineHeight: 1
+  return /* @__PURE__ */ r(
+    j,
+    {
+      title: a,
+      PaperProps: t,
+      ...b,
+      onClose: h,
+      showCloseButton: f,
+      fullScreen: x,
+      slotProps: {
+        header: {
+          sx: {
+            ".ux-dialog_title": {
+              lineHeight: 1
+            }
+          }
+        },
+        content: {
+          sx: {
+            paddingTop: "0!important",
+            border: "none!important"
           }
         }
       },
-      content: {
-        sx: {
-          paddingTop: '0!important',
-          border: 'none!important'
-        }
-      }
-    },
-    actions: showCancelButton || showConfirmButton ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [showCancelButton && /*#__PURE__*/_jsx(Button, {
-        onClick: e => {
-          e.stopPropagation();
-          onCancel(e, 'closeButton');
-        },
-        color: "primary",
-        ...cancelButton.props,
-        children: cancelButton.text
-      }), showConfirmButton && /*#__PURE__*/_jsx(Button, {
-        onClick: e => {
-          e.stopPropagation();
-          onConfirm(e);
-        },
-        color: "primary",
-        autoFocus: true,
-        ...confirmButton.props,
-        children: confirmButton.text
-      })]
-    }) : null,
-    children: children
-  });
+      actions: n || s ? /* @__PURE__ */ C(g, { children: [
+        n && /* @__PURE__ */ r(
+          u,
+          {
+            onClick: (e) => {
+              e.stopPropagation(), i(e, "closeButton");
+            },
+            color: "primary",
+            ...l.props,
+            children: l.text
+          }
+        ),
+        s && /* @__PURE__ */ r(
+          u,
+          {
+            onClick: (e) => {
+              e.stopPropagation(), m(e);
+            },
+            color: "primary",
+            autoFocus: !0,
+            ...p.props,
+            children: p.text
+          }
+        )
+      ] }) : null,
+      children: d
+    }
+  );
 }
-Confirm.propTypes = {
-  title: PropTypes.node.isRequired,
-  open: PropTypes.bool.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  children: PropTypes.node,
-  showCancelButton: PropTypes.bool,
-  showConfirmButton: PropTypes.bool,
-  showCloseButton: PropTypes.bool,
-  fullScreen: PropTypes.bool,
+q.propTypes = {
+  title: o.node.isRequired,
+  open: o.bool.isRequired,
+  onConfirm: o.func.isRequired,
+  onCancel: o.func.isRequired,
+  children: o.node,
+  showCancelButton: o.bool,
+  showConfirmButton: o.bool,
+  showCloseButton: o.bool,
+  fullScreen: o.bool,
   // 可以传入 {text: ..., props: ...}
-  confirmButton: PropTypes.shape({
-    text: PropTypes.node.isRequired,
-    props: PropTypes.object
+  confirmButton: o.shape({
+    text: o.node.isRequired,
+    props: o.object
   }),
-  cancelButton: PropTypes.shape({
-    text: PropTypes.node.isRequired,
-    props: PropTypes.object
+  cancelButton: o.shape({
+    text: o.node.isRequired,
+    props: o.object
   }),
-  PaperProps: PropTypes.object
+  PaperProps: o.object
+};
+export {
+  q as default
 };
-Confirm.defaultProps = {
-  showCancelButton: true,
-  showConfirmButton: true,
-  showCloseButton: true,
-  fullScreen: false,
-  confirmButton: {
-    text: 'Confirm'
-  },
-  cancelButton: {
-    text: 'Cancel'
-  },
-  PaperProps: {}
-};

package/lib/Dialog/dialog.d.ts

@@ -1,38 +1,63 @@
+import { default as PropTypes } from 'prop-types';
 export default Dialog;
-export type MuiDialogProps = import("@mui/material").DialogProps;
-export type PaperStyle = import("@mui/material").PaperProps & {
+export type MuiDialogProps = import('@mui/material').DialogProps;
+export type PaperStyle = import('@mui/material').PaperProps & {
     minWidth?: number | string;
     minHeight?: number | string;
 };
 export type UxDialogProps = {
+    /**
+     * - The content of the dialog.
+     */
     /**
      * - The content of the dialog.
      */
     children: React.ReactNode;
+    /**
+     * - The title of the dialog.
+     */
     /**
      * - The title of the dialog.
      */
     title?: React.ReactNode;
+    /**
+     * - Content to be displayed before the dialog title.
+     */
     /**
      * - Content to be displayed before the dialog title.
      */
     prepend?: React.ReactNode;
+    /**
+     * - Content to be displayed in the top toolbar of the dialog.
+     */
     /**
      * - Content to be displayed in the top toolbar of the dialog.
      */
     toolbar?: React.ReactNode;
+    /**
+     * - Content to be displayed in the bottom actions toolbar of the dialog.
+     */
     /**
      * - Content to be displayed in the bottom actions toolbar of the dialog.
      */
     actions?: React.ReactNode;
+    /**
+     * - Whether or not to show the close button.
+     */
     /**
      * - Whether or not to show the close button.
      */
     showCloseButton?: boolean | undefined;
+    /**
+     * - The position of the actions toolbar.
+     */
     /**
      * - The position of the actions toolbar.
      */
     actionsPosition?: "left" | "right" | "center" | undefined;
+    /**
+     * - Props to be passed down to the dialog paper.
+     */
     /**
      * - Props to be passed down to the dialog paper.
      */
@@ -40,6 +65,9 @@ export type UxDialogProps = {
     slotProps?: {
         content: object;
     } | undefined;
+    /**
+     * - Callback function fired when the dialog is closed.
+     */
     /**
      * - Callback function fired when the dialog is closed.
      */
@@ -98,25 +126,4 @@ declare namespace Dialog {
         }>>;
         let onClose: PropTypes.Requireable<(...args: any[]) => any>;
     }
-    namespace defaultProps {
-        let title_1: string;
-        export { title_1 as title };
-        let prepend_1: null;
-        export { prepend_1 as prepend };
-        let toolbar_1: null;
-        export { toolbar_1 as toolbar };
-        let actions_1: null;
-        export { actions_1 as actions };
-        let showCloseButton_1: boolean;
-        export { showCloseButton_1 as showCloseButton };
-        let actionsPosition_1: string;
-        export { actionsPosition_1 as actionsPosition };
-        let PaperProps_1: {};
-        export { PaperProps_1 as PaperProps };
-        let slotProps_1: {};
-        export { slotProps_1 as slotProps };
-        let onClose_1: undefined;
-        export { onClose_1 as onClose };
-    }
 }
-import PropTypes from 'prop-types';