@arcblock/ux 2.13.70 → 3.0.0

package/lib/Dialog/dialog.js

@@ -1,151 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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').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,
-  toolbar,
-  actions,
-  showCloseButton,
-  actionsPosition,
-  PaperProps,
-  slotProps,
-  ...rest
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import e from "prop-types";
+import { Close as D } from "@mui/icons-material";
+import { Dialog as M, Box as w, useTheme as v, useMediaQuery as N, Typography as C, DialogContent as B, DialogActions as A, IconButton as T } from "@mui/material";
+import { styled as h } from "../Theme/index.js";
+function $({
+  children: o,
+  title: l = "",
+  prepend: d = null,
+  toolbar: c = null,
+  actions: g = null,
+  showCloseButton: a = !0,
+  actionsPosition: y = "right",
+  PaperProps: s = {},
+  slotProps: u = {},
+  ...p
 }) {
-  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);
-    }
+  const _ = v(), i = N(_.breakpoints.down("md")), b = l || a || c, x = (r, j) => {
+    const { onClose: m } = p;
+    m && m(r, j);
   };
-  // 添加默认最小尺寸 (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
-    })]
-  });
+  s.style = Object.assign(
+    {
+      minWidth: 300,
+      minHeight: 300
+    },
+    s.style
+  );
+  const f = /* @__PURE__ */ t(T, { className: "ux-dialog_closeButton", onClick: (r) => x(r, "closeButton"), children: /* @__PURE__ */ t(D, {}) });
+  return /* @__PURE__ */ n(H, { fullScreen: i, onClose: x, PaperProps: s, ...p, children: [
+    b && /* @__PURE__ */ n(O, { ...u.header, className: "ux-dialog_header", isMobile: i, children: [
+      /* @__PURE__ */ n("div", { className: "ux-dialog_left", children: [
+        a && i && f,
+        d && /* @__PURE__ */ t("div", { className: "ux-dialog_prepend", children: d }),
+        l && /* @__PURE__ */ t(C, { variant: "h6", className: "ux-dialog_title", children: l })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "ux-dialog_right", children: [
+        /* @__PURE__ */ t("div", { className: "ux-dialog_toolbar", children: c }),
+        a && !i && f
+      ] })
+    ] }),
+    /* @__PURE__ */ t(B, { ...u.content, children: o }),
+    g && /* @__PURE__ */ t(A, { className: `ux-dialog_actions--${y}`, children: g })
+  ] });
 }
-Dialog.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.node,
+$.propTypes = {
+  children: e.node.isRequired,
+  title: e.node,
   // 在 title 之前追加内容, 比如返回按钮
-  prepend: PropTypes.node,
+  prepend: e.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
+  toolbar: e.node,
+  actions: e.node,
+  showCloseButton: e.bool,
+  actionsPosition: e.oneOf(["left", "center", "right"]),
+  PaperProps: e.object,
+  slotProps: e.shape({
+    content: e.object,
+    header: e.object
   }),
-  onClose: PropTypes.func
-};
-Dialog.defaultProps = {
-  title: '',
-  prepend: null,
-  toolbar: null,
-  actions: null,
-  showCloseButton: true,
-  actionsPosition: 'right',
-  PaperProps: {},
-  slotProps: {},
-  onClose: undefined
+  onClose: e.func
 };
-/**
- * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
- */
-const StyledMuiDialog = styled(MuiDialog)`
+const H = h(M)`
   .MuiDialog-paper {
-    ${props => props.fullScreen ? 'border-radius: 0;' : ''};
+    ${(o) => o.fullScreen ? "border-radius: 0;" : ""};
   }
   .MuiDialogContent-root {
     padding: 16px 24px;
@@ -162,12 +79,7 @@ const StyledMuiDialog = styled(MuiDialog)`
   .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'
-})`
+`, O = h(w, { shouldForwardProp: (o) => o !== "isMobile" })`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -197,7 +109,7 @@ const Header = styled(Box, {
   }
   .ux-dialog_closeButton {
     /* 使 closeButton 与 content 左/右对齐 */
-    ${props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;'}
+    ${(o) => o.isMobile ? "margin-left: -12px;" : "margin-right: -12px;"}
     transition: transform 0.3s;
     transform: rotate(0deg);
     &:hover {
@@ -205,4 +117,6 @@ const Header = styled(Box, {
     }
   }
 `;
-export default Dialog;
+export {
+  $ as default
+};

package/lib/Dialog/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./dialog";
-export { default as Confirm } from "./confirm";
-export { default as useConfirm } from "./use-confirm";
+export { default } from './dialog';
+export { default as Confirm } from './confirm';
+export { default as useConfirm } from './use-confirm';

package/lib/Dialog/index.js

@@ -1,4 +1,8 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './dialog';
-export { default as Confirm } from './confirm';
-export { default as useConfirm } from './use-confirm';
+import { default as r } from "./dialog.js";
+import { default as t } from "./confirm.js";
+import { default as m } from "./use-confirm.js";
+export {
+  t as Confirm,
+  r as default,
+  m as useConfirm
+};

package/lib/Dialog/use-confirm.d.ts

@@ -1,8 +1,8 @@
 export default function useConfirm(props?: {}): {
     confirmHolder: import("react/jsx-runtime").JSX.Element;
     confirmApi: {
-        open: import("./types").OpenConfirm;
-        close: import("./types").CloseConfirm;
-        update: import("./types").UpdateConfirm;
+        open: import('./types').OpenConfirm;
+        close: import('./types').CloseConfirm;
+        update: import('./types').UpdateConfirm;
     };
 };

package/lib/Dialog/use-confirm.js

@@ -1,182 +1,102 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-import Confirm from './confirm';
-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,
-    title: '',
-    content: '',
-    onConfirm: noop,
-    onCancel: noop,
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as g, useState as w, isValidElement as f, useImperativeHandle as y } from "react";
+import { useMemoizedFn as e, useReactive as v } from "ahooks";
+import u from "lodash/noop";
+import H from "./confirm.js";
+function R({ ref: s, ...l }) {
+  const [B, c] = w(""), [C, i] = w(""), t = v({
+    show: !1,
+    title: "",
+    content: "",
+    onConfirm: u,
+    onCancel: u,
     // 其他属性
-    loading: false,
-    showCancelButton: true,
-    showCloseButton: true,
-    showConfirmButton: true,
-    confirmButtonText: 'Confirm',
+    loading: !1,
+    showCancelButton: !0,
+    showCloseButton: !0,
+    showConfirmButton: !0,
+    confirmButtonText: "Confirm",
     confirmButtonProps: {},
-    cancelButtonText: 'Cancel',
+    cancelButtonText: "Cancel",
     cancelButtonProps: {}
-  });
-  const open = useMemoizedFn((params = {}) => {
-    if (/*#__PURE__*/isValidElement(params.title)) {
-      setTitle(params.title);
-      state.title = '';
-    } else {
-      setTitle('');
-      state.title = params.title;
-    }
-    if (/*#__PURE__*/isValidElement(params.content)) {
-      setContent(params.content);
-      state.content = '';
-    } else {
-      setContent('');
-      state.content = params.content;
-    }
-    state.onConfirm = params.onConfirm || noop;
-    state.onCancel = params.onCancel || noop;
-    state.showCloseButton = params.showCloseButton ?? true;
-    state.showCancelButton = params.showCancelButton ?? true;
-    state.showConfirmButton = params.showConfirmButton ?? true;
-    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
-    if (params.confirmButtonProps) state.confirmButtonProps = params.confirmButtonProps;
-    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
-    if (params.cancelButtonProps) state.cancelButtonProps = params.cancelButtonProps;
-    state.loading = false;
-    state.show = true;
-  });
-  const reset = useMemoizedFn(() => {
-    setTitle('');
-    setContent('');
-    state.title = '';
-    state.content = '';
-    state.onConfirm = noop;
-    state.onCancel = noop;
-    state.confirmButtonText = 'Confirm';
-    state.confirmButtonProps = {};
-    state.cancelButtonText = 'Cancel';
-    state.cancelButtonProps = {};
-    state.showConfirmButton = true;
-    state.showCancelButton = true;
-    state.showCloseButton = true;
-  });
-  const close = useMemoizedFn(() => {
-    state.show = false;
-    setTimeout(() => {
-      reset();
+  }), n = e((o = {}) => {
+    f(o.title) ? (c(o.title), t.title = "") : (c(""), t.title = o.title), f(o.content) ? (i(o.content), t.content = "") : (i(""), t.content = o.content), t.onConfirm = o.onConfirm || u, t.onCancel = o.onCancel || u, t.showCloseButton = o.showCloseButton ?? !0, t.showCancelButton = o.showCancelButton ?? !0, t.showConfirmButton = o.showConfirmButton ?? !0, o.confirmButtonText && (t.confirmButtonText = o.confirmButtonText), o.confirmButtonProps && (t.confirmButtonProps = o.confirmButtonProps), o.cancelButtonText && (t.cancelButtonText = o.cancelButtonText), o.cancelButtonProps && (t.cancelButtonProps = o.cancelButtonProps), t.loading = !1, t.show = !0;
+  }), x = e(() => {
+    c(""), i(""), t.title = "", t.content = "", t.onConfirm = u, t.onCancel = u, t.confirmButtonText = "Confirm", t.confirmButtonProps = {}, t.cancelButtonText = "Cancel", t.cancelButtonProps = {}, t.showConfirmButton = !0, t.showCancelButton = !0, t.showCloseButton = !0;
+  }), r = e(() => {
+    t.show = !1, setTimeout(() => {
+      x();
     }, 300);
-  });
-  const update = useMemoizedFn(params => {
-    if (params.title) {
-      if (/*#__PURE__*/isValidElement(params.title)) {
-        setTitle(params.title);
-        state.title = '';
-      } else {
-        setTitle('');
-        state.title = params.title;
-      }
-    }
-    if (params.content) {
-      if (/*#__PURE__*/isValidElement(params.content)) {
-        setContent(params.content);
-        state.content = '';
-      } else {
-        setContent('');
-        state.content = params.content;
-      }
-    }
-  });
-  const onCancel = useMemoizedFn((e, reason) => {
-    close();
-    state?.onCancel(e, reason);
-  }, []);
-  const onConfirm = useMemoizedFn(async e => {
-    state.loading = true;
+  }), h = e((o) => {
+    o.title && (f(o.title) ? (c(o.title), t.title = "") : (c(""), t.title = o.title)), o.content && (f(o.content) ? (i(o.content), t.content = "") : (i(""), t.content = o.content));
+  }), T = e((o, p) => {
+    r(), t == null || t.onCancel(o, p);
+  }, []), P = e(async (o) => {
+    t.loading = !0;
     try {
-      await state?.onConfirm(close, e);
+      await (t == null ? void 0 : t.onConfirm(r, o));
     } finally {
-      state.loading = false;
+      t.loading = !1;
     }
   }, []);
-  useImperativeHandle(ref, () => {
-    return {
-      open,
-      close,
-      update
-    };
-  }, [open, close, update]);
-  const realTitle = title || state.title;
-  const realContent = content || state.content;
-  return /*#__PURE__*/_jsx(Confirm, {
-    ...props,
-    open: state.show,
-    title: realTitle,
-    onConfirm: onConfirm,
-    onCancel: onCancel,
-    confirmButton: {
-      text: state.confirmButtonText,
-      props: {
-        variant: 'contained',
-        color: 'primary',
-        loading: state.loading,
-        ...state.confirmButtonProps
-      }
-    },
-    showCloseButton: state.showCloseButton,
-    showCancelButton: state.showCancelButton,
-    showConfirmButton: state.showConfirmButton,
-    cancelButton: {
-      text: state.cancelButtonText,
-      props: {
-        variant: 'outlined',
-        color: 'primary',
-        ...state.cancelButtonProps
-      }
-    },
-    children: realContent instanceof Function ? realContent() : realContent
-  });
-});
-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
+  y(s, () => ({
+    open: n,
+    close: r,
+    update: h
+  }), [n, r, h]);
+  const a = B || t.title, m = C || t.content;
+  return /* @__PURE__ */ d(
+    H,
+    {
+      ...l,
+      open: t.show,
+      title: a,
+      onConfirm: P,
+      onCancel: T,
+      confirmButton: {
+        text: t.confirmButtonText,
+        props: {
+          variant: "contained",
+          color: "primary",
+          loading: t.loading,
+          ...t.confirmButtonProps
+        }
+      },
+      showCloseButton: t.showCloseButton,
+      showCancelButton: t.showCancelButton,
+      showConfirmButton: t.showConfirmButton,
+      cancelButton: {
+        text: t.cancelButtonText,
+        props: {
+          variant: "outlined",
+          color: "primary",
+          ...t.cancelButtonProps
+        }
+      },
+      children: m instanceof Function ? m() : m
+    }
+  );
+}
+function I(s = {}) {
+  const l = g(null), B = e((...t) => {
+    var n;
+    (n = l.current) == null || n.open(...t);
+  }), c = e((...t) => {
+    var n;
+    (n = l.current) == null || n.close(...t);
+  }), C = e((...t) => {
+    var n;
+    (n = l.current) == null || n.update(...t);
+  }), i = {
+    open: B,
+    close: c,
+    update: C
   };
   return {
-    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
-      ...props,
-      ref: confirmRef
-    }),
-    confirmApi
+    confirmHolder: /* @__PURE__ */ d(R, { ...s, ref: l }),
+    confirmApi: i
   };
-}
+}
+export {
+  I as default
+};

package/lib/DidLogo/Logo.stories.d.ts

@@ -0,0 +1,8 @@
+export { default as WithDifferentSizes } from './demo/with-different-sizes';
+export { default as WithDifferentStyles } from './demo/with-different-styles';
+export { default as WithInheritStyles } from './demo/with-inherit-styles';
+export { default as MakeALogo } from './demo/make-a-logo';
+declare namespace _default {
+    let title: string;
+}
+export default _default;

package/lib/DidLogo/index.js

@@ -1,20 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DidLogoIcon from '@arcblock/icons/lib/DidLogo';
-const defaultStyle = {
-  width: 'auto',
-  height: '1em',
-  fill: 'currentColor'
+import { jsx as m } from "react/jsx-runtime";
+import l from "@arcblock/icons/lib/DidLogo";
+const r = {
+  width: "auto",
+  height: "1em",
+  fill: "currentColor"
+};
+function a({ style: e = r, size: t = 0, className: i = "" }) {
+  const o = Number(t) > 0 ? `${Number(t)}px` : t;
+  return /* @__PURE__ */ m(
+    l,
+    {
+      className: `${i}`.trim(),
+      style: Object.assign({}, r, e, o ? { height: o } : {})
+    }
+  );
+}
+export {
+  a as default
 };
-export default function DidLogo({
-  style = defaultStyle,
-  size = 0,
-  className = ''
-}) {
-  const height = Number(size) > 0 ? `${Number(size)}px` : size;
-  return /*#__PURE__*/_jsx(DidLogoIcon, {
-    className: `${className}`.trim(),
-    style: Object.assign({}, defaultStyle, style, height ? {
-      height
-    } : {})
-  });
-}