@pisell/private-materials 6.3.58 → 6.3.60

package/lib/pro/Selector/hooks/usePresetItemProps.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ItemProps, ItemLayout, SelectorVariant, PresetConfig } from '../types';
+interface UsePresetItemPropsParams {
+    variant?: SelectorVariant;
+    itemLayout?: ItemLayout;
+    preset?: PresetConfig;
+    itemProps?: ItemProps;
+    indicator: React.ReactNode;
+    numberSelector: React.ReactNode;
+    mode?: 'single' | 'multiple';
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface PresetItemPropsResult {
+    mediaProps: Record<string, any>;
+    cardProps: Record<string, any>;
+}
+/**
+ * 根据预设项生成 option Item 的 props
+ *
+ * 规则说明：
+ * 1. variant='default': 使用 Card，borderless，horizontal，selectedType='none'，actionsPosition='left'
+ *    1.1 preset.variant='1': renderContent={() => <span>{dataSource._label}</span>}
+ *    1.2 preset.variant='2': renderContent={() => <span>{dataSource._label}</span>}
+ * 2. variant='media': 使用 MediaItem
+ *    2.1 preset.variant='1': size='small', showIndicator=false, 单选shape='circle'，多选shape='square'
+ *    2.2 preset.variant='2': size='large', showIndicator=true, shape='circle'
+ * 3. variant='card': 根据 itemLayout 区分横向和纵向
+ *    3.1 横向（horizontal）:
+ *        - preset.variant='2': selectedType='filled'
+ *        - preset.variant='5': variant='borderless'
+ *        - 默认样式: styles.container = { padding: 8 }
+ *        - 使用 lodash merge 深度合并样式，itemProps.styles 优先级更高
+ *    3.2 纵向（vertical）:
+ *        - 统一使用 borderless，selectedType='none'
+ *        - preset.variant='2': indicator 通过 corner 传入
+ *    3.3 actions 处理:
+ *        - 优先使用 numberSelector（如果存在）
+ *        - 其次使用 indicator
+ *        - 纵向且 preset.variant='2': indicator 放到 corner，actions 仅展示 numberSelector
+ */
+declare const usePresetItemProps: (params: UsePresetItemPropsParams) => PresetItemPropsResult;
+export default usePresetItemProps;

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.d.ts

@@ -0,0 +1,24 @@
+import { LayoutConfig, ItemLayout, PresetConfig, SelectorVariant, SelectorProps } from '../types';
+interface UsePresetPropsParams {
+    layout?: LayoutConfig;
+    mode?: 'single' | 'multiple';
+    preset?: PresetConfig;
+    itemLayout?: ItemLayout;
+    variant?: SelectorVariant;
+    indicatorProps?: SelectorProps['indicatorProps'];
+}
+interface UsePresetPropsResult {
+    layout: LayoutConfig | null;
+    indicatorProps: SelectorProps['indicatorProps'];
+}
+/**
+ * 根据预设配置生成 layout 和 indicatorProps
+ * Layout 规则：
+ * - 根据 variant 和 preset.variant 计算布局样式
+ * IndicatorProps 规则：
+ * 1. 当 variant='card' 且 preset.variant='2' 时，indicator 默认 variant='filled'
+ * 2. 当 variant='media' 时，indicator 默认 variant='filled'
+ * 3. 外部传入的 indicatorProps 优先级更高（会合并到预设配置中）
+ */
+declare const usePresetProps: ({ layout, mode, preset, itemLayout, variant, indicatorProps, }: UsePresetPropsParams) => UsePresetPropsResult;
+export default usePresetProps;

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.d.ts

@@ -0,0 +1,49 @@
+import { RuleConfig, OptionItem, SelectionValuePrimitive, SelectionValue, OptionKey } from '../types';
+declare type ErrorItem = {
+    type: 'required' | 'max' | 'min' | 'optionMin' | 'optionMax' | 'requireOneOf' | 'mutex';
+    message: string;
+    _key?: OptionKey;
+};
+declare type InnerOptionItem = OptionItem & {
+    _key: OptionKey;
+    _label: string;
+    selected: boolean;
+    quantity: number;
+    disabled: boolean;
+};
+export default function useSelectionController(props: {
+    dataSource?: OptionItem[];
+    ruleConfig?: RuleConfig;
+    fieldNames?: {
+        label?: string;
+        value?: string;
+        cover?: string;
+    };
+    mode?: 'single' | 'multiple';
+    valueType?: 'primitive' | 'object';
+    value?: SelectionValuePrimitive | SelectionValue;
+    defaultValue?: SelectionValuePrimitive | SelectionValue;
+    onChange?: (value: SelectionValuePrimitive | SelectionValue) => void;
+}): {
+    state: {
+        options: InnerOptionItem[];
+        values: SelectionValue;
+        errors: Array<ErrorItem>;
+        validated: boolean;
+        quantityInfo: {
+            showQuantity: boolean;
+            maxReached: boolean;
+            remainingCount: number;
+            selectedCount: number;
+        };
+    };
+    actions: {
+        toggle: (optionKey: OptionKey) => void;
+        update: (optionKey: OptionKey, payload?: any) => void;
+        setValue: (value: SelectionValuePrimitive | SelectionValue) => void;
+        clear: () => void;
+        validate: () => Promise<void>;
+        reset: () => void;
+    };
+};
+export {};