@pisell/private-materials 6.8.86 → 6.8.87

package/lib/pro/NumericStepper/index.js

@@ -35,9 +35,8 @@ module.exports = __toCommonJS(NumericStepper_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_classnames = __toESM(require("classnames"));
-var import_materials = require("@pisell/materials");
 var import_utils = require("@pisell/utils");
-var import_numberKeyboard = __toESM(require("../numberKeyboard"));
+var import_keyboards = require("../keyboards");
 var import_index = require("./index.less");
 var NumericStepper = ({
   value,
@@ -53,7 +52,9 @@ var NumericStepper = ({
   shape = "round",
   minusIcon,
   plusIcon,
-  horizontalPadding = 0
+  horizontalPadding = 0,
+  variant = "separated",
+  enableInput = true
 }) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const [internalValue, setInternalValue] = (0, import_react.useState)(
@@ -115,7 +116,7 @@ var NumericStepper = ({
     }
   };
   const handleNumberClick = () => {
-    if (disabled) return;
+    if (disabled || !enableInput) return;
     setTempValue(currentValue.toString());
     if (_isMobile) {
       setOpen(true);
@@ -141,12 +142,15 @@ var NumericStepper = ({
   const stepperClasses = (0, import_classnames.default)(
     "numeric-stepper",
     `numeric-stepper-${size}`,
-    `numeric-stepper-${shape}`,
+    `numeric-stepper-${variant}`,
     {
+      // shape 仅在分离式下生效
+      [`numeric-stepper-${shape}`]: variant === "separated",
       "numeric-stepper-disabled": disabled,
       "numeric-stepper-simple": currentValue === 0 || currentValue === void 0,
       "numeric-stepper-out-of-range": outOfRange,
-      "numeric-stepper-plus-only": isPlusOnly
+      "numeric-stepper-plus-only": isPlusOnly,
+      "numeric-stepper-input-disabled": !enableInput
     },
     className
   );
@@ -187,52 +191,52 @@ var NumericStepper = ({
     if (isPlusOnly) {
       return null;
     }
+    const displayElement = /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: "numeric-stepper-display-wrapper",
+        onClick: handleNumberClick
+      },
+      /* @__PURE__ */ React.createElement("span", { className: (0, import_classnames.default)("numeric-stepper-display") }, currentValue)
+    );
+    if (!enableInput) {
+      return displayElement;
+    }
     if (_isMobile) {
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: "numeric-stepper-display-wrapper",
-          onClick: handleNumberClick
-        },
-        /* @__PURE__ */ React.createElement("span", { className: (0, import_classnames.default)("numeric-stepper-display") }, currentValue)
-      );
+      return displayElement;
     }
     return /* @__PURE__ */ React.createElement(
-      import_materials.Popover,
+      import_keyboards.NumberKeyboard,
       {
-        open,
-        trigger: ["click"],
-        overlayInnerStyle: { padding: 0 },
-        destroyTooltipOnHide: true,
-        arrow: false,
-        align: {
-          offset: [0, 0]
+        max,
+        min,
+        originalValue: currentValue.toString(),
+        defaultValue: currentValue.toString(),
+        onEnter: (newValue) => {
+          handleValueChange == null ? void 0 : handleValueChange(Number(newValue));
+          setOpen(false);
         },
-        overlayClassName: "pisell-number-selector-popover",
-        onOpenChange: handleOpenChange,
-        content: /* @__PURE__ */ React.createElement(
-          import_numberKeyboard.default,
-          {
-            max,
-            value: tempValue,
-            onChange: handleChange,
-            onOk: () => {
-              const newValue = parseInt(tempValue) || 0;
-              const clampedValue = Math.max(min, Math.min(max, newValue));
-              onChange == null ? void 0 : onChange(clampedValue);
-              setOpen(false);
+        containerProps: {
+          className: "numeric-stepper-keyboard-popover",
+          renderType: "popover",
+          open,
+          onOpenChange: handleOpenChange,
+          content: /* @__PURE__ */ React.createElement(
+            import_keyboards.NumberKeyboard,
+            {
+              max,
+              min,
+              originalValue: currentValue.toString(),
+              defaultValue: currentValue.toString(),
+              onEnter: (newValue) => {
+                handleValueChange == null ? void 0 : handleValueChange(Number(newValue));
+                setOpen(false);
+              }
             }
-          }
-        )
+          )
+        }
       },
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: "numeric-stepper-display-wrapper",
-          onClick: handleNumberClick
-        },
-        /* @__PURE__ */ React.createElement("span", { className: (0, import_classnames.default)("numeric-stepper-display") }, currentValue)
-      )
+      displayElement
     );
   }, [
     _isMobile,
@@ -245,7 +249,8 @@ var NumericStepper = ({
     max,
     min,
     onChange,
-    tempValue
+    tempValue,
+    enableInput
   ]);
   const _plus = /* @__PURE__ */ React.createElement(
     "div",
@@ -291,33 +296,26 @@ var NumericStepper = ({
     _minus,
     _display,
     _plus,
-    _isMobile && open && /* @__PURE__ */ React.createElement(
-      import_materials.PisellModal,
+    _isMobile && /* @__PURE__ */ React.createElement(
+      import_keyboards.NumberKeyboard,
       {
-        open: true,
-        platform: "pc",
-        width: "unset",
-        header: null,
-        footer: false,
-        maskClosable: true,
-        closeIcon: null,
-        className: "numeric-stepper-keyboard-modal",
-        onCancel: () => setOpen(false)
-      },
-      /* @__PURE__ */ React.createElement(
-        import_numberKeyboard.default,
-        {
-          max,
-          value: tempValue,
-          onChange: handleChange,
-          onOk: () => {
-            const newValue = parseInt(tempValue) || 0;
-            const clampedValue = Math.max(min, Math.min(max, newValue));
-            onChange == null ? void 0 : onChange(clampedValue);
+        containerProps: {
+          className: "numeric-stepper-keyboard-modal",
+          renderType: "modal",
+          open,
+          onCancel: () => {
             setOpen(false);
           }
+        },
+        max,
+        min,
+        defaultValue: currentValue.toString(),
+        originalValue: currentValue.toString(),
+        onEnter: (newValue) => {
+          handleValueChange == null ? void 0 : handleValueChange(Number(newValue));
+          setOpen(false);
         }
-      )
+      }
     )
   );
 };