@arcblock/ux 2.10.52 → 2.10.54

package/lib/Dialog/use-confirm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 import Confirm from './confirm';
@@ -10,33 +10,56 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
   const [content, setContent] = useState('');
   const state = useReactive({
     show: false,
+    title: '',
+    content: '',
     onConfirm: noop,
     onCancel: noop,
+    // 其他属性
     loading: false,
     showCancelButton: true,
     showCloseButton: true,
     confirmButtonText: 'Confirm',
-    cancelButtonText: 'Cancel'
+    confirmButtonProps: {},
+    cancelButtonText: 'Cancel',
+    cancelButtonProps: {}
   });
   const open = useMemoizedFn((params = {}) => {
-    setTitle(params.title);
-    setContent(params.content);
+    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;
     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 = {};
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -45,8 +68,24 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     }, 300);
   });
   const update = useMemoizedFn(params => {
-    if (params.title) setTitle(params.title);
-    if (params.content) setContent(params.content);
+    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();
@@ -67,10 +106,12 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
       update
     };
   }, [open, close, update]);
+  const realTitle = title || state.title;
+  const realContent = content || state.content;
   return /*#__PURE__*/_jsx(Confirm, {
     ...props,
     open: state.show,
-    title: title,
+    title: realTitle,
     onConfirm: onConfirm,
     onCancel: onCancel,
     confirmButton: {
@@ -78,7 +119,8 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
       props: {
         variant: 'contained',
         color: 'primary',
-        loading: state.loading
+        loading: state.loading,
+        ...state.confirmButtonProps
       }
     },
     showCloseButton: state.showCloseButton,
@@ -87,10 +129,11 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
       text: state.cancelButtonText,
       props: {
         variant: 'outlined',
-        color: 'primary'
+        color: 'primary',
+        ...state.cancelButtonProps
       }
     },
-    children: content
+    children: realContent instanceof Function ? realContent() : realContent
   });
 });
 export default function useConfirm(props = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.52",
+  "version": "2.10.54",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -64,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "81930383a1128ca408ac99b7aaf15be422929606",
+  "gitHead": "7c4a184c51c647739e8d2cc8944c564b5c0d2ec0",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.52",
-    "@arcblock/nft-display": "^2.10.52",
-    "@arcblock/react-hooks": "^2.10.52",
+    "@arcblock/icons": "^2.10.54",
+    "@arcblock/nft-display": "^2.10.54",
+    "@arcblock/react-hooks": "^2.10.54",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Dialog/use-confirm.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 
@@ -11,23 +11,42 @@ const ConfirmHolder = forwardRef((props, ref) => {
   const [content, setContent] = useState('');
   const state = useReactive({
     show: false,
+    title: '',
+    content: '',
     onConfirm: noop,
     onCancel: noop,
+    // 其他属性
     loading: false,
     showCancelButton: true,
     showCloseButton: true,
     confirmButtonText: 'Confirm',
+    confirmButtonProps: {},
     cancelButtonText: 'Cancel',
+    cancelButtonProps: {},
   });
   const open = useMemoizedFn((params = {}) => {
-    setTitle(params.title);
-    setContent(params.content);
+    if (isValidElement(params.title)) {
+      setTitle(params.title);
+      state.title = '';
+    } else {
+      setTitle('');
+      state.title = params.title;
+    }
+    if (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;
     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;
@@ -35,10 +54,14 @@ const ConfirmHolder = forwardRef((props, ref) => {
   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 = {};
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -47,8 +70,24 @@ const ConfirmHolder = forwardRef((props, ref) => {
     }, 300);
   });
   const update = useMemoizedFn((params) => {
-    if (params.title) setTitle(params.title);
-    if (params.content) setContent(params.content);
+    if (params.title) {
+      if (isValidElement(params.title)) {
+        setTitle(params.title);
+        state.title = '';
+      } else {
+        setTitle('');
+        state.title = params.title;
+      }
+    }
+    if (params.content) {
+      if (isValidElement(params.content)) {
+        setContent(params.content);
+        state.content = '';
+      } else {
+        setContent('');
+        state.content = params.content;
+      }
+    }
   });
   const onCancel = useMemoizedFn((e, reason) => {
     close();
@@ -70,11 +109,14 @@ const ConfirmHolder = forwardRef((props, ref) => {
     };
   }, [open, close, update]);
 
+  const realTitle = title || state.title;
+  const realContent = content || state.content;
+
   return (
     <Confirm
       {...props}
       open={state.show}
-      title={title}
+      title={realTitle}
       onConfirm={onConfirm}
       onCancel={onCancel}
       confirmButton={{
@@ -83,6 +125,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
           variant: 'contained',
           color: 'primary',
           loading: state.loading,
+          ...state.confirmButtonProps,
         },
       }}
       showCloseButton={state.showCloseButton}
@@ -92,9 +135,10 @@ const ConfirmHolder = forwardRef((props, ref) => {
         props: {
           variant: 'outlined',
           color: 'primary',
+          ...state.cancelButtonProps,
         },
       }}>
-      {content}
+      {realContent instanceof Function ? realContent() : realContent}
     </Confirm>
   );
 });