@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellPhone/constants/countryCodes.d.ts

@@ -0,0 +1,20 @@
+import type { CountryCode } from '../types';
+/**
+ * 预设的国家码列表（24个常见国家）
+ *
+ * 包含：
+ * - 亚洲：中国、香港、澳门、台湾、日本、韩国、新加坡、马来西亚、泰国、印度
+ * - 欧洲：英国、法国、德国、意大利、西班牙、俄罗斯
+ * - 美洲：美国、加拿大、墨西哥、巴西
+ * - 大洋洲：澳大利亚、新西兰
+ * - 中东：阿联酋、沙特阿拉伯
+ */
+export declare const PRESET_COUNTRY_CODES: CountryCode[];
+/**
+ * 默认国家码
+ */
+export declare const DEFAULT_COUNTRY_CODE = "+86";
+/**
+ * 常用国家码（可作为默认的 commonCountryCodes）
+ */
+export declare const COMMON_COUNTRY_CODES: string[];

package/es/components/pisellPhone/constants/countryCodes.js

@@ -0,0 +1,199 @@
+/**
+ * 预设的国家码列表（24个常见国家）
+ * 
+ * 包含：
+ * - 亚洲：中国、香港、澳门、台湾、日本、韩国、新加坡、马来西亚、泰国、印度
+ * - 欧洲：英国、法国、德国、意大利、西班牙、俄罗斯
+ * - 美洲：美国、加拿大、墨西哥、巴西
+ * - 大洋洲：澳大利亚、新西兰
+ * - 中东：阿联酋、沙特阿拉伯
+ */
+export var PRESET_COUNTRY_CODES = [
+// 亚洲
+{
+  code: '+86',
+  name: '中国',
+  flag: '🇨🇳',
+  format: 'XXX XXXX XXXX',
+  maxLength: 11,
+  pattern: /^1[3-9]\d{9}$/
+}, {
+  code: '+852',
+  name: '香港',
+  flag: '🇭🇰',
+  format: 'XXXX XXXX',
+  maxLength: 8,
+  pattern: /^\d{8}$/
+}, {
+  code: '+853',
+  name: '澳门',
+  flag: '🇲🇴',
+  format: 'XXXX XXXX',
+  maxLength: 8,
+  pattern: /^\d{8}$/
+}, {
+  code: '+886',
+  name: '台湾',
+  flag: '🇹🇼',
+  format: 'XXXX XXX XXX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}, {
+  code: '+81',
+  name: '日本',
+  flag: '🇯🇵',
+  format: 'XX-XXXX-XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+82',
+  name: '韩国',
+  flag: '🇰🇷',
+  format: 'XX-XXXX-XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+65',
+  name: '新加坡',
+  flag: '🇸🇬',
+  format: 'XXXX XXXX',
+  maxLength: 8,
+  pattern: /^\d{8}$/
+}, {
+  code: '+60',
+  name: '马来西亚',
+  flag: '🇲🇾',
+  format: 'XX-XXXX XXXX',
+  maxLength: 10,
+  pattern: /^\d{9,10}$/
+}, {
+  code: '+66',
+  name: '泰国',
+  flag: '🇹🇭',
+  format: 'XX-XXX-XXXX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}, {
+  code: '+91',
+  name: '印度',
+  flag: '🇮🇳',
+  format: 'XXXXX XXXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+},
+// 欧洲
+{
+  code: '+44',
+  name: '英国',
+  flag: '🇬🇧',
+  format: 'XXXX XXX XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+33',
+  name: '法国',
+  flag: '🇫🇷',
+  format: 'X XX XX XX XX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}, {
+  code: '+49',
+  name: '德国',
+  flag: '🇩🇪',
+  format: 'XXX XXXXXXX',
+  maxLength: 11,
+  pattern: /^\d{10,11}$/
+}, {
+  code: '+39',
+  name: '意大利',
+  flag: '🇮🇹',
+  format: 'XXX XXX XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+34',
+  name: '西班牙',
+  flag: '🇪🇸',
+  format: 'XXX XX XX XX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}, {
+  code: '+7',
+  name: '俄罗斯',
+  flag: '🇷🇺',
+  format: 'XXX XXX-XX-XX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+},
+// 美洲
+{
+  code: '+1',
+  name: '美国',
+  flag: '🇺🇸',
+  format: '(XXX) XXX-XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+1',
+  name: '加拿大',
+  flag: '🇨🇦',
+  format: '(XXX) XXX-XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+52',
+  name: '墨西哥',
+  flag: '🇲🇽',
+  format: 'XX XXXX XXXX',
+  maxLength: 10,
+  pattern: /^\d{10}$/
+}, {
+  code: '+55',
+  name: '巴西',
+  flag: '🇧🇷',
+  format: 'XX XXXXX-XXXX',
+  maxLength: 11,
+  pattern: /^\d{10,11}$/
+},
+// 大洋洲
+{
+  code: '+61',
+  name: '澳大利亚',
+  flag: '🇦🇺',
+  format: 'XXX XXX XXX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}, {
+  code: '+64',
+  name: '新西兰',
+  flag: '🇳🇿',
+  format: 'XX XXX XXXX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+},
+// 中东
+{
+  code: '+971',
+  name: '阿联酋',
+  flag: '🇦🇪',
+  format: 'XX XXX XXXX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}, {
+  code: '+966',
+  name: '沙特阿拉伯',
+  flag: '🇸🇦',
+  format: 'XX XXX XXXX',
+  maxLength: 9,
+  pattern: /^\d{9}$/
+}];
+
+/**
+ * 默认国家码
+ */
+export var DEFAULT_COUNTRY_CODE = '+86';
+
+/**
+ * 常用国家码（可作为默认的 commonCountryCodes）
+ */
+export var COMMON_COUNTRY_CODES = ['+86', '+1', '+44'];

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

@@ -0,0 +1,7 @@
+/**
+ * PisellPhone 组件导出
+ */
+export { default as PisellPhone } from './PisellPhone';
+export type { PisellPhoneProps, CountryCode } from './types';
+export { PRESET_COUNTRY_CODES, DEFAULT_COUNTRY_CODE, COMMON_COUNTRY_CODES } from './constants/countryCodes';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

package/es/components/pisellPhone/index.js

@@ -0,0 +1,9 @@
+/**
+ * PisellPhone 组件导出
+ */
+
+export { default as PisellPhone } from "./PisellPhone";
+// 导出预设国家码列表，方便使用
+export { PRESET_COUNTRY_CODES, DEFAULT_COUNTRY_CODE, COMMON_COUNTRY_CODES } from "./constants/countryCodes";
+
+// 公共类型从 types 中重新导出，方便使用

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

@@ -0,0 +1,209 @@
+import type { CSSProperties } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * 国家码配置类型
+ */
+export interface CountryCode {
+    /**
+     * 国家码
+     * @example '+86', '+1', '+44'
+     */
+    code: string;
+    /**
+     * 国家名称
+     * @example '中国', '美国', '英国'
+     */
+    name: string;
+    /**
+     * 国旗 emoji 或图标
+     * @example '🇨🇳', '🇺🇸', '🇬🇧'
+     */
+    flag: string;
+    /**
+     * 号码格式（可选，用于显示占位符）
+     * @example 'XXX XXXX XXXX', '(XXX) XXX-XXXX'
+     */
+    format?: string;
+    /**
+     * 最大长度
+     * @example 11 (中国), 10 (美国)
+     */
+    maxLength: number;
+    /**
+     * 校验正则
+     * @example /^1[3-9]\d{9}$/ (中国手机号)
+     */
+    pattern: RegExp;
+}
+/**
+ * PisellPhone 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加电话号码特有的配置
+ */
+export interface PisellPhoneProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 当前选中的国家码
+     * @default '+86'
+     * @example '+86', '+1', '+44'
+     */
+    countryCode?: string;
+    /**
+     * 默认国家码（非受控模式）
+     * @default '+86'
+     */
+    defaultCountryCode?: string;
+    /**
+     * 是否显示国家码选择器
+     * @default true
+     */
+    showCountrySelector?: boolean;
+    /**
+     * 可用的国家码列表（从预设24个中过滤）
+     * @example ['+86', '+1', '+44']
+     */
+    availableCountryCodes?: string[];
+    /**
+     * 常用国家码（置顶显示）
+     * @example ['+86', '+1']
+     */
+    commonCountryCodes?: string[];
+    /**
+     * 完全自定义国家码列表（覆盖预设）
+     */
+    countryCodes?: CountryCode[];
+    /**
+     * 国家码变更回调
+     * @param code 新的国家码
+     */
+    onCountryCodeChange?: (code: string) => void;
+    /**
+     * 是否自动格式化
+     * @default true
+     */
+    autoFormat?: boolean;
+    /**
+     * 格式化规则
+     * @default 'auto'
+     */
+    formatRule?: 'mobile' | 'landline' | 'auto';
+    /**
+     * 格式化分隔符
+     * @default ' '
+     */
+    separator?: string;
+    /**
+     * 是否启用拨号（移动端）
+     * @default true
+     */
+    enableDial?: boolean;
+    /**
+     * 是否显示拨号图标
+     * @default false
+     */
+    showDialIcon?: boolean;
+    /**
+     * 拨号回调
+     * @param phone 完整的电话号码（含国家码）
+     */
+    onDial?: (phone: string) => void;
+    /**
+     * 是否脱敏显示（只读态）
+     * @default false
+     */
+    enableMasking?: boolean;
+    /**
+     * 脱敏模式
+     * - middle: 中间4位脱敏（138****0000）
+     * - last: 后4位脱敏（1380000****）
+     * - custom: 使用自定义函数
+     * @default 'middle'
+     */
+    maskPattern?: 'middle' | 'last' | 'custom';
+    /**
+     * 自定义脱敏函数
+     * @param phone 电话号码
+     * @returns 脱敏后的号码
+     */
+    customMask?: (phone: string) => string;
+    /**
+     * 是否显示国旗图标
+     * @default true
+     */
+    showFlag?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 占位文本
+     * @default '请输入电话号码'
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（根据国家码自动设置）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 是否校验格式
+     * @default true
+     */
+    validateFormat?: boolean;
+    /**
+     * 自定义校验函数
+     * @param phone 电话号码（纯数字）
+     * @param countryCode 国家码
+     * @returns true 表示校验通过，string 表示错误信息
+     */
+    customValidator?: (phone: string, countryCode: string) => boolean | string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

package/es/components/pisellPhone/types.js

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

package/es/components/pisellPhone/utils/countryCodeHelper.d.ts

@@ -0,0 +1,35 @@
+import type { CountryCode, PisellPhoneProps } from '../types';
+/**
+ * 根据国家码获取国旗 emoji
+ * @param countryCode 国家码
+ * @returns 国旗 emoji
+ */
+export declare function getCountryFlag(countryCode: string): string;
+/**
+ * 根据国家码获取最大长度
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 最大长度
+ */
+export declare function getMaxLength(countryCode: string, countryCodes: CountryCode[]): number;
+/**
+ * 根据国家码获取配置
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 国家码配置
+ */
+export declare function getCountryConfig(countryCode: string, countryCodes: CountryCode[]): CountryCode | undefined;
+/**
+ * 获取最终的国家码列表
+ *
+ * 优先级：
+ * 1. props.countryCodes（完全自定义）
+ * 2. props.availableCountryCodes（从预设中过滤）
+ * 3. PRESET_COUNTRY_CODES（默认全部24个）
+ *
+ * 然后根据 props.commonCountryCodes 排序（置顶）
+ *
+ * @param props 组件 Props
+ * @returns 国家码列表
+ */
+export declare function getCountryCodes(props: PisellPhoneProps): CountryCode[];

package/es/components/pisellPhone/utils/countryCodeHelper.js

@@ -0,0 +1,87 @@
+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 _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 _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 _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; }
+import { PRESET_COUNTRY_CODES } from "../constants/countryCodes";
+/**
+ * 根据国家码获取国旗 emoji
+ * @param countryCode 国家码
+ * @returns 国旗 emoji
+ */
+export function getCountryFlag(countryCode) {
+  var country = PRESET_COUNTRY_CODES.find(function (c) {
+    return c.code === countryCode;
+  });
+  return (country === null || country === void 0 ? void 0 : country.flag) || '🌐';
+}
+
+/**
+ * 根据国家码获取最大长度
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 最大长度
+ */
+export function getMaxLength(countryCode, countryCodes) {
+  var country = countryCodes.find(function (c) {
+    return c.code === countryCode;
+  });
+  return (country === null || country === void 0 ? void 0 : country.maxLength) || 15;
+}
+
+/**
+ * 根据国家码获取配置
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 国家码配置
+ */
+export function getCountryConfig(countryCode, countryCodes) {
+  return countryCodes.find(function (c) {
+    return c.code === countryCode;
+  });
+}
+
+/**
+ * 获取最终的国家码列表
+ * 
+ * 优先级：
+ * 1. props.countryCodes（完全自定义）
+ * 2. props.availableCountryCodes（从预设中过滤）
+ * 3. PRESET_COUNTRY_CODES（默认全部24个）
+ * 
+ * 然后根据 props.commonCountryCodes 排序（置顶）
+ * 
+ * @param props 组件 Props
+ * @returns 国家码列表
+ */
+export function getCountryCodes(props) {
+  var codes;
+
+  // 1. 优先使用完全自定义列表
+  if (props.countryCodes && props.countryCodes.length > 0) {
+    codes = props.countryCodes;
+  }
+  // 2. 根据 availableCountryCodes 从预设中过滤
+  else if (props.availableCountryCodes && props.availableCountryCodes.length > 0) {
+    codes = PRESET_COUNTRY_CODES.filter(function (c) {
+      return props.availableCountryCodes.includes(c.code);
+    });
+  }
+  // 3. 默认使用全部预设（24个）
+  else {
+    codes = PRESET_COUNTRY_CODES;
+  }
+
+  // 根据 commonCountryCodes 排序（置顶）
+  if (props.commonCountryCodes && props.commonCountryCodes.length > 0) {
+    var common = codes.filter(function (c) {
+      return props.commonCountryCodes.includes(c.code);
+    });
+    var others = codes.filter(function (c) {
+      return !props.commonCountryCodes.includes(c.code);
+    });
+    codes = [].concat(_toConsumableArray(common), _toConsumableArray(others));
+  }
+  return codes;
+}

package/es/components/pisellPhone/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 电话号码工具函数导出
+ */
+export { formatPhone, formatChinaMobile, formatUSPhone, maskPhone, detectPhoneType } from './phoneFormatter';
+export { validatePhone } from './phoneValidator';
+export { getCountryFlag, getMaxLength, getCountryConfig, getCountryCodes, } from './countryCodeHelper';

package/es/components/pisellPhone/utils/index.js

@@ -0,0 +1,7 @@
+/**
+ * 电话号码工具函数导出
+ */
+
+export { formatPhone, formatChinaMobile, formatUSPhone, maskPhone, detectPhoneType } from "./phoneFormatter";
+export { validatePhone } from "./phoneValidator";
+export { getCountryFlag, getMaxLength, getCountryConfig, getCountryCodes } from "./countryCodeHelper";

package/es/components/pisellPhone/utils/phoneFormatter.js

@@ -0,0 +1,112 @@
+/**
+ * 电话号码格式化工具
+ */
+
+/**
+ * 中国大陆手机号格式化：138 0000 0000
+ */
+export function formatChinaMobile(phone) {
+  var cleaned = phone.replace(/\D/g, '');
+  if (cleaned.length <= 3) return cleaned;
+  if (cleaned.length <= 7) {
+    return "".concat(cleaned.slice(0, 3), " ").concat(cleaned.slice(3));
+  }
+  return "".concat(cleaned.slice(0, 3), " ").concat(cleaned.slice(3, 7), " ").concat(cleaned.slice(7, 11));
+}
+
+/**
+ * 美国/加拿大号码格式化：(555) 123-4567
+ */
+export function formatUSPhone(phone) {
+  var cleaned = phone.replace(/\D/g, '');
+  if (cleaned.length <= 3) return cleaned;
+  if (cleaned.length <= 6) {
+    return "(".concat(cleaned.slice(0, 3), ") ").concat(cleaned.slice(3));
+  }
+  return "(".concat(cleaned.slice(0, 3), ") ").concat(cleaned.slice(3, 6), "-").concat(cleaned.slice(6, 10));
+}
+
+/**
+ * 英国号码格式化：1234 567 8900
+ */
+export function formatUKPhone(phone) {
+  var cleaned = phone.replace(/\D/g, '');
+  if (cleaned.length <= 4) return cleaned;
+  if (cleaned.length <= 7) {
+    return "".concat(cleaned.slice(0, 4), " ").concat(cleaned.slice(4));
+  }
+  return "".concat(cleaned.slice(0, 4), " ").concat(cleaned.slice(4, 7), " ").concat(cleaned.slice(7, 11));
+}
+
+/**
+ * 根据国家码格式化电话号码
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @returns 格式化后的电话号码
+ */
+export function formatPhone(phone, countryCode) {
+  var cleaned = phone.replace(/\D/g, '');
+  switch (countryCode) {
+    case '+86':
+      return formatChinaMobile(cleaned);
+    case '+1':
+      return formatUSPhone(cleaned);
+    case '+44':
+      return formatUKPhone(cleaned);
+    default:
+      // 其他国家暂时返回原始数字
+      return cleaned;
+  }
+}
+
+/**
+ * 电话号码脱敏
+ * @param phone 电话号码
+ * @param pattern 脱敏模式
+ * @returns 脱敏后的号码
+ * 
+ * @example
+ * maskPhone('13800000000', 'middle') // '138****0000'
+ * maskPhone('13800000000', 'last')   // '1380000****'
+ */
+export function maskPhone(phone) {
+  var pattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'middle';
+  var cleaned = phone.replace(/\D/g, '');
+  if (cleaned.length < 7) return cleaned;
+  switch (pattern) {
+    case 'middle':
+      // 中间4位脱敏
+      if (cleaned.length === 11) {
+        return cleaned.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+      }
+      return cleaned;
+    case 'last':
+      // 后4位脱敏
+      if (cleaned.length >= 7) {
+        return cleaned.slice(0, -4) + '****';
+      }
+      return cleaned;
+    default:
+      return cleaned;
+  }
+}
+
+/**
+ * 检测号码类型（中国）
+ * @param phone 电话号码
+ * @returns 号码类型
+ */
+export function detectPhoneType(phone) {
+  var cleaned = phone.replace(/\D/g, '');
+
+  // 中国手机号：1开头，11位
+  if (/^1[3-9]\d{9}$/.test(cleaned)) {
+    return 'mobile';
+  }
+
+  // 中国固话：区号+号码
+  if (/^0\d{2,3}\d{7,8}$/.test(cleaned)) {
+    return 'landline';
+  }
+  return 'unknown';
+}