@pisell/materials 6.9.4 → 6.11.1

package/es/components/pisellSingleSelect/components/EditView.js

@@ -0,0 +1,156 @@
+var _excluded = ["value", "options", "label", "helperText", "error", "errorText", "required", "placeholder", "showSearch", "allowClear", "size", "className", "style", "onSearch", "filterOption", "onChange"];
+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; }
+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 - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+
+import React, { forwardRef, useMemo, useCallback, useState } from 'react';
+import { Select, Input } from 'antd';
+import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { useDebouncedSearch } from '@pisell/utils';
+var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    options = props.options,
+    label = props.label,
+    helperText = props.helperText,
+    error = props.error,
+    errorText = props.errorText,
+    required = props.required,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    className = props.className,
+    style = props.style,
+    onSearch = props.onSearch,
+    filterOption = props.filterOption,
+    onChange = props.onChange,
+    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]);
+
+  // 处理值变化
+  var handleChange = function handleChange(newValue) {
+    var selectedOption = options.find(function (opt) {
+      return opt.value === newValue;
+    });
+    onChange === null || onChange === void 0 || onChange(newValue !== null && newValue !== void 0 ? newValue : null, selectedOption !== null && selectedOption !== void 0 ? selectedOption : null);
+  };
+
+  // 搜索关键词状态
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchKeyword = _useState2[0],
+    setSearchKeyword = _useState2[1];
+
+  // 处理搜索输入（防抖）
+  var _useDebouncedSearch = useDebouncedSearch('', 300, function (text) {
+      onSearch === null || onSearch === void 0 || onSearch(text);
+    }),
+    _useDebouncedSearch2 = _slicedToArray(_useDebouncedSearch, 2),
+    setSearchInput = _useDebouncedSearch2[1];
+  var handleSearchInput = function handleSearchInput(e) {
+    var text = e.target.value;
+    setSearchKeyword(text);
+    setSearchInput(text);
+  };
+
+  // 过滤选项
+  var filteredAntdOptions = useMemo(function () {
+    if (!showSearch || !searchKeyword) return antdOptions;
+    if (filterOption) {
+      // 使用自定义过滤
+      return antdOptions.filter(function (opt) {
+        var selectOption = options.find(function (o) {
+          return o.value === opt.value;
+        });
+        return selectOption ? filterOption(searchKeyword, selectOption) : false;
+      });
+    }
+
+    // 默认按 label 过滤
+    return antdOptions.filter(function (opt) {
+      return opt.label.toLowerCase().includes(searchKeyword.toLowerCase());
+    });
+  }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+
+  // 自定义选中图标
+  var menuItemSelectedIcon = /*#__PURE__*/React.createElement(CheckOutlined, {
+    style: {
+      color: '#7F56D9',
+      fontSize: 16
+    }
+  });
+
+  // 自定义下拉框渲染（在顶部添加搜索框）
+  var dropdownRender = useCallback(function (menu) {
+    if (!showSearch) return menu;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-select-search-wrapper"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "Search",
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+        style: {
+          color: '#98A2B3',
+          fontSize: 16
+        }
+      }),
+      value: searchKeyword,
+      onChange: handleSearchInput,
+      className: "pisell-select-search-input",
+      bordered: false,
+      autoFocus: true
+    })), menu);
+  }, [showSearch, searchKeyword, handleSearchInput]);
+  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: filteredAntdOptions,
+    placeholder: placeholder,
+    showSearch: false,
+    allowClear: allowClear,
+    menuItemSelectedIcon: menuItemSelectedIcon,
+    dropdownRender: dropdownRender,
+    onChange: handleChange,
+    size: size,
+    className: classNames('pisell-single-select', {
+      'pisell-single-select-error': error
+    })
+  })), helperText && !error && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-select-helper-text"
+  }, helperText), error && errorText && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-select-error-text"
+  }, errorText));
+});
+EditView.displayName = 'PisellSingleSelectEditView';
+export default EditView;

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

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+import React from 'react';
+import type { ReadOnlyViewProps } from '../types';
+declare const ReadOnlyView: React.FC<ReadOnlyViewProps>;
+export default ReadOnlyView;

package/es/components/pisellSingleSelect/components/ReadOnlyView.js

@@ -0,0 +1,37 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { findOptionByValue } from '@pisell/utils';
+var ReadOnlyView = function ReadOnlyView(props) {
+  var value = props.value,
+    options = props.options,
+    label = props.label,
+    required = props.required,
+    className = props.className,
+    style = props.style;
+
+  // 查找选中的选项
+  var selectedOption = useMemo(function () {
+    return value !== null && value !== undefined ? findOptionByValue(value, options) : undefined;
+  }, [value, options]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-single-select-wrapper', 'pisell-single-select-readonly', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-single-select-label', {
+      'pisell-single-select-label-required': required
+    })
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-select-readonly-display"
+  }, selectedOption ? /*#__PURE__*/React.createElement(React.Fragment, null, selectedOption.icon && /*#__PURE__*/React.createElement("span", {
+    className: "pisell-single-select-readonly-icon"
+  }, selectedOption.icon), /*#__PURE__*/React.createElement("span", null, selectedOption.label)) : /*#__PURE__*/React.createElement("span", {
+    className: "pisell-single-select-readonly-empty"
+  }, "-")));
+};
+ReadOnlyView.displayName = 'PisellSingleSelectReadOnlyView';
+export default ReadOnlyView;

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

@@ -0,0 +1,6 @@
+/**
+ * PisellSingleSelect 组件导出
+ */
+export { default as PisellSingleSelect } from './PisellSingleSelect';
+export type { PisellSingleSelectProps, SingleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, } from './types';
+export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from './types';

package/es/components/pisellSingleSelect/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellSingleSelect 组件导出
+ */
+
+export { default as PisellSingleSelect } from "./PisellSingleSelect";
+
+// 公共类型从 types 中重新导出，方便使用

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

@@ -0,0 +1,92 @@
+import type { BaseSelectProps, SelectOption } from '@pisell/utils';
+/**
+ * PisellSingleSelect 组件 Props 类型定义
+ *
+ * 继承 BaseSelectProps，添加单选特有的配置
+ * @template T 选项值的类型，默认为 string | number
+ */
+export interface PisellSingleSelectProps<T = string | number> extends BaseSelectProps<T> {
+    /**
+     * 受控模式：当前选中值
+     */
+    value?: T | null;
+    /**
+     * 非受控模式：默认选中值
+     */
+    defaultValue?: T;
+    /**
+     * 值变化回调
+     * @param value 新的选中值
+     * @param option 选中的选项对象（如果值为 null 则 option 也为 null）
+     */
+    onChange?: (value: T | null, option: SelectOption<T> | null) => void;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 是否必填
+     */
+    'aria-required'?: boolean;
+    /**
+     * ARIA 是否无效
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * ARIA 描述关联 ID
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * PisellSingleSelect 组件 Ref 方法
+ * @template T 选项值的类型
+ */
+export interface SingleSelectRef<T = string | number> {
+    /**
+     * 聚焦到组件
+     */
+    focus: () => void;
+    /**
+     * 失焦
+     */
+    blur: () => void;
+    /**
+     * 获取当前选中值
+     */
+    getValue: () => T | null;
+    /**
+     * 设置选中值
+     */
+    setValue: (value: T | null) => void;
+    /**
+     * 清空选中值
+     */
+    clearValue: () => void;
+}
+/**
+ * EditView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface EditViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+    /**
+     * 内部状态管理对象（从 useSelectState Hook 传入）
+     */
+    state?: {
+        value: T | null | undefined;
+        setValue: (value: T | null) => void;
+        clearValue: () => void;
+    };
+}
+/**
+ * DisabledView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface DisabledViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+}
+/**
+ * ReadOnlyView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface ReadOnlyViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+}
+export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from '@pisell/utils';

package/es/components/pisellSingleSelect/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellUrl/PisellUrl.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PisellUrlProps } from './types';
+import './PisellUrl.less';
+/**
+ * PisellUrl URL 链接组件
+ *
+ * URL 链接输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供 URL 格式校验、协议自动补全、
+ * 链接跳转和协议/路径显示控制功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（URL 输入）
+ * <PisellUrl
+ *   placeholder="请输入网址"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可跳转）
+ * <PisellUrl
+ *   mode="read"
+ *   value="https://www.example.com"
+ *   enableLinkClick
+ * />
+ *
+ * @example
+ * // 协议自动补全
+ * <PisellUrl
+ *   autoCompleteProtocol
+ *   defaultProtocol="https://"
+ * />
+ */
+export declare const PisellUrl: React.FC<PisellUrlProps>;
+declare const _default: React.NamedExoticComponent<PisellUrlProps>;
+export default _default;

package/es/components/pisellUrl/PisellUrl.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import "./PisellUrl.less";
+
+/**
+ * PisellUrl URL 链接组件
+ * 
+ * URL 链接输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供 URL 格式校验、协议自动补全、
+ * 链接跳转和协议/路径显示控制功能。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 编辑态（URL 输入）
+ * <PisellUrl 
+ *   placeholder="请输入网址"
+ *   required
+ * />
+ * 
+ * @example
+ * // 只读态（可跳转）
+ * <PisellUrl 
+ *   mode="read"
+ *   value="https://www.example.com"
+ *   enableLinkClick
+ * />
+ * 
+ * @example
+ * // 协议自动补全
+ * <PisellUrl 
+ *   autoCompleteProtocol
+ *   defaultProtocol="https://"
+ * />
+ */
+export var PisellUrl = function PisellUrl(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化：使用 memo 避免不必要的重渲染
+export default /*#__PURE__*/React.memo(PisellUrl, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.autoCompleteProtocol === nextProps.autoCompleteProtocol;
+});

package/es/components/pisellUrl/PisellUrl.less

@@ -0,0 +1,46 @@
+/**
+ * PisellUrl 组件样式
+ */
+
+.pisell-url {
+  &-edit {
+    width: 100%;
+
+    // 错误提示样式
+    &-error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #ff4d4f;
+      line-height: 1.5;
+    }
+  }
+
+  &-read {
+    display: inline-flex;
+    align-items: center;
+
+    // 链接样式
+    .ant-typography-link {
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    // 链接图标
+    .anticon-link {
+      font-size: 14px;
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    * {
+      cursor: not-allowed !important;
+    }
+  }
+}

package/es/components/pisellUrl/PisellUrl.stories.d.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellUrl } from './PisellUrl';
+/**
+ * PisellUrl 是一个 URL 地址输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - URL 格式校验
+ * - 协议自动补全
+ * - 链接跳转（新窗口，安全性保障）
+ * - 协议/路径显示控制
+ * - 协议白名单限制
+ */
+declare const meta: Meta<typeof PisellUrl>;
+export default meta;
+declare type Story = StoryObj<typeof PisellUrl>;
+/**
+ * 基础编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 协议自动补全
+ */
+export declare const WithProtocolAutoComplete: Story;
+/**
+ * 只读态 - 可跳转
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 隐藏协议
+ */
+export declare const ReadModeHideProtocol: Story;
+/**
+ * 只读态 - 仅域名
+ */
+export declare const ReadModeDomainOnly: Story;
+/**
+ * 禁用态（编辑）
+ */
+export declare const DisabledEdit: Story;
+/**
+ * 禁用态（只读）
+ */
+export declare const DisabledRead: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验（实时）
+ */
+export declare const FormatValidation: Story;
+/**
+ * 协议限制（仅 HTTPS）
+ */
+export declare const HttpsOnly: Story;
+/**
+ * 协议必需
+ */
+export declare const RequireProtocol: Story;
+/**
+ * 显示清空按钮
+ */
+export declare const WithClearButton: Story;
+/**
+ * 自动聚焦
+ */
+export declare const WithAutoFocus: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 显示控制对比
+ */
+export declare const DisplayFormatComparison: Story;
+/**
+ * 校验时机对比
+ */
+export declare const ValidateTriggerComparison: Story;
+/**
+ * 所有状态展示
+ */
+export declare const AllStates: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;
+/**
+ * 协议补全演示
+ */
+export declare const ProtocolCompleteDemo: Story;
+/**
+ * 链接跳转演示
+ */
+export declare const LinkClickDemo: Story;
+/**
+ * 协议限制演示
+ */
+export declare const ProtocolRestrictionDemo: Story;
+/**
+ * 完整交互示例
+ */
+export declare const InteractiveExample: Story;
+/**
+ * 协议默认值对比
+ */
+export declare const ProtocolDefaultComparison: Story;