@pisell/materials 6.3.16 → 6.3.18

package/lib/components/pisell-config-provider/context.d.ts

@@ -5,6 +5,8 @@ export interface PisellContextType {
     symbol?: string;
     /** 当前语言环境 */
     locale?: string;
+    /** 获取货币符号 */
+    getSymbolic?: () => string;
 }
 export declare const PisellContext: import("react").Context<PisellContextType>;
 /**

package/lib/components/pisell-config-provider/index.d.ts

@@ -7,6 +7,7 @@ interface PisellConfigProviderType {
     symbol?: string;
     /** 当前语言环境 */
     locale?: string;
+    getSymbolic?: () => string;
 }
 declare const PisellConfigProvider: React.FC<PisellConfigProviderType>;
 export default PisellConfigProvider;

package/lib/components/pisellAdjustPrice/index.js

@@ -49,6 +49,8 @@ var PisellAdjustPrice = (props) => {
     defaultValue,
     originValue,
     selectType = "light",
+    resetText,
+    doneText,
     ...others
   } = props;
   const config = (0, import_usePisellConfig.default)();
@@ -180,6 +182,8 @@ var PisellAdjustPrice = (props) => {
         onChange: handleChange,
         onEnter: handleEnter,
         placeholder: discountMode === "amount" ? "0" : "%",
+        resetText,
+        doneText,
         rightItemsStyle: {
           buttonBackgroundColor: configColor.buttonBackgroundColor,
           textColor: configColor.textColor,

package/lib/components/pisellAdjustPrice/type.d.ts

@@ -17,4 +17,6 @@ export interface PisellAdjustPriceProps {
     mainTextColor?: string;
     isShowSubText?: boolean;
     subTextColor?: string;
+    resetText?: string;
+    doneText?: string;
 }

package/lib/components/pisellCardList/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
 import { PisellContextType } from '../pisell-config-provider/context';
-import { PisellWalletPassCardProps } from '../pisellWalletPassCard';
+import { PisellWalletPassCardProps, FormatOption } from '../pisellWalletPassCard';
 import './index.less';
 export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
     platform?: PisellContextType['platform'];
@@ -71,7 +71,37 @@ export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'opt
     /** 编辑编辑按钮后，弹窗展示之前 */
     beforeEdit?: (value: any, index: number) => Promise<any> | boolean | void;
     /** 编辑弹窗点击提交 */
-    onConfirmEdit?: (value: any, index: number) => void;
+    onConfirmEdit?: (value: any, index: number, data: any) => void;
+    /** 是否展示状态标识 */
+    showStatus?: boolean;
+    /** 名称标题字号字重颜色配置 */
+    nameTitleStyle?: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    /** 开启编辑金额 */
+    enableEditAmount?: boolean;
+    /** 编辑金额事件 */
+    onConfirmEditAmount?: (value: number, index: number, data: any) => void;
+    /** 是否使用外部详情处理 */
+    useExternalDetail?: boolean;
+    /** 详情事件 */
+    onDetail?: (value: any, index: number) => void;
+    /** 自定义余额格式化函数，如果提供则优先使用 */
+    formatBalance?: (balance?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义余额标题格式化函数，如果提供则优先使用 */
+    formatBalanceTitle?: (balanceTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额格式化函数，如果提供则优先使用 */
+    formatRedeem?: (redeem?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额标题格式化函数，如果提供则优先使用 */
+    formatRedeemTitle?: (redeemTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 编辑金额前事件 */
+    onBeforeEditAmount?: (value: any, index: number, data: any) => Promise<any> | boolean | void;
+    /** 选项点击事件 */
+    onItemClick?: (e: React.MouseEvent<HTMLDivElement>, option: any) => void;
+    /** 是否展示选中状态的背景色 */
+    showActiveBackground?: boolean;
 }
 declare const _default: React.NamedExoticComponent<PisellCardListProps>;
 export default _default;

package/lib/components/pisellCardList/index.js

@@ -64,6 +64,18 @@ var PisellCardList = (props) => {
     showEmpty,
     showBalanceSymbol,
     onChangeDebounce,
+    showStatus,
+    nameTitleStyle,
+    enableEditAmount,
+    useExternalDetail,
+    onDetail,
+    formatBalance,
+    formatBalanceTitle,
+    formatRedeem,
+    formatRedeemTitle,
+    onBeforeEditAmount,
+    onItemClick,
+    showActiveBackground,
     validDateBySchedule,
     scheduleList
   } = props;
@@ -80,12 +92,19 @@ var PisellCardList = (props) => {
       iconPosition: "hide",
       fullWidth,
       onChangeDebounce,
+      onItemClick,
+      showActiveBackground,
       renderOption: (item, active, index) => {
         return /* @__PURE__ */ import_react.default.createElement(
           import_pisellWalletPassCard.default,
           {
             ...item,
             active,
+            mode,
+            showActiveIcon: true,
+            showStatus: showStatus || (item == null ? void 0 : item.showStatus),
+            cardStatus: item == null ? void 0 : item.cardStatus,
+            nameTitleStyle: nameTitleStyle || (item == null ? void 0 : item.nameTitleStyle),
             showName: showName || (item == null ? void 0 : item.showName),
             showBalance: showBalance || (item == null ? void 0 : item.showBalance),
             showCode: showCode || (item == null ? void 0 : item.showCode),
@@ -98,18 +117,36 @@ var PisellCardList = (props) => {
             showBalanceSymbol: showBalanceSymbol || (item == null ? void 0 : item.showBalanceSymbol),
             showActions: props.showActions || (item == null ? void 0 : item.showActions),
             actions: props.actions || (item == null ? void 0 : item.actions),
+            enableEditAmount: enableEditAmount || (item == null ? void 0 : item.enableEditAmount),
+            useExternalDetail: useExternalDetail || (item == null ? void 0 : item.useExternalDetail),
+            onDetail: (record) => {
+              var _a;
+              return (_a = props == null ? void 0 : props.onDetail) == null ? void 0 : _a.call(props, record, index);
+            },
             validDateBySchedule: validDateBySchedule || (item == null ? void 0 : item.validDateBySchedule),
             scheduleList: scheduleList || (item == null ? void 0 : item.scheduleList),
             beforeEdit: (record) => {
               var _a;
               return (_a = props == null ? void 0 : props.beforeEdit) == null ? void 0 : _a.call(props, record, index);
             },
+            onConfirmEditAmount: (value2) => {
+              var _a;
+              (_a = props.onConfirmEditAmount) == null ? void 0 : _a.call(props, value2, index, item);
+            },
             onConfirmEdit: (newVal) => {
               var _a;
-              (_a = props.onConfirmEdit) == null ? void 0 : _a.call(props, newVal, index);
+              (_a = props.onConfirmEdit) == null ? void 0 : _a.call(props, newVal, index, item);
             },
+            formatBalance: formatBalance || (item == null ? void 0 : item.formatBalance),
+            formatBalanceTitle: formatBalanceTitle || (item == null ? void 0 : item.formatBalanceTitle),
             type,
-            style: direction === "vertical" || direction === "horizontal" && fullWidth ? { width: "100%" } : {}
+            style: direction === "vertical" || direction === "horizontal" && fullWidth ? { width: "100%" } : {},
+            formatRedeem: formatRedeem || (item == null ? void 0 : item.formatRedeem),
+            formatRedeemTitle: formatRedeemTitle || (item == null ? void 0 : item.formatRedeemTitle),
+            onBeforeEditAmount: (record) => {
+              var _a;
+              return (_a = props == null ? void 0 : props.onBeforeEditAmount) == null ? void 0 : _a.call(props, record, index, item);
+            }
           }
         );
       }

package/lib/components/pisellCardList/index.less

@@ -72,4 +72,12 @@
 // .pisell-card-disabled {
 //   color: var(--Gray-500, #667085);
 //   padding-bottom: 36px;
-// }
+// }
+
+.keyboard-modal-wrapper {
+  .pisell-amount-keyboard-wrap {
+    padding: 10px;
+    background: rgba(29, 41, 57, .8) !important;
+    border-radius: 10px;
+  }
+}

package/lib/components/pisellCheckboxGroup/index.d.ts

@@ -5,6 +5,7 @@ export interface PisellCheckboxGroupOption {
     label: string;
     value: string;
     disabled?: boolean;
+    error?: boolean;
     [key: string]: any;
 }
 declare type PisellCheckboxGroupValue = string | string[] | any;
@@ -24,6 +25,8 @@ export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivEl
     optionClassName?: string;
     optionActiveClassName?: string;
     onChangeDebounce?: boolean;
+    onItemClick?: (e: React.MouseEvent<HTMLDivElement>, option: PisellCheckboxGroupOption) => void;
+    showActiveBackground?: boolean;
 }
 /**
  * @title: PisellCheckboxGroup

package/lib/components/pisellCheckboxGroup/index.js

@@ -64,6 +64,8 @@ var PisellCheckboxGroup = (props) => {
     optionClassName,
     optionActiveClassName,
     onChangeDebounce,
+    onItemClick,
+    showActiveBackground = false,
     ...rest
   } = props;
   const [_value, set_value] = (0, import_react2.useState)([]);
@@ -150,13 +152,16 @@ var PisellCheckboxGroup = (props) => {
             optionClassName,
             {
               "pisell-checkbox-group-item-active": active,
-              [optionActiveClassName]: active
+              "pisell-checkbox-group-item-with-background": active && showActiveBackground,
+              [optionActiveClassName]: active,
+              "pisell-checkbox-group-item-error": option.error
             }
           ),
           key: option[rowKey],
           gap: 10,
           style: rowStyle,
           onClick: (e) => {
+            onItemClick == null ? void 0 : onItemClick(e, option);
             if (option.disabled) return;
             if (onChangeDebounce) {
               run(option[rowKey], option);

package/lib/components/pisellCheckboxGroup/index.less

@@ -24,10 +24,37 @@
 
     &.pisell-checkbox-group-item-active {
       &::before {
-        border-width: 2px;
+        border-width: 4px;
         border-color: var(--theme-color);
+        z-index: 1;
+        box-sizing: border-box;
+      }
+      
+      // 可选的背景色样式，需要额外的类名才会应用
+      &.pisell-checkbox-group-item-with-background {
+        &::before {
+          background: var(--Primary-50, #F9F5FF);
+        }
+      }
+      .pisell-row-center {
+        .pisell-row {
+          position: relative;
+          z-index: 1;
+        }
+      }
+      .pisell-row-right {
+        position: relative;
+        z-index: 1;
       }
+    }
 
+    &.pisell-checkbox-group-item-error {
+      &::before {
+        border-color: var(--Error-500, #F04438);
+        border-width: 2px;
+        background: var(--Error-50, #FEF3F2);
+        z-index: 1;
+      }
     }
   }
 }

package/lib/components/pisellGoodPassCard/index.d.ts

@@ -44,6 +44,7 @@ export interface PisellGoodPassCardProps {
     style: React.CSSProperties;
     /**快捷展示排序 */
     mixedSort?: (val: Discount[]) => Discount[];
+    isInModal: boolean;
 }
 declare const index: (props: PisellGoodPassCardProps) => JSX.Element;
 export default index;

package/lib/components/pisellGoodPassCard/index.js

@@ -86,7 +86,18 @@ var index = (props) => {
         onCancel: () => setShowModal(false),
         className: `${clsPrefix}-all-items-modal`
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "10px 0", display: "flex", flexDirection: "column", gap: 12 } }, dataSource.map(renderVoucherItem))
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            padding: "10px 0",
+            display: "flex",
+            flexDirection: "column",
+            gap: 12
+          }
+        },
+        dataSource.map(renderVoucherItem)
+      )
     );
   };
   const renderMixedMode = () => {
@@ -94,7 +105,23 @@ var index = (props) => {
     const list = sortList.length > 3 ? sortList.slice(0, 3) : sortList;
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${clsPrefix}-header` }, /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("pisell2.text.goodpass.product-vouchers")), /* @__PURE__ */ import_react.default.createElement(import_antd.Typography.Text, { underline: true, onClick: () => setShowModal(true) }, (0, import_locales.getText)("pisell2.text.goodpass.view-more"))), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: 4 } }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${clsPrefix}-body` }, list.map(renderVoucherItem)));
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderModal(), /* @__PURE__ */ import_react.default.createElement(
+  const renderModalMode = () => {
+    const sortList = (mixedSort == null ? void 0 : mixedSort(dataSource)) || dataSource;
+    if (sortList.length === 0) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          padding: "10px 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: 12
+        }
+      },
+      sortList.map(renderVoucherItem)
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !props.isInModal ? renderModal() : null, dataSource.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
     import__.PisellCard,
     {
       padding: 8,
@@ -105,7 +132,7 @@ var index = (props) => {
       },
       className: clsPrefix
     },
-    renderMixedMode()
-  ));
+    props.isInModal ? renderModalMode() : renderMixedMode()
+  ) : null);
 };
 var pisellGoodPassCard_default = index;

package/lib/components/pisellQrcode/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import './index.less';
 interface PisellQrcodeProps {
     size?: number;
-    platform: 'pc' | 'h5' | 'ipad';
+    platform?: 'pc' | 'h5' | 'ipad';
     value: string;
-    className: string;
+    className?: string;
 }
 declare const PisellQrcode: React.FC<PisellQrcodeProps>;
 export default PisellQrcode;

package/lib/components/pisellText/components/Amount/index.js

@@ -47,7 +47,8 @@ var Amount = (props) => {
   } = props;
   const config = (0, import_usePisellConfig.default)();
   const amount = (0, import_react.useMemo)(() => {
-    return (0, import_utils.formatAmountWithOptions)(value, symbol || (config == null ? void 0 : config.symbol) || "", {
+    var _a;
+    return (0, import_utils.formatAmountWithOptions)(value, symbol || (config == null ? void 0 : config.symbol) || ((_a = config == null ? void 0 : config.getSymbolic) == null ? void 0 : _a.call(config)) || "", {
       precision,
       showCurrencySymbol,
       useThousandsSeparator,

package/lib/components/pisellText/components/Editable/index.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './index.less';
+export declare type MultiLanguageValue = {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+};
+export interface EditableConfig {
+    /** 是否禁用编辑 */
+    disabled?: boolean;
+    /** 最大长度 */
+    maxLength?: number;
+    /** 编辑图标 */
+    icon?: React.ReactNode;
+}
+export interface EditableProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 文本内容，支持字符串或多语言对象 */
+    value?: string | MultiLanguageValue;
+    /** 子节点内容，优先级高于 value */
+    children?: string;
+    /** 可编辑配置，boolean 时使用默认配置 */
+    editable?: boolean | EditableConfig;
+    /** 编辑变更回调 */
+    onChange?: (value: string | MultiLanguageValue) => void;
+    /** 输入框尺寸 */
+    size?: 'large' | 'middle' | 'small';
+}
+declare const Editable: React.FC<EditableProps>;
+export default Editable;

package/lib/components/pisellToast/index.d.ts

@@ -13,4 +13,5 @@ export interface PisellToastProps {
     onClose?: () => void;
 }
 declare const PisellToast: (props: PisellToastProps) => void;
+export { useToast } from './squareToast';
 export default PisellToast;

package/lib/components/pisellToast/index.js

@@ -29,7 +29,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/pisellToast/index.tsx
 var pisellToast_exports = {};
 __export(pisellToast_exports, {
-  default: () => pisellToast_default
+  default: () => pisellToast_default,
+  useToast: () => import_squareToast.useToast
 });
 module.exports = __toCommonJS(pisellToast_exports);
 var import_react = __toESM(require("react"));
@@ -37,9 +38,13 @@ var import_utils = require("@pisell/utils");
 var import_pisellMessage = require("../pisellMessage");
 var import_iconfont = __toESM(require("../iconfont"));
 var import_index = require("./index.less");
+var import_squareToast = require("./squareToast");
 var PisellToast = (props) => {
   const { content, duration, showAction, actionText, onClose } = props;
   const key = (0, import_utils.getUniqueId)();
+  if (!import_pisellMessage.message) {
+    return alert(content);
+  }
   import_pisellMessage.message.open({
     key,
     content: /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-toast-content" }, /* @__PURE__ */ import_react.default.createElement("span", null, content), showAction && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-toast-action" }, actionText), /* @__PURE__ */ import_react.default.createElement(
@@ -57,3 +62,7 @@ var PisellToast = (props) => {
   });
 };
 var pisellToast_default = PisellToast;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useToast
+});

package/lib/components/pisellToast/squareToast/index.d.ts

@@ -0,0 +1,15 @@
+import { clear, show, success, info, loading, fail, hide } from './methods';
+import './index.less';
+interface ToastInstance {
+    show: typeof show;
+    clear: typeof clear;
+    success: typeof success;
+    info: typeof info;
+    loading: typeof loading;
+    fail: typeof fail;
+    error: typeof fail;
+    hide: typeof hide;
+}
+declare const Toast: ToastInstance;
+export declare const useToast: () => ToastInstance;
+export default Toast;

package/lib/components/pisellToast/squareToast/index.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellToast/squareToast/index.tsx
+var squareToast_exports = {};
+__export(squareToast_exports, {
+  default: () => squareToast_default,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(squareToast_exports);
+var import_react = require("react");
+var import_methods = require("./methods");
+var import_index = require("./index.less");
+var Toast = {
+  show: import_methods.show,
+  clear: import_methods.clear,
+  success: import_methods.success,
+  info: import_methods.info,
+  loading: import_methods.loading,
+  fail: import_methods.fail,
+  error: import_methods.fail,
+  hide: import_methods.hide
+};
+var useToast = () => {
+  return (0, import_react.useMemo)(
+    () => ({
+      show: import_methods.show,
+      clear: import_methods.clear,
+      success: import_methods.success,
+      info: import_methods.info,
+      loading: import_methods.loading,
+      fail: import_methods.fail,
+      error: import_methods.fail,
+      hide: import_methods.hide
+    }),
+    []
+  );
+};
+var squareToast_default = Toast;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useToast
+});

package/lib/components/pisellToast/squareToast/index.less

@@ -0,0 +1,60 @@
+.pisell-square-toast-wrap {
+  pointer-events: none;
+}
+
+.pisell-square-toast-modal {
+  pointer-events: none;
+  user-select: none;
+  min-width: 190px;
+  min-height: 74px;
+
+  // Toast 容器
+  .pisell-square-toast {
+    min-width: 190px;
+    max-width: 201px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 32px 12px;
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.8);
+
+    .pisell-square-toast-icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 11px;
+
+      .pisell-square-toast-icon {
+        font-size: 50px;
+        color: #ffffff;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &-loading {
+          animation: fadenum 1s infinite linear;
+        }
+      }
+    }
+
+    // 内容区域
+    .pisell-square-toast-content {
+      font-size: 20px;
+      line-height: 1.5;
+      color: #ffffff;
+      text-align: center;
+    }
+  }
+}
+
+// loading 旋转动画
+@keyframes fadenum {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/components/pisellToast/squareToast/methods.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ToastProps } from './toast';
+interface ToastInstance {
+    close: () => void;
+}
+declare const show: (configOrContent: Partial<ToastProps> | React.ReactNode, duration?: number, afterClose?: () => void) => ToastInstance;
+declare const clear: () => void;
+declare const success: (content: React.ReactNode, duration?: number, afterClose?: () => void) => ToastInstance;
+declare const info: (content: React.ReactNode, duration?: number, afterClose?: () => void) => ToastInstance;
+declare const loading: (content: React.ReactNode, duration?: number, afterClose?: () => void) => ToastInstance;
+declare const fail: (content: React.ReactNode, duration?: number, afterClose?: () => void) => ToastInstance;
+declare const hide: () => void;
+export { show, clear, success, info, loading, fail, hide };