@pisell/private-materials 6.8.10 → 6.8.12

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

@@ -0,0 +1,185 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMemo } from 'react';
+// @ts-ignore
+import { merge } from 'lodash';
+/**
+ * 根据预设项生成 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
+ */
+var usePresetItemProps = function usePresetItemProps(params) {
+  var variant = params.variant,
+    itemLayout = params.itemLayout,
+    preset = params.preset,
+    _params$itemProps = params.itemProps,
+    itemProps = _params$itemProps === void 0 ? {} : _params$itemProps,
+    originIndicator = params.indicator,
+    numberSelector = params.numberSelector,
+    mode = params.mode,
+    disabled = params.disabled,
+    selected = params.selected;
+  return useMemo(function () {
+    var mediaProps = {};
+    var cardProps = {};
+    var indicator = originIndicator;
+    var presetVariant = preset === null || preset === void 0 ? void 0 : preset.variant;
+
+    // 1. variant='media': 使用 MediaItem
+    if (variant === 'media') {
+      // 根据 preset.variant 设置预设属性
+      var presetProps = {};
+      if (presetVariant === '1') {
+        // preset.variant='1': size='small', showIndicator=false, 单选shape='circle'，多选shape='square'
+        presetProps = {
+          size: 'small',
+          showIndicator: false,
+          shape: mode === 'single' ? 'circle' : 'square',
+          coverType: 'text'
+        };
+      } else if (presetVariant === '2') {
+        // preset.variant='2': size='large', showIndicator=true, shape='circle'
+        presetProps = {
+          size: 'large',
+          showIndicator: true,
+          shape: 'circle'
+        };
+      }
+
+      // itemProps 的属性优先级更高，可以覆盖预设
+      mediaProps = _objectSpread(_objectSpread({}, presetProps), itemProps);
+      return {
+        mediaProps: mediaProps,
+        cardProps: cardProps
+      };
+    }
+
+    // 2. variant='default': 默认样式
+    if (variant === 'default') {
+      cardProps = _objectSpread({
+        variant: 'borderless',
+        layout: 'horizontal',
+        selectedType: 'none',
+        actionsPosition: 'left',
+        actions: numberSelector ? [numberSelector] : [indicator],
+        renderContent: presetVariant === '1' || presetVariant === '2' ? function (_ref) {
+          var dataSource = _ref.dataSource;
+          return dataSource === null || dataSource === void 0 ? void 0 : dataSource._label;
+        } : undefined
+      }, itemProps);
+      return {
+        mediaProps: mediaProps,
+        cardProps: cardProps
+      };
+    }
+
+    // 3. variant='card': 根据 itemLayout 处理
+    if (variant === 'card') {
+      var layout = (itemProps === null || itemProps === void 0 ? void 0 : itemProps.layout) || itemLayout || 'horizontal';
+      var isVertical = layout === 'vertical';
+
+      // 基础属性
+      var baseProps = {};
+      if (isVertical) {
+        // 3.2 纵向布局
+        // 纵向布局默认样式
+        var defaultStyles = {
+          content: {
+            minHeight: '264px'
+          }
+        };
+        baseProps = {
+          layout: 'vertical',
+          variant: 'borderless'
+        };
+
+        // 纵向且 preset.variant='2': indicator 放到 corner，actions 仅展示 numberSelector
+        if (presetVariant === '2') {
+          var mergedStyles = merge({}, defaultStyles, itemProps === null || itemProps === void 0 ? void 0 : itemProps.styles);
+          cardProps = _objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
+            corner: indicator,
+            actions: numberSelector ? [numberSelector] : []
+          }, itemProps), {}, {
+            styles: mergedStyles
+          });
+        } else {
+          var _mergedStyles = merge({}, defaultStyles, itemProps === null || itemProps === void 0 ? void 0 : itemProps.styles);
+          cardProps = _objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
+            actions: numberSelector ? [numberSelector] : [indicator]
+          }, itemProps), {}, {
+            styles: _mergedStyles
+          });
+        }
+      } else {
+        // 3.1 横向布局
+        // 横向卡片默认样式
+        var _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'
+          };
+        }
+
+        // 使用 lodash merge 深度合并样式：默认样式 + itemProps.styles
+        var _mergedStyles2 = merge({}, _defaultStyles, itemProps === null || itemProps === void 0 ? void 0 : itemProps.styles);
+        cardProps = _objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
+          actions: numberSelector ? [numberSelector] : [indicator]
+        }, itemProps), {}, {
+          styles: _mergedStyles2
+        });
+      }
+      return {
+        mediaProps: mediaProps,
+        cardProps: cardProps
+      };
+    }
+    return {
+      mediaProps: mediaProps,
+      cardProps: cardProps
+    };
+  }, [variant, itemLayout, preset, itemProps, originIndicator, numberSelector, mode, disabled, selected]);
+};
+export default usePresetItemProps;

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

@@ -0,0 +1,132 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMemo } from 'react';
+var VARIANT_MAP = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 'default', ['1', '2', '3', '4']), 'select', ['1']), 'card', ['1', '2', '3', '4', '5']), 'media', ['1', '2']);
+var EMPTY_CONFIG = {};
+
+/**
+ * 预设布局配置库
+ * 定义所有可用的布局模式，配置更加语义化和集中化
+ * selector 默认使用竖向flex
+ */
+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'
+  }
+};
+/**
+ * 根据预设配置生成 layout 和 indicatorProps
+ * Layout 规则：
+ * - 根据 variant 和 preset.variant 计算布局样式
+ * IndicatorProps 规则：
+ * 1. 当 variant='card' 且 preset.variant='2' 时，indicator 默认 variant='filled'
+ * 2. 当 variant='media' 时，indicator 默认 variant='filled'
+ * 3. 外部传入的 indicatorProps 优先级更高（会合并到预设配置中）
+ */
+var usePresetProps = function usePresetProps(_ref) {
+  var layout = _ref.layout,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'single' : _ref$mode,
+    preset = _ref.preset,
+    _ref$itemLayout = _ref.itemLayout,
+    itemLayout = _ref$itemLayout === void 0 ? 'horizontal' : _ref$itemLayout,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    indicatorProps = _ref.indicatorProps;
+  return useMemo(function () {
+    // ========== 计算 Layout 配置 ==========
+    var layoutConfig = null;
+
+    // select 和没有 preset.variant 时不应用布局配置
+    if (variant === 'select' || !(preset !== null && preset !== void 0 && preset.variant)) {
+      layoutConfig = null;
+    } else {
+      // 1. 获取预设的基础布局配置
+      var baseLayoutConfig = null;
+
+      // 1.1 校验 preset.variant 是否合法
+      var validVariants = VARIANT_MAP[variant] || [];
+      var presetVariant = validVariants.includes(preset === null || preset === void 0 ? void 0 : preset.variant) ? preset === null || preset === void 0 ? void 0 : preset.variant : '1';
+
+      // 1.2 根据 variant 和 presetVariant 查找对应的布局配置
+      var presetLayoutInfo = VARIANT_PRESET_MAP[variant];
+      if (presetLayoutInfo) {
+        var layoutType = presetLayoutInfo[presetVariant];
+        if (layoutType) {
+          // 1.3 从预设布局库中获取完整的布局配置
+          var _config = PRESET_LAYOUTS[layoutType];
+          if (_config) {
+            baseLayoutConfig = _config;
+          } else {
+            baseLayoutConfig = EMPTY_CONFIG;
+          }
+        } else {
+          baseLayoutConfig = EMPTY_CONFIG;
+        }
+      } else {
+        baseLayoutConfig = EMPTY_CONFIG;
+      }
+
+      // 2. 如果用户传入了 layout 配置，与基础配置合并
+      if (layout) {
+        layoutConfig = _objectSpread(_objectSpread({}, baseLayoutConfig), layout);
+      } else {
+        layoutConfig = baseLayoutConfig;
+      }
+    }
+
+    // ========== 计算 IndicatorProps 配置 ==========
+    var computedIndicatorProps = {};
+
+    // 判断是否需要设置默认的 filled variant
+    var shouldUseFilled = variant === 'media' || variant === 'card' && (preset === null || preset === void 0 ? void 0 : preset.variant) === '2';
+    if (shouldUseFilled) {
+      // 设置默认值
+      computedIndicatorProps = {
+        variant: 'filled'
+      };
+    }
+
+    // 外部传入的 indicatorProps 优先级更高，进行合并
+    if (indicatorProps) {
+      computedIndicatorProps = _objectSpread(_objectSpread({}, computedIndicatorProps), indicatorProps);
+    }
+    return {
+      layout: layoutConfig,
+      indicatorProps: computedIndicatorProps
+    };
+  }, [JSON.stringify(preset), itemLayout, variant, layout, mode, JSON.stringify(indicatorProps)]);
+};
+export default usePresetProps;