@pisell/materials 3.3.82 → 3.3.84

package/es/components/pisellSingleSelect/PisellSingleSelect.stories.js

@@ -0,0 +1,517 @@
+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 PisellSingleSelect from "./PisellSingleSelect";
+import { useState } from 'react';
+import { Form } from 'antd';
+import React from 'react';
+
+/**
+ * PisellSingleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+var meta = {
+  title: 'Components/PisellSingleSelect',
+  component: PisellSingleSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: '当前选中值'
+    },
+    placeholder: {
+      control: 'text',
+      description: '占位符文本'
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    readOnly: {
+      control: 'boolean',
+      description: '是否只读'
+    },
+    showSearch: {
+      control: 'boolean',
+      description: '是否显示搜索框'
+    },
+    allowClear: {
+      control: 'boolean',
+      description: '是否显示清空按钮'
+    },
+    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: '西瓜'
+}];
+var cityOptions = [{
+  value: 'beijing',
+  label: '北京'
+}, {
+  value: 'shanghai',
+  label: '上海'
+}, {
+  value: 'guangzhou',
+  label: '广州'
+}, {
+  value: 'shenzhen',
+  label: '深圳'
+}, {
+  value: 'chengdu',
+  label: '成都'
+}, {
+  value: 'hangzhou',
+  label: '杭州'
+}, {
+  value: 'wuhan',
+  label: '武汉'
+}, {
+  value: 'xian',
+  label: '西安'
+}];
+
+/**
+ * 基础示例
+ */
+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(PisellSingleSelect, _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(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+    return /*#__PURE__*/React.createElement(PisellSingleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 带辅助文本
+ */
+export var WithHelperText = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    helperText: '请选择你最喜欢的水果',
+    placeholder: '请选择'
+  },
+  render: function render(args) {
+    var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
+    return /*#__PURE__*/React.createElement(PisellSingleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 带搜索功能
+ */
+export var WithSearch = {
+  args: {
+    options: cityOptions,
+    label: '选择城市',
+    placeholder: '搜索城市...',
+    showSearch: true
+  },
+  render: function render(args) {
+    var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    return /*#__PURE__*/React.createElement(PisellSingleSelect, _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 _useState9 = useState('apple'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      value = _useState10[0],
+      setValue = _useState10[1];
+    return /*#__PURE__*/React.createElement(PisellSingleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 禁用态
+ */
+export var Disabled = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    value: 'apple',
+    disabled: true
+  }
+};
+
+/**
+ * 只读态
+ */
+export var ReadOnly = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    value: 'apple',
+    readOnly: true
+  }
+};
+
+/**
+ * 只读态 - 空值
+ */
+export var ReadOnlyEmpty = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    value: null,
+    readOnly: true
+  }
+};
+
+/**
+ * 错误状态
+ */
+export var WithError = {
+  args: {
+    options: fruitOptions,
+    label: '选择水果',
+    placeholder: '请选择',
+    required: true,
+    error: true,
+    errorText: '此项为必填项，请选择'
+  },
+  render: function render(args) {
+    var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      value = _useState12[0],
+      setValue = _useState12[1];
+    return /*#__PURE__*/React.createElement(PisellSingleSelect, _extends({}, args, {
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val);
+      }
+    }));
+  }
+};
+
+/**
+ * 不同尺寸
+ */
+export var Sizes = {
+  render: function render() {
+    var _useState13 = useState('apple'),
+      _useState14 = _slicedToArray(_useState13, 2),
+      small = _useState14[0],
+      setSmall = _useState14[1];
+    var _useState15 = useState('banana'),
+      _useState16 = _slicedToArray(_useState15, 2),
+      medium = _useState16[0],
+      setMedium = _useState16[1];
+    var _useState17 = useState('orange'),
+      _useState18 = _slicedToArray(_useState17, 2),
+      large = _useState18[0],
+      setLarge = _useState18[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24
+      }
+    }, /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "Small \u5C3A\u5BF8",
+      size: "small",
+      value: small,
+      onChange: setSmall
+    }), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "Medium \u5C3A\u5BF8\uFF08\u9ED8\u8BA4\uFF09",
+      size: "medium",
+      value: medium,
+      onChange: setMedium
+    }), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "Large \u5C3A\u5BF8",
+      size: "large",
+      value: large,
+      onChange: setLarge
+    }));
+  }
+};
+
+/**
+ * 表单场景
+ */
+export var InForm = {
+  render: function render() {
+    var _useState19 = useState(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      fruit = _useState20[0],
+      setFruit = _useState20[1];
+    var _useState21 = useState(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      city = _useState22[0],
+      setCity = _useState22[1];
+    return /*#__PURE__*/React.createElement(Form, {
+      layout: "vertical",
+      style: {
+        maxWidth: 400
+      }
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u6700\u7231\u6C34\u679C\uFF08\u5FC5\u586B\uFF09"
+    }, /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      value: fruit,
+      onChange: setFruit,
+      placeholder: "\u8BF7\u9009\u62E9\u6C34\u679C",
+      required: true
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u6240\u5728\u57CE\u5E02"
+    }, /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: cityOptions,
+      value: city,
+      onChange: setCity,
+      placeholder: "\u8BF7\u9009\u62E9\u57CE\u5E02",
+      showSearch: true,
+      allowClear: true
+    })));
+  }
+};
+
+/**
+ * 自定义过滤
+ */
+export var CustomFilter = {
+  render: function render() {
+    var _useState23 = useState(null),
+      _useState24 = _slicedToArray(_useState23, 2),
+      value = _useState24[0],
+      setValue = _useState24[1];
+    return /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: cityOptions,
+      label: "\u9009\u62E9\u57CE\u5E02\uFF08\u652F\u6301\u62FC\u97F3\u641C\u7D22\uFF09",
+      placeholder: "\u8F93\u5165\u57CE\u5E02\u540D\u6216\u62FC\u97F3...",
+      showSearch: true,
+      value: value,
+      onChange: setValue,
+      filterOption: function filterOption(input, option) {
+        var searchText = input.toLowerCase();
+        // 支持 label 匹配
+        return option.label.toLowerCase().includes(searchText);
+      }
+    });
+  }
+};
+
+/**
+ * 回调事件演示
+ */
+export var WithCallbacks = {
+  render: function render() {
+    var _useState25 = useState(null),
+      _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(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "\u9009\u62E9\u6C34\u679C",
+      value: value,
+      onChange: function onChange(val, option) {
+        setValue(val);
+        addLog("onChange: ".concat(val, " - ").concat(option === null || option === void 0 ? void 0 : option.label));
+      },
+      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 ? '打开' : '关闭'));
+      },
+      showSearch: true,
+      allowClear: true
+    }), /*#__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'),
+      _useState30 = _slicedToArray(_useState29, 2),
+      value1 = _useState30[0],
+      setValue1 = _useState30[1];
+    var _useState31 = useState(null),
+      _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(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "\u6B63\u5E38\u72B6\u6001",
+      value: value1,
+      onChange: setValue1
+    }), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "\u7981\u7528\u6001",
+      value: "apple",
+      disabled: true
+    }), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "\u53EA\u8BFB\u6001",
+      value: "banana",
+      readOnly: true
+    }), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "\u9519\u8BEF\u72B6\u6001\uFF08\u5FC5\u586B\uFF09",
+      value: value2,
+      onChange: setValue2,
+      required: true,
+      error: true,
+      errorText: "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879\uFF0C\u8BF7\u9009\u62E9"
+    }), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+      options: fruitOptions,
+      label: "\u5E26\u8F85\u52A9\u6587\u672C",
+      helperText: "\u8BF7\u9009\u62E9\u4F60\u6700\u559C\u6B22\u7684\u6C34\u679C",
+      value: value1,
+      onChange: setValue1
+    }));
+  }
+};

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

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - 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/pisellSingleSelect/components/DisabledView.js

@@ -0,0 +1,54 @@
+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; }
+/**
+ * PisellSingleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+
+import React, { forwardRef, useMemo } from 'react';
+import { Select } from 'antd';
+import classNames from 'classnames';
+var DisabledView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = 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-single-select-wrapper', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-single-select-label', {
+      'pisell-single-select-label-required': required
+    })
+  }, label), /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+    ref: ref,
+    value: value !== null && value !== void 0 ? value : undefined,
+    options: antdOptions,
+    placeholder: placeholder,
+    disabled: true,
+    size: size,
+    className: "pisell-single-select"
+  })));
+});
+DisabledView.displayName = 'PisellSingleSelectDisabledView';
+export default DisabledView;

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

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