@pisell/private-materials 3.4.57 → 3.4.59

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ItemLayout, ItemProps, PresetConfig, SelectorProps, SelectorVariant } from './types';
+import './selector.less';
+export declare const SelectorContext: React.Context<{
+    disabled?: boolean | undefined;
+    mode?: "multiple" | "single" | undefined;
+    itemLayout?: ItemLayout | undefined;
+    valueType?: "object" | "primitive" | undefined;
+    variant?: SelectorVariant | undefined;
+    itemProps?: ItemProps | undefined;
+    preset?: PresetConfig | undefined;
+}>;
+declare const Selector: React.ForwardRefExoticComponent<SelectorProps<import("./types").OptionKey> & React.RefAttributes<unknown>>;
+export default Selector;

package/lib/pro/Selector/Selector.js

@@ -0,0 +1,344 @@
+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/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_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 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,
+    fieldNames,
+    layout,
+    indicatorProps,
+    itemProps,
+    itemLayout = "horizontal",
+    mode = "single",
+    preset = {},
+    renderItem,
+    ruleConfig,
+    valueType = "primitive",
+    variant = "default"
+  } = props;
+  const context = (0, import_useEngineContext.default)();
+  import_utils.locales.init(
+    import_locales.default,
+    ((_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, 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: actions.validate,
+    reset: actions.reset,
+    clear: actions.clear,
+    getErrors: () => {
+      return errors || [];
+    }
+  }));
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, [actions]);
+  const renderIndicator = (option, isDefault) => {
+    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) => {
+    if (valueType === "primitive") 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_NumericStepper.default,
+      {
+        ...props.stepperProps || {},
+        min: option.effectiveMin,
+        max: option.effectiveMax,
+        value: option.quantity,
+        disabled: disabled || option.disabled,
+        onChange: (value) => {
+          actions.update(option._key, { quantity: value });
+        },
+        showInput: true
+      }
+    );
+  };
+  const renderOption = (option) => {
+    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,
+        optionItemValue,
+        indicator: renderIndicator(option),
+        numberSelector: renderQuantitySelector(option),
+        values: state.values,
+        quantityInfo
+      });
+    }
+    const numberSelector = renderQuantitySelector(option);
+    const indicator = renderIndicator(option);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Item.default,
+      {
+        key: option._key,
+        dataSource: option,
+        actions,
+        indicator,
+        numberSelector,
+        optionItemValue,
+        quantityInfo,
+        values: state.values
+      }
+    );
+  };
+  const renderOptions = () => {
+    if (variant === "select") {
+      const _value = state.values;
+      const _maxCount = ruleConfig == null ? void 0 : ruleConfig.max;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Select,
+        {
+          size: "large",
+          style: { width: "100%" },
+          mode: mode === "multiple" ? "multiple" : void 0,
+          options,
+          fieldNames,
+          value: _value,
+          onChange: (value) => actions.setValue(value),
+          disabled,
+          maxTagCount: _maxCount
+        }
+      );
+    }
+    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;
+    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 };
+    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) {
+      return /* @__PURE__ */ import_react.default.createElement(ATag, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckCircleOutlined, null), color: "success", style }, import_utils.locales.getText("pisell2.pro.selector.required-tag"));
+    }
+    return /* @__PURE__ */ import_react.default.createElement(ATag, { style }, import_utils.locales.getText("pisell2.pro.selector.required-tag"));
+  };
+  const renderTip = () => {
+    var _a2, _b2, _c2;
+    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.tip.min-max-selection")(
+        ruleConfig == null ? void 0 : ruleConfig.min,
+        ruleConfig == null ? void 0 : ruleConfig.max
+      );
+    }
+    if (!text) {
+      if (mode === "multiple") {
+        text = import_utils.locales.getText("pisell2.pro.selector.mode.multiple");
+      } else {
+        text = import_utils.locales.getText("pisell2.pro.selector.tip.require-one-option");
+      }
+    }
+    if (!text) return null;
+    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 renderHeader = () => {
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+    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: {
+          ...(headerProps == null ? void 0 : headerProps.style) || {}
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-selector_header-content-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-pro-selector_header-content",
+          style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }
+        },
+        ((_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}`,
+      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
+});

package/lib/pro/Selector/Selector.stories.d.ts

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Selector from './index';
+/**
+ * Selector 组件 - 高级选择器
+ *
+ * 支持单选/多选、数量控制、校验规则、互斥组等功能
+ *
+ * 查看文档：
+ * - [开发文档](https://studio.picoding-dev.com/pro-components/selector?tab=dev)
+ * - [需求文档](https://m1ed09stz4r.feishu.cn/wiki/NL5AwOs0ei5ZBekT4i6cuzIOnoM)
+ */
+declare const meta: Meta<typeof Selector>;
+export default meta;
+declare type Story = StoryObj<typeof Selector>;
+/**
+ * 默认单选模式 - 原始值类型
+ */
+export declare const Default: Story;
+/**
+ * 多选模式 - 原始值数组
+ */
+export declare const Multiple: Story;
+/**
+ * 单选 + 数量 - 对象值类型
+ */
+export declare const SingleWithQuantity: Story;
+/**
+ * 多选 + 数量 - 卡片样式
+ */
+export declare const MultipleWithQuantity: Story;
+/**
+ * 网格布局 - 2列
+ */
+export declare const GridLayout2Columns: Story;
+/**
+ * 网格布局 - 3列
+ */
+export declare const GridLayout3Columns: Story;
+/**
+ * 校验规则 - 必选、最小/最大数量
+ */
+export declare const WithValidation: Story;
+/**
+ * 互斥组 - 同组只能选一个
+ */
+export declare const MutexGroups: Story;
+/**
+ * 禁用状态
+ */
+export declare const Disabled: Story;
+/**
+ * Select 变体 - 下拉选择
+ */
+export declare const SelectVariant: Story;
+/**
+ * Select 变体 - 多选下拉
+ */
+export declare const SelectVariantMultiple: Story;
+/**
+ * 卡片样式变体 - 不同选中态
+ */
+export declare const CardVariants: Story;
+/**
+ * 自定义图标
+ */
+export declare const CustomIcon: Story;
+/**
+ * 自定义渲染
+ */
+export declare const CustomRender: Story;
+/**
+ * SelectorGroup 基础示例
+ */
+export declare const SelectorGroupBasic: StoryObj;
+/**
+ * SelectorGroup 联动规则示例
+ */
+export declare const SelectorGroupWithLinkage: StoryObj;