@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellMultipleSelect/PisellMultipleSelect.js

@@ -0,0 +1,99 @@
+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); }
+/**
+ * PisellMultipleSelect - 多选下拉组件
+ * 基于 Ant Design Select 封装，提供符合 Pisell 设计规范的多选功能
+ */
+
+import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import { message } from 'antd';
+import { useMultipleSelectState } from '@pisell/utils';
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import ReadOnlyView from "./components/ReadOnlyView";
+import "./PisellMultipleSelect.less";
+var PisellMultipleSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    options = props.options,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    maxCount = props.maxCount;
+
+  // Select 内部 ref
+  var selectRef = useRef(null);
+
+  // 状态管理（从 @pisell/utils 导入）
+  var state = useMultipleSelectState({
+    value: value,
+    defaultValue: defaultValue,
+    onChange: onChange,
+    mode: 'multiple'
+  });
+
+  // 处理 maxCount 限制
+  var handleChange = useCallback(function (newValue) {
+    if (maxCount && newValue.length > maxCount) {
+      message.warning("\u6700\u591A\u53EA\u80FD\u9009\u62E9 ".concat(maxCount, " \u9879"));
+      return;
+    }
+    var selectedOptions = newValue.map(function (v) {
+      return options.find(function (opt) {
+        return opt.value === v;
+      });
+    }).filter(Boolean);
+
+    // 更新内部状态（非受控模式需要）
+    state.setValue(newValue);
+
+    // 触发外部回调
+    onChange === null || onChange === void 0 || onChange(newValue, selectedOptions);
+  }, [maxCount, onChange, options, state]);
+
+  // 暴露 Ref 方法
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _selectRef$current;
+        return (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.focus();
+      },
+      blur: function blur() {
+        var _selectRef$current2;
+        return (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.blur();
+      },
+      getValue: function getValue() {
+        return state.value;
+      },
+      setValue: function setValue(newValue) {
+        return state.setValue(newValue);
+      },
+      clearValue: function clearValue() {
+        return state.clearValue();
+      },
+      addValue: function addValue(val) {
+        return state.addValue(val);
+      },
+      removeValue: function removeValue(val) {
+        return state.removeValue(val);
+      }
+    };
+  });
+
+  // 根据不同状态渲染不同视图
+  if (disabled) {
+    return /*#__PURE__*/React.createElement(DisabledView, _extends({}, props, {
+      ref: selectRef
+    }));
+  }
+  if (readOnly) {
+    return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+  }
+  return /*#__PURE__*/React.createElement(EditView, _extends({}, props, {
+    value: state.value,
+    state: state,
+    onChangeInternal: handleChange,
+    ref: selectRef
+  }));
+});
+PisellMultipleSelect.displayName = 'PisellMultipleSelect';
+export default PisellMultipleSelect;

package/es/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -0,0 +1,231 @@
+/**
+ * PisellMultipleSelect 组件样式
+ * 
+ * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
+ * 此文件仅包含 Token 无法实现的样式
+ */
+
+.pisell-multiple-select {
+  width: 100%;
+
+  // 包装器布局（Token 无法配置）
+  &-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  // 标签（Token 无法配置的自定义元素）
+  &-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    color: #344054;
+    line-height: 20px;
+
+    &-required::after {
+      content: ' *';
+      color: #D92D20;
+      margin-left: 0;
+    }
+  }
+
+  // 辅助文本（Token 无法配置的自定义元素）
+  &-helper-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #667085;
+    line-height: 20px;
+  }
+
+  // 错误文本（Token 无法配置的自定义元素）
+  &-error-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #D92D20;
+    line-height: 20px;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  // 下拉选项中的勾选图标（Figma 设计）
+  &-option-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &-option-check {
+    color: #7F56D9; // Primary/600
+    font-size: 16px;
+    margin-left: 8px;
+  }
+
+  // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
+  :global {
+    // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
+    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
+      padding: 6px 16px !important;
+    }
+
+    // 标签圆角（Token 不支持 multipleItemBorderRadius）
+    .pisell-lowcode-select-selection-item {
+      border-radius: 6px !important;
+      padding: 6px 10px !important;
+      margin-inline-end: 4px !important;
+
+      // 确保标签内容垂直居中
+      &-content {
+        line-height: 24px !important;
+      }
+
+      // 删除图标样式微调
+      &-remove {
+        margin-left: 4px !important;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    // hover 边框颜色（Token 不支持 colorBorderHover）
+    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
+      .ant-select-selector:hover {
+        border-color: #D6BBFB !important;
+      }
+    }
+  }
+}
+
+// 下拉框内的搜索框样式（Figma 设计）
+:global {
+  .pisell-select-search-wrapper {
+    padding: 6px;
+    border-bottom: 1px solid #EAECF0;
+  }
+
+  .pisell-select-search-input {
+    padding: 9px 10px !important;
+    font-size: 14px;
+
+    .ant-input {
+      font-size: 14px !important;
+      color: #344054 !important;
+
+      &::placeholder {
+        color: #98A2B3 !important;
+        font-size: 12px !important;
+      }
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: transparent !important;
+    }
+  }
+}
+
+.pisell-multiple-select {
+  // 错误状态（Token 无法单独配置错误边框颜色）
+  &-error {
+    :global(.ant-select-selector) {
+      border-color: #D92D20 !important;
+
+      &:hover {
+        border-color: #D92D20 !important;
+      }
+    }
+
+    :global(.ant-select-focused .ant-select-selector) {
+      border-color: #D92D20 !important;
+      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    }
+  }
+
+  // 自定义聚合标签样式（用于 maxTagPlaceholder 返回的元素，不受 Token 控制）
+  &-more-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: #EAECF0;
+    color: #344054;
+    border: none;
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #D0D5DD;
+    }
+  }
+
+  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  &-readonly {
+    &-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 12px 16px;
+      background-color: #F9FAFB;
+      border: 1px solid #EAECF0;
+      border-radius: 8px;
+      min-height: 48px;
+    }
+
+    &-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      background-color: #EAECF0;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #344054;
+
+      &-icon {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &-more-tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 6px 10px;
+      background-color: #EAECF0;
+      color: #344054;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      cursor: pointer;
+    }
+
+    &-empty {
+      color: #667085;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}
+
+// 动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/es/components/pisellMultipleSelect/PisellMultipleSelect.stories.d.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMultipleSelect from './PisellMultipleSelect';
+/**
+ * PisellMultipleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellMultipleSelect>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMultipleSelect>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 带标签
+ */
+export declare const WithLabel: Story;
+/**
+ * 标签聚合功能
+ */
+export declare const TagAggregation: Story;
+/**
+ * 最大可选数量限制
+ */
+export declare const WithMaxCount: Story;
+/**
+ * 带搜索功能
+ */
+export declare const WithSearch: Story;
+/**
+ * 带清空按钮
+ */
+export declare const WithClear: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 只读态 - 标签聚合
+ */
+export declare const ReadOnlyWithAggregation: Story;
+/**
+ * 只读态 - 空值
+ */
+export declare const ReadOnlyEmpty: Story;
+/**
+ * 错误状态
+ */
+export declare const WithError: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 回调事件演示
+ */
+export declare const WithCallbacks: Story;
+/**
+ * 所有状态组合
+ */
+export declare const AllStates: Story;