@pisell/materials 6.6.1 → 6.7.1

package/lib/components/table/types.d.ts

@@ -0,0 +1,268 @@
+import { FilterType } from "../filter/types";
+import { SortItemProps } from "../sort/types";
+import React from "react";
+export declare type StorageMode = "" | "localStorage";
+/**
+ * 排序总配置
+ */
+export declare type SortType = {
+    /** 排序是否展示 */
+    show: boolean;
+    /** 排序存储模式 */
+    storageMode: StorageMode;
+    list: SortItemProps[];
+};
+/**
+ * 列展示总配置
+ */
+export declare type ColumnSettingType = {
+    /** 列设置是否展示 */
+    show: boolean;
+    /** 列设置存储模式 */
+    storageMode: StorageMode;
+};
+declare type DataSourceListItemType = {
+    isCustom: boolean;
+    columnKey?: string;
+    label?: string;
+    name?: string | string[];
+    isHidden?: boolean;
+};
+/**
+ * 数据源分组总配置
+ */
+export declare type DataSourceGroupType = {
+    /** 分组设置是否展示 */
+    show: boolean;
+    /** 分组设置存储模式 */
+    storageMode: StorageMode;
+    /**  */
+    list: DataSourceListItemType[];
+};
+/**
+ * Gallery封面总配置
+ */
+declare type GalleryCoverType = {
+    /** 封面是否展示 */
+    show: boolean;
+    /**
+     * 封面图片可以使用的字段
+     */
+    fields: string[];
+    /**
+     * 封面高度
+     */
+    height: number;
+    /** 图片裁剪方式 */
+    objectFit: "fill" | "cover";
+};
+/**
+ * Gallery标题总配置
+ */
+declare type GalleryTitleType = {
+    /** 标题使用的字段 */
+    field: string;
+    /** 标题行数 */
+    line: number;
+};
+/**
+ * Gallery头部区域总配置
+ */
+declare type GalleryHeaderType = {
+    /** 头部区域插槽 */
+    slot?: (record: Record<string, any>, index: number) => React.ReactNode;
+    /** 头部区域其他字段设置 */
+    fields: {
+        /** 头部区域其他字段是否展示 */
+        show: boolean;
+        /** 头部区域其他字段 */
+        list: string[];
+    };
+};
+/**
+ * Gallery内容区域总配置
+ */
+declare type GalleryContentType = {
+    /** 内容区域字段配置 */
+    fields: {
+        columnKey: string;
+        show: boolean;
+    }[];
+};
+export declare type GallerySettingValueType = {
+    coverField: string | "noCover";
+    coverObjectFit: "fill" | "cover";
+    compactMode: "default" | "compact";
+    isShowLabel: boolean;
+};
+/**
+ * Gallery底部区域总配置
+ */
+declare type GalleryFooterType = {
+    /** 底部区域自定义渲染 */
+    render: (record: Record<string, any>, index: number) => React.ReactNode;
+    /** 底部区域高度 */
+    height: number;
+};
+/**
+ * Gallery模式总配置
+ */
+export declare type GallerySettingType = {
+    /** 卡片最小宽度 */
+    cardMinWidth: number;
+    /** 卡片最大宽度 */
+    cardMaxWidth: number;
+    /** 水平间隔 */
+    horizontalGutter: number;
+    /** 垂直间隔 */
+    verticalGutter: number;
+    /** 封面配置 */
+    cover: GalleryCoverType;
+    /** 标题配置 */
+    title: GalleryTitleType;
+    /** 头部区域 */
+    header: GalleryHeaderType;
+    /** 内容区域 */
+    content: GalleryContentType;
+    /** 固定高度 */
+    fixedHeight: boolean;
+    /** 固定的卡片高度 */
+    cardHeight: number;
+    /** 固定顶部 */
+    fixedHeader: boolean;
+    /** 固定底部 */
+    fixedFooter: boolean;
+    /** 底部区域 */
+    footer: GalleryFooterType;
+    /** 卡片点击时间 */
+    onItem: (record: Record<string, any>, index: number) => void;
+};
+/** 视图模式 */
+export declare type ModeType = "grid" | "gallery" | "kanban";
+/**
+ * 视图模式总配置
+ */
+export declare type GridViewType = {
+    /** 默认视图模式 */
+    defaultViewMode: ModeType;
+    /** 开启多视图模式可进行页面内转换 */
+    multiple: boolean;
+    /** 当前可用的视图模式列表 */
+    modeList: ModeType[];
+};
+declare type SortDetail = {
+    fromIndex: number;
+    toIndex: number;
+    dataSource: Record<string, any>[];
+    fromId: number | string;
+    toId: number | string;
+    fromItem: Record<string, any>;
+    toItem: Record<string, any>;
+};
+/** 导入导出模式 */
+export declare type ExportImportModeType = "import" | "export" | "export_file" | "import_log";
+/**
+ * @title: 导出导入api
+ * @description:
+ * @return {*}
+ * @Author: WangHan
+ * @Date: 2024-09-11 15:44
+ */
+export declare type ApiProps = {
+    export?: string;
+    import?: string;
+    export_file: string;
+    import_log?: string;
+    template?: string;
+};
+/**
+ * 导入导出配置
+ */
+export declare type ExportImportType = {
+    /** 是否展示 */
+    show: boolean;
+    /** 当前所选项 */
+    selectLists: string[];
+    /** 导入模版链接 */
+    templateFileUrl: string;
+    /** 标题 */
+    title: string;
+    hiddenKeys?: string[];
+    apiUrl?: ApiProps;
+    otherParams?: any;
+};
+/**
+ * 设置记忆范围
+ */
+export declare type LocalSettingsScope = "filters" | "sorting" | "columns";
+/**
+ * 本地记忆设置
+ */
+export declare type LocalSettingsType = {
+    /** 启用设置记忆 */
+    enable: boolean;
+    /** 记忆范围 */
+    scope: LocalSettingsScope[];
+    /** 不需要记忆的筛选字段（当 scope 包含 filters 时生效） */
+    excludedFilterFields?: string[];
+};
+export declare type GridViewProps = {
+    columns: any;
+    dataSource: any[];
+    dispatch: any;
+    /**
+     * 画册模式的配置
+     */
+    gallery: GallerySettingType;
+    /**
+     * 视图设置
+     */
+    view: GridViewType;
+    style: React.CSSProperties;
+    pagination: any;
+    filter: FilterType;
+    buttons: React.ReactNode | any[];
+    actionButtons: any;
+    sort: SortType;
+    title?: React.ReactNode | (() => React.ReactNode);
+    showTitle?: boolean;
+    subTitle?: React.ReactNode | (() => React.ReactNode);
+    showSubTitle?: boolean;
+    exportImport: ExportImportType;
+    onValuesChange: (changedValues: any, values: any) => void;
+    summary: any;
+    utils: any;
+    rowKey: ((record: Record<string, any>) => string) | string;
+    columnSetting?: ColumnSettingType;
+    dataSourceGroup?: DataSourceGroupType;
+    loading: boolean;
+    dragSort: boolean;
+    onSortChange?: (detail: SortDetail) => boolean;
+    __id?: string;
+    __designMode?: "design";
+    /**
+     * 当前本地配置的key 用此hash是否改变用来判断是否清空本地配置 不填默认使用columns数据生成hash
+     */
+    currentSettingKey?: string;
+    /**
+    * 当前本地配置的唯一值, 不填默认使用currentSettingKey
+    */
+    currentComponentId?: string;
+    /**
+     * 当前表格中数据发生变化事件 包含本地筛选和外部传入数据变化
+     * @param currentDataSource
+     */
+    onDataSourceChange?: (currentDataSource: Record<string, any>[]) => void;
+    tabs: {
+        show: boolean;
+        type: 'default' | 'button' | 'buttonGroup' | 'dropdown';
+        items: {
+            name: string;
+            filterBy?: Record<string, any>;
+            sortBy?: string;
+        }[];
+    };
+    /** 本地记忆设置 */
+    localSettings?: LocalSettingsType;
+};
+export {};

package/lib/components/tabs/index.js

@@ -46,6 +46,11 @@ var Tabs = class extends import_react.Component {
   componentDidMount() {
     document.body.id = "body";
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      this.setState({ activeKey: this.props.activeKey });
+    }
+  }
   _handleChange = (key) => {
     this.setActiveKey(key);
   };

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.less';
+declare type Value = {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+};
+interface TranslationProps {
+    value: Value;
+    onChange: (value: Value) => void;
+    maxLength?: number;
+}
+declare const Translation: React.FC<TranslationProps>;
+export default Translation;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Version } from '../versionSelect';
+import './index.less';
+interface PublishVersionModalProps {
+    visible: boolean;
+    currentVersion: string;
+    onCancel: () => void;
+    onConfirm: (data: VersionData) => void;
+    isShowNote?: boolean;
+    confirmLoading?: boolean;
+    versions?: Version[];
+    isShowBasedOn?: boolean;
+    isShowCurrentVersion?: boolean;
+    isValidateVersion?: boolean;
+}
+interface VersionData {
+    version: string;
+    note: string;
+    baseVersion?: string;
+    versionType?: string;
+}
+declare const PublishVersionModal: React.FC<PublishVersionModalProps>;
+export default PublishVersionModal;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SelectProps } from 'antd';
 import './index.less';
 export interface Version {

package/lib/components/virtual-keyboard/Amount/index.d.ts

@@ -0,0 +1,5 @@
+import { AmountProps, RightItemsStyleProps } from './types';
+import './index.less';
+export type { AmountProps, RightItemsStyleProps };
+declare const Amount: (props: AmountProps) => JSX.Element;
+export default Amount;

package/lib/components/virtual-keyboard/Amount/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { BaseNumberKeyboardProps } from '../BaseNumberKeyboard';
+export interface RightItemsStyleProps {
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    resetButtonBackgroundColor?: string;
+    resetButtonTextColor?: string;
+    isDoneButtonFollowTheme?: boolean;
+    doneButtonBackgroundColor?: string;
+    doneButtonTextColor?: string;
+}
+export interface AmountProps {
+    max?: number;
+    min?: number;
+    doneText?: string;
+    resetText?: string;
+    defaultValue?: string | number;
+    placeholder?: string;
+    amountProps?: {
+        showCurrencySymbol: boolean;
+        useThousandsSeparator: boolean;
+    };
+    presets?: BaseNumberKeyboardProps['presets'];
+    value?: string | number;
+    onChange?: (val: string | number) => void;
+    onEnter?: (val: string | number) => void;
+    defaultSelect?: boolean;
+    inputFormat?: (_v: string) => React.ReactNode | null;
+    rightItemsStyle?: RightItemsStyleProps;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    resetButtonBackgroundColor?: string;
+    resetButtonTextColor?: string;
+    isDoneButtonFollowTheme?: boolean;
+    doneButtonBackgroundColor?: string;
+    doneButtonTextColor?: string;
+    keyboardBackgroundColor?: string;
+    keyboardButtonBackgroundColor?: string;
+    keyboardButtonTextColor?: string;
+    keyboardButtonHoverColor?: string;
+}

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PresetsProps } from './Presets';
+import { KeyboardProps } from '../Keyboard';
+import { RightItemsStyleProps } from '../Amount';
+import './index.less';
+export interface BaseNumberKeyboardProps {
+    placeholder?: string;
+    format?: (val: string) => React.ReactNode;
+    defaultValue?: string | number;
+    doneText?: string;
+    resetText?: string;
+    onChange?: (val: string) => void;
+    onEnter?: (val: string) => void;
+    value?: string | number;
+    max?: number;
+    min?: number;
+    presets?: PresetsProps['presets'];
+    defaultSelect?: boolean;
+    rightItemsStyle?: RightItemsStyleProps;
+    customDisplay?: React.ReactNode | ((props: any) => React.ReactNode);
+    keyboardProps?: KeyboardProps;
+    style?: React.CSSProperties;
+}
+declare const BaseNumberKeyboard: (props: BaseNumberKeyboardProps) => JSX.Element;
+export default BaseNumberKeyboard;

package/lib/components/virtual-keyboard/Number/index.d.ts

@@ -0,0 +1,5 @@
+import { NumberProps } from './types';
+import './index.less';
+export type { NumberProps };
+declare const Number: (props: NumberProps) => JSX.Element;
+export default Number;

package/lib/components/virtual-keyboard/VirtualKeyInput/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InputProps } from 'antd';
+import './index.less';
+export interface VirtualKeyInputProps extends InputProps {
+    previewValue?: string;
+    renderInput?: (props: any) => any;
+    showDelete?: boolean;
+    onValueSelect?: (selected: boolean) => void;
+    defaultSelect?: boolean;
+    style?: React.CSSProperties;
+}
+declare const VirtualKeyInput: (props: VirtualKeyInputProps) => JSX.Element;
+export default VirtualKeyInput;

package/lib/components/virtual-keyboard/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { KeyboardProps } from "./Keyboard";
+import { VirtualKeyInputProps } from "./VirtualKeyInput";
+import "./index.less";
+interface VirtualKeyboardProps extends React.HTMLAttributes<HTMLDivElement> {
+    keyboardProps?: KeyboardProps;
+    virtualKeyInputProps?: VirtualKeyInputProps;
+    rightPanel?: React.ReactNode;
+    style?: React.CSSProperties;
+    onChange?: (value?: any) => void;
+    value?: string;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    keyboardBackgroundColor?: string;
+    keyboardButtonBackgroundColor?: string;
+    keyboardButtonTextColor?: string;
+    keyboardButtonHoverColor?: string;
+    primaryButtonBackgroundColor?: string;
+    primaryButtonTextColor?: string;
+}
+declare const VirtualKeyboard: (props: VirtualKeyboardProps) => JSX.Element;
+export default VirtualKeyboard;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BaseVirtualInputProps, BaseVirtualInputRef } from './BaseVirtualInput';
+import './index.less';
+export { BaseVirtualInputProps, BaseVirtualInputRef } from './BaseVirtualInput';
+export interface VirtualInputProps extends BaseVirtualInputProps {
+    /** 在VirtualInput上方显示的额外内容 */
+    topContent?: React.ReactNode;
+    /** 在VirtualInput下方显示的额外内容 */
+    bottomContent?: React.ReactNode;
+    /** wrapper class */
+    wrapperClassName?: string;
+    /** 虚拟输入框包装器的样式 */
+    wrapperStyle?: React.CSSProperties;
+    /** 是否允许清除输入框中的内容 */
+    allowClear?: boolean;
+    /** 清除输入框内容的回调函数 */
+    onClear?: () => void;
+    /** 自定义清除按钮的样式 */
+    clearButtonStyle?: React.CSSProperties;
+}
+export interface VirtualInputRef extends BaseVirtualInputRef {
+}
+declare const VirtualInput: React.ForwardRefExoticComponent<VirtualInputProps & React.RefAttributes<VirtualInputRef>>;
+export default VirtualInput;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import './index.less';
+export interface WalletCardItem {
+    type: string;
+    custom_title?: string | {
+        original: string;
+        en: string;
+        'zh-CN': string;
+        'zh-HK': string;
+    };
+    display?: 0 | 1;
+    value?: number;
+}
+export interface WalletCardProps {
+    /** 钱包ID */
+    id?: string;
+    /** 二维码弹窗适配平台 */
+    platform?: 'pc' | 'h5' | 'ipad';
+    /** 卡片主题 */
+    mode?: 'dark' | 'light';
+    /** 默认还是完整显示code */
+    cardStyle?: 'normal' | 'full';
+    /** 条形码还是二维码 */
+    codeType?: 'barCode' | 'qrCode';
+    /** 二维码方向 */
+    codeDirection?: 'bottom' | 'top';
+    /** 自定义背景图 */
+    customBackgroundImage?: string;
+    /** 图标：可以是React组件或图片URL */
+    showIcon?: boolean;
+    showWalletName?: boolean;
+    iconImg?: string;
+    /** 钱包名称 */
+    walletName?: string;
+    /** 店铺名称 */
+    shopName?: string;
+    /** 是否显示店铺名称 */
+    showShopName?: boolean;
+    /** 卡号 */
+    cardNo?: string;
+    /** 是否显示卡号 */
+    showCardNo?: boolean;
+    /** 是否显示二维码 */
+    showCode?: boolean;
+    /** 点击二维码/条形码的回调 */
+    onCodeClick?: () => void;
+    /** 货币符号 */
+    symbol: string;
+    /** 点击卡片的回调 */
+    onClick?: () => void;
+    /** 自定义类名 */
+    className?: string;
+    items: WalletCardItem[];
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    title?: string;
+    subTitle?: string;
+    align?: 'left' | 'center';
+    buttonText?: string;
+    [key: string]: any;
+    /** 是否已登录 */
+    isLogin?: boolean;
+    /** 是否是引导页 */
+    isGuide?: boolean;
+    /** 是否显示查看PIN */
+    showViewPin?: boolean;
+    /** 查看PIN的回调 */
+    onViewPinClick?: () => void;
+}
+declare const WalletCard: React.FC<WalletCardProps>;
+export default WalletCard;

package/lib/components/walletCard/index.js

@@ -53,7 +53,7 @@ var DEFAULT_PROPS = {
   showWalletName: true,
   shopName: "Store name",
   showShopName: true,
-  cardNo: "Wallet number",
+  cardNo: "WL0000000001",
   cardStyle: "normal",
   codeType: "barCode",
   platform: "pc",
@@ -64,24 +64,44 @@ var DEFAULT_PROPS = {
   isLogin: true,
   items: [
     {
-      key: "rechargeable",
-      label: "rechargeable",
-      value: 0
+      type: "rechargeable",
+      display: 1,
+      custom_title: {
+        original: "Balance",
+        "zh-CN": "充值卡",
+        "zh-HK": "充值卡",
+        en: "Balance"
+      }
     },
     {
-      key: "piont",
-      label: "piont",
-      value: 10
+      type: "point",
+      display: 1,
+      custom_title: {
+        original: "Points",
+        "zh-CN": "积分卡",
+        "zh-HK": "積分卡",
+        en: "Points"
+      }
     },
     {
-      key: "voucher",
-      label: "Discount cardvoucher",
-      value: 0
+      type: "voucher",
+      display: 1,
+      custom_title: {
+        original: "Voucher",
+        "zh-CN": "代金券",
+        "zh-HK": "代金券",
+        en: "Voucher"
+      }
     },
     {
-      key: "discount",
-      label: "discount",
-      value: 0
+      type: "discount",
+      display: 1,
+      custom_title: {
+        original: "Discount",
+        "zh-CN": "折扣卡",
+        "zh-HK": "折扣卡",
+        en: "Discount"
+      }
     }
   ]
 };
@@ -101,7 +121,7 @@ var useCodeModal = (cardNo, onCodeClick, codeType) => {
     e.stopPropagation();
     if ((_b = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.isAppEnv) == null ? void 0 : _b.call(_a2)) {
       const typeMap = {
-        orCode: "qrCode",
+        qrCode: "qrCode",
         barCode: "barCode"
       };
       (_d = (_c = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _c.postMessageToApp) == null ? void 0 : _d.call(_c, {
@@ -188,8 +208,12 @@ var CardHeader = ({
   )));
 };
 var CardItem = ({ item, symbol }) => {
-  const { key, label, value } = item;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-label" }, (0, import_locales.getText)(`walletCard-${label}`) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-value" }, key === "rechargeable" ? /* @__PURE__ */ import_react.default.createElement(
+  var _a;
+  const { type, custom_title, value } = item;
+  const context = (0, import_useEngineContext.default)();
+  const utils = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils;
+  const translationOriginal = (utils == null ? void 0 : utils.translationOriginal) || (utils == null ? void 0 : utils.translation);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-label" }, translationOriginal(custom_title || "") || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-value" }, type === "rechargeable" ? /* @__PURE__ */ import_react.default.createElement(
     import_Amount.default,
     {
       className: "pisell-card-amount-item-value",
@@ -199,27 +223,19 @@ var CardItem = ({ item, symbol }) => {
       showCurrencySymbol: true,
       value
     }
-  ) : value));
+  ) : value || "0"));
 };
 var CardContent = ({ items, symbol }) => {
-  const expectedOrder = ["piont", "balance", "discount", "voucher"];
-  const sortedItems = (0, import_react.useMemo)(() => {
-    if (!(items == null ? void 0 : items.length)) return [];
-    return [...items].sort((a, b) => {
-      const indexA = expectedOrder.indexOf(a.key);
-      const indexB = expectedOrder.indexOf(b.key);
-      return indexA - indexB;
-    });
-  }, [items]);
+  const filteredItems = (items || []).filter((item) => item.display !== 0);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: "pisell-wallet-card-list",
       style: {
-        justifyContent: (sortedItems || []).length > 1 ? "space-between" : "flex-start"
+        justifyContent: filteredItems.length > 1 ? "space-between" : "flex-start"
       }
     },
-    (sortedItems || []).map((item, index) => /* @__PURE__ */ import_react.default.createElement(CardItem, { key: index, item, symbol }))
+    filteredItems.map((item, index) => /* @__PURE__ */ import_react.default.createElement(CardItem, { key: index, item, symbol }))
   );
 };
 var CodeDisplay = ({ codeType, cardNo }) => {
@@ -336,7 +352,9 @@ var WalletCard = (props) => {
     }
     utils == null ? void 0 : utils.action({
       type: "pisell1.goWallet",
-      data: {},
+      data: {
+        id: props.id
+      },
       callback: () => {
       }
     });