@pisell/materials 3.3.4 → 3.3.6

package/lib/components/pisellCardList/index.less

@@ -1,75 +1,75 @@
-.pisell-card {
-  padding: 16px;
-  color: var(--Gray-900, #101828);
-  font-size: 14px;
-  font-style: normal;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-  .pisell-card-name-wrap {
-    display: flex;
-    justify-content: space-between;
-    font-weight: 500;
-    line-height: 20px;
-  }
-  .pisell-card-store-name {
-    height: 20px;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 18px; /* 150% */
-  }
-  .pisell-card-amount-wrap {
-    display: flex;
-    margin-bottom: 4px;
-    .pisell-card-amount-item {
-      display: flex;
-      flex-direction: column;
-      margin-right: 16px;
-      .pisell-card-amount-item-label {
-        color: var(--Gray-500, #667085);
-        font-weight: 400;
-        line-height: 20px;
-        height: 20px;
-      }
-      .pisell-card-amount-item-value {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 30px;
-      }
-    }
-  }
-  .pisell-card-code-wrap {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    .pisell-card-qr-code {
-      position: absolute;
-      top: -16px;
-      right: 0;
-    }
-  }
-  .pisell-lowcode-qrcode {
-    padding: 6px;
-  }
-  .pisell-card-warn-message {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    left: 0;
-    background: var(--Warning-200, #FEDF89);
-    display: flex;
-    padding: 6px 16px;
-    color: var(--Warning-900, #7A2E0E);
-    font-weight: 400;
-    line-height: 20px;
-    .pisell-card-icon {
-      font-size: 20px;
-      color: #7A2E0E;
-      margin-right: 2px;
-    }
-  }
-}
-.pisell-card-disabled {
-  color: var(--Gray-500, #667085);
-  padding-bottom: 36px;
-}
+// .pisell-card {
+//   padding: 16px;
+//   color: var(--Gray-900, #101828);
+//   font-size: 14px;
+//   font-style: normal;
+//   position: relative;
+//   overflow: hidden;
+//   border-radius: 12px;
+//   .pisell-card-name-wrap {
+//     display: flex;
+//     justify-content: space-between;
+//     font-weight: 500;
+//     line-height: 20px;
+//   }
+//   .pisell-card-store-name {
+//     height: 20px;
+//     font-size: 12px;
+//     font-weight: 400;
+//     line-height: 18px; /* 150% */
+//   }
+//   .pisell-card-amount-wrap {
+//     display: flex;
+//     margin-bottom: 4px;
+//     .pisell-card-amount-item {
+//       display: flex;
+//       flex-direction: column;
+//       margin-right: 16px;
+//       .pisell-card-amount-item-label {
+//         color: var(--Gray-500, #667085);
+//         font-weight: 400;
+//         line-height: 20px;
+//         height: 20px;
+//       }
+//       .pisell-card-amount-item-value {
+//         font-size: 20px;
+//         font-weight: 600;
+//         line-height: 30px;
+//       }
+//     }
+//   }
+//   .pisell-card-code-wrap {
+//     display: flex;
+//     justify-content: space-between;
+//     position: relative;
+//     .pisell-card-qr-code {
+//       position: absolute;
+//       top: -16px;
+//       right: 0;
+//     }
+//   }
+//   .pisell-lowcode-qrcode {
+//     padding: 6px;
+//   }
+//   .pisell-card-warn-message {
+//     position: absolute;
+//     bottom: 0;
+//     width: 100%;
+//     left: 0;
+//     background: var(--Warning-200, #FEDF89);
+//     display: flex;
+//     padding: 6px 16px;
+//     color: var(--Warning-900, #7A2E0E);
+//     font-weight: 400;
+//     line-height: 20px;
+//     .pisell-card-icon {
+//       font-size: 20px;
+//       color: #7A2E0E;
+//       margin-right: 2px;
+//     }
+//   }
+// }
+// .pisell-card-disabled {
+//   color: var(--Gray-500, #667085);
+//   padding-bottom: 36px;
+// }

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

@@ -10,12 +10,14 @@ export interface PisellCheckboxGroupOption {
 declare type PisellCheckboxGroupValue = string | string[] | any;
 export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     platform?: PisellContextType['platform'];
+    direction?: 'horizontal' | 'vertical';
+    fullWidth?: boolean;
     gap?: number;
     padding?: number;
     options: PisellCheckboxGroupOption[];
     onChange?: (value: PisellCheckboxGroupValue, item: PisellCheckboxGroupOption) => void;
     value?: PisellCheckboxGroupValue;
-    renderOption?: (option: PisellCheckboxGroupOption, active: boolean) => React.ReactNode;
+    renderOption?: (option: PisellCheckboxGroupOption, active: boolean, index: number) => React.ReactNode;
     rowKey?: string;
     mode?: 'multiple' | 'single';
     iconPosition?: 'left' | 'right' | 'hide';

package/lib/components/pisellCheckboxGroup/index.js

@@ -57,6 +57,8 @@ var PisellCheckboxGroup = (props) => {
     padding = 0,
     rowKey = "value",
     mode = "multiple",
+    direction,
+    fullWidth,
     iconPosition = "left",
     optionClassName,
     optionActiveClassName,
@@ -82,11 +84,31 @@ var PisellCheckboxGroup = (props) => {
     const paddingVal = (0, import_utils.isNumber)(padding) ? padding + "px" : padding;
     let obj = {
       gap: gapVal,
-      padding: paddingVal,
-      ...style
+      padding: paddingVal
     };
-    return obj;
-  }, [style, gap, padding]);
+    if ("horizontal" === direction) {
+      obj = {
+        ...obj,
+        flexDirection: "row",
+        overflowX: "auto"
+      };
+    }
+    return { ...obj, ...style };
+  }, [style, gap, padding, direction]);
+  const rowStyle = (0, import_react.useMemo)(() => {
+    if ("horizontal" === direction) {
+      if (false === fullWidth) {
+        return {
+          flexShrink: 0,
+          width: "auto"
+        };
+      }
+      return {
+        flexShrink: 0
+      };
+    }
+    return {};
+  }, [direction, fullWidth]);
   const _onChange = (val, item) => {
     onChange == null ? void 0 : onChange(mode === "single" ? val[0] : val, item);
   };
@@ -106,7 +128,7 @@ var PisellCheckboxGroup = (props) => {
       className: (0, import_classnames.default)("pisell-checkbox-group", rest.className),
       style: _style
     },
-    options.map((option) => {
+    options.map((option, index) => {
       const active = _value.includes(option[rowKey]);
       return /* @__PURE__ */ import_react.default.createElement(
         import_pisellRow.default,
@@ -121,7 +143,8 @@ var PisellCheckboxGroup = (props) => {
           ),
           key: option[rowKey],
           gap: 10,
-          onClick: () => {
+          style: rowStyle,
+          onClick: (e) => {
             if (option.disabled) return;
             handleSelectItem(option[rowKey], option);
           },
@@ -139,7 +162,7 @@ var PisellCheckboxGroup = (props) => {
               className: "pisell-checkbox-group-item-checkbox"
             }
           ),
-          centerContent: renderOption == null ? void 0 : renderOption(option, active),
+          centerContent: renderOption == null ? void 0 : renderOption(option, active, index),
           centerContentFill: true
         }
       );

package/lib/components/pisellCheckboxGroup/index.less

@@ -19,6 +19,7 @@
       border-radius: 12px;
       border: 1px solid var(--Gray-200, #EAECF0);
       z-index: 2;
+      pointer-events: none;
     }
 
     &.pisell-checkbox-group-item-active {

package/lib/components/pisellDatePicker/datePickerCpt.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PickerDateProps } from 'antd/es/date-picker/generatePicker';
 import { Dayjs } from 'dayjs';
 import './detePickerCpt.less';

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const PisellDatePicker: (props: any) => JSX.Element;
 export default PisellDatePicker;

package/lib/components/pisellInformationEntry/hooks/useNativeScanner.d.ts

@@ -0,0 +1,4 @@
+export declare const useNativeScanner: (onChange?: ((val: string) => void) | undefined) => {
+    activeNativeScanner: () => void;
+    isTerminal: any;
+};

package/lib/components/pisellInformationEntry/hooks/useNativeScanner.js

@@ -0,0 +1,75 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellInformationEntry/hooks/useNativeScanner.ts
+var useNativeScanner_exports = {};
+__export(useNativeScanner_exports, {
+  useNativeScanner: () => useNativeScanner
+});
+module.exports = __toCommonJS(useNativeScanner_exports);
+var import_react = require("react");
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var useNativeScanner = (onChange) => {
+  var _a;
+  const context = (0, import_useEngineContext.default)();
+  const { interaction, isTerminal } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
+  (0, import_react.useEffect)(() => {
+    var _a2, _b;
+    (_b = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.mountFunction) == null ? void 0 : _b.call(
+      _a2,
+      "global",
+      "nativeScannerResult",
+      (strVal) => {
+        try {
+          const val = JSON.parse(strVal);
+          onChange == null ? void 0 : onChange(val.value);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    );
+  }, []);
+  const activeNativeScanner = (0, import_react.useCallback)(() => {
+    var _a2, _b;
+    (_b = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.postMessageToApp) == null ? void 0 : _b.call(_a2, {
+      module: "global",
+      key: "active_native_scanner",
+      data: {
+        source: "pisellInformationEntry"
+      }
+    });
+  }, []);
+  return {
+    activeNativeScanner,
+    isTerminal: isTerminal && isTerminal()
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useNativeScanner
+});

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

@@ -26,6 +26,8 @@ export interface PisellInformationEntryProps extends Omit<React.HTMLAttributes<H
     searchDescribe?: React.ReactNode;
     /** 录入信息值改变 */
     onChange?: (val: string) => void;
+    /** 录入类型切换时候触发的 */
+    onChangeType?: (val: null | EntryModeType['type']) => void;
 }
 declare const PisellInformationEntry: (props: PisellInformationEntryProps) => JSX.Element;
 export default PisellInformationEntry;

package/lib/components/pisellInformationEntry/index.js

@@ -43,6 +43,7 @@ var import_button = __toESM(require("../button"));
 var import_Input = __toESM(require("./Input"));
 var import_utils = require("./utils");
 var import_useTerminalPeripherals = __toESM(require("./hooks/useTerminalPeripherals"));
+var import_useNativeScanner = require("./hooks/useNativeScanner");
 var import_index = require("./index.less");
 var CardButton = (props) => {
   const { icon, children, ...others } = props;
@@ -54,7 +55,8 @@ var PisellInformationEntry = (props) => {
     title,
     entryModes = [],
     searchDescribe,
-    onChange
+    onChange,
+    onChangeType
   } = props;
   const config = (0, import_usePisellConfig.default)();
   const { platform } = config;
@@ -62,6 +64,7 @@ var PisellInformationEntry = (props) => {
     null
   );
   const { peripheralsStatus } = (0, import_useTerminalPeripherals.default)(onChange);
+  const { activeNativeScanner, isTerminal } = (0, import_useNativeScanner.useNativeScanner)(onChange);
   const [availableEntryModes, setAvailableEntryModes] = (0, import_react.useState)(entryModes);
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
@@ -95,8 +98,16 @@ var PisellInformationEntry = (props) => {
     if (import_constants.passiveModeType.includes(type)) {
       return;
     }
+    if (isTerminal && "scanCode" === type) {
+      setCurrentType(null);
+      activeNativeScanner();
+      return;
+    }
     setCurrentType(type);
   };
+  (0, import_react.useEffect)(() => {
+    onChangeType && onChangeType(currentType);
+  }, [currentType]);
   const { isHasInput, isHasNfc, isHasScanner, isHasScanCode } = (0, import_react.useMemo)(() => {
     let isHasScanCode2 = false;
     let isHasInput2 = false;
@@ -159,13 +170,7 @@ var PisellInformationEntry = (props) => {
       CardButton,
       {
         bordered: !import_constants.passiveModeType.includes(item.type),
-        icon: /* @__PURE__ */ import_react.default.createElement(
-          import_iconfont.default,
-          {
-            type: icon,
-            className: "pisell-card-button-icon"
-          }
-        ),
+        icon: /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: icon, className: "pisell-card-button-icon" }),
         className: (0, import_classnames.default)("pisell-information-entry-item", {
           ["pisell-entry-ready"]: import_constants.passiveModeType.includes(item.type)
         }),
@@ -173,6 +178,6 @@ var PisellInformationEntry = (props) => {
       },
       item.name || detail.text
     );
-  })), /* @__PURE__ */ import_react.default.createElement("div", null, currentType === "scanCode" && /* @__PURE__ */ import_react.default.createElement(import_Scan.default, { onChange: handleChange, onCancel: () => setCurrentType(null) }), currentType === "input" && /* @__PURE__ */ import_react.default.createElement(import_Input.default, { onChange: handleChange, searchDescribe })));
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, currentType === "scanCode" && !isTerminal && /* @__PURE__ */ import_react.default.createElement(import_Scan.default, { onChange: handleChange, onCancel: () => setCurrentType(null) }), currentType === "input" && /* @__PURE__ */ import_react.default.createElement(import_Input.default, { onChange: handleChange, searchDescribe })));
 };
 var pisellInformationEntry_default = PisellInformationEntry;

package/lib/components/pisellInput/components/BankCard/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 import './index.less';

package/lib/components/pisellInput/components/SecurityCode/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps } from 'antd';
 import './index.less';
 import { PisellContextType } from "../../../pisell-config-provider/context";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SpinProps } from 'antd';
 import './index.less';
 declare type MaskType = {

package/lib/components/pisellModal/components/IpadModal/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PcModalProps } from '../PcModal';
 export interface IpadModalProps extends PcModalProps {
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import IpadModal from './IpadModal';
 import MobileModal from './MobileModal';
 import PcModal from './PcModal';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipPropsWithTitle } from 'antd/es/tooltip';
 import { PisellContextType } from "../pisell-config-provider/context";
 import './index.less';

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

@@ -1,6 +1,8 @@
 import './index.less';
 export interface PisellWalletPassCardProps {
-    id?: number;
+    id: number;
+    /** 卡片样式 */
+    type: 'default' | 'mini';
     /** 商品名称 */
     name: string;
     /** 二维码 */
@@ -49,6 +51,31 @@ export interface PisellWalletPassCardProps {
     showCover?: boolean;
     /** 是否展示余额货币符号 */
     showBalanceSymbol?: boolean;
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any) => void;
     [key: string]: any;
 }
 declare const PisellWalletPassCard: (props: PisellWalletPassCardProps) => JSX.Element;