@pisell/private-materials 6.8.11 → 6.8.13

package/lib/pro/Selector/hooks/usePresetItemProps.js

@@ -0,0 +1,156 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Selector/hooks/usePresetItemProps.ts
+var usePresetItemProps_exports = {};
+__export(usePresetItemProps_exports, {
+  default: () => usePresetItemProps_default
+});
+module.exports = __toCommonJS(usePresetItemProps_exports);
+var import_react = require("react");
+var import_lodash = require("lodash");
+var usePresetItemProps = (params) => {
+  const {
+    variant,
+    itemLayout,
+    preset,
+    itemProps = {},
+    indicator: originIndicator,
+    numberSelector,
+    mode,
+    disabled,
+    selected
+  } = params;
+  return (0, import_react.useMemo)(() => {
+    let mediaProps = {};
+    let cardProps = {};
+    let indicator = originIndicator;
+    const presetVariant = preset == null ? void 0 : preset.variant;
+    if (variant === "media") {
+      let presetProps = {};
+      if (presetVariant === "1") {
+        presetProps = {
+          size: "small",
+          showIndicator: false,
+          shape: mode === "single" ? "circle" : "square",
+          coverType: "text"
+        };
+      } else if (presetVariant === "2") {
+        presetProps = {
+          size: "large",
+          showIndicator: true,
+          shape: "circle"
+        };
+      }
+      mediaProps = {
+        ...presetProps,
+        ...itemProps
+      };
+      return { mediaProps, cardProps };
+    }
+    if (variant === "default") {
+      cardProps = {
+        variant: "borderless",
+        layout: "horizontal",
+        selectedType: "none",
+        actionsPosition: "left",
+        actions: numberSelector ? [numberSelector] : [indicator],
+        renderContent: presetVariant === "1" || presetVariant === "2" ? ({ dataSource }) => dataSource == null ? void 0 : dataSource._label : void 0,
+        ...itemProps
+      };
+      return { mediaProps, cardProps };
+    }
+    if (variant === "card") {
+      const layout = (itemProps == null ? void 0 : itemProps.layout) || itemLayout || "horizontal";
+      const isVertical = layout === "vertical";
+      let baseProps = {};
+      if (isVertical) {
+        const defaultStyles = {
+          content: { minHeight: "264px" }
+        };
+        baseProps = {
+          layout: "vertical",
+          variant: "borderless"
+        };
+        if (presetVariant === "2") {
+          const mergedStyles = (0, import_lodash.merge)({}, defaultStyles, itemProps == null ? void 0 : itemProps.styles);
+          cardProps = {
+            ...baseProps,
+            corner: indicator,
+            actions: numberSelector ? [numberSelector] : [],
+            ...itemProps,
+            styles: mergedStyles
+          };
+        } else {
+          const mergedStyles = (0, import_lodash.merge)({}, defaultStyles, itemProps == null ? void 0 : itemProps.styles);
+          cardProps = {
+            ...baseProps,
+            actions: numberSelector ? [numberSelector] : [indicator],
+            ...itemProps,
+            styles: mergedStyles
+          };
+        }
+      } else {
+        const defaultStyles = {
+          container: { padding: 8 },
+          content: {}
+        };
+        if (presetVariant === "1") {
+          defaultStyles.content.textAlign = "center";
+          baseProps = {
+            selectedType: "outlined-bold"
+          };
+          if (selected) {
+            defaultStyles.content.fontWeight = "600";
+          }
+          indicator = null;
+        } else if (presetVariant === "2") {
+          baseProps = {
+            selectedType: "filled"
+          };
+          indicator = selected ? indicator : null;
+        } else if (presetVariant === "5") {
+          baseProps = {
+            variant: "borderless",
+            selectedType: "none"
+          };
+        }
+        const mergedStyles = (0, import_lodash.merge)({}, defaultStyles, itemProps == null ? void 0 : itemProps.styles);
+        cardProps = {
+          ...baseProps,
+          actions: numberSelector ? [numberSelector] : [indicator],
+          ...itemProps,
+          styles: mergedStyles
+        };
+      }
+      return { mediaProps, cardProps };
+    }
+    return { mediaProps, cardProps };
+  }, [
+    variant,
+    itemLayout,
+    preset,
+    itemProps,
+    originIndicator,
+    numberSelector,
+    mode,
+    disabled,
+    selected
+  ]);
+};
+var usePresetItemProps_default = usePresetItemProps;

package/lib/pro/Selector/hooks/usePresetProps.js

@@ -0,0 +1,133 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Selector/hooks/usePresetProps.ts
+var usePresetProps_exports = {};
+__export(usePresetProps_exports, {
+  default: () => usePresetProps_default
+});
+module.exports = __toCommonJS(usePresetProps_exports);
+var import_react = require("react");
+var VARIANT_MAP = {
+  ["default"]: ["1", "2", "3", "4"],
+  ["select"]: ["1"],
+  ["card"]: ["1", "2", "3", "4", "5"],
+  ["media"]: ["1", "2"]
+};
+var EMPTY_CONFIG = {};
+var PRESET_LAYOUTS = {
+  /** 自动宽度布局 - 内容自适应 */
+  autoFlex: {
+    className: "pisell-pro-selector_layout-auto-flex"
+  },
+  /** 响应式布局 - 最小宽度 210px */
+  responsive210: {
+    className: "pisell-pro-selector_layout-responsive-210"
+  },
+  /** 响应式布局 - 最小宽度 330px */
+  responsive330: {
+    className: "pisell-pro-selector_layout-responsive-330"
+  }
+};
+var VARIANT_PRESET_MAP = {
+  default: {
+    "1": "column",
+    "2": "autoFlex",
+    "3": "column",
+    "4": "autoFlex"
+  },
+  card: {
+    "1": "responsive210",
+    "2": "responsive210",
+    "3": "column",
+    "4": "responsive330",
+    "5": "column"
+  },
+  media: {
+    "1": "autoFlex",
+    "2": "autoFlex"
+  }
+};
+var usePresetProps = ({
+  layout,
+  mode = "single",
+  preset,
+  itemLayout = "horizontal",
+  variant = "default",
+  indicatorProps
+}) => {
+  return (0, import_react.useMemo)(() => {
+    let layoutConfig = null;
+    if (variant === "select" || !(preset == null ? void 0 : preset.variant)) {
+      layoutConfig = null;
+    } else {
+      let baseLayoutConfig = null;
+      let validVariants = VARIANT_MAP[variant] || [];
+      let presetVariant = validVariants.includes(preset == null ? void 0 : preset.variant) ? preset == null ? void 0 : preset.variant : "1";
+      const presetLayoutInfo = VARIANT_PRESET_MAP[variant];
+      if (presetLayoutInfo) {
+        const layoutType = presetLayoutInfo[presetVariant];
+        if (layoutType) {
+          const _config = PRESET_LAYOUTS[layoutType];
+          if (_config) {
+            baseLayoutConfig = _config;
+          } else {
+            baseLayoutConfig = EMPTY_CONFIG;
+          }
+        } else {
+          baseLayoutConfig = EMPTY_CONFIG;
+        }
+      } else {
+        baseLayoutConfig = EMPTY_CONFIG;
+      }
+      if (layout) {
+        layoutConfig = {
+          ...baseLayoutConfig,
+          ...layout
+        };
+      } else {
+        layoutConfig = baseLayoutConfig;
+      }
+    }
+    let computedIndicatorProps = {};
+    const shouldUseFilled = variant === "media" || variant === "card" && (preset == null ? void 0 : preset.variant) === "2";
+    if (shouldUseFilled) {
+      computedIndicatorProps = {
+        variant: "filled"
+      };
+    }
+    if (indicatorProps) {
+      computedIndicatorProps = {
+        ...computedIndicatorProps,
+        ...indicatorProps
+      };
+    }
+    return {
+      layout: layoutConfig,
+      indicatorProps: computedIndicatorProps
+    };
+  }, [
+    JSON.stringify(preset),
+    itemLayout,
+    variant,
+    layout,
+    mode,
+    JSON.stringify(indicatorProps)
+  ]);
+};
+var usePresetProps_default = usePresetProps;

package/lib/pro/Selector/hooks/useSelectionController.js

@@ -42,7 +42,8 @@ function useSelectionController(props) {
     return dataSource.map((option) => ({
       ...option,
       _key: option[(fieldNames == null ? void 0 : fieldNames.value) || "value"],
-      _label: option[(fieldNames == null ? void 0 : fieldNames.label) || "label"]
+      _label: option[(fieldNames == null ? void 0 : fieldNames.label) || "label"],
+      _cover: option[(fieldNames == null ? void 0 : fieldNames.cover) || "cover"]
     }));
   }, [dataSource, fieldNames]);
   const mutexGroups = (0, import_react.useMemo)(() => {
@@ -68,16 +69,6 @@ function useSelectionController(props) {
     });
     return map;
   }, [mutexGroups]);
-  const showQuantity = (0, import_react.useMemo)(() => {
-    const list = Array.isArray(dataSource) ? dataSource : dataSource || [];
-    const hasItemMaxGt = list.some(
-      (opt) => {
-        var _a;
-        return typeof ((_a = opt == null ? void 0 : opt.ruleConfig) == null ? void 0 : _a.max) === "number" && opt.ruleConfig.max > 1;
-      }
-    );
-    return hasItemMaxGt;
-  }, [dataSource]);
   const normalizedValues = (0, import_react.useMemo)(() => {
     if (!values) return [];
     if (Array.isArray(values)) {
@@ -106,6 +97,27 @@ function useSelectionController(props) {
     }
     return [{ value: values, quantity: 1 }];
   }, [values]);
+  const quantityInfo = (0, import_react.useMemo)(() => {
+    const selectedCount = normalizedValues.reduce(
+      (sum, item) => sum + (item.quantity || 0),
+      0
+    );
+    const list = Array.isArray(dataSource) ? dataSource : dataSource || [];
+    const showQuantity = list.some(
+      (opt) => {
+        var _a, _b;
+        return typeof ((_a = opt == null ? void 0 : opt.ruleConfig) == null ? void 0 : _a.max) === "number" && opt.ruleConfig.max > 1 || typeof ((_b = opt == null ? void 0 : opt.ruleConfig) == null ? void 0 : _b.min) === "number" && opt.ruleConfig.min > 1;
+      }
+    );
+    const maxReached = typeof (ruleConfig == null ? void 0 : ruleConfig.max) === "number" && ruleConfig.max > 0 && selectedCount >= ruleConfig.max;
+    const remainingCount = typeof (ruleConfig == null ? void 0 : ruleConfig.max) === "number" && ruleConfig.max > 0 ? Math.max(0, ruleConfig.max - selectedCount) : Infinity;
+    return {
+      maxReached,
+      showQuantity,
+      remainingCount,
+      selectedCount
+    };
+  }, [normalizedValues, dataSource, ruleConfig == null ? void 0 : ruleConfig.max]);
   const getOptionState = (0, import_react.useCallback)(
     (optionKey) => {
       const found = normalizedValues.find((item) => item.value === optionKey);
@@ -119,61 +131,97 @@ function useSelectionController(props) {
   const options = (0, import_react.useMemo)(() => {
     return normalizedOptions.map((option) => {
       const state = getOptionState(option._key);
+      const disabled = quantityInfo.maxReached && !(mode === "single" && (ruleConfig == null ? void 0 : ruleConfig.max) === 1) && !state.selected;
       return {
         ...option,
         selected: state.selected,
-        quantity: state.quantity
+        quantity: state.quantity,
+        disabled: option.disabled || disabled
       };
     });
-  }, [normalizedOptions, getOptionState]);
+  }, [normalizedOptions, getOptionState, quantityInfo.maxReached, mode, ruleConfig == null ? void 0 : ruleConfig.max]);
   const validate = async () => {
     const errors2 = [];
     const { required, min, max, customValidator } = ruleConfig || {};
     const values2 = valuesRef.current;
-    if (required) {
-      if (mode === "single" && !values2) {
-        errors2.push({ type: "required", message: import_utils.locales.getText("pisell2.pro.selector.validate.required-msg") });
-      } else if (mode === "multiple" && (!values2 || Array.isArray(values2) && values2.length === 0)) {
-        errors2.push({
-          type: "required",
-          message: import_utils.locales.getText("pisell2.pro.selector.validate.required-least")
+    let currentNormalizedValues = [];
+    if (values2) {
+      if (Array.isArray(values2)) {
+        currentNormalizedValues = values2.map((item) => {
+          if (typeof item === "object" && item !== null) {
+            return {
+              ...item,
+              value: item.value,
+              quantity: item.quantity || 1
+            };
+          }
+          return { value: item, quantity: 1 };
         });
+      } else if (typeof values2 === "object" && values2 !== null) {
+        const objValue = values2;
+        currentNormalizedValues = [
+          {
+            ...objValue,
+            value: objValue.value,
+            quantity: objValue.quantity || 1
+          }
+        ];
+      } else {
+        currentNormalizedValues = [{ value: values2, quantity: 1 }];
       }
     }
-    if (mode === "multiple" && Array.isArray(values2)) {
-      if (typeof min === "number" && values2.length < min) {
-        errors2.push({
-          type: "min",
-          message: import_utils.locales.getText("pisell2.pro.selector.validate.min-selection")(min)
-        });
-      }
-      if (typeof max === "number" && values2.length > max) {
-        errors2.push({
-          type: "max",
-          message: import_utils.locales.getText("pisell2.pro.selector.validate.max-selection")(max)
-        });
-      }
+    const totalQuantity = currentNormalizedValues.reduce(
+      (sum, item) => sum + (item.quantity || 0),
+      0
+    );
+    if (required && totalQuantity < 1) {
+      errors2.push({
+        type: "required",
+        message: import_utils.locales.getText("pisell2.pro.selector.validate.required-msg")
+      });
+    }
+    if (typeof min === "number" && totalQuantity < min) {
+      errors2.push({
+        type: "min",
+        message: import_utils.locales.getText("pisell2.pro.selector.validate.min-selection")(
+          min
+        )
+      });
+    }
+    if (typeof max === "number" && totalQuantity > max) {
+      errors2.push({
+        type: "max",
+        message: import_utils.locales.getText("pisell2.pro.selector.validate.max-selection")(
+          max
+        )
+      });
     }
     options.forEach((option) => {
       var _a, _b;
-      const { selected, quantity } = option;
+      const _optionVal = currentNormalizedValues.find(
+        (item) => item.value === option._key
+      );
+      const quantity = (_optionVal == null ? void 0 : _optionVal.quantity) || 0;
+      const { _label } = option;
       const _min = (_a = option == null ? void 0 : option.ruleConfig) == null ? void 0 : _a.min;
       const _max = (_b = option == null ? void 0 : option.ruleConfig) == null ? void 0 : _b.max;
-      if (selected) {
-        if (typeof _min === "number" && quantity < _min) {
-          errors2.push({
-            type: "min",
-            message: import_utils.locales.getText("pisell2.pro.selector.validate.min-quantity")(_min),
-            _key: option._key
-          });
-        }
-        if (typeof _max === "number" && quantity > _max) {
-          errors2.push({
-            type: "max",
-            message: import_utils.locales.getText("pisell2.pro.selector.validate.max-quantity")(_max),
-            _key: option._key
-          });
-        }
+      if (typeof _min === "number" && quantity < _min) {
+        errors2.push({
+          type: "optionMin",
+          message: import_utils.locales.getText(
+            "pisell2.pro.selector.validate.min-selection"
+          )(_min, _label),
+          _key: option._key
+        });
+      }
+      if (typeof _max === "number" && quantity > _max) {
+        errors2.push({
+          type: "optionMax",
+          message: import_utils.locales.getText(
+            "pisell2.pro.selector.validate.max-selection"
+          )(_max, _label),
+          _key: option._key
+        });
       }
     });
     if (mutexGroups.length > 0) {
@@ -197,7 +245,7 @@ function useSelectionController(props) {
       try {
         await customValidator(values2);
       } catch (e) {
-        const type = (e == null ? void 0 : e.type) === "requireOneOf" ? "requireOneOf" : (e == null ? void 0 : e.type) || "custom";
+        const type = (e == null ? void 0 : e.type) || "custom";
         const message = (e == null ? void 0 : e.message) || "Validation failed";
         errors2.push({ type, message });
       }
@@ -216,26 +264,16 @@ function useSelectionController(props) {
         if (valueType === "primitive") {
           return item.value;
         }
-        const { value, quantity, ...otherFields } = item;
-        const result = { value, ...otherFields };
-        if (showQuantity) {
-          result.quantity = quantity;
-        }
-        return result;
+        return { ...item };
       }
       if (valueType === "primitive") {
         return newNormalizedValues.map((item) => item.value);
       }
       return newNormalizedValues.map((item) => {
-        const { value, quantity, ...otherFields } = item;
-        const result = { value, ...otherFields };
-        if (showQuantity) {
-          result.quantity = quantity;
-        }
-        return result;
+        return { ...item };
       });
     },
-    [mode, valueType, showQuantity]
+    [mode, valueType, quantityInfo.showQuantity]
   );
   const _onChange = (0, import_react.useCallback)(
     (optionKey, data) => {
@@ -256,7 +294,7 @@ function useSelectionController(props) {
         } else {
           const newItem = {
             value: optionKey,
-            quantity: 1,
+            quantity: data.quantity || 1,
             ...data
           };
           if (mode === "single") {
@@ -288,7 +326,10 @@ function useSelectionController(props) {
       setValues(outputValue);
       valuesRef.current = outputValue;
       if (ruleConfig == null ? void 0 : ruleConfig.autoValidate) {
-        validate();
+        try {
+          validate();
+        } catch (error) {
+        }
       }
     },
     [
@@ -319,7 +360,7 @@ function useSelectionController(props) {
       const currentState = getOptionState(optionKey);
       _onChange(optionKey, { quantity: currentState.selected ? 0 : 1 });
     },
-    update: (optionKey, data) => _onChange(optionKey, data),
+    update: (optionKey, payload) => _onChange(optionKey, payload),
     setValue: (value) => setValues(value),
     clear,
     validate,
@@ -331,7 +372,7 @@ function useSelectionController(props) {
       validated,
       values,
       options,
-      showQuantity
+      quantityInfo
     },
     actions
   };

package/lib/pro/Selector/index.js

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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-
@@ -33,7 +34,14 @@ __export(Selector_exports, {
 });
 module.exports = __toCommonJS(Selector_exports);
 var import_Selector = __toESM(require("./Selector"));
+var import_Item = __toESM(require("./Item"));
 var import_SelectorGroup = __toESM(require("./SelectorGroup"));
+__reExport(Selector_exports, require("./types"), module.exports);
 var Selector = import_Selector.default;
 Selector.Group = import_SelectorGroup.default;
+Selector.Item = import_Item.default;
 var Selector_default = Selector;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./types")
+});