@pisell/private-materials 6.3.58 → 6.3.60

package/lib/pro/Selector/BatchSelectorDemo.js

@@ -0,0 +1,688 @@
+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/BatchSelectorDemo.tsx
+var BatchSelectorDemo_exports = {};
+__export(BatchSelectorDemo_exports, {
+  BatchSelectorDemo: () => BatchSelectorDemo,
+  default: () => BatchSelectorDemo_default
+});
+module.exports = __toCommonJS(BatchSelectorDemo_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_SelectorGroup = __toESM(require("./SelectorGroup"));
+var import_icons = require("@ant-design/icons");
+var { Title } = import_antd.Typography;
+var dataSource = [
+  {
+    id: 1,
+    title: "主菜",
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      { id: 1, title: "汉堡", value: "burger" },
+      { id: 2, title: "披萨", value: "pizza" }
+    ],
+    grid: {
+      columns: 2,
+      gutter: 16,
+      colConfig: {
+        span: 3
+      }
+    },
+    ruleConfig: {
+      required: 1,
+      autoValidate: true
+    },
+    titleProps: {
+      renderExtra: () => /* @__PURE__ */ import_react.default.createElement("div", { style: {
+        flex: 1,
+        textAlign: "right"
+      } }, "额外内容")
+    }
+  },
+  {
+    id: 4,
+    title: "汉堡定制",
+    mode: "multiple",
+    valueType: "object",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      {
+        id: 1,
+        title: "加倍牛肉",
+        value: "double-meat",
+        ruleConfig: { min: 3 }
+      },
+      { id: 2, title: "额外芝士", value: "extra-cheese" }
+    ],
+    itemProps: {
+      selectedTypeVariant: "default",
+      indicatorPosition: "right"
+    },
+    variant: "card",
+    preset: {
+      variant: "3"
+    },
+    ruleConfig: {
+      min: 5,
+      max: 9,
+      required: 1,
+      autoValidate: true
+    }
+  },
+  {
+    id: 5,
+    title: "披萨定制",
+    mode: "multiple",
+    valueType: "object",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      {
+        id: 1,
+        title: "额外芝士",
+        value: "extra-cheese",
+        cover: "https://file.mypisell-dev.com/pisel/image/9/52fe9ca4233877f2c06865d27b9fb7912022_12_01_13_32_47_147_00076174656__1080_1073__.jpeg",
+        ruleConfig: { min: 1, max: 3 }
+      },
+      {
+        id: 2,
+        title: "薄底",
+        value: "thin-crust",
+        cover: "https://file.mypisell-dev.com/pisel/image/9/52fe9ca4233877f2c06865d27b9fb7912022_12_01_13_32_47_147_00076174656__1080_1073__.jpeg"
+      },
+      {
+        id: 3,
+        title: "额外洋葱",
+        value: "extra-onion",
+        cover: "https://file.mypisell-dev.com/pisel/image/9/52fe9ca4233877f2c06865d27b9fb7912022_12_01_13_32_47_147_00076174656__1080_1073__.jpeg"
+      }
+    ],
+    grid: {
+      columns: 3,
+      gutter: 16
+    },
+    variant: "card",
+    itemProps: {
+      layout: "vertical",
+      renderContent: (dataSource2) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+        "img",
+        {
+          src: dataSource2.cover,
+          alt: dataSource2.title,
+          style: { width: "100%", height: "120px", objectFit: "cover" }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", null, dataSource2.title))
+    },
+    ruleConfig: {
+      min: 1,
+      max: 2,
+      required: 1,
+      autoValidate: true
+    }
+  },
+  {
+    id: 31,
+    title: "汉堡定制1",
+    mode: "single",
+    valueType: "object",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      {
+        id: 1,
+        title: "加倍牛肉",
+        value: "double-meat",
+        ruleConfig: { min: 1, max: 3 }
+      },
+      { id: 2, title: "额外芝士", value: "extra-cheese" }
+    ],
+    variant: "card",
+    indicatorProps: {
+      render: () => /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
+    }
+  },
+  {
+    id: 32,
+    title: "汉堡定制2",
+    mode: "single",
+    valueType: "object",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      {
+        id: 1,
+        title: "加倍牛肉",
+        value: "double-meat",
+        ruleConfig: { min: 1, max: 3 }
+      },
+      { id: 2, title: "额外芝士", value: "extra-cheese" }
+    ],
+    variant: "card"
+  },
+  {
+    id: 33,
+    title: "汉堡定制3",
+    mode: "single",
+    valueType: "object",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      {
+        id: 1,
+        title: "加倍牛肉",
+        value: "double-meat",
+        ruleConfig: { min: 1, max: 3 }
+      },
+      { id: 2, title: "额外芝士", value: "extra-cheese" }
+    ],
+    variant: "card"
+  },
+  {
+    id: 34,
+    title: "汉堡定制4",
+    mode: "single",
+    valueType: "object",
+    fieldNames: { value: "value", label: "title" },
+    dataSource: [
+      {
+        id: 1,
+        title: "加倍牛肉",
+        value: "double-meat",
+        ruleConfig: { min: 1, max: 3 }
+      },
+      { id: 2, title: "额外芝士", value: "extra-cheese" }
+    ],
+    variant: "card"
+  }
+];
+var linkageRules = [
+  {
+    type: "expr",
+    when: {
+      and: [{ groupId: "1", op: "eq", value: "burger" }]
+    },
+    then: [{ type: "show", groupId: "4" }],
+    stopAfterApply: true
+  },
+  {
+    type: "expr",
+    when: {
+      and: [{ groupId: "1", op: "eq", value: "pizza" }]
+    },
+    then: [{ type: "show", groupId: "5" }],
+    priority: 10
+  }
+];
+var BatchSelectorDemo = () => {
+  const [values1, setValues1] = (0, import_react.useState)({});
+  const [values2, setValues2] = (0, import_react.useState)({});
+  const [values3, setValues3] = (0, import_react.useState)({});
+  const [values4, setValues4] = (0, import_react.useState)({});
+  const ref = (0, import_react.useRef)(null);
+  const ref2 = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        padding: "0",
+        margin: "0 auto",
+        height: "100vh",
+        overflow: "auto"
+      },
+      ref: containerRef
+    },
+    /* @__PURE__ */ import_react.default.createElement(Title, { level: 2 }, "嵌套条件 + 分支控制（elseThen/stopAfterApply）演示"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Alert,
+      {
+        message: "说明",
+        description: "当选择汉堡且不为多糖时显示“汉堡定制”（短路）；未命中时显示“默认定制”（不短路，可继续评估后续规则）；当选择披萨且满足（温度为热/烫 或 糖度为少糖）时显示“披萨定制”。未命中时，定制分组默认隐藏。",
+        type: "info",
+        showIcon: true,
+        style: { marginBottom: 16 }
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector" }, /* @__PURE__ */ import_react.default.createElement(
+      import_SelectorGroup.default,
+      {
+        dataSource,
+        linkageRules,
+        allowedValuesPolicy: "strict",
+        value: values1,
+        onChange: (v) => setValues1({ ...v || {} }),
+        customScrollParent: containerRef.current
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Alert,
+      {
+        message: "实时值",
+        description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values1, null, 2)),
+        type: "success",
+        showIcon: true
+      }
+    ))),
+    /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "联动演示：选项影响另一个分组的可选项"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Alert,
+      {
+        message: "说明",
+        description: "当选择饮品为 Coffee 时，加料仅允许 Milk/Sugar；选择 Tea 时，加料仅允许 Lemon/Honey。未允许的选项会在 UI 中禁用（soft 模式演示）。",
+        type: "info",
+        showIcon: true,
+        style: { marginBottom: 16 }
+      }
+    ),
+    (() => {
+      const dataSource2 = [
+        {
+          id: 11,
+          title: "饮品",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "Coffee", value: "coffee" },
+            { id: 2, title: "Tea", value: "tea" }
+          ],
+          titleProps: {
+            visible: true,
+            title: {
+              visible: true,
+              text: "选择饮品"
+            },
+            icon: {
+              visible: true,
+              icon: /* @__PURE__ */ import_react.default.createElement(import_icons.InfoCircleOutlined, null)
+            }
+          }
+        },
+        {
+          id: 12,
+          title: "加料",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "Milk", value: "milk" },
+            { id: 2, title: "Sugar", value: "sugar" },
+            { id: 3, title: "Lemon", value: "lemon" },
+            { id: 4, title: "Honey", value: "honey" }
+          ],
+          variant: "card",
+          titleProps: {
+            visible: true,
+            tip: {
+              visible: true,
+              text: "根据饮品选择加料"
+            }
+          }
+        }
+      ];
+      const linkageRules2 = [
+        // 当选择 Coffee 时，仅允许 milk/sugar；未选择或选择 Tea 时不受这条规则影响
+        {
+          type: "expr",
+          when: { and: [{ groupId: "11", op: "eq", value: "coffee" }] },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "12",
+              values: ["milk", "sugar"],
+              message: "请选择 Milk 或 Sugar",
+              tip: "加料仅允许 Milk/Sugar"
+            }
+          ],
+          priority: 30
+        },
+        // 当选择 Tea 时，仅允许 lemon/honey；未选择或选择 Coffee 时不受这条规则影响
+        {
+          type: "expr",
+          when: { and: [{ groupId: "11", op: "eq", value: "tea" }] },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "12",
+              values: ["lemon", "honey"],
+              message: "请选择 Lemon 或 Honey",
+              tip: "加料仅允许 Lemon/Honey"
+            }
+          ],
+          priority: 30
+        }
+      ];
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "联动演示：选项影响另一个分组的可选项"), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "说明",
+          description: "当选择饮品为 Coffee 时，加料仅允许 Milk/Sugar；选择 Tea 时，加料仅允许 Lemon/Honey。未允许的选项会在 UI 中禁用（relaxed 模式演示）。",
+          type: "info",
+          showIcon: true,
+          style: { marginBottom: 16 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（选项联动示例）" }, /* @__PURE__ */ import_react.default.createElement(
+        import_SelectorGroup.default,
+        {
+          ref,
+          dataSource: dataSource2,
+          linkageRules: linkageRules2,
+          allowedValuesPolicy: "relaxed",
+          value: values2,
+          onChange: (v) => setValues2({ ...v || {} }),
+          customScrollParent: containerRef.current
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+        var _a;
+        return (_a = ref.current) == null ? void 0 : _a.validate();
+      } }, "validate")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "实时值",
+          description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values2, null, 2)),
+          type: "success",
+          showIcon: true
+        }
+      ))));
+    })(),
+    (() => {
+      const dataSource3 = [
+        {
+          id: 21,
+          title: "基础套餐",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "标准套餐", value: "standard" },
+            { id: 2, title: "豪华套餐", value: "deluxe" }
+          ],
+          ruleConfig: {
+            required: 1,
+            autoValidate: true
+          },
+          preserve: true
+        },
+        {
+          id: 22,
+          title: "附加服务",
+          mode: "multiple",
+          valueType: "object",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            {
+              id: 1,
+              title: "快递配送",
+              value: "delivery",
+              ruleConfig: { min: 1, max: 5 }
+            },
+            {
+              id: 2,
+              title: "礼品包装",
+              value: "gift-wrap",
+              ruleConfig: { min: 1, max: 3 }
+            },
+            {
+              id: 3,
+              title: "延长保修",
+              value: "warranty"
+            }
+          ],
+          variant: "card",
+          itemProps: {
+            layout: "vertical"
+          },
+          preserve: false
+        },
+        {
+          id: 23,
+          title: "支付方式",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "支付宝", value: "alipay" },
+            { id: 2, title: "微信支付", value: "wechat" },
+            { id: 3, title: "银行卡", value: "card" }
+          ],
+          ruleConfig: {
+            required: 1
+          }
+        }
+      ];
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "Preserve 和 TabProps 演示"), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "说明",
+          description: "preserve 属性控制分组隐藏时是否保留值。基础套餐和支付方式设置 preserve=true，附加服务设置 preserve=false。tabProps 控制标签页显示。",
+          type: "info",
+          showIcon: true,
+          style: { marginBottom: 16 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（Preserve 示例）" }, /* @__PURE__ */ import_react.default.createElement(
+        import_SelectorGroup.default,
+        {
+          dataSource: dataSource3,
+          value: values3,
+          onChange: (v) => setValues3({ ...v || {} }),
+          preserve: true,
+          tabProps: {
+            visible: true
+          },
+          customScrollParent: containerRef.current
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "实时值",
+          description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values3, null, 2)),
+          type: "success",
+          showIcon: true
+        }
+      ))));
+    })(),
+    (() => {
+      const dataSource4 = [
+        {
+          id: 31,
+          title: "房间类型",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "单人间", value: "single" },
+            { id: 2, title: "双人间", value: "double" },
+            { id: 3, title: "豪华套房", value: "suite" }
+          ],
+          variant: "card",
+          itemProps: {
+            layout: "horizontal",
+            selectedTypeVariant: "bordered"
+          },
+          ruleConfig: {
+            required: 1,
+            autoValidate: true
+          }
+        },
+        {
+          id: 32,
+          title: "床型偏好（单人间）",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "标准单人床", value: "single-bed" },
+            { id: 2, title: "加大单人床", value: "king-single" }
+          ]
+        },
+        {
+          id: 33,
+          title: "床型偏好（双人间）",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "双床", value: "twin" },
+            { id: 2, title: "大床", value: "queen" },
+            { id: 3, title: "特大床", value: "king" }
+          ]
+        },
+        {
+          id: 34,
+          title: "额外需求",
+          mode: "multiple",
+          valueType: "object",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            {
+              id: 1,
+              title: "早餐",
+              value: "breakfast",
+              ruleConfig: { min: 0, max: 10 }
+            },
+            {
+              id: 2,
+              title: "接机服务",
+              value: "pickup"
+            },
+            {
+              id: 3,
+              title: "免费升级",
+              value: "upgrade"
+            }
+          ],
+          variant: "card",
+          itemProps: {
+            layout: "vertical"
+          },
+          ruleConfig: {
+            max: 8,
+            min: 2,
+            autoValidate: true
+          }
+        }
+      ];
+      const linkageRules4 = [
+        // 单人间显示单人床型
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "single" }] },
+          then: [
+            { type: "show", groupId: "32" },
+            { type: "hide", groupId: "33" }
+          ],
+          stopAfterApply: false
+        },
+        // 双人间显示双人床型
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "double" }] },
+          then: [
+            { type: "show", groupId: "33" },
+            { type: "hide", groupId: "32" }
+          ],
+          stopAfterApply: false
+        },
+        // 豪华套房隐藏床型选择
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "suite" }] },
+          then: [
+            { type: "hide", groupId: "32" },
+            { type: "hide", groupId: "33" }
+          ],
+          stopAfterApply: false
+        },
+        // 豪华套房时，额外需求中允许免费升级
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "suite" }] },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "34",
+              values: ["breakfast", "pickup", "upgrade"]
+            }
+          ]
+        },
+        // 非豪华套房时，不允许免费升级
+        {
+          type: "expr",
+          when: {
+            and: [
+              { groupId: "31", op: "in", value: ["single", "double"] }
+            ]
+          },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "34",
+              values: ["breakfast", "pickup"],
+              message: "该房型不支持免费升级"
+            }
+          ]
+        }
+      ];
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "复杂联动规则演示"), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "说明",
+          description: "根据房间类型显示不同的床型选项，豪华套房可以免费升级，其他房型不允许。演示多条规则的组合使用。",
+          type: "info",
+          showIcon: true,
+          style: { marginBottom: 16 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（复杂规则组合）" }, /* @__PURE__ */ import_react.default.createElement(
+        import_SelectorGroup.default,
+        {
+          ref: ref2,
+          dataSource: dataSource4,
+          linkageRules: linkageRules4,
+          allowedValuesPolicy: "strict",
+          value: values4,
+          onChange: (v) => setValues4({ ...v || {} }),
+          customScrollParent: containerRef.current
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+        var _a;
+        return (_a = ref2.current) == null ? void 0 : _a.validate();
+      } }, "手动校验"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => setValues4({}) }, "重置")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "实时值",
+          description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values4, null, 2)),
+          type: "success",
+          showIcon: true
+        }
+      ))));
+    })()
+  );
+};
+var BatchSelectorDemo_default = BatchSelectorDemo;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BatchSelectorDemo
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { OptionItem } from './types';
+export interface IItemProps {
+    actions: any;
+    dataSource: OptionItem;
+    indicator: React.ReactNode;
+    numberSelector: React.ReactNode;
+    optionItemValue?: any;
+    quantityInfo: any;
+    values: any;
+    children?: React.ReactNode;
+}
+declare const Item: (props: IItemProps) => React.JSX.Element;
+export default Item;