@pisell/materials 6.9.4 → 6.11.1

package/es/components/pisellEmail/PisellEmail.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PisellEmailProps } from './types';
+import './PisellEmail.less';
+/**
+ * PisellEmail 邮箱地址组件
+ *
+ * 邮箱地址输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design AutoComplete 和 Input 组件开发，提供邮箱格式校验、域名智能补全、
+ * mailto 邮件发送和域名隐藏功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（邮箱输入）
+ * <PisellEmail
+ *   placeholder="请输入邮箱地址"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可发邮件）
+ * <PisellEmail
+ *   mode="read"
+ *   value="user@example.com"
+ *   enableMailto
+ * />
+ *
+ * @example
+ * // 域名补全
+ * <PisellEmail
+ *   enableAutoComplete
+ *   autoCompleteDomains={['gmail.com', 'company.com']}
+ * />
+ */
+export declare const PisellEmail: React.FC<PisellEmailProps>;
+declare const _default: React.NamedExoticComponent<PisellEmailProps>;
+export default _default;

package/es/components/pisellEmail/PisellEmail.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 "./PisellEmail.less";
+
+/**
+ * PisellEmail 邮箱地址组件
+ * 
+ * 邮箱地址输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design AutoComplete 和 Input 组件开发，提供邮箱格式校验、域名智能补全、
+ * mailto 邮件发送和域名隐藏功能。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 编辑态（邮箱输入）
+ * <PisellEmail 
+ *   placeholder="请输入邮箱地址"
+ *   required
+ * />
+ * 
+ * @example
+ * // 只读态（可发邮件）
+ * <PisellEmail 
+ *   mode="read"
+ *   value="user@example.com"
+ *   enableMailto
+ * />
+ * 
+ * @example
+ * // 域名补全
+ * <PisellEmail 
+ *   enableAutoComplete
+ *   autoCompleteDomains={['gmail.com', 'company.com']}
+ * />
+ */
+export var PisellEmail = function PisellEmail(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(PisellEmail, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.enableAutoComplete === nextProps.enableAutoComplete;
+});

package/es/components/pisellEmail/PisellEmail.less

@@ -0,0 +1,50 @@
+/**
+ * PisellEmail 组件样式
+ */
+
+.pisell-email {
+  &-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;
+      }
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    * {
+      cursor: not-allowed !important;
+    }
+  }
+}
+
+// AutoComplete 下拉样式优化
+.pisell-email-autocomplete-dropdown {
+  .ant-select-item-option-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}

package/es/components/pisellEmail/PisellEmail.stories.d.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellEmail } from './PisellEmail';
+/**
+ * PisellEmail 是一个邮箱地址输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 邮箱格式校验（标准/严格）
+ * - 域名智能补全
+ * - mailto 邮件发送
+ * - 域名隐藏/脱敏
+ * - 白名单/黑名单域名限制
+ */
+declare const meta: Meta<typeof PisellEmail>;
+export default meta;
+declare type Story = StoryObj<typeof PisellEmail>;
+/**
+ * 基础编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 域名智能补全
+ */
+export declare const WithAutoComplete: Story;
+/**
+ * 自定义补全域名
+ */
+export declare const CustomDomains: Story;
+/**
+ * 只读态 - 可发邮件
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 带邮件图标
+ */
+export declare const ReadModeWithIcon: Story;
+/**
+ * 只读态 - 域名部分隐藏
+ */
+export declare const ReadModePartialMask: Story;
+/**
+ * 只读态 - 域名完全隐藏
+ */
+export declare const ReadModeFullMask: Story;
+/**
+ * 禁用态（编辑）
+ */
+export declare const DisabledEdit: Story;
+/**
+ * 禁用态（只读）
+ */
+export declare const DisabledRead: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验（实时）
+ */
+export declare const FormatValidation: Story;
+/**
+ * 严格格式校验
+ */
+export declare const StrictValidation: Story;
+/**
+ * 白名单域名限制
+ */
+export declare const AllowedDomains: Story;
+/**
+ * 黑名单域名限制
+ */
+export declare const BlockedDomains: Story;
+/**
+ * 显示清空按钮
+ */
+export declare const WithClearButton: Story;
+/**
+ * 自动聚焦
+ */
+export declare const WithAutoFocus: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 脱敏模式对比
+ */
+export declare const MaskingComparison: Story;
+/**
+ * 校验时机对比
+ */
+export declare const ValidateTriggerComparison: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;
+/**
+ * 域名补全演示
+ */
+export declare const AutoCompleteDemo: Story;
+/**
+ * mailto 功能演示
+ */
+export declare const MailtoDemo: Story;
+/**
+ * 白名单/黑名单演示
+ */
+export declare const DomainRestrictionDemo: Story;
+/**
+ * 所有状态展示
+ */
+export declare const AllStates: Story;
+/**
+ * 完整交互示例
+ */
+export declare const InteractiveExample: Story;