@pisell/private-materials 6.8.10 → 6.8.12

package/lib/pro/Selector/Item.js

@@ -0,0 +1,109 @@
+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/Selector/Item.tsx
+var Item_exports = {};
+__export(Item_exports, {
+  default: () => Item_default
+});
+module.exports = __toCommonJS(Item_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("./components");
+var import_usePresetItemProps = __toESM(require("./hooks/usePresetItemProps"));
+var import_Selector = require("./Selector");
+var Item = (props) => {
+  const {
+    actions,
+    dataSource,
+    indicator,
+    numberSelector,
+    optionItemValue,
+    quantityInfo,
+    values,
+    children
+  } = props;
+  const { disabled, mode, variant, itemProps, preset, itemLayout } = (0, import_react.useContext)(import_Selector.SelectorContext);
+  const { mediaProps, cardProps } = (0, import_usePresetItemProps.default)({
+    variant,
+    itemLayout,
+    preset,
+    itemProps,
+    indicator,
+    numberSelector,
+    mode,
+    disabled: disabled || dataSource.disabled,
+    selected: dataSource.selected
+  });
+  const handleClick = () => {
+    if (disabled || dataSource.disabled) return;
+    if (dataSource.selected) {
+      actions.update(dataSource._key, { quantity: 0 });
+    } else {
+      const quantity = dataSource.effectiveMin || 1;
+      actions.update(dataSource._key, { quantity });
+    }
+  };
+  if (variant === "media") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.MediaItem,
+      {
+        ...mediaProps,
+        cover: dataSource.cover,
+        label: dataSource._label,
+        extra: numberSelector,
+        indicator,
+        selected: dataSource.selected,
+        disabled: disabled || dataSource.disabled,
+        onClick: handleClick
+      }
+    );
+  }
+  const renderChildren = () => {
+    var _a;
+    if (typeof (cardProps == null ? void 0 : cardProps.renderContent) === "function") {
+      return (_a = cardProps == null ? void 0 : cardProps.renderContent) == null ? void 0 : _a.call(cardProps, { dataSource });
+    }
+    if ("design" === props.__designMode) {
+      if (children == null || Array.isArray(children) && !children.length) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: "lc-container-placeholder" }, "拖拽组件或模板到这里");
+      }
+    }
+    return children ? children : /* @__PURE__ */ import_react.default.createElement("span", null, dataSource._label);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.CardItem,
+    {
+      ...cardProps,
+      selected: dataSource.selected,
+      disabled: disabled || dataSource.disabled,
+      onClick: handleClick
+    },
+    renderChildren()
+  );
+};
+var Item_default = Item;

package/lib/pro/Selector/Selector.js

@@ -29,34 +29,49 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/pro/Selector/Selector.tsx
 var Selector_exports = {};
 __export(Selector_exports, {
+  SelectorContext: () => SelectorContext,
   default: () => Selector_default
 });
 module.exports = __toCommonJS(Selector_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
 var import_icons = require("@ant-design/icons");
 var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("./locales"));
-var import_components = require("./components");
+var import_Indicator = __toESM(require("./components/Indicator"));
+var import_LayoutContainer = __toESM(require("./components/LayoutContainer"));
+var import_NumericStepper = __toESM(require("../NumericStepper"));
 var import_useSelectionController = __toESM(require("./hooks/useSelectionController"));
+var import_usePresetProps = __toESM(require("./hooks/usePresetProps"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_Item = __toESM(require("./Item"));
 var import_selector = require("./selector.less");
-var ARow = import_antd.Row;
-var ACol = import_antd.Col;
 var ATag = import_antd.Tag;
+var SelectorContext = import_react.default.createContext({
+  disabled: false,
+  mode: "single",
+  itemLayout: "horizontal",
+  valueType: "primitive",
+  variant: "default",
+  itemProps: {},
+  preset: {}
+});
 var Selector = (0, import_react.forwardRef)((props, ref) => {
   var _a, _b, _c;
   const {
     disabled,
-    titleProps,
+    fieldNames,
+    layout,
+    indicatorProps,
+    itemProps,
+    itemLayout = "horizontal",
     mode = "single",
-    valueType = "primitive",
-    variant = "default",
-    grid,
+    preset = {},
     renderItem,
-    item: itemConfig,
     ruleConfig,
-    fieldNames
+    valueType = "primitive",
+    variant = "default"
   } = props;
   const context = (0, import_useEngineContext.default)();
   import_utils.locales.init(
@@ -64,111 +79,128 @@ var Selector = (0, import_react.forwardRef)((props, ref) => {
     ((_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.storage) == null ? void 0 : _c.get("umi_locale")) || "en"
   );
   const { state, actions } = (0, import_useSelectionController.default)(props);
-  const { options, showQuantity, errors, validated } = state;
+  const { options, errors, validated, quantityInfo } = state;
+  const { showQuantity, remainingCount } = quantityInfo;
+  const headerProps = props.headerProps || props.titleProps || {};
+  const presetConfig = (0, import_usePresetProps.default)({
+    mode,
+    preset,
+    itemLayout,
+    variant,
+    layout,
+    indicatorProps
+  });
+  const finalLayout = presetConfig.layout;
+  const finalIndicatorProps = presetConfig.indicatorProps;
   (0, import_react.useImperativeHandle)(ref, () => ({
-    validate: () => {
-      return actions.validate();
-    },
+    validate: actions.validate,
+    reset: actions.reset,
+    clear: actions.clear,
     getErrors: () => {
       return errors || [];
-    },
-    reset: () => {
-      return actions.reset();
-    },
-    clear: () => {
-      return actions.clear();
     }
   }));
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
-  }, []);
+  }, [actions]);
   const renderIndicator = (option, isDefault) => {
-    if (mode === "single") {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Radio,
-        {
-          className: "pisell-selector_radio-trigger",
-          checked: option.selected,
-          disabled: disabled || option.disabled,
-          onChange: (e) => {
-            e.stopPropagation();
-            if (option.selected) {
-              actions.update(option._key, { quantity: 0 });
-            } else {
-              actions.update(option._key, {});
-            }
-          },
-          children: isDefault ? option._label : void 0
-        }
-      );
-    } else {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Checkbox,
-        {
-          className: "pisell-selector_checkbox-trigger",
-          checked: option.selected,
-          disabled: disabled || option.disabled,
-          onChange: (e) => {
-            e.stopPropagation();
-            actions.toggle(option._key);
-          },
-          children: isDefault ? option._label : void 0
-        }
-      );
+    var _a2;
+    const { show = true, render, ...rest } = finalIndicatorProps || {};
+    if ((finalIndicatorProps == null ? void 0 : finalIndicatorProps.show) === false) return null;
+    if (import_react.default.isValidElement(finalIndicatorProps == null ? void 0 : finalIndicatorProps.render)) {
+      return finalIndicatorProps == null ? void 0 : finalIndicatorProps.render;
+    }
+    if (typeof (finalIndicatorProps == null ? void 0 : finalIndicatorProps.render) === "function") {
+      return (_a2 = finalIndicatorProps == null ? void 0 : finalIndicatorProps.render) == null ? void 0 : _a2.call(finalIndicatorProps, {
+        option,
+        selected: option.selected,
+        disabled: disabled || option.disabled,
+        actions,
+        ...rest
+      });
     }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Indicator.default,
+      {
+        ...rest,
+        mode,
+        checked: option.selected,
+        disabled: disabled || option.disabled,
+        onChange: (e) => {
+          if (e.target.checked) {
+            actions.update(option._key, { quantity: 1 });
+          } else {
+            actions.update(option._key, { quantity: 0 });
+          }
+        },
+        children: isDefault ? option._label : void 0
+      }
+    );
   };
   const renderQuantitySelector = (option) => {
-    var _a2, _b2;
     if (valueType === "primitive") return null;
-    if (!showQuantity) return null;
+    if (props.showStepper === false) return null;
+    if ((props.showStepper === "auto" || props.showStepper === void 0) && !showQuantity)
+      return null;
     return /* @__PURE__ */ import_react.default.createElement(
-      import_components.NumericStepper,
+      import_NumericStepper.default,
       {
-        min: ((_a2 = option == null ? void 0 : option.ruleConfig) == null ? void 0 : _a2.min) ?? 0,
-        max: ((_b2 = option == null ? void 0 : option.ruleConfig) == null ? void 0 : _b2.max) ?? Number.MAX_SAFE_INTEGER,
+        ...props.stepperProps || {},
+        min: option.effectiveMin,
+        max: option.effectiveMax,
         value: option.quantity,
         disabled: disabled || option.disabled,
-        onChange: (value) => actions.update(option._key, { quantity: value })
+        onChange: (value) => {
+          actions.update(option._key, { quantity: value });
+        },
+        showInput: true
       }
     );
   };
   const renderOption = (option) => {
-    const { disabled: optionDisabled } = option;
-    const handleClick = () => {
-      if (disabled || optionDisabled) return;
-      actions.toggle(option._key);
-    };
-    if (renderItem) {
+    var _a2, _b2;
+    const optionItemValue = Array.isArray(state.values) ? state.values.find((item) => (item == null ? void 0 : item.value) === option._key) : [state.values].find((item) => (item == null ? void 0 : item.value) === option._key);
+    if (import_react.default.isValidElement(renderItem)) {
+      return renderItem;
+    }
+    const configMin = ((_a2 = option == null ? void 0 : option.ruleConfig) == null ? void 0 : _a2.min) ?? 0;
+    const groupMin = (ruleConfig == null ? void 0 : ruleConfig.min) ?? 0;
+    const effectiveMin = options.length < 2 && groupMin > 0 ? groupMin : configMin;
+    const configMax = ((_b2 = option == null ? void 0 : option.ruleConfig) == null ? void 0 : _b2.max) ?? Number.MAX_SAFE_INTEGER;
+    const effectiveMax = remainingCount !== void 0 ? Math.min(remainingCount + (option.quantity || 0), configMax) : configMax;
+    option.effectiveMin = effectiveMin;
+    option.effectiveMax = effectiveMax;
+    if (typeof renderItem === "function") {
       return renderItem({
         dataSource: option,
         actions,
-        trigger: renderIndicator(option),
+        optionItemValue,
+        indicator: renderIndicator(option),
         numberSelector: renderQuantitySelector(option),
-        onClick: handleClick
+        values: state.values,
+        quantityInfo
       });
     }
-    if (!variant || variant === "default") {
-      return renderIndicator(option, true);
-    }
     const numberSelector = renderQuantitySelector(option);
-    const trigger = renderIndicator(option);
+    const indicator = renderIndicator(option);
     return /* @__PURE__ */ import_react.default.createElement(
-      import_components.CardItem,
+      import_Item.default,
       {
-        ...itemConfig,
         key: option._key,
         dataSource: option,
-        selected: option.selected,
-        disabled: disabled || option.disabled,
-        trigger,
+        actions,
+        indicator,
         numberSelector,
-        onClick: handleClick
+        optionItemValue,
+        quantityInfo,
+        values: state.values
       }
     );
   };
   const renderOptions = () => {
-    if (variant === "select" && valueType === "primitive") {
+    if (variant === "select") {
       const _value = state.values;
+      const _maxCount = ruleConfig == null ? void 0 : ruleConfig.max;
       return /* @__PURE__ */ import_react.default.createElement(
         import_antd.Select,
         {
@@ -179,32 +211,33 @@ var Selector = (0, import_react.forwardRef)((props, ref) => {
           fieldNames,
           value: _value,
           onChange: (value) => actions.setValue(value),
-          disabled
+          disabled,
+          maxTagCount: _maxCount
         }
       );
     }
-    if (grid) {
-      const {
-        columns = 1,
-        align,
-        gutter = 16,
-        justify,
-        wrap,
-        colConfig = {}
-      } = grid;
-      return /* @__PURE__ */ import_react.default.createElement(ARow, { gutter, justify, align, wrap }, options.map((option) => /* @__PURE__ */ import_react.default.createElement(ACol, { key: option._key, span: 24 / columns, ...colConfig }, renderOption(option))));
-    }
-    return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, options.map(renderOption));
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_LayoutContainer.default,
+      {
+        className: "pisell-pro-selector_options-container",
+        config: finalLayout
+      },
+      options.map(renderOption)
+    );
   };
   const renderErrorMsg = () => {
     if (!(errors == null ? void 0 : errors.length)) return null;
-    return /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#D92D20" } }, errors[0].message);
+    const error = errors[errors.length - 1];
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#D92D20" } }, error == null ? void 0 : error.message);
   };
   const renderRequiredTag = () => {
     const { required = false } = ruleConfig || {};
     if (!required) return null;
     const style = { borderRadius: 16 };
-    if (errors.find((item) => item.type === "required")) {
+    const requiredError = errors.find(
+      (item) => item.type === "required" || item.type === "min"
+    );
+    if (requiredError) {
       return /* @__PURE__ */ import_react.default.createElement(ATag, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleOutlined, null), color: "error", style }, import_utils.locales.getText("pisell2.pro.selector.required-tag"));
     }
     if (validated) {
@@ -214,10 +247,10 @@ var Selector = (0, import_react.forwardRef)((props, ref) => {
   };
   const renderTip = () => {
     var _a2, _b2, _c2;
-    if (((_a2 = titleProps == null ? void 0 : titleProps.tip) == null ? void 0 : _a2.visible) === false) return null;
-    let text = (_b2 = titleProps == null ? void 0 : titleProps.tip) == null ? void 0 : _b2.text;
+    if (((_a2 = headerProps == null ? void 0 : headerProps.tip) == null ? void 0 : _a2.visible) === false) return null;
+    let text = (_b2 = headerProps == null ? void 0 : headerProps.tip) == null ? void 0 : _b2.text;
     if ((ruleConfig == null ? void 0 : ruleConfig.min) || (ruleConfig == null ? void 0 : ruleConfig.max)) {
-      text = import_utils.locales.getText("pisell2.pro.selector.validate.min-max-selection")(
+      text = import_utils.locales.getText("pisell2.pro.selector.tip.min-max-selection")(
         ruleConfig == null ? void 0 : ruleConfig.min,
         ruleConfig == null ? void 0 : ruleConfig.max
       );
@@ -226,39 +259,86 @@ var Selector = (0, import_react.forwardRef)((props, ref) => {
       if (mode === "multiple") {
         text = import_utils.locales.getText("pisell2.pro.selector.mode.multiple");
       } else {
-        text = import_utils.locales.getText("pisell2.pro.selector.mode.single");
+        text = import_utils.locales.getText("pisell2.pro.selector.tip.require-one-option");
       }
     }
     if (!text) return null;
-    return /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#475467", ...(_c2 = titleProps == null ? void 0 : titleProps.tip) == null ? void 0 : _c2.style } }, "(", text, ")");
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "pisell-pro-selector_tip",
+        style: { ...((_c2 = headerProps == null ? void 0 : headerProps.tip) == null ? void 0 : _c2.style) || {} }
+      },
+      "(",
+      text,
+      ")"
+    );
   };
-  const renderTitle = () => {
+  const renderHeader = () => {
     var _a2, _b2, _c2, _d, _e, _f, _g, _h;
-    if ((titleProps == null ? void 0 : titleProps.visible) === false) return null;
+    if ((headerProps == null ? void 0 : headerProps.visible) === false) return null;
+    const _extraContent = (headerProps == null ? void 0 : headerProps.renderExtra) ? headerProps == null ? void 0 : headerProps.renderExtra({
+      dataSource: options,
+      values: state.values
+    }) : null;
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
+        className: "pisell-pro-selector_header",
         style: {
-          marginBottom: 12,
-          display: "flex",
-          alignItems: "center",
-          ...(titleProps == null ? void 0 : titleProps.style) || {}
+          ...(headerProps == null ? void 0 : headerProps.style) || {}
         }
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 } }, ((_a2 = titleProps == null ? void 0 : titleProps.icon) == null ? void 0 : _a2.visible) === false || !((_b2 = titleProps == null ? void 0 : titleProps.icon) == null ? void 0 : _b2.icon) ? null : /* @__PURE__ */ import_react.default.createElement("span", { style: (_c2 = titleProps == null ? void 0 : titleProps.icon) == null ? void 0 : _c2.style }, (_d = titleProps == null ? void 0 : titleProps.icon) == null ? void 0 : _d.icon), ((_e = titleProps == null ? void 0 : titleProps.title) == null ? void 0 : _e.visible) === false || !((_f = titleProps == null ? void 0 : titleProps.title) == null ? void 0 : _f.text) && !props.title ? null : /* @__PURE__ */ import_react.default.createElement(
-        "span",
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-selector_header-content-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
         {
-          style: {
-            fontSize: 16,
-            fontWeight: 600,
-            ...((_g = titleProps == null ? void 0 : titleProps.title) == null ? void 0 : _g.style) || {}
-          }
+          className: "pisell-pro-selector_header-content",
+          style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }
         },
-        ((_h = titleProps == null ? void 0 : titleProps.title) == null ? void 0 : _h.text) ?? props.title
-      ), renderTip(), renderErrorMsg()),
-      renderRequiredTag()
+        ((_a2 = headerProps == null ? void 0 : headerProps.icon) == null ? void 0 : _a2.visible) === false || !((_b2 = headerProps == null ? void 0 : headerProps.icon) == null ? void 0 : _b2.icon) ? null : /* @__PURE__ */ import_react.default.createElement("span", { style: (_c2 = headerProps == null ? void 0 : headerProps.icon) == null ? void 0 : _c2.style }, (_d = headerProps == null ? void 0 : headerProps.icon) == null ? void 0 : _d.icon),
+        ((_e = headerProps == null ? void 0 : headerProps.title) == null ? void 0 : _e.visible) === false || !((_f = headerProps == null ? void 0 : headerProps.title) == null ? void 0 : _f.text) && !props.title ? null : /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: "pisell-pro-selector_header-content-title",
+            style: {
+              ...((_g = headerProps == null ? void 0 : headerProps.title) == null ? void 0 : _g.style) || {}
+            }
+          },
+          ((_h = headerProps == null ? void 0 : headerProps.title) == null ? void 0 : _h.text) ?? props.title
+        ),
+        renderRequiredTag()
+      ), renderTip()),
+      _extraContent
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { id: `pisell-pro-selector-${props.id}`, style: { width: "100%" } }, renderTitle(), renderOptions());
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: `pisell-pro-selector-${props.id}`,
+      className: (0, import_classnames.default)("pisell-pro-selector", props.className),
+      style: props.style
+    },
+    renderHeader(),
+    renderErrorMsg(),
+    /* @__PURE__ */ import_react.default.createElement(
+      SelectorContext.Provider,
+      {
+        value: {
+          mode,
+          disabled,
+          valueType,
+          variant,
+          itemLayout,
+          itemProps,
+          preset
+        }
+      },
+      renderOptions()
+    )
+  );
 });
 var Selector_default = Selector;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectorContext
+});