@pisell/private-materials 6.8.11 → 6.8.12

package/lib/pro/Selector/SelectorGroup.js

@@ -33,6 +33,7 @@ __export(SelectorGroup_exports, {
 });
 module.exports = __toCommonJS(SelectorGroup_exports);
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_lodash = require("lodash");
 var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("./locales"));
@@ -43,6 +44,7 @@ var import_IntersectionObserver = require("./components/IntersectionObserver");
 var import_CategoryTabs = __toESM(require("../../plus/productSelect/CategoryTabs"));
 var import_utils3 = require("../../plus/productSelect/utils");
 var import_selectorGroup = require("./selectorGroup.less");
+var DEFAULT_DATASOURCE = [];
 var SelectorGroup = (0, import_react.forwardRef)(
   (props, ref) => {
     var _a, _b, _c, _d;
@@ -52,15 +54,16 @@ var SelectorGroup = (0, import_react.forwardRef)(
       ((_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 {
-      dataSource,
       linkageRules,
       allowedValuesPolicy = "strict",
-      preserve: preserveDefault = false
+      preserve: preserveDefault = false,
+      style
     } = props;
     const [activeIndex, setActiveIndex] = (0, import_react.useState)(-1);
     const isManualChangeIndexRef = (0, import_react.useRef)(false);
     const containerRef = (0, import_react.useRef)(null);
-    const _uniqueId = (0, import_react.useMemo)(() => (0, import_utils2.generateSimpleUUID)(), []);
+    const uniqueIdRef = (0, import_react.useRef)((0, import_utils2.generateSimpleUUID)().substring(0, 8));
+    const _uniqueId = uniqueIdRef.current;
     const groupRefs = (0, import_react.useRef)({});
     const reducer = (state2, action) => {
       switch (action.type) {
@@ -98,6 +101,22 @@ var SelectorGroup = (0, import_react.forwardRef)(
       () => (0, import_utils2.computeAutoHiddenGroups)(normalizedRules),
       [normalizedRules]
     );
+    const dataSource = (0, import_react.useMemo)(() => {
+      if (Array.isArray(props.dataSource)) {
+        return props.dataSource.filter(
+          (item) => !!item && item.id !== void 0
+        );
+      }
+      return DEFAULT_DATASOURCE;
+    }, [props.dataSource]);
+    const stateRef = (0, import_react.useRef)(state);
+    const dataSourceRef = (0, import_react.useRef)(dataSource);
+    (0, import_react.useEffect)(() => {
+      stateRef.current = state;
+    }, [state]);
+    (0, import_react.useEffect)(() => {
+      dataSourceRef.current = dataSource;
+    }, [dataSource]);
     const hasInitializedVisibilityRef = (0, import_react.useRef)(false);
     (0, import_react.useEffect)(() => {
       if (!hasInitializedVisibilityRef.current && (!state.visibleGroups || Object.keys(state.visibleGroups).length === 0)) {
@@ -203,16 +222,9 @@ var SelectorGroup = (0, import_react.forwardRef)(
       },
       [dataSource, state.visibleGroups, preserveDefault, state.values]
     );
-    const dataSourceStableKey = (0, import_react.useMemo)(() => {
-      try {
-        return JSON.stringify(dataSource ?? null);
-      } catch {
-        return String((dataSource || []).length);
-      }
-    }, [dataSource]);
     (0, import_react.useEffect)(() => {
       applyValues({ ...state.values || {} });
-    }, [dataSourceStableKey, normalizedRules, allowedValuesPolicy]);
+    }, [dataSource, normalizedRules, allowedValuesPolicy]);
     (0, import_react.useEffect)(() => {
       const external = props == null ? void 0 : props.value;
       if (external && typeof external === "object") {
@@ -231,63 +243,149 @@ var SelectorGroup = (0, import_react.forwardRef)(
       },
       [state.values, applyValues]
     );
-    (0, import_react.useImperativeHandle)(ref, () => ({
-      getValues: (includeHidden) => getValuesInternal(includeHidden),
-      setValues: (values) => {
-        applyValues({ ...values || {} });
+    const _categories = (0, import_react.useMemo)(() => {
+      return dataSource.filter((item) => state.visibleGroups[String(item.id ?? "")] !== false).map((item) => {
+        return { ...item, key: String(item.id ?? ""), label: item.title };
+      });
+    }, [dataSource, state.visibleGroups]);
+    const debounceIndicator = (0, import_react.useCallback)((delay) => {
+      isManualChangeIndexRef.current = true;
+      const timeoutId = setTimeout(() => {
+        isManualChangeIndexRef.current = false;
+      }, delay);
+      return () => clearTimeout(timeoutId);
+    }, []);
+    const switchCategory = (0, import_react.useCallback)(
+      (key) => {
+        const _idx = _categories.findIndex((item) => item.key === key);
+        setActiveIndex(_idx);
+        debounceIndicator(300);
+        const categoryIndex = dataSource.findIndex(
+          (item) => String(item.id) === key
+        );
+        let _scrollParent = null;
+        if (typeof props.customScrollParent === "string") {
+          _scrollParent = document.querySelector(
+            props.customScrollParent
+          );
+        } else {
+          _scrollParent = props.customScrollParent || containerRef.current;
+        }
+        if (!_scrollParent || !containerRef.current) return;
+        const target = document.getElementById(`pisell-pro-selector-${key}`);
+        if (!target) return;
+        const batchSelectorWrapper = document.querySelector(
+          `.pisell-batch-selector-${_uniqueId}`
+        );
+        const tabsWrapper = document.getElementById(
+          `pisell-batch-selector-${_uniqueId}_tabs`
+        );
+        const tabsHeight = (tabsWrapper == null ? void 0 : tabsWrapper.offsetHeight) || 0;
+        const extraOffset = 0;
+        if (categoryIndex === 0) {
+          if (batchSelectorWrapper) {
+            const wrapperOffsetTop = (0, import_utils3.getOffsetTopRelativeToScrollContainer)(
+              batchSelectorWrapper,
+              _scrollParent
+            );
+            _scrollParent.scrollTop = wrapperOffsetTop - extraOffset;
+          }
+          return;
+        } else {
+          const listOffsetTop = (0, import_utils3.getOffsetTopRelativeToScrollContainer)(
+            target,
+            _scrollParent
+          );
+          _scrollParent.scrollTop = listOffsetTop - tabsHeight - extraOffset;
+        }
       },
-      validate: async () => {
-        const tasks = Object.keys(groupRefs.current).map(async (gid) => {
-          if (state.visibleGroups[gid] === false)
-            return { gid, ok: true, errors: [] };
-          const inst = groupRefs.current[gid];
-          if (inst == null ? void 0 : inst.validate) {
+      [
+        _categories,
+        dataSource,
+        debounceIndicator,
+        props.customScrollParent,
+        _uniqueId
+      ]
+    );
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        getValues: (includeHidden) => getValuesInternal(includeHidden),
+        setValues: (values) => {
+          applyValues({ ...values || {} });
+        },
+        validate: async () => {
+          const currentDataSource = dataSourceRef.current || [];
+          const currentVisibleGroups = stateRef.current.visibleGroups;
+          const validateGroup = async (ds) => {
+            const gid = String(ds.id ?? "");
+            const successResult = { gid, ok: true, errors: [] };
+            if (currentVisibleGroups[gid] === false) {
+              return successResult;
+            }
+            const inst = groupRefs.current[gid];
+            if (!(inst == null ? void 0 : inst.validate)) {
+              return successResult;
+            }
             try {
               await inst.validate();
-              return { gid, ok: true, errors: [] };
+              return successResult;
             } catch (errors) {
               return {
                 gid,
                 ok: false,
-                errors: Array.isArray(errors) ? errors : []
+                errors: Array.isArray(errors) ? errors : errors ? [errors] : []
               };
             }
+          };
+          const results = await Promise.all(
+            currentDataSource.map(validateGroup)
+          );
+          const errorsByGroup = {};
+          let firstErrorGID;
+          for (const result of results) {
+            if (!result.ok && result.errors.length > 0) {
+              errorsByGroup[result.gid] = result.errors;
+              if (!firstErrorGID) {
+                firstErrorGID = result.gid;
+              }
+            }
           }
-          return { gid, ok: true, errors: [] };
-        });
-        const results = await Promise.all(tasks);
-        const errorsByGroup = {};
-        results.forEach((r) => {
-          if (!r.ok && r.errors && r.errors.length > 0) {
-            errorsByGroup[r.gid] = r.errors;
+          const hasErrors = Object.keys(errorsByGroup).length > 0;
+          if (hasErrors) {
+            if (props.scrollToFirstError !== false && firstErrorGID) {
+              switchCategory(firstErrorGID);
+            }
+            return Promise.reject(errorsByGroup);
           }
-        });
-        const hasErrors = Object.keys(errorsByGroup).length > 0;
-        if (hasErrors) {
-          return Promise.reject(errorsByGroup);
-        } else {
           return Promise.resolve({});
+        },
+        reset: () => {
+          const nextValues = (props == null ? void 0 : props.defaultValue) || {};
+          applyValues({ ...nextValues || {} });
+          Object.keys(groupRefs.current).forEach((gid) => {
+            var _a2;
+            const inst = groupRefs.current[gid];
+            (_a2 = inst == null ? void 0 : inst.reset) == null ? void 0 : _a2.call(inst);
+          });
+        },
+        clear: () => {
+          applyValues({});
+          Object.keys(groupRefs.current).forEach((gid) => {
+            var _a2;
+            const inst = groupRefs.current[gid];
+            (_a2 = inst == null ? void 0 : inst.clear) == null ? void 0 : _a2.call(inst);
+          });
         }
-      },
-      reset: () => {
-        const nextValues = (props == null ? void 0 : props.defaultValue) || {};
-        applyValues({ ...nextValues || {} });
-        Object.keys(groupRefs.current).forEach((gid) => {
-          var _a2;
-          const inst = groupRefs.current[gid];
-          (_a2 = inst == null ? void 0 : inst.reset) == null ? void 0 : _a2.call(inst);
-        });
-      },
-      clear: () => {
-        applyValues({});
-        Object.keys(groupRefs.current).forEach((gid) => {
-          var _a2;
-          const inst = groupRefs.current[gid];
-          (_a2 = inst == null ? void 0 : inst.clear) == null ? void 0 : _a2.call(inst);
-        });
-      }
-    }));
-    if (!Array.isArray(dataSource)) return null;
+      }),
+      [
+        getValuesInternal,
+        applyValues,
+        props.scrollToFirstError,
+        props == null ? void 0 : props.defaultValue,
+        switchCategory
+      ]
+    );
     const patchedDataSourceMap = (0, import_react.useMemo)(() => {
       const map = {};
       (dataSource || []).forEach((group) => {
@@ -334,61 +432,14 @@ var SelectorGroup = (0, import_react.forwardRef)(
       });
       return { titleTipMap, customValidatorMap };
     }, [dataSource, state.optionEffects, state.values]);
-    const _categories = (0, import_react.useMemo)(() => {
-      return dataSource.filter((item) => state.visibleGroups[String(item.id ?? "")] !== false).map((item) => {
-        return { ...item, key: String(item.id ?? ""), label: item.title };
-      });
-    }, [dataSource, state.visibleGroups]);
-    const debounceIndicator = (0, import_react.useCallback)((delay) => {
-      isManualChangeIndexRef.current = true;
-      const timeoutId = setTimeout(() => {
-        isManualChangeIndexRef.current = false;
-      }, delay);
-      return () => clearTimeout(timeoutId);
-    }, []);
     const activeKey = (0, import_react.useMemo)(() => {
       var _a2;
       return (_a2 = _categories[activeIndex]) == null ? void 0 : _a2.key;
     }, [activeIndex, _categories]);
-    const switchCategory = (key) => {
-      const _idx = _categories.findIndex((item) => item.key === key);
-      setActiveIndex(_idx);
-      debounceIndicator(300);
-      const categoryIndex = dataSource.findIndex(
-        (item) => String(item.id) === key
-      );
-      const _scrollParent = props.customScrollParent || containerRef.current;
-      if (!_scrollParent || !containerRef.current) return;
-      const target = document.getElementById(`pisell-pro-selector-${key}`);
-      if (!target) return;
-      const batchSelectorWrapper = document.querySelector(
-        `.pisell-batch-selector-${_uniqueId}`
-      );
-      const tabsWrapper = document.getElementById(
-        `pisell-batch-selector-${_uniqueId}_tabs`
-      );
-      const tabsHeight = (tabsWrapper == null ? void 0 : tabsWrapper.offsetHeight) || 0;
-      const extraOffset = 0;
-      if (categoryIndex === 0) {
-        if (batchSelectorWrapper) {
-          const wrapperOffsetTop = (0, import_utils3.getOffsetTopRelativeToScrollContainer)(
-            batchSelectorWrapper,
-            _scrollParent
-          );
-          _scrollParent.scrollTop = wrapperOffsetTop - extraOffset;
-        }
-        return;
-      } else {
-        const listOffsetTop = (0, import_utils3.getOffsetTopRelativeToScrollContainer)(
-          target,
-          _scrollParent
-        );
-        _scrollParent.scrollTop = listOffsetTop - tabsHeight - extraOffset;
-      }
-    };
     const renderTabs = () => {
       var _a2;
       if (((_a2 = props.tabProps) == null ? void 0 : _a2.visible) === false) return null;
+      if ((props.dataSource || []).length <= 1) return null;
       return /* @__PURE__ */ import_react.default.createElement(
         import_CategoryTabs.default,
         {
@@ -401,11 +452,66 @@ var SelectorGroup = (0, import_react.forwardRef)(
         }
       );
     };
+    const _content = (0, import_react.useMemo)(() => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-batch-selector__content` }, dataSource.filter(
+        (item) => state.visibleGroups[String(item.id ?? "")] !== false
+      ).map((item, index) => {
+        var _a2, _b2;
+        const gid = String(item.id ?? "");
+        const headerProps = item.headerProps || item.titleProps || {};
+        return /* @__PURE__ */ import_react.default.createElement(import_IntersectionObserver.IntersectionItem, { key: gid, index }, /* @__PURE__ */ import_react.default.createElement(
+          import_Selector.default,
+          {
+            ...item,
+            ref: (el) => {
+              if (el) {
+                groupRefs.current[gid] = el;
+              } else {
+                delete groupRefs.current[gid];
+              }
+            },
+            value: (_a2 = state.values) == null ? void 0 : _a2[gid],
+            onChange: (v) => {
+              var _a3;
+              handleGroupChange(gid, v);
+              (_a3 = item.onChange) == null ? void 0 : _a3.call(item, v);
+            },
+            ruleConfig: {
+              ...item.ruleConfig,
+              customValidator: validationMaps.customValidatorMap[gid]
+            },
+            dataSource: patchedDataSourceMap[gid],
+            headerProps: {
+              ...headerProps,
+              ...validationMaps.titleTipMap[gid] === void 0 ? {} : {
+                tip: {
+                  ...(headerProps == null ? void 0 : headerProps.tip) || {},
+                  text: validationMaps.titleTipMap[gid],
+                  visible: ((_b2 = headerProps == null ? void 0 : headerProps.tip) == null ? void 0 : _b2.visible) ?? true
+                }
+              }
+            }
+          }
+        ));
+      }));
+    }, [
+      dataSource,
+      state.visibleGroups,
+      state.values,
+      patchedDataSourceMap,
+      validationMaps,
+      groupRefs,
+      handleGroupChange
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: `pisell-batch-selector pisell-batch-selector-${_uniqueId}`,
-        ref: containerRef
+        className: (0, import_classnames.default)(
+          "pisell-batch-selector",
+          `pisell-batch-selector-${_uniqueId}`
+        ),
+        ref: containerRef,
+        style
       },
       renderTabs(),
       /* @__PURE__ */ import_react.default.createElement(
@@ -420,42 +526,7 @@ var SelectorGroup = (0, import_react.forwardRef)(
             }
           }
         },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-batch-selector__content` }, dataSource.filter(
-          (item) => state.visibleGroups[String(item.id ?? "")] !== false
-        ).map((item, index) => {
-          var _a2, _b2, _c2, _d2, _e, _f;
-          const gid = String(item.id ?? "");
-          return /* @__PURE__ */ import_react.default.createElement(import_IntersectionObserver.IntersectionItem, { key: gid, index }, /* @__PURE__ */ import_react.default.createElement(
-            import_Selector.default,
-            {
-              ...item,
-              ref: (el) => {
-                if (el) {
-                  groupRefs.current[gid] = el;
-                } else {
-                  delete groupRefs.current[gid];
-                }
-              },
-              value: (_a2 = state.values) == null ? void 0 : _a2[gid],
-              onChange: (v) => handleGroupChange(gid, v),
-              ruleConfig: {
-                ...item.ruleConfig,
-                customValidator: validationMaps.customValidatorMap[gid]
-              },
-              dataSource: patchedDataSourceMap[gid],
-              titleProps: {
-                ...(item == null ? void 0 : item.titleProps) || {},
-                ...validationMaps.titleTipMap[gid] === void 0 ? {} : {
-                  tip: {
-                    ...((_b2 = item == null ? void 0 : item.titleProps) == null ? void 0 : _b2.tip) || {},
-                    text: validationMaps.titleTipMap[gid],
-                    visible: ((_d2 = (_c2 = item == null ? void 0 : item.titleProps) == null ? void 0 : _c2.tip) == null ? void 0 : _d2.visible) !== void 0 ? (_f = (_e = item == null ? void 0 : item.titleProps) == null ? void 0 : _e.tip) == null ? void 0 : _f.visible : true
-                  }
-                }
-              }
-            }
-          ));
-        }))
+        _content
       )
     );
   }

package/lib/pro/Selector/components/Card/index.js

@@ -38,77 +38,92 @@ var import_index = require("./index.less");
 var stopPropagation = (e) => {
   e.stopPropagation();
 };
-var CardItem = ({
-  dataSource,
-  disabled,
-  selected,
-  bordered = true,
+var Card = ({
+  variant = "outlined",
   layout = "horizontal",
-  selectedTypeVariant = "default",
-  selectedIcon,
-  style,
+  actions,
+  actionsPosition = "right",
+  corner,
+  children,
+  selected = false,
+  disabled = false,
+  hoverable = false,
   onClick,
-  renderContent,
-  trigger,
-  numberSelector
+  styles,
+  selectedType = "outlined",
+  className,
+  style
 }) => {
-  const isMinimalMode = typeof renderContent !== "function";
-  const isCorneredLayout = layout === "vertical" && selectedTypeVariant === "cornered";
-  const _renderMainContent = () => {
-    if (typeof renderContent === "function") {
-      return renderContent(dataSource);
-    }
-    const contentClass = (0, import_classnames.default)("pisell-selector_card-content", {
-      "content-start": selectedIcon || numberSelector
-    });
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: contentClass }, (dataSource == null ? void 0 : dataSource._label) || "");
+  const styleProps = {
+    selected,
+    disabled,
+    hoverable,
+    variant,
+    layout
   };
-  const _renderExtra = () => {
-    let controller = null;
-    if (numberSelector) {
-      controller = numberSelector;
-    } else {
-      if (isMinimalMode) {
-        controller = selectedIcon && selected ? /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-selector_card-selected-icon" }, selectedIcon) : null;
-      } else {
-        controller = isCorneredLayout ? null : trigger;
-      }
-    }
-    if (!controller) return null;
-    const controllerClass = (0, import_classnames.default)("pisell-selector_card-extra", {
-      "extra-horizontal": layout === "horizontal",
-      "extra-vertical": layout === "vertical"
-    });
+  const containerStyle = (0, import_react.useMemo)(() => {
+    if (!(styles == null ? void 0 : styles.container)) return style;
+    const customStyle = typeof styles.container === "function" ? styles.container(styleProps) : styles.container;
+    return { ...customStyle, ...style };
+  }, [styles == null ? void 0 : styles.container, style, styleProps]);
+  const contentStyle = (0, import_react.useMemo)(() => {
+    if (!(styles == null ? void 0 : styles.content)) return void 0;
+    return typeof styles.content === "function" ? styles.content(styleProps) : styles.content;
+  }, [styles == null ? void 0 : styles.content, styleProps]);
+  const actionsStyle = (0, import_react.useMemo)(() => {
+    if (!(styles == null ? void 0 : styles.actions)) return void 0;
+    return typeof styles.actions === "function" ? styles.actions(styleProps) : styles.actions;
+  }, [styles == null ? void 0 : styles.actions, styleProps]);
+  const cornerStyle = (0, import_react.useMemo)(() => {
+    if (!(styles == null ? void 0 : styles.corner)) return void 0;
+    return typeof styles.corner === "function" ? styles.corner(styleProps) : styles.corner;
+  }, [styles == null ? void 0 : styles.corner, styleProps]);
+  const renderActions = () => {
+    if (!actions) return null;
+    let _actions = Array.isArray(actions) ? actions.filter(Boolean) : [actions];
+    if (_actions.length === 0) return null;
+    return /* @__PURE__ */ import_react.default.createElement("ul", { className: "pisell-pro-card_actions", style: actionsStyle }, actions.map((action, index) => /* @__PURE__ */ import_react.default.createElement("li", { key: index, className: "pisell-pro-card_actions-item" }, /* @__PURE__ */ import_react.default.createElement("span", { onClick: stopPropagation }, action))));
+  };
+  const renderCorner = () => {
+    if (!corner || layout !== "vertical") return null;
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: controllerClass,
-        onClick: numberSelector ? stopPropagation : void 0
+        className: "pisell-pro-card_corner",
+        style: cornerStyle,
+        onClick: stopPropagation
       },
-      controller
+      corner
     );
   };
-  const _renderCorneredTrigger = () => {
-    if (isMinimalMode || !isCorneredLayout || !trigger) return null;
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-selector_card-trigger-cornered" }, trigger);
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick(e);
   };
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      onClick,
-      style,
-      className: (0, import_classnames.default)("pisell-selector_card-item", {
-        [`pisell-selector_card-item-${layout}`]: layout,
-        [`selected-${selectedTypeVariant}`]: selected,
-        bordered,
-        disabled,
-        "has-extra": numberSelector || trigger,
-        "cornered-layout": isCorneredLayout
-      })
+      className: (0, import_classnames.default)(
+        "pisell-pro-card",
+        `pisell-pro-card-${variant}`,
+        `pisell-pro-card-${layout}`,
+        {
+          "pisell-pro-card-selected": selected,
+          [`pisell-pro-card-selected-${selectedType}`]: selected && selectedType !== "none",
+          "pisell-pro-card-disabled": disabled,
+          "pisell-pro-card-hoverable": hoverable && !disabled,
+          "pisell-pro-card-clickable": onClick && !disabled,
+          [`pisell-pro-card-actions-${actionsPosition}`]: layout === "horizontal" && actions
+        },
+        className
+      ),
+      style: containerStyle,
+      onClick: handleClick
     },
-    _renderCorneredTrigger(),
-    _renderMainContent(),
-    _renderExtra()
+    layout === "horizontal" && actionsPosition === "left" && renderActions(),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-card_content", style: contentStyle }, children),
+    (layout === "vertical" || actionsPosition === "right") && renderActions(),
+    renderCorner()
   );
 };
-var Card_default = CardItem;
+var Card_default = Card;