@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellMultipleSelect/PisellMultipleSelect.stories.js

@@ -0,0 +1,576 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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 PisellMultipleSelect from "./PisellMultipleSelect";
+import { useState } from 'react';
+import { Form } from 'antd';
+
+/**
+ * PisellMultipleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+var meta = {
+  title: 'Components/PisellMultipleSelect',
+  component: PisellMultipleSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'object',
+      description: '当前选中值数组'
+    },
+    placeholder: {
+      control: 'text',
+      description: '占位符文本'
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    readOnly: {
+      control: 'boolean',
+      description: '是否只读'
+    },
+    showSearch: {
+      control: 'boolean',
+      description: '是否显示搜索框'
+    },
+    allowClear: {
+      control: 'boolean',
+      description: '是否显示清空按钮'
+    },
+    maxTagCount: {
+      control: 'number',
+      description: '最多显示的标签数量'
+    },
+    maxCount: {
+      control: 'number',
+      description: '最大可选数量'
+    },
+    showTooltipOnOverflow: {
+      control: 'boolean',
+      description: '超出标签hover时显示tooltip'
+    },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium', 'large'],
+      description: '尺寸'
+    },
+    error: {
+      control: 'boolean',
+      description: '是否显示错误状态'
+    },
+    required: {
+      control: 'boolean',
+      description: '是否必填'
+    }
+  }
+};
+export default meta;
+// 模拟数据
+var fruitOptions = [{
+  value: 'apple',
+  label: '苹果'
+}, {
+  value: 'banana',
+  label: '香蕉'
+}, {
+  value: 'orange',
+  label: '橙子'
+}, {
+  value: 'grape',
+  label: '葡萄'
+}, {
+  value: 'watermelon',
+  label: '西瓜'
+}, {
+  value: 'strawberry',
+  label: '草莓'
+}, {
+  value: 'pineapple',
+  label: '菠萝'
+}];
+var skillOptions = [{
+  value: 'react',
+  label: 'React',
+  color: '#61dafb'
+}, {
+  value: 'vue',
+  label: 'Vue.js',
+  color: '#42b883'
+}, {
+  value: 'angular',
+  label: 'Angular',
+  color: '#dd0031'
+}, {
+  value: 'typescript',
+  label: 'TypeScript',
+  color: '#3178c6'
+}, {
+  value: 'javascript',
+  label: 'JavaScript',
+  color: '#f7df1e'
+}, {
+  value: 'nodejs',
+  label: 'Node.js',
+  color: '#339933'
+}, {
+  value: 'python',
+  label: 'Python',
+  color: '#3776ab'
+}, {
+  value: 'java',
+  label: 'Java',
+  color: '#007396'
+}];
+
+/**
+ * 基础示例
+ */
+export var Basic = {
+  args: {
+    options: fruitOptions,
+    placeholder: '请选择喜欢的水果'
+  },
+  render: function render(args) {
+    var _useState = useState(args.value || []),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 带标签
+ */
+export var WithLabel = {
+  args: {
+    options: fruitOptions,
+    label: '喜欢的水果',
+    placeholder: '请选择',
+    required: true
+  },
+  render: function render(args) {
+    var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 标签聚合功能
+ */
+export var TagAggregation = {
+  args: {
+    options: skillOptions,
+    label: '技术栈',
+    helperText: '已选择的标签会自动聚合',
+    maxTagCount: 2,
+    showTooltipOnOverflow: true
+  },
+  render: function render(args) {
+    var _useState5 = useState(['react', 'vue', 'typescript', 'nodejs']),
+      _useState6 = _slicedToArray(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 16,
+        fontSize: 14,
+        color: '#667085'
+      }
+    }, "\u5F53\u524D\u9009\u4E2D: ", value.join(', '), " (\u5171 ", value.length, " \u9879)"));
+  }
+};
+
+/**
+ * 最大可选数量限制
+ */
+export var WithMaxCount = {
+  args: {
+    options: skillOptions,
+    label: '技术栈（最多选3项）',
+    helperText: '最多可选择3项',
+    maxCount: 3
+  },
+  render: function render(args) {
+    var _useState7 = useState(['react']),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 带搜索功能
+ */
+export var WithSearch = {
+  args: {
+    options: skillOptions,
+    label: '选择技能',
+    placeholder: '搜索技能...',
+    showSearch: true
+  },
+  render: function render(args) {
+    var _useState9 = useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      value = _useState10[0],
+      setValue = _useState10[1];
+    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      },
+      onSearch: function onSearch(keyword) {
+        return console.log('搜索关键词:', keyword);
+      }
+    }));
+  }
+};
+
+/**
+ * 带清空按钮
+ */
+export var WithClear = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    placeholder: '请选择',
+    allowClear: true
+  },
+  render: function render(args) {
+    var _useState11 = useState(['apple', 'banana']),
+      _useState12 = _slicedToArray(_useState11, 2),
+      value = _useState12[0],
+      setValue = _useState12[1];
+    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 禁用态
+ */
+export var Disabled = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    value: ['apple', 'banana'],
+    disabled: true
+  }
+};
+
+/**
+ * 只读态
+ */
+export var ReadOnly = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    value: ['apple', 'banana', 'orange'],
+    readOnly: true
+  }
+};
+
+/**
+ * 只读态 - 标签聚合
+ */
+export var ReadOnlyWithAggregation = {
+  args: {
+    options: skillOptions,
+    label: '技术栈',
+    value: ['react', 'vue', 'typescript', 'nodejs', 'python'],
+    readOnly: true,
+    maxTagCount: 2
+  }
+};
+
+/**
+ * 只读态 - 空值
+ */
+export var ReadOnlyEmpty = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    value: [],
+    readOnly: true
+  }
+};
+
+/**
+ * 错误状态
+ */
+export var WithError = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    placeholder: '请选择',
+    required: true,
+    error: true,
+    errorText: '至少选择一项'
+  },
+  render: function render(args) {
+    var _useState13 = useState([]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      value = _useState14[0],
+      setValue = _useState14[1];
+    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 不同尺寸
+ */
+export var Sizes = {
+  render: function render() {
+    var _useState15 = useState(['apple']),
+      _useState16 = _slicedToArray(_useState15, 2),
+      small = _useState16[0],
+      setSmall = _useState16[1];
+    var _useState17 = useState(['banana', 'orange']),
+      _useState18 = _slicedToArray(_useState17, 2),
+      medium = _useState18[0],
+      setMedium = _useState18[1];
+    var _useState19 = useState(['grape', 'watermelon']),
+      _useState20 = _slicedToArray(_useState19, 2),
+      large = _useState20[0],
+      setLarge = _useState20[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24
+      }
+    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "Small \u5C3A\u5BF8",
+      size: "small",
+      value: small,
+      onChange: setSmall
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "Medium \u5C3A\u5BF8\uFF08\u9ED8\u8BA4\uFF09",
+      size: "medium",
+      value: medium,
+      onChange: setMedium
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "Large \u5C3A\u5BF8",
+      size: "large",
+      value: large,
+      onChange: setLarge
+    }));
+  }
+};
+
+/**
+ * 表单场景
+ */
+export var InForm = {
+  render: function render() {
+    var _useState21 = useState([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      fruits = _useState22[0],
+      setFruits = _useState22[1];
+    var _useState23 = useState([]),
+      _useState24 = _slicedToArray(_useState23, 2),
+      skills = _useState24[0],
+      setSkills = _useState24[1];
+    return /*#__PURE__*/React.createElement(Form, {
+      layout: "vertical",
+      style: {
+        maxWidth: 400
+      }
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u559C\u6B22\u7684\u6C34\u679C\uFF08\u5FC5\u586B\uFF0C\u6700\u591A3\u9879\uFF09"
+    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      value: fruits,
+      onChange: setFruits,
+      placeholder: "\u8BF7\u9009\u62E9\u6C34\u679C",
+      required: true,
+      maxCount: 3,
+      helperText: "\u6700\u591A\u53EF\u9009\u62E93\u9879"
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u638C\u63E1\u7684\u6280\u80FD"
+    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: skillOptions,
+      value: skills,
+      onChange: setSkills,
+      placeholder: "\u8BF7\u9009\u62E9\u6280\u80FD",
+      showSearch: true,
+      allowClear: true,
+      maxTagCount: 2
+    })));
+  }
+};
+
+/**
+ * 回调事件演示
+ */
+export var WithCallbacks = {
+  render: function render() {
+    var _useState25 = useState([]),
+      _useState26 = _slicedToArray(_useState25, 2),
+      value = _useState26[0],
+      setValue = _useState26[1];
+    var _useState27 = useState([]),
+      _useState28 = _slicedToArray(_useState27, 2),
+      logs = _useState28[0],
+      setLogs = _useState28[1];
+    var addLog = function addLog(message) {
+      setLogs(function (prev) {
+        return [].concat(_toConsumableArray(prev), ["".concat(new Date().toLocaleTimeString(), ": ").concat(message)]);
+      });
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u9009\u62E9\u6C34\u679C",
+      value: value,
+      onChange: function onChange(val, options) {
+        setValue(val);
+        addLog("onChange: [".concat(val.join(', '), "] - ").concat(options.map(function (o) {
+          return o.label;
+        }).join(', ')));
+      },
+      onFocus: function onFocus() {
+        return addLog('onFocus 触发');
+      },
+      onBlur: function onBlur() {
+        return addLog('onBlur 触发');
+      },
+      onSearch: function onSearch(keyword) {
+        return addLog("onSearch: ".concat(keyword));
+      },
+      onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
+        return addLog("\u4E0B\u62C9\u6846".concat(visible ? '打开' : '关闭'));
+      },
+      onDeselect: function onDeselect(val, option) {
+        return addLog("\u53D6\u6D88\u9009\u4E2D: ".concat(val, " - ").concat(option.label));
+      },
+      showSearch: true,
+      allowClear: true,
+      maxTagCount: 2
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 16,
+        padding: 12,
+        background: '#f5f5f5',
+        borderRadius: 4
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, "\u4E8B\u4EF6\u65E5\u5FD7\uFF1A"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxHeight: 200,
+        overflow: 'auto',
+        marginTop: 8
+      }
+    }, logs.map(function (log, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        style: {
+          fontSize: 12,
+          padding: '4px 0'
+        }
+      }, log);
+    }))));
+  }
+};
+
+/**
+ * 所有状态组合
+ */
+export var AllStates = {
+  render: function render() {
+    var _useState29 = useState(['apple', 'banana']),
+      _useState30 = _slicedToArray(_useState29, 2),
+      value1 = _useState30[0],
+      setValue1 = _useState30[1];
+    var _useState31 = useState([]),
+      _useState32 = _slicedToArray(_useState31, 2),
+      value2 = _useState32[0],
+      setValue2 = _useState32[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24
+      }
+    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u6B63\u5E38\u72B6\u6001",
+      value: value1,
+      onChange: setValue1
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u7981\u7528\u6001",
+      value: ['apple', 'banana'],
+      disabled: true
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u53EA\u8BFB\u6001",
+      value: ['apple', 'banana', 'orange'],
+      readOnly: true
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u53EA\u8BFB\u6001 - \u6807\u7B7E\u805A\u5408",
+      value: ['apple', 'banana', 'orange', 'grape', 'watermelon'],
+      readOnly: true,
+      maxTagCount: 2
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u9519\u8BEF\u72B6\u6001\uFF08\u5FC5\u586B\uFF09",
+      value: value2,
+      onChange: setValue2,
+      required: true,
+      error: true,
+      errorText: "\u81F3\u5C11\u9009\u62E9\u4E00\u9879"
+    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
+      options: fruitOptions,
+      label: "\u5E26\u8F85\u52A9\u6587\u672C",
+      helperText: "\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u6C34\u679C",
+      value: value1,
+      onChange: setValue1
+    }));
+  }
+};

package/es/components/pisellMultipleSelect/components/DisabledView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellMultipleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+import React from 'react';
+import type { DisabledViewProps } from '../types';
+declare const DisabledView: React.ForwardRefExoticComponent<DisabledViewProps<string | number> & React.RefAttributes<any>>;
+export default DisabledView;

package/es/components/pisellMultipleSelect/components/DisabledView.js

@@ -0,0 +1,56 @@
+var _excluded = ["value", "options", "label", "required", "placeholder", "size", "className", "style"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * PisellMultipleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+
+import React, { forwardRef, useMemo } from 'react';
+import { Select } from 'antd';
+import classNames from 'classnames';
+var DisabledView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    options = props.options,
+    label = props.label,
+    required = props.required,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    className = props.className,
+    style = props.style,
+    restProps = _objectWithoutProperties(props, _excluded);
+
+  // 转换为 Ant Design 需要的格式
+  var antdOptions = useMemo(function () {
+    return options.map(function (opt) {
+      return {
+        label: opt.label,
+        value: opt.value,
+        disabled: opt.disabled
+      };
+    });
+  }, [options]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-multiple-select-wrapper', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-multiple-select-label', {
+      'pisell-multiple-select-label-required': required
+    })
+  }, label), /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+    ref: ref,
+    mode: "multiple",
+    value: value,
+    options: antdOptions,
+    placeholder: placeholder,
+    disabled: true,
+    size: size,
+    className: "pisell-multiple-select"
+  })));
+});
+DisabledView.displayName = 'PisellMultipleSelectDisabledView';
+export default DisabledView;

package/es/components/pisellMultipleSelect/components/EditView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellMultipleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+import React from 'react';
+import type { EditViewProps } from '../types';
+declare const EditView: React.ForwardRefExoticComponent<EditViewProps<string | number> & React.RefAttributes<any>>;
+export default EditView;