@pisell/private-materials 6.8.10 → 6.8.12

package/es/pro/Selector/BatchSelectorDemo.js

@@ -11,9 +11,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useRef } from 'react';
-import { Card, Typography, Alert, Button } from 'antd';
+import { Card, Typography, Alert, Button, Space } from 'antd';
 import BatchSelector from "./SelectorGroup";
-import { CheckOutlined } from '@ant-design/icons';
+import { CheckOutlined, InfoCircleOutlined } from '@ant-design/icons';
 var Title = Typography.Title;
 
 // 简化数据源：演示嵌套条件与 show 组能力
@@ -45,11 +45,21 @@ var dataSource = [{
   ruleConfig: {
     required: 1,
     autoValidate: true
+  },
+  titleProps: {
+    renderExtra: function renderExtra() {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          flex: 1,
+          textAlign: 'right'
+        }
+      }, "\u989D\u5916\u5185\u5BB9");
+    }
   }
 }, {
   id: 4,
   title: '汉堡定制',
-  mode: 'single',
+  mode: 'multiple',
   valueType: 'object',
   fieldNames: {
     value: 'value',
@@ -60,19 +70,24 @@ var dataSource = [{
     title: '加倍牛肉',
     value: 'double-meat',
     ruleConfig: {
-      min: 1,
-      max: 3
+      min: 3
     }
   }, {
     id: 2,
     title: '额外芝士',
     value: 'extra-cheese'
   }],
-  item: {
-    variant: 'card',
-    selectedIcon: /*#__PURE__*/React.createElement(CheckOutlined, null)
+  itemProps: {
+    selectedTypeVariant: 'default',
+    indicatorPosition: 'right'
+  },
+  variant: 'card',
+  preset: {
+    variant: '3'
   },
   ruleConfig: {
+    min: 5,
+    max: 9,
     required: 1,
     autoValidate: true
   }
@@ -109,10 +124,9 @@ var dataSource = [{
     columns: 3,
     gutter: 16
   },
-  item: {
-    variant: 'card',
+  variant: 'card',
+  itemProps: {
     layout: 'vertical',
-    selectedTypeVariant: 'cornered',
     renderContent: function renderContent(dataSource) {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
         src: dataSource.cover,
@@ -153,9 +167,11 @@ var dataSource = [{
     title: '额外芝士',
     value: 'extra-cheese'
   }],
-  item: {
-    variant: 'card',
-    selectedIcon: /*#__PURE__*/React.createElement(CheckOutlined, null)
+  variant: 'card',
+  indicatorProps: {
+    render: function render() {
+      return /*#__PURE__*/React.createElement(CheckOutlined, null);
+    }
   }
 }, {
   id: 32,
@@ -179,10 +195,7 @@ var dataSource = [{
     title: '额外芝士',
     value: 'extra-cheese'
   }],
-  item: {
-    variant: 'card',
-    selectedIcon: /*#__PURE__*/React.createElement(CheckOutlined, null)
-  }
+  variant: 'card'
 }, {
   id: 33,
   title: '汉堡定制3',
@@ -205,10 +218,7 @@ var dataSource = [{
     title: '额外芝士',
     value: 'extra-cheese'
   }],
-  item: {
-    variant: 'card',
-    selectedIcon: /*#__PURE__*/React.createElement(CheckOutlined, null)
-  }
+  variant: 'card'
 }, {
   id: 34,
   title: '汉堡定制4',
@@ -231,10 +241,7 @@ var dataSource = [{
     title: '额外芝士',
     value: 'extra-cheese'
   }],
-  item: {
-    variant: 'card',
-    selectedIcon: /*#__PURE__*/React.createElement(CheckOutlined, null)
-  }
+  variant: 'card'
 }];
 
 // 分支控制演示：
@@ -276,12 +283,20 @@ export var BatchSelectorDemo = function BatchSelectorDemo() {
     _useState4 = _slicedToArray(_useState3, 2),
     values2 = _useState4[0],
     setValues2 = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    values3 = _useState6[0],
+    setValues3 = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    values4 = _useState8[0],
+    setValues4 = _useState8[1];
   var ref = useRef(null);
+  var ref2 = useRef(null);
   var containerRef = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '0',
-      maxWidth: '900px',
       margin: '0 auto',
       height: '100vh',
       overflow: 'auto'
@@ -335,10 +350,6 @@ export var BatchSelectorDemo = function BatchSelectorDemo() {
     style: {
       marginBottom: 16
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '1000px'
-    }
   }), function () {
     var dataSource2 = [{
       id: 11,
@@ -357,7 +368,18 @@ export var BatchSelectorDemo = function BatchSelectorDemo() {
         id: 2,
         title: 'Tea',
         value: 'tea'
-      }]
+      }],
+      titleProps: {
+        visible: true,
+        title: {
+          visible: true,
+          text: '选择饮品'
+        },
+        icon: {
+          visible: true,
+          icon: /*#__PURE__*/React.createElement(InfoCircleOutlined, null)
+        }
+      }
     }, {
       id: 12,
       title: '加料',
@@ -384,13 +406,12 @@ export var BatchSelectorDemo = function BatchSelectorDemo() {
         title: 'Honey',
         value: 'honey'
       }],
-      item: {
-        variant: 'card'
-      },
+      variant: 'card',
       titleProps: {
+        visible: true,
         tip: {
           visible: true,
-          text: '加料'
+          text: '根据饮品选择加料'
         }
       }
     }];
@@ -433,7 +454,20 @@ export var BatchSelectorDemo = function BatchSelectorDemo() {
       }],
       priority: 30
     }];
-    return /*#__PURE__*/React.createElement(Card, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
+      level: 2,
+      style: {
+        marginTop: 32
+      }
+    }, "\u8054\u52A8\u6F14\u793A\uFF1A\u9009\u9879\u5F71\u54CD\u53E6\u4E00\u4E2A\u5206\u7EC4\u7684\u53EF\u9009\u9879"), /*#__PURE__*/React.createElement(Alert, {
+      message: "\u8BF4\u660E",
+      description: "\u5F53\u9009\u62E9\u996E\u54C1\u4E3A Coffee \u65F6\uFF0C\u52A0\u6599\u4EC5\u5141\u8BB8 Milk/Sugar\uFF1B\u9009\u62E9 Tea \u65F6\uFF0C\u52A0\u6599\u4EC5\u5141\u8BB8 Lemon/Honey\u3002\u672A\u5141\u8BB8\u7684\u9009\u9879\u4F1A\u5728 UI \u4E2D\u7981\u7528\uFF08relaxed \u6A21\u5F0F\u6F14\u793A\uFF09\u3002",
+      type: "info",
+      showIcon: true,
+      style: {
+        marginBottom: 16
+      }
+    }), /*#__PURE__*/React.createElement(Card, {
       title: "BatchSelector\uFF08\u9009\u9879\u8054\u52A8\u793A\u4F8B\uFF09"
     }, /*#__PURE__*/React.createElement(BatchSelector, {
       ref: ref,
@@ -464,7 +498,387 @@ export var BatchSelectorDemo = function BatchSelectorDemo() {
       }, JSON.stringify(values2, null, 2)),
       type: "success",
       showIcon: true
-    })));
+    }))));
+  }(), function () {
+    // preserve 和 tabProps 演示
+    var 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
+      level: 2,
+      style: {
+        marginTop: 32
+      }
+    }, "Preserve \u548C TabProps \u6F14\u793A"), /*#__PURE__*/React.createElement(Alert, {
+      message: "\u8BF4\u660E",
+      description: "preserve \u5C5E\u6027\u63A7\u5236\u5206\u7EC4\u9690\u85CF\u65F6\u662F\u5426\u4FDD\u7559\u503C\u3002\u57FA\u7840\u5957\u9910\u548C\u652F\u4ED8\u65B9\u5F0F\u8BBE\u7F6E preserve=true\uFF0C\u9644\u52A0\u670D\u52A1\u8BBE\u7F6E preserve=false\u3002tabProps \u63A7\u5236\u6807\u7B7E\u9875\u663E\u793A\u3002",
+      type: "info",
+      showIcon: true,
+      style: {
+        marginBottom: 16
+      }
+    }), /*#__PURE__*/React.createElement(Card, {
+      title: "BatchSelector\uFF08Preserve \u793A\u4F8B\uFF09"
+    }, /*#__PURE__*/React.createElement(BatchSelector, {
+      dataSource: dataSource3,
+      value: values3,
+      onChange: function onChange(v) {
+        return setValues3(_objectSpread({}, v || {}));
+      },
+      preserve: true,
+      tabProps: {
+        visible: true
+      },
+      customScrollParent: containerRef.current
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 12
+      }
+    }, /*#__PURE__*/React.createElement(Alert, {
+      message: "\u5B9E\u65F6\u503C",
+      description: /*#__PURE__*/React.createElement("pre", {
+        style: {
+          margin: 0,
+          whiteSpace: 'pre-wrap'
+        }
+      }, JSON.stringify(values3, null, 2)),
+      type: "success",
+      showIcon: true
+    }))));
+  }(), function () {
+    // 复杂规则组合演示
+    var 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
+      }
+    }];
+    var 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
+      level: 2,
+      style: {
+        marginTop: 32
+      }
+    }, "\u590D\u6742\u8054\u52A8\u89C4\u5219\u6F14\u793A"), /*#__PURE__*/React.createElement(Alert, {
+      message: "\u8BF4\u660E",
+      description: "\u6839\u636E\u623F\u95F4\u7C7B\u578B\u663E\u793A\u4E0D\u540C\u7684\u5E8A\u578B\u9009\u9879\uFF0C\u8C6A\u534E\u5957\u623F\u53EF\u4EE5\u514D\u8D39\u5347\u7EA7\uFF0C\u5176\u4ED6\u623F\u578B\u4E0D\u5141\u8BB8\u3002\u6F14\u793A\u591A\u6761\u89C4\u5219\u7684\u7EC4\u5408\u4F7F\u7528\u3002",
+      type: "info",
+      showIcon: true,
+      style: {
+        marginBottom: 16
+      }
+    }), /*#__PURE__*/React.createElement(Card, {
+      title: "BatchSelector\uFF08\u590D\u6742\u89C4\u5219\u7EC4\u5408\uFF09"
+    }, /*#__PURE__*/React.createElement(BatchSelector, {
+      ref: ref2,
+      dataSource: dataSource4,
+      linkageRules: linkageRules4,
+      allowedValuesPolicy: "strict",
+      value: values4,
+      onChange: function onChange(v) {
+        return setValues4(_objectSpread({}, v || {}));
+      },
+      customScrollParent: containerRef.current
+    }), /*#__PURE__*/React.createElement(Space, {
+      style: {
+        marginTop: 12
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _ref2$current;
+        return (_ref2$current = ref2.current) === null || _ref2$current === void 0 ? void 0 : _ref2$current.validate();
+      }
+    }, "\u624B\u52A8\u6821\u9A8C"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return setValues4({});
+      }
+    }, "\u91CD\u7F6E")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 12
+      }
+    }, /*#__PURE__*/React.createElement(Alert, {
+      message: "\u5B9E\u65F6\u503C",
+      description: /*#__PURE__*/React.createElement("pre", {
+        style: {
+          margin: 0,
+          whiteSpace: 'pre-wrap'
+        }
+      }, JSON.stringify(values4, null, 2)),
+      type: "success",
+      showIcon: true
+    }))));
   }());
 };
 export default BatchSelectorDemo;

package/es/pro/Selector/Item.js

@@ -0,0 +1,88 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useContext } from 'react';
+import { CardItem, MediaItem } from "./components";
+import usePresetItemProps from "./hooks/usePresetItemProps";
+import { SelectorContext } from "./Selector";
+var Item = function Item(props) {
+  var actions = props.actions,
+    dataSource = props.dataSource,
+    indicator = props.indicator,
+    numberSelector = props.numberSelector,
+    optionItemValue = props.optionItemValue,
+    quantityInfo = props.quantityInfo,
+    values = props.values,
+    children = props.children;
+  var _useContext = useContext(SelectorContext),
+    disabled = _useContext.disabled,
+    mode = _useContext.mode,
+    variant = _useContext.variant,
+    itemProps = _useContext.itemProps,
+    preset = _useContext.preset,
+    itemLayout = _useContext.itemLayout;
+
+  // 使用 hook 计算预设属性
+  var _usePresetItemProps = usePresetItemProps({
+      variant: variant,
+      itemLayout: itemLayout,
+      preset: preset,
+      itemProps: itemProps,
+      indicator: indicator,
+      numberSelector: numberSelector,
+      mode: mode,
+      disabled: disabled || dataSource.disabled,
+      selected: dataSource.selected
+    }),
+    mediaProps = _usePresetItemProps.mediaProps,
+    cardProps = _usePresetItemProps.cardProps;
+  var handleClick = function handleClick() {
+    if (disabled || dataSource.disabled) return;
+    if (dataSource.selected) {
+      // 已选中，反选
+      actions.update(dataSource._key, {
+        quantity: 0
+      });
+    } else {
+      // 未选中，选中时考虑 effectiveMin
+      var quantity = dataSource.effectiveMin || 1;
+      actions.update(dataSource._key, {
+        quantity: quantity
+      });
+    }
+  };
+  if (variant === 'media') {
+    return /*#__PURE__*/React.createElement(MediaItem, _extends({}, mediaProps, {
+      cover: dataSource.cover,
+      label: dataSource._label,
+      extra: numberSelector,
+      indicator: indicator,
+      selected: dataSource.selected,
+      disabled: disabled || dataSource.disabled,
+      onClick: handleClick
+    }));
+  }
+  var renderChildren = function renderChildren() {
+    if (typeof (cardProps === null || cardProps === void 0 ? void 0 : cardProps.renderContent) === 'function') {
+      var _cardProps$renderCont;
+      return cardProps === null || cardProps === void 0 || (_cardProps$renderCont = cardProps.renderContent) === null || _cardProps$renderCont === void 0 ? void 0 : _cardProps$renderCont.call(cardProps, {
+        dataSource: dataSource
+      });
+    }
+
+    // 方便低代码模式下拖拽
+    // @ts-ignore
+    if ('design' === props.__designMode) {
+      if (children == null || Array.isArray(children) && !children.length) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "lc-container-placeholder"
+        }, "\u62D6\u62FD\u7EC4\u4EF6\u6216\u6A21\u677F\u5230\u8FD9\u91CC");
+      }
+    }
+    return children ? children : /*#__PURE__*/React.createElement("span", null, dataSource._label);
+  };
+  return /*#__PURE__*/React.createElement(CardItem, _extends({}, cardProps, {
+    selected: dataSource.selected,
+    disabled: disabled || dataSource.disabled,
+    onClick: handleClick
+  }), renderChildren());
+};
+export default Item;