@pisell/private-materials 6.5.4 → 6.5.6

package/lib/pro/priceKeyboard/components/cashKeyboard/CashKeyboardIntact.js

@@ -0,0 +1,360 @@
+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/pro/priceKeyboard/components/cashKeyboard/CashKeyboardIntact.tsx
+var CashKeyboardIntact_exports = {};
+__export(CashKeyboardIntact_exports, {
+  default: () => CashKeyboardIntact_default
+});
+module.exports = __toCommonJS(CashKeyboardIntact_exports);
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_lodash = require("lodash");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_shortcuts = __toESM(require("../shortcuts"));
+var import_CashKeyboardSimple = __toESM(require("./CashKeyboardSimple"));
+var import_utils2 = require("../../utils");
+var import_index = require("./index.less");
+var import_decimal = __toESM(require("decimal.js"));
+var import_materials2 = require("@pisell/materials");
+var import_utils3 = require("@pisell/utils");
+var CashKeyboardIntact = (props) => {
+  var _a, _b, _c;
+  const {
+    amountSymbol,
+    titleArea = {},
+    displayField = {},
+    originalValue,
+    presets,
+    style,
+    selectType = "light",
+    placeholder,
+    doneText,
+    resetText,
+    disabled,
+    hiddenChangeDue
+  } = props;
+  const [internalValue, setInternalValue] = (0, import_ahooks.useControllableValue)(props);
+  const [isShowModal, setIsShowModal] = (0, import_react.useState)(false);
+  const changeDue = (0, import_react.useMemo)(() => {
+    return Math.max(
+      0,
+      new import_decimal.default(internalValue || 0).minus(new import_decimal.default(originalValue || 0)).toNumber()
+    );
+  }, [internalValue, originalValue]);
+  const _restProps = (0, import_react.useMemo)(() => {
+    return (0, import_lodash.omit)(props, [
+      "defaultValue",
+      "value",
+      "onChange",
+      "onEnter",
+      "onReset",
+      "style"
+    ]);
+  }, [props]);
+  (0, import_react.useEffect)(() => {
+    (0, import_utils2.setKeyboardTheme)(selectType);
+  }, [selectType]);
+  const getDefaultPresets = () => {
+    const defaultEndPresets = [
+      {
+        label: import_utils.locales.getText("cash-keyboard-other"),
+        value: "other",
+        style: {
+          color: "#344054",
+          backgroundColor: "white"
+        },
+        onClick: () => {
+          setIsShowModal(true);
+        },
+        render: () => /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              right: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          },
+          import_utils.locales.getText("cash-keyboard-other")
+        )
+      },
+      {
+        label: resetText || import_utils.locales.getText("cash-keyboard-reset"),
+        value: "reset",
+        style: {
+          color: "#D92D20",
+          backgroundColor: "white"
+        },
+        onClick: () => {
+          var _a2;
+          setInternalValue(String(originalValue) || "");
+          (_a2 = props == null ? void 0 : props.onReset) == null ? void 0 : _a2.call(props);
+        }
+      },
+      {
+        label: doneText || import_utils.locales.getText("cash-keyboard-pay"),
+        value: "pay",
+        style: {
+          color: "white",
+          backgroundColor: "#7F56DA"
+        },
+        onClick: () => {
+          var _a2;
+          (_a2 = props.onEnter) == null ? void 0 : _a2.call(props, internalValue);
+        }
+      }
+    ];
+    const userPresets = presets || [];
+    const maxUserPresets = 8 - defaultEndPresets.length;
+    const limitedUserPresets = userPresets.slice(0, maxUserPresets);
+    return [...limitedUserPresets, ...defaultEndPresets];
+  };
+  const getDefaultDisplayField = () => {
+    return {
+      cashReceived: {
+        visible: true,
+        label: import_utils.locales.getText("cash-keyboard-cash-received")
+      },
+      balanceDue: {
+        visible: true,
+        label: import_utils.locales.getText("cash-keyboard-balance-due")
+      },
+      changeDue: {
+        visible: true,
+        label: import_utils.locales.getText("cash-keyboard-change-due")
+      },
+      gridRatio: [1, 2, 1]
+      // 左中右布局，中间占 2 份
+    };
+  };
+  const defaultTitleArea = {
+    visible: true,
+    title: {
+      visible: true
+    },
+    subtitle: {
+      visible: true
+    },
+    alignment: "space-between",
+    padding: "0px"
+  };
+  const mergedTitleArea = (0, import_lodash.merge)({}, defaultTitleArea, titleArea);
+  const mergedDisplayField = (0, import_lodash.merge)({}, getDefaultDisplayField(), displayField);
+  const renderTitleArea = () => {
+    var _a2, _b2;
+    const { title, subtitle } = mergedTitleArea || {};
+    if (!(title == null ? void 0 : title.visible) && !(subtitle == null ? void 0 : subtitle.visible)) {
+      return null;
+    }
+    if (!(title == null ? void 0 : title.text) && !(subtitle == null ? void 0 : subtitle.text)) {
+      return null;
+    }
+    const titleStyle = {
+      display: "flex",
+      justifyContent: mergedTitleArea.alignment,
+      alignItems: "center",
+      padding: mergedTitleArea.padding,
+      marginBottom: "8"
+    };
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: titleStyle }, ((_a2 = mergedTitleArea.title) == null ? void 0 : _a2.visible) && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-cash-keyboard-title",
+        style: {
+          fontSize: mergedTitleArea.title.fontSize,
+          color: mergedTitleArea.title.color,
+          fontWeight: mergedTitleArea.title.fontWeight
+        }
+      },
+      mergedTitleArea.title.text
+    ), ((_b2 = mergedTitleArea.subtitle) == null ? void 0 : _b2.visible) && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-cash-keyboard-subtitle",
+        style: {
+          fontSize: mergedTitleArea.subtitle.fontSize,
+          color: mergedTitleArea.subtitle.color,
+          fontWeight: mergedTitleArea.subtitle.fontWeight
+        }
+      },
+      mergedTitleArea.subtitle.text
+    ));
+  };
+  const getGridStyle = (index) => {
+    if (!mergedDisplayField.gridRatio) {
+      return { flex: 1 };
+    }
+    const ratio = mergedDisplayField.gridRatio[index] || 1;
+    return { flex: ratio };
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-cash-keyboard pisell-cash-keyboard-intact ${disabled ? "disabled" : ""}`,
+      style: { ...style || {} }
+    },
+    renderTitleArea(),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-cash-keyboard-intact-container" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "16px" } }, ((_a = mergedDisplayField.balanceDue) == null ? void 0 : _a.visible) && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-cash-keyboard-intact-container-top",
+        style: { ...getGridStyle(0), overflow: "hidden" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-label" }, mergedDisplayField.balanceDue.label),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-value" }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials2.AutoResizeText,
+        {
+          minFontSizePx: 10,
+          maxFontSizePx: 14,
+          fontSizePrecisionPx: 0.5
+        },
+        (0, import_utils3.formatAmountWithOptions)(originalValue || "", "", {
+          precision: 2,
+          hideDecimalForWholeNumbers: false
+        })
+      ))
+    ), ((_b = mergedDisplayField.cashReceived) == null ? void 0 : _b.visible) && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          ...getGridStyle(1),
+          padding: "6px 16px",
+          borderRadius: "8px",
+          backgroundColor: "white",
+          boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.06)",
+          overflow: "hidden",
+          maxWidth: 188,
+          cursor: "pointer"
+        },
+        onClick: () => {
+          setIsShowModal(true);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_materials.VirtualInput,
+        {
+          showCursor: false,
+          focused: true,
+          wrapperStyle: {
+            width: "100%"
+          },
+          topContent: /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                color: "#667085"
+              }
+            },
+            mergedDisplayField.cashReceived.label
+          ),
+          value: internalValue ? /* @__PURE__ */ import_react.default.createElement(
+            import_materials2.AutoResizeText,
+            {
+              minFontSizePx: 10,
+              maxFontSizePx: 14,
+              fontSizePrecisionPx: 0.5
+            },
+            (0, import_utils3.formatAmountWithOptions)(internalValue || "", "", {
+              value: internalValue,
+              hideDecimalForWholeNumbers: false,
+              precision: 2
+            })
+          ) : "",
+          height: 30,
+          fontSize: 20,
+          placeholder,
+          style: {
+            fontSize: "24px",
+            fontWeight: "bold",
+            border: "none",
+            background: "transparent",
+            width: "100%"
+          }
+        }
+      )
+    ), ((_c = mergedDisplayField.changeDue) == null ? void 0 : _c.visible) && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-cash-keyboard-intact-container-top",
+        style: { ...getGridStyle(2), overflow: "hidden" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-label" }, mergedDisplayField.changeDue.label),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-value" }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials2.AutoResizeText,
+        {
+          minFontSizePx: 10,
+          maxFontSizePx: 14,
+          fontSizePrecisionPx: 0.5
+        },
+        (0, import_utils3.formatAmountWithOptions)(hiddenChangeDue ? 0 : changeDue, "", {
+          value: hiddenChangeDue ? 0 : changeDue,
+          hideDecimalForWholeNumbers: false,
+          precision: 2
+        })
+      ))
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_shortcuts.default,
+      {
+        presets: getDefaultPresets(),
+        onChange: setInternalValue,
+        disabled
+      }
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_CashKeyboardSimple.default,
+    {
+      containerProps: {
+        renderType: "modal",
+        open: isShowModal,
+        onCancel: () => setIsShowModal(false)
+      },
+      ..._restProps,
+      titleArea: {
+        ...mergedTitleArea,
+        subtitle: { visible: false }
+      },
+      selectType: "dark",
+      value: internalValue,
+      onChange: setInternalValue,
+      onEnter: () => {
+        var _a2;
+        (_a2 = props.onEnter) == null ? void 0 : _a2.call(props, internalValue);
+        setIsShowModal(false);
+      }
+    }
+  ));
+};
+var CashKeyboardIntact_default = CashKeyboardIntact;

package/lib/pro/priceKeyboard/components/cashKeyboard/CashKeyboardSimple.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CashKeyboardBaseProps } from './types';
+import './index.less';
+export interface CashKeyboardSimpleProps extends CashKeyboardBaseProps {
+    containerProps?: {
+        renderType: 'modal' | 'popover';
+        open: boolean;
+        [key: string]: any;
+    };
+    children?: React.ReactNode;
+}
+declare const CashKeyboardSimple: (props: CashKeyboardSimpleProps) => JSX.Element | null;
+export default CashKeyboardSimple;