@arcblock/ux 2.7.12 → 2.7.14

package/es/CardSelector/index.js

@@ -60,6 +60,21 @@ export default function CardSelector({
         transform: `translate(${-translateX}px, 0)`
       },
       children: list.map((e, i) => {
+        if (e instanceof Function) {
+          return /*#__PURE__*/_jsx("div", {
+            className: `card-item ${i === selectedId ? 'selected' : ''}`,
+            style: {
+              width,
+              height,
+              margin: cardSpace / 2
+            }
+            // eslint-disable-next-line react/no-array-index-key
+            ,
+
+            onClick: () => selectedItem(i),
+            children: e(i)
+          }, i);
+        }
         return /*#__PURE__*/_jsx("div", {
           className: `card-item ${i === selectedId ? 'selected' : ''}`,
           style: {
@@ -96,7 +111,8 @@ const Contianer = styled.div`
     align-items: center;
     flex-shrink: 0;
     cursor: pointer;
-    img {
+    img,
+    svg {
       max-width: 100%;
       max-height: 100%;
       width: auto;
@@ -107,7 +123,8 @@ const Contianer = styled.div`
     }
     &.selected {
       cursor: default;
-      img {
+      img,
+      svg {
         outline: #526ded solid 5px;
       }
     }

package/es/Dialog/confirm.js

@@ -1,4 +1,8 @@
 import PropTypes from 'prop-types';
+import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -12,7 +16,7 @@ import Dialog from './dialog';
   @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={}] 
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
 */
 
 // 注意排在 {...rest} 之后的 props 优先级更高
@@ -87,4 +91,96 @@ Confirm.defaultProps = {
     text: 'Cancel'
   },
   PaperProps: {}
-};
+};
+const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const state = useReactive({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false
+  });
+  const open = useMemoizedFn((params = {}) => {
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.loading = false;
+  });
+  const reset = useMemoizedFn(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = noop;
+    state.onCancel = noop;
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/_jsx(Confirm, {
+    open: state.show,
+    title: state.title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: t('common.confirm'),
+      props: {
+        variant: 'contained',
+        color: 'primary',
+        loading: state.loading
+      }
+    },
+    cancelButton: {
+      text: t('common.cancel'),
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: state.content
+  });
+});
+export function useConfirm() {
+  const confirmRef = useRef(null);
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}

package/es/Dialog/index.js

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

package/es/SessionManager/index.js

@@ -195,7 +195,8 @@ function SessionManager({
   function _onLogout() {
     session.logout((...args) => {
       logoutOAuth({
-        session
+        session,
+        hack: true
       }, ...args).then(() => {
         onLogout(...args);
       }).catch(err => {

package/lib/CardSelector/index.js

@@ -70,6 +70,21 @@ function CardSelector(_ref) {
         transform: "translate(".concat(-translateX, "px, 0)")
       },
       children: list.map((e, i) => {
+        if (e instanceof Function) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "card-item ".concat(i === selectedId ? 'selected' : ''),
+            style: {
+              width,
+              height,
+              margin: cardSpace / 2
+            }
+            // eslint-disable-next-line react/no-array-index-key
+            ,
+
+            onClick: () => selectedItem(i),
+            children: e(i)
+          }, i);
+        }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "card-item ".concat(i === selectedId ? 'selected' : ''),
           style: {
@@ -90,7 +105,7 @@ function CardSelector(_ref) {
     })
   });
 }
-const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
+const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img,\n    svg {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img,\n      svg {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
 CardSelector.propTypes = {
   list: _propTypes.default.array,
   width: _propTypes.default.number,

package/lib/Dialog/confirm.js

@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Confirm;
+exports.useConfirm = useConfirm;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _context = require("../Locale/context");
 var _Button = _interopRequireDefault(require("../Button"));
 var _dialog = _interopRequireDefault(require("./dialog"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,7 +24,7 @@ const _excluded = ["title", "children", "onConfirm", "onCancel", "showCancelButt
   @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={}] 
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
 */
 // 注意排在 {...rest} 之后的 props 优先级更高
 /**
@@ -99,4 +104,105 @@ Confirm.defaultProps = {
     text: 'Cancel'
   },
   PaperProps: {}
-};
+};
+const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const state = (0, _ahooks.useReactive)({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: _noop.default,
+    onCancel: _noop.default,
+    loading: false
+  });
+  const open = (0, _ahooks.useMemoizedFn)(function () {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || _noop.default;
+    state.onCancel = params.onCancel || _noop.default;
+    state.loading = false;
+  });
+  const reset = (0, _ahooks.useMemoizedFn)(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = _noop.default;
+    state.onCancel = _noop.default;
+  });
+  const close = (0, _ahooks.useMemoizedFn)(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = (0, _ahooks.useMemoizedFn)(() => {
+    close();
+    state === null || state === void 0 ? void 0 : state.onCancel();
+  }, []);
+  const onConfirm = (0, _ahooks.useMemoizedFn)(async () => {
+    state.loading = true;
+    try {
+      await (state === null || state === void 0 ? void 0 : state.onConfirm(close));
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Confirm, {
+    open: state.show,
+    title: state.title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: t('common.confirm'),
+      props: {
+        variant: 'contained',
+        color: 'primary',
+        loading: state.loading
+      }
+    },
+    cancelButton: {
+      text: t('common.cancel'),
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: state.content
+  });
+});
+function useConfirm() {
+  const confirmRef = (0, _react.useRef)(null);
+  const open = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    (_confirmRef$current = confirmRef.current) === null || _confirmRef$current === void 0 ? void 0 : _confirmRef$current.open(...args);
+  });
+  const close = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current2;
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    (_confirmRef$current2 = confirmRef.current) === null || _confirmRef$current2 === void 0 ? void 0 : _confirmRef$current2.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmHolder, {
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}

package/lib/Dialog/index.js

@@ -15,6 +15,14 @@ Object.defineProperty(exports, "default", {
     return _dialog.default;
   }
 });
+Object.defineProperty(exports, "useConfirm", {
+  enumerable: true,
+  get: function get() {
+    return _confirm.useConfirm;
+  }
+});
 var _dialog = _interopRequireDefault(require("./dialog"));
-var _confirm = _interopRequireDefault(require("./confirm"));
+var _confirm = _interopRequireWildcard(require("./confirm"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/SessionManager/index.js

@@ -223,7 +223,8 @@ function SessionManager(_ref) {
         args[_key] = arguments[_key];
       }
       logoutOAuth({
-        session
+        session,
+        hack: true
       }, ...args).then(() => {
         onLogout(...args);
       }).catch(err => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.12",
+  "version": "2.7.14",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -318,11 +318,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "d092d3768f75f169c051e49f438e67a60842f357",
+  "gitHead": "bdb3657628085f18d46bca6769f62074d06f54d3",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.12",
-    "@arcblock/react-hooks": "^2.7.12",
+    "@arcblock/icons": "^2.7.14",
+    "@arcblock/react-hooks": "^2.7.14",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/CardSelector/index.jsx

@@ -54,6 +54,18 @@ export default function CardSelector({ list, width, height, cardSpace, onSelect,
     <Contianer ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
       <div className="card-container" style={{ transform: `translate(${-translateX}px, 0)` }}>
         {list.map((e, i) => {
+          if (e instanceof Function) {
+            return (
+              <div
+                className={`card-item ${i === selectedId ? 'selected' : ''}`}
+                style={{ width, height, margin: cardSpace / 2 }}
+                // eslint-disable-next-line react/no-array-index-key
+                key={i}
+                onClick={() => selectedItem(i)}>
+                {e(i)}
+              </div>
+            );
+          }
           return (
             <div
               className={`card-item ${i === selectedId ? 'selected' : ''}`}
@@ -86,7 +98,8 @@ const Contianer = styled.div`
     align-items: center;
     flex-shrink: 0;
     cursor: pointer;
-    img {
+    img,
+    svg {
       max-width: 100%;
       max-height: 100%;
       width: auto;
@@ -97,7 +110,8 @@ const Contianer = styled.div`
     }
     &.selected {
       cursor: default;
-      img {
+      img,
+      svg {
         outline: #526ded solid 5px;
       }
     }

package/src/Dialog/confirm.js

@@ -1,4 +1,9 @@
 import PropTypes from 'prop-types';
+import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+
+import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -12,7 +17,7 @@ import Dialog from './dialog';
   @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={}] 
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
 */
 
 // 注意排在 {...rest} 之后的 props 优先级更高
@@ -91,3 +96,103 @@ Confirm.defaultProps = {
   },
   PaperProps: {},
 };
+
+const ConfirmHolder = forwardRef((props, ref) => {
+  const { t } = useContext(LocaleContext);
+
+  const state = useReactive({
+    show: false,
+    title: '',
+    content: '',
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false,
+  });
+  const open = useMemoizedFn((params = {}) => {
+    state.show = true;
+    state.title = params.title;
+    state.content = params.content;
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.loading = false;
+  });
+  const reset = useMemoizedFn(() => {
+    state.title = '';
+    state.content = '';
+    state.onConfirm = noop;
+    state.onCancel = noop;
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+      };
+    },
+    [open, close]
+  );
+
+  return (
+    <Confirm
+      open={state.show}
+      title={state.title}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      confirmButton={{
+        text: t('common.confirm'),
+        props: {
+          variant: 'contained',
+          color: 'primary',
+          loading: state.loading,
+        },
+      }}
+      cancelButton={{
+        text: t('common.cancel'),
+        props: {
+          variant: 'outlined',
+          color: 'primary',
+        },
+      }}>
+      {state.content}
+    </Confirm>
+  );
+});
+
+export function useConfirm() {
+  const confirmRef = useRef(null);
+
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close,
+  };
+
+  return {
+    confirmHolder: <ConfirmHolder ref={confirmRef} />,
+    confirmApi,
+  };
+}

package/src/Dialog/index.js

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

package/src/SessionManager/index.jsx

@@ -177,7 +177,7 @@ function SessionManager({
   }
   function _onLogout() {
     session.logout((...args) => {
-      logoutOAuth({ session }, ...args)
+      logoutOAuth({ session, hack: true }, ...args)
         .then(() => {
           onLogout(...args);
         })