@pisell/private-materials 6.4.41 → 6.4.43

package/es/pro/priceKeyboard/components/shortcuts/index.js

@@ -0,0 +1,47 @@
+import React, { useMemo, forwardRef, memo } from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var Shortcuts = /*#__PURE__*/forwardRef(function (props, ref) {
+  var presets = props.presets,
+    onChange = props.onChange,
+    disabled = props.disabled;
+  var handleItemClick = function handleItemClick(item) {
+    if (disabled || item.disabled) {
+      return;
+    }
+    if (item.onClick) {
+      var _next2 = function _next2() {
+        return onChange === null || onChange === void 0 ? void 0 : onChange("".concat(item.value));
+      };
+      item.onClick(item, _next2);
+    } else {
+      onChange === null || onChange === void 0 || onChange("".concat(item.value));
+    }
+  };
+  return useMemo(function () {
+    if (!(presets !== null && presets !== void 0 && presets.length)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      className: classNames('pisell-virtual-keyboard-shortcuts', {
+        disabled: props.disabled
+      })
+    }, presets.map(function (item, index) {
+      var _item$render;
+      var itemProps = {
+        key: index,
+        className: classNames('pisell-virtual-keyboard-shortcut', {
+          disabled: item.disabled
+        }),
+        style: item.style,
+        onClick: function onClick() {
+          return handleItemClick(item);
+        }
+      };
+      return /*#__PURE__*/React.createElement("div", itemProps, ((_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item)) || item.label);
+    }));
+  }, [presets, onChange, ref]);
+});
+Shortcuts.displayName = 'Shortcuts';
+export default /*#__PURE__*/memo(Shortcuts);

package/es/pro/priceKeyboard/components/shortcuts/index.less

@@ -0,0 +1,39 @@
+.pisell-virtual-keyboard-shortcuts {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px 8px;
+  overflow: hidden;
+
+  &.disabled {
+    .pisell-virtual-keyboard-shortcut {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: #98a2b3 !important;
+      background: #f2f4f7 !important;
+      border-color: #d0d5dd !important;
+    }
+  }
+
+  .pisell-virtual-keyboard-shortcut {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #e9d7fe);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    background: var(--Primary-25, #fcfaff);
+    font-weight: 600;
+    color: #6941c6;
+    cursor: pointer;
+    position: relative;
+
+    &.disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: #98a2b3 !important;
+      background: #f2f4f7 !important;
+      border-color: #d0d5dd !important;
+    }
+  }
+}

package/es/pro/priceKeyboard/hooks/keyActions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 键盘输入处理 Hook
+ * @param params 配置参数
+ * @param params.onChange 值变化回调
+ * @param params.onEnter 确认回调
+ * @param params.onReset 重置回调
+ * @param params.value 当前值
+ * @param params.min 最小值限制
+ * @param params.max 最大值限制
+ * @param params.scale 小数位数限制
+ * @param params.mode 输入模式：'append' 追加模式（默认）| 'replace' 替换模式
+ */
+declare const useKeyActions: (params: {
+    onChange?: ((val: string) => void) | undefined;
+    onEnter?: ((val: string) => void) | undefined;
+    onReset?: (() => void) | undefined;
+    value?: string | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    mode?: "replace" | "append" | undefined;
+    scale?: number | undefined;
+}) => {
+    handleChange: (val?: string | number) => void;
+    error: {
+        msg: string;
+    } | null;
+};
+export default useKeyActions;

package/es/pro/priceKeyboard/hooks/keyActions.js

@@ -0,0 +1,252 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useCallback } from 'react';
+import { isNumber } from '@pisell/utils';
+
+/**
+ * 键盘输入处理 Hook
+ * @param params 配置参数
+ * @param params.onChange 值变化回调
+ * @param params.onEnter 确认回调
+ * @param params.onReset 重置回调
+ * @param params.value 当前值
+ * @param params.min 最小值限制
+ * @param params.max 最大值限制
+ * @param params.scale 小数位数限制
+ * @param params.mode 输入模式：'append' 追加模式（默认）| 'replace' 替换模式
+ */
+var useKeyActions = function useKeyActions(params) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var onChange = params.onChange,
+    onEnter = params.onEnter,
+    onReset = params.onReset,
+    _params$value = params.value,
+    value = _params$value === void 0 ? '' : _params$value,
+    min = params.min,
+    max = params.max,
+    _params$mode = params.mode,
+    mode = _params$mode === void 0 ? 'append' : _params$mode,
+    scale = params.scale;
+
+  /**
+   * 检查小数位数是否超出限制
+   */
+  var checkScale = useCallback(function (val) {
+    if (scale === undefined) return true;
+    var decimalIndex = val.indexOf('.');
+    if (decimalIndex === -1) return true;
+    var decimalPart = val.substring(decimalIndex + 1);
+    return decimalPart.length <= scale;
+  }, [scale]);
+
+  /**
+   * 数值范围校验
+   */
+  var validateRange = useCallback(function (val) {
+    var trimmedVal = val.trim();
+    var numVal = Number(trimmedVal);
+    if (isNaN(numVal)) {
+      var errorMsg = 'invalid';
+      setError({
+        msg: errorMsg
+      });
+      return {
+        isValid: false,
+        errorMsg: errorMsg
+      };
+    }
+    if (min !== undefined && numVal < min) {
+      var _errorMsg = 'invalid';
+      setError({
+        msg: _errorMsg
+      });
+      return {
+        isValid: false,
+        errorMsg: _errorMsg
+      };
+    }
+    if (max !== undefined && numVal > max) {
+      var _errorMsg2 = 'invalid';
+      setError({
+        msg: _errorMsg2
+      });
+      return {
+        isValid: false,
+        errorMsg: _errorMsg2
+      };
+    }
+    setError(null);
+    return {
+      isValid: true
+    };
+  }, [min, max]);
+
+  /**
+   * 处理值变化
+   */
+  var handleChangeValue = useCallback(function (val) {
+    // 检查小数位数限制
+    if (!checkScale(val)) {
+      return {
+        isValid: false,
+        errorMsg: 'decimal_places_exceeded'
+      };
+    }
+    var validation = validateRange(val);
+    if (validation.isValid) {
+      onChange === null || onChange === void 0 || onChange(val);
+    }
+    return validation;
+  }, [onChange, validateRange, checkScale]);
+
+  /**
+   * 处理数字输入（0-9）
+   */
+  var handleNumberInput = useCallback(function (inputVal) {
+    var numStr = String(inputVal);
+
+    // 替换模式：直接替换当前值
+    if (mode === 'replace') {
+      return handleChangeValue(numStr);
+    }
+
+    // 追加模式
+    if (!value) {
+      return handleChangeValue(numStr);
+    }
+
+    // 处理前导零的情况
+    if (/^0+$/.test(value)) {
+      // 当前值全是0，输入非0数字时替换，输入0时追加
+      if (numStr === '0') {
+        return handleChangeValue(value + '0');
+      } else {
+        return handleChangeValue(numStr);
+      }
+    }
+
+    // 处理以0开头但包含小数点的情况（如 "0.123"）
+    if (/^0\.\d*$/.test(value)) {
+      return handleChangeValue(value + numStr);
+    }
+
+    // 处理以0开头的整数（如 "001", "0123"）
+    if (/^0+\d+$/.test(value)) {
+      // 去除前导零后拼接
+      var withoutLeadingZeros = value.replace(/^0+/, '');
+      return handleChangeValue(withoutLeadingZeros + numStr);
+    }
+
+    // 正常拼接
+    return handleChangeValue(value + numStr);
+  }, [mode, value, handleChangeValue]);
+
+  /**
+   * 处理小数点输入
+   */
+  var handleDecimalInput = useCallback(function () {
+    // 替换模式：直接设置为 "0."
+    if (mode === 'replace') {
+      return handleChangeValue('0.');
+    }
+
+    // 追加模式下，已经包含小数点则忽略
+    if (value.includes('.')) {
+      return;
+    }
+
+    // 空值：设置为 "0."
+    if (!value) {
+      return handleChangeValue('0.');
+    }
+
+    // 全是0的情况：设置为 "0."
+    if (/^0+$/.test(value)) {
+      return handleChangeValue('0.');
+    }
+
+    // 以0开头的整数（如 "001", "0123"）：去除前导零后加小数点
+    if (/^0+\d+$/.test(value)) {
+      var withoutLeadingZeros = value.replace(/^0+/, '');
+      return handleChangeValue(withoutLeadingZeros + '.');
+    }
+
+    // 正常情况，追加小数点
+    return handleChangeValue(value + '.');
+  }, [mode, value, handleChangeValue]);
+
+  /**
+   * 处理其他字符输入
+   */
+  var handleOtherInput = useCallback(function (inputVal) {
+    var inputStr = String(inputVal);
+    if (mode === 'replace') {
+      return handleChangeValue(inputStr);
+    }
+    return handleChangeValue(value + inputStr);
+  }, [mode, value, handleChangeValue]);
+
+  /**
+   * 主要的键盘输入处理函数
+   */
+  var handleKeyInput = useCallback(function (val) {
+    switch (val) {
+      case undefined:
+        break;
+
+      // 确认操作
+      case 'ok':
+      case 'enter':
+      case 'done':
+        var validation = validateRange(value);
+        if (validation.isValid) {
+          onEnter === null || onEnter === void 0 || onEnter(value);
+        }
+        break;
+
+      // 重置操作
+      case 'reset':
+        setError(null);
+        onReset === null || onReset === void 0 || onReset();
+        break;
+
+      // 清空操作
+      case 'clear':
+        setError(null);
+        handleChangeValue('');
+        break;
+
+      // 删除操作
+      case 'delete':
+        handleChangeValue(value.slice(0, -1));
+        break;
+
+      // 小数点
+      case '.':
+        handleDecimalInput();
+        break;
+
+      // 数字输入
+      default:
+        if (isNumber(val) || String(val) === '0') {
+          handleNumberInput(val);
+        } else {
+          // 其他字符
+          handleOtherInput(val);
+        }
+        break;
+    }
+  }, [value, validateRange, onEnter, onReset, handleChangeValue, handleDecimalInput, handleNumberInput, handleOtherInput]);
+  return {
+    handleChange: handleKeyInput,
+    error: error
+  };
+};
+export default useKeyActions;

package/es/pro/priceKeyboard/hooks/rightItems.d.ts

@@ -0,0 +1,27 @@
+declare const useRightItems: (props: {
+    rightItemsStyle?: any;
+    doneText?: string;
+    resetText?: string;
+}) => ({
+    value: string;
+    label: JSX.Element;
+    disabled: boolean;
+    type: string;
+    style: any;
+    size?: undefined;
+} | {
+    value: string;
+    label: string;
+    disabled: boolean;
+    type: string;
+    style: any;
+    size?: undefined;
+} | {
+    value: string;
+    label: string;
+    disabled: boolean;
+    type: string;
+    size: number;
+    style: any;
+})[];
+export default useRightItems;

package/es/pro/priceKeyboard/hooks/rightItems.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import { Icon } from '@pisell/materials';
+var useRightItems = function useRightItems(props) {
+  var rightItemsStyle = props.rightItemsStyle,
+    doneText = props.doneText,
+    resetText = props.resetText;
+  var rightItems = useMemo(function () {
+    return [{
+      value: 'delete',
+      label: /*#__PURE__*/React.createElement(Icon, {
+        type: "pisell2-delete"
+      }),
+      disabled: false,
+      type: 'text',
+      style: _objectSpread({
+        color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor) || '#000000',
+        backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor) || '#ffffff'
+      }, (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.deleteButtonStyle) || {})
+    }, {
+      value: 'reset',
+      label: resetText || 'Reset',
+      disabled: false,
+      type: 'text',
+      style: _objectSpread({
+        fontSize: '18px',
+        color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.resetButtonTextColor) || '#D92D20',
+        backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.resetButtonBackgroundColor) || '#ffffff'
+      }, (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.resetButtonStyle) || {})
+    }, {
+      value: 'done',
+      label: doneText || 'Done',
+      disabled: false,
+      type: 'primary',
+      size: 2,
+      style: _objectSpread({
+        fontSize: '18px',
+        background: rightItemsStyle !== null && rightItemsStyle !== void 0 && rightItemsStyle.isDoneButtonFollowTheme ? 'var(--theme-color)' : (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.doneButtonBackgroundColor) || '#5d3f9f',
+        color: rightItemsStyle !== null && rightItemsStyle !== void 0 && rightItemsStyle.isDoneButtonFollowTheme ? '#ffffff' : (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.doneButtonTextColor) || '#ffffff'
+      }, (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.doneButtonStyle) || {})
+    }];
+  }, [doneText, resetText, rightItemsStyle]);
+  return rightItems;
+};
+export default useRightItems;

package/es/pro/priceKeyboard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CashKeyboard } from './components/cashKeyboard';
+export { default as PaymentKeyboard } from './components/paymentKeyboard';
+export { default as DiscountKeyboard } from './components/discountKeyboard';

package/es/pro/priceKeyboard/index.js

@@ -0,0 +1,3 @@
+export { default as CashKeyboard } from "./components/cashKeyboard";
+export { default as PaymentKeyboard } from "./components/paymentKeyboard";
+export { default as DiscountKeyboard } from "./components/discountKeyboard";

package/es/pro/priceKeyboard/index.less

@@ -0,0 +1,215 @@
+.price-keyboard {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.price-keyboard-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.price-keyboard-inputs-default {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.price-keyboard-input-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: #f9fafb;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #98a2b3;
+  }
+
+  &:focus-within {
+    border-color: #1570ef;
+    box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1);
+  }
+}
+
+.price-keyboard-input {
+  flex: 1;
+}
+
+.price-keyboard-keyboard {
+  display: flex;
+  gap: 12px;
+}
+
+.price-keyboard-keyboard-numbers {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.price-keyboard-keyboard-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 80px;
+}
+
+.price-keyboard-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background-color: #ffffff;
+  color: #344054;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+
+  &:hover {
+    background-color: #f9fafb;
+    border-color: #98a2b3;
+  }
+
+  &:active {
+    background-color: #f2f4f7;
+    transform: translateY(1px);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    
+    &:hover {
+      background-color: #ffffff;
+      border-color: #d0d5dd;
+      transform: none;
+    }
+  }
+
+  &.price-keyboard-key-primary {
+    background-color: #1570ef;
+    color: #ffffff;
+    border-color: #1570ef;
+
+    &:hover {
+      background-color: #1366d9;
+      border-color: #1366d9;
+    }
+
+    &:active {
+      background-color: #0f5bc4;
+      border-color: #0f5bc4;
+    }
+  }
+
+  &.price-keyboard-key-size-2 {
+    height: 104px; /* 48px * 2 + 8px gap */
+  }
+
+  &.price-keyboard-key-size-3 {
+    height: 160px; /* 48px * 3 + 16px gap */
+  }
+}
+
+.price-keyboard-delete-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .price-keyboard {
+    padding: 16px;
+    gap: 16px;
+  }
+
+  .price-keyboard-keyboard {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .price-keyboard-keyboard-actions {
+    flex-direction: row;
+    width: auto;
+    height: auto;
+  }
+
+  .price-keyboard-key {
+    height: 44px;
+    font-size: 14px;
+  }
+
+  .price-keyboard-key.price-keyboard-key-size-2 {
+    height: 44px;
+    flex: 2;
+  }
+
+  .price-keyboard-key.price-keyboard-key-size-3 {
+    height: 44px;
+    flex: 3;
+  }
+}
+
+/* 深色主题支持 */
+@media (prefers-color-scheme: dark) {
+  .price-keyboard {
+    background-color: #1f2937;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .price-keyboard-input-wrapper {
+    background-color: #374151;
+    border-color: #4b5563;
+
+    &:hover {
+      border-color: #6b7280;
+    }
+
+    &:focus-within {
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+  }
+
+  .price-keyboard-key {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #f9fafb;
+
+    &:hover {
+      background-color: #4b5563;
+      border-color: #6b7280;
+    }
+
+    &:active {
+      background-color: #6b7280;
+    }
+
+    &.price-keyboard-key-primary {
+      background-color: #3b82f6;
+      border-color: #3b82f6;
+
+      &:hover {
+        background-color: #2563eb;
+        border-color: #2563eb;
+      }
+
+      &:active {
+        background-color: #1d4ed8;
+        border-color: #1d4ed8;
+      }
+    }
+  }
+}

package/es/pro/priceKeyboard/utils.d.ts

@@ -0,0 +1,31 @@
+export declare const DEFAULT_THEME_CONFIG: {
+    dark: {
+        titleColor: string;
+        subtitleColor: string;
+        keyboardBgColor: string;
+        keyboardWrapperBgColor: string;
+        bgColor: string;
+        bgColorGray200: string;
+        bgColorGray300: string;
+        textGray500: string;
+        textGray600: string;
+        textGray900: string;
+    };
+    light: {
+        titleColor: string;
+        subtitleColor: string;
+        keyboardBgColor: string;
+        keyboardWrapperBgColor: string;
+        bgColor: string;
+        bgColorGray200: string;
+        bgColorGray300: string;
+        textGray500: string;
+        textGray600: string;
+        textGray900: string;
+    };
+};
+/**
+ * 设置键盘主题
+ * @param theme 主题
+ */
+export declare const setKeyboardTheme: (theme?: 'dark' | 'light') => void;