@pisell/private-materials 6.3.15 → 6.4.2

package/lib/pro/pisellPriceKeyboardPopover/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export interface PisellPriceKeyboardPopoverProps {
+    /** 触发元素 */
+    children: React.ReactNode;
+    /** 当前价格值 */
+    value?: string | number;
+    /** 价格变化回调（合并了 onChange 和 onEnter） */
+    onChange?: (value: string | number) => void;
+    /** 确认回调 */
+    onConfirm?: (value: string | number) => void;
+    /** 取消回调 */
+    onCancel?: () => void;
+    /** 货币符号显示 */
+    showCurrencySymbol?: boolean;
+    /** 是否使用千分位分隔符 */
+    useThousandsSeparator?: boolean;
+    /** 键盘主题 */
+    selectType?: 'light' | 'dark';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** Popover 额外的类名 */
+    overlayClassName?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export interface PisellPriceKeyboardPopoverRef {
+    /** 打开键盘 */
+    open: () => void;
+    /** 关闭键盘 */
+    close: () => void;
+    /** 获取当前是否打开 */
+    isOpen: () => boolean;
+}

package/lib/pro/pisellPriceKeyboardPopover/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/pro/pisellPriceKeyboardPopover/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/pro/pisellPriceRadio/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import './index.less';
+export interface PisellPriceRadioProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 点击选中回调 */
+    onSelect?: () => void;
+    /** 价格值 */
+    value?: string;
+    /** 价格变化回调 */
+    onChange?: (value: string) => void;
+    /** 标题 */
+    title?: string;
+    /** 货币符号 */
+    currencySymbol?: string;
+    /** 主题颜色 */
+    theme?: 'purple' | 'red';
+    /** 是否显示负号 */
+    showMinus?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 占位符 */
+    placeholder?: string;
+}
+declare const PisellPriceRadio: React.FC<PisellPriceRadioProps>;
+export default PisellPriceRadio;

package/lib/pro/pisellPriceRadio/index.js

@@ -0,0 +1,130 @@
+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/pisellPriceRadio/index.tsx
+var pisellPriceRadio_exports = {};
+__export(pisellPriceRadio_exports, {
+  default: () => pisellPriceRadio_default
+});
+module.exports = __toCommonJS(pisellPriceRadio_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var PisellPriceRadio = ({
+  checked = false,
+  onSelect,
+  value = "",
+  onChange,
+  title = "",
+  currencySymbol = "$",
+  theme = "purple",
+  showMinus = false,
+  disabled = false,
+  placeholder = "Amount"
+}) => {
+  const [showKeyboard, setShowKeyboard] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (checked) {
+      setShowKeyboard(true);
+    } else {
+      setShowKeyboard(false);
+    }
+  }, [checked]);
+  const handleInputClick = () => {
+    if (!disabled) {
+      onSelect == null ? void 0 : onSelect();
+      setShowKeyboard(true);
+    }
+  };
+  const handleRadioClick = () => {
+    if (!disabled) {
+      onSelect == null ? void 0 : onSelect();
+    }
+  };
+  const handlePriceChange = (newValue) => {
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  const renderInput = (props) => {
+    const displayValue = showMinus && value ? `-${value}` : value;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: (0, import_classnames.default)("pisell-price-radio-input-container", {
+          [`pisell-price-radio-input-container-${theme}`]: checked,
+          "pisell-price-radio-input-container-disabled": disabled
+        }),
+        onClick: handleInputClick,
+        disabled
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-price-radio-currency" }, currencySymbol),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-price-radio-input-content" }, displayValue || /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-price-radio-placeholder" }, showMinus ? "-" : "", placeholder))
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("pisell-price-radio", {
+        [`pisell-price-radio-${theme}`]: checked,
+        "pisell-price-radio-checked": checked,
+        "pisell-price-radio-disabled": disabled
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-price-radio-header" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Radio,
+      {
+        checked,
+        onChange: handleRadioClick,
+        disabled,
+        className: (0, import_classnames.default)("pisell-price-radio-button", {
+          [`pisell-price-radio-button-${theme}`]: checked
+        })
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-price-radio-title" }, title)),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials.VirtualKeyboard,
+      {
+        value,
+        onChange: (e) => handlePriceChange(e.target.value),
+        renderInput,
+        showDelete: false,
+        onValueSelect: (selected) => {
+          if (selected && !checked) {
+            onSelect == null ? void 0 : onSelect();
+          }
+        },
+        defaultSelect: checked && showKeyboard,
+        placeholder,
+        disabled
+      }
+    )
+  );
+};
+var pisellPriceRadio_default = PisellPriceRadio;

package/lib/pro/pisellPriceRadio/index.less

@@ -0,0 +1,158 @@
+.pisell-price-radio {
+  margin-bottom: 16px;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  &-button {
+    margin-right: 8px;
+
+    .ant-radio-inner {
+      border-color: #d9d9d9;
+    }
+
+    &.pisell-price-radio-button-purple {
+      .ant-radio-inner {
+        border-color: #722ed1;
+      }
+
+      .ant-radio-checked .ant-radio-inner {
+        background-color: #722ed1;
+        border-color: #722ed1;
+      }
+    }
+
+    &.pisell-price-radio-button-red {
+      .ant-radio-inner {
+        border-color: #ff4d4f;
+      }
+
+      .ant-radio-checked .ant-radio-inner {
+        background-color: #ff4d4f;
+        border-color: #ff4d4f;
+      }
+    }
+  }
+
+  &-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #000;
+
+    .pisell-price-radio-purple & {
+      color: #722ed1;
+    }
+
+    .pisell-price-radio-red & {
+      color: #ff4d4f;
+    }
+  }
+
+  &-input-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 52px;
+    padding: 12px 16px;
+    border: 2px solid #d9d9d9;
+    border-radius: 8px;
+    background: #fff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+    font-family: inherit;
+
+    &:hover:not(&-disabled) {
+      border-color: #722ed1;
+    }
+
+    &-purple {
+      border-color: #722ed1;
+      background: #f9f0ff;
+    }
+
+    &-red {
+      border-color: #ff4d4f;
+      background: #fff2f0;
+    }
+
+    &-disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      background: #f5f5f5;
+
+      &:hover {
+        border-color: #d9d9d9 !important;
+      }
+    }
+  }
+
+  &-currency {
+    font-size: 16px;
+    font-weight: 600;
+    color: #8c8c8c;
+    margin-right: 8px;
+    flex-shrink: 0;
+
+    .pisell-price-radio-purple & {
+      color: #722ed1;
+    }
+
+    .pisell-price-radio-red & {
+      color: #ff4d4f;
+    }
+  }
+
+  &-input-content {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: right;
+
+    .pisell-price-radio-purple & {
+      color: #722ed1;
+    }
+
+    .pisell-price-radio-red & {
+      color: #ff4d4f;
+    }
+  }
+
+  &-placeholder {
+    color: #bfbfbf;
+    font-weight: normal;
+  }
+}
+
+// VirtualKeyInput样式覆盖
+.virtual-keyboard-input-wrap {
+  .virtual-keyboard-input {
+    border: none !important;
+    padding: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+
+    &:focus {
+      border: none !important;
+      box-shadow: none !important;
+    }
+
+    input {
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      text-align: inherit;
+
+      &:focus {
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+} 

package/lib/pro/skuDetailModal/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SkuDetailModalProps, SkuDetailModalRef } from './types';
+import './index.less';
+declare const _default: React.ForwardRefExoticComponent<SkuDetailModalProps & React.RefAttributes<SkuDetailModalRef>>;
+export default _default;