@arcblock/ux 2.6.9 → 2.7.0

package/es/Datatable/utils.js

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+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,
+  showCancelButton,
+  confirmButton,
+  cancelButton,
+  PaperProps,
+  ...rest
+}) {
+  // 去除 dialog 默认的 300 最小高度
+  PaperProps.style = Object.assign({
+    minHeight: 0
+  }, PaperProps.style);
+  return /*#__PURE__*/_jsx(Dialog, {
+    title: title,
+    PaperProps: PaperProps,
+    ...rest,
+    onClose: () => onCancel(),
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [showCancelButton && /*#__PURE__*/_jsx(Button, {
+        onClick: () => onCancel(),
+        color: "primary",
+        ...cancelButton.props,
+        children: cancelButton.text
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: () => onConfirm(),
+        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,
+  // 可以传入 {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 = {
+  showCancelButton: true,
+  confirmButton: {
+    text: 'Confirm'
+  },
+  cancelButton: {
+    text: 'Cancel'
+  },
+  PaperProps: {}
+};

package/es/Dialog/dialog.js

@@ -0,0 +1,192 @@
+import PropTypes from 'prop-types';
+import MuiDialog from '@mui/material/Dialog';
+import MuiDialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CloseIcon from '@mui/icons-material/Close';
+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,
+  ...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'),
+    size: "large",
+    children: /*#__PURE__*/_jsx(CloseIcon, {})
+  });
+  return /*#__PURE__*/_jsxs(StyledMuiDialog, {
+    fullScreen: isMobile,
+    onClose: handleOnClose,
+    PaperProps: PaperProps,
+    ...rest,
+    children: [showHeader && /*#__PURE__*/_jsxs(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("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, {
+      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
+};
+Dialog.defaultProps = {
+  showCloseButton: true,
+  title: '',
+  prepend: null,
+  toolbar: null,
+  actions: null,
+  actionsPosition: 'right',
+  PaperProps: {}
+};
+/**
+ * @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('div', {
+  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;'}
+  }
+`;
+export default Dialog;

package/es/Dialog/index.js

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

package/es/DidLogo/index.js

@@ -0,0 +1,31 @@
+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: ''
+};

package/es/DriftBot/index.js

@@ -0,0 +1,70 @@
+/* eslint-disable max-len */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { mergeProps } from '../Util';
+export default class DriftBot extends Component {
+  constructor(props) {
+    super(mergeProps(props, DriftBot, ['attributes']));
+    this.addMainScript = this.addMainScript.bind(this);
+    this.addIdentityVariables = this.addIdentityVariables.bind(this);
+    this.insertScript = this.insertScript.bind(this);
+  }
+  insertScript(scriptText) {
+    const script = document.createElement('script');
+    script.innerText = scriptText;
+    script.async = true;
+    document.body.appendChild(script);
+  }
+  addMainScript() {
+    const scriptText = `!function() {
+        var t = window.driftt = window.drift = window.driftt || [];
+        if (!t.init) {
+          if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
+          t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
+          t.factory = function(e) {
+            return function() {
+              var n = Array.prototype.slice.call(arguments);
+              return n.unshift(e), t.push(n), t;
+            };
+          }, t.methods.forEach(function(e) {
+            t[e] = t.factory(e);
+          }), t.load = function(t) {
+            var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
+            o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
+            var i = document.getElementsByTagName("script")[0];
+            i.parentNode.insertBefore(o, i);
+          };
+        }
+      }();
+      drift.SNIPPET_VERSION = '0.3.1';
+      drift.load('${this.props.appId}');`;
+    this.insertScript(scriptText);
+  }
+  addIdentityVariables() {
+    if (typeof this.props.userId !== 'undefined') {
+      const scriptText = `
+        var t = window.driftt = window.drift = window.driftt || [];
+        drift.identify('${this.props.userId}', ${JSON.stringify(this.props.attributes)})
+      `;
+      this.insertScript(scriptText);
+    }
+  }
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      this.addMainScript();
+      this.addIdentityVariables();
+    }
+  }
+  render() {
+    return '';
+  }
+}
+DriftBot.propTypes = {
+  appId: PropTypes.string.isRequired,
+  userId: PropTypes.string,
+  attributes: PropTypes.object
+};
+DriftBot.defaultProps = {
+  userId: '',
+  attributes: {}
+};