@pisell/utils 3.0.4 → 3.0.6

package/es/platform.js

@@ -1,93 +1,69 @@
-var isBrowser = typeof window != 'undefined' && window.document;
-export var isIpad = function isIpad() {
-  var ua = navigator.userAgent;
-  var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;
-  var isIphone = ua.indexOf("iPhone") != -1 && ua.indexOf("Version") != -1;
-  var isIPad = isSafari && !isIphone && "ontouchend" in document;
-  if (!/iphone|ios|ipad|android|mobile/i.test(navigator.userAgent.toLowerCase()) && !isIPad) {
-    return false;
-  }
-  return true;
+//#region src/platform.ts
+const isBrowser = typeof window != "undefined" && window.document;
+const isIpad = () => {
+	var ua = navigator.userAgent;
+	var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;
+	var isIphone = ua.indexOf("iPhone") != -1 && ua.indexOf("Version") != -1;
+	var isIPad = isSafari && !isIphone && "ontouchend" in document;
+	if (!/iphone|ios|ipad|android|mobile/i.test(navigator.userAgent.toLowerCase()) && !isIPad) return false;
+	return true;
 };
-export var isMobile = function isMobile() {
-  var sUserAgent = window.navigator.userAgent.toLowerCase();
-  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
-  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
-  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
-  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
-  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
-  var bIsAndroid = sUserAgent.match(/android/i) == "android";
-  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
-  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
-  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || isIpad()) {
-    return true;
-  } else {
-    return false;
-  }
+const isMobile = () => {
+	let sUserAgent = window.navigator.userAgent.toLowerCase();
+	let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
+	let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
+	let bIsMidp = sUserAgent.match(/midp/i) == "midp";
+	let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
+	let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
+	let bIsAndroid = sUserAgent.match(/android/i) == "android";
+	let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
+	let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
+	if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || isIpad()) return true;
+	else return false;
 };
-
-// 是否是安卓平台
-export var isAndroid = function isAndroid() {
-  return navigator.userAgent.toLowerCase().indexOf("android") !== -1;
+const isAndroid = () => {
+	return navigator.userAgent.toLowerCase().indexOf("android") !== -1;
 };
-
-//  是否是ios平台
-export var isIos = function isIos() {
-  return /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
+const isIos = () => {
+	return /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
 };
-export var checkEnv = function checkEnv() {
-  // 0: 非浏览器环境
-  var env = 0;
-  var userAgent = window.navigator.userAgent;
-  var isOpera = userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1; //判断是否Opera浏览器
-  var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; //判断是否IE7~IE10浏览器
-  var isIE11 = userAgent.indexOf('compatible') === -1 && userAgent.indexOf('Trident') > -1; //判断是否IE11浏览器
-  var isEdge = userAgent.indexOf('Edge') > -1; //判断是否IE的Edge浏览器
-  var isFF = userAgent.indexOf('Firefox') > -1; //判断是否Firefox浏览器
-  var isSafari = userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1; //判断是否Safari浏览器
-  var isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf('; Win') > -1 && userAgent.indexOf('Safari') > -1; //判断Chrome浏览器
-  //常用浏览器
-  if (isOpera || isIE || isIE11 || isEdge || isFF || isSafari || isChrome) {
-    env = 0;
-  } else {
-    env = 1;
-  }
-  return env;
+const checkEnv = () => {
+	let env = 0;
+	let userAgent = window.navigator.userAgent;
+	let isOpera = userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1;
+	let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
+	let isIE11 = userAgent.indexOf("compatible") === -1 && userAgent.indexOf("Trident") > -1;
+	let isEdge = userAgent.indexOf("Edge") > -1;
+	let isFF = userAgent.indexOf("Firefox") > -1;
+	let isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1;
+	let isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("; Win") > -1 && userAgent.indexOf("Safari") > -1;
+	if (isOpera || isIE || isIE11 || isEdge || isFF || isSafari || isChrome) env = 0;
+	else env = 1;
+	return env;
 };
-export var isWx = function isWx() {
-  if (isBrowser) {
-    var ua = '';
-    if (isBrowser) {
-      ua = window.navigator.userAgent.toLowerCase();
-    }
-    //@ts-ignore
-    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
-      return true;
-    }
-    return false;
-  }
-  return false;
+const isWx = () => {
+	if (isBrowser) {
+		let ua = "";
+		if (isBrowser) ua = window.navigator.userAgent.toLowerCase();
+		if (ua.match(/MicroMessenger/i) == "micromessenger") return true;
+		return false;
+	}
+	return false;
 };
-export var isIOS = function isIOS() {
-  if (isBrowser) {
-    var u = navigator.userAgent;
-    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
-    return isiOS;
-  }
-  return false;
+const isIOS = () => {
+	if (isBrowser) return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+	return false;
 };
-export var isWxApp = function isWxApp() {
-  if (isBrowser) {
-    var u = navigator.userAgent;
-    var isWxapp = u.indexOf('miniProgram') !== -1;
-    return isWxapp;
-  }
-  return false;
+const isWxApp = () => {
+	if (isBrowser) return navigator.userAgent.indexOf("miniProgram") !== -1;
+	return false;
 };
-export var isSafari = function isSafari() {
-  if (isBrowser) {
-    var userAgent = window.navigator.userAgent;
-    return userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1 && userAgent.indexOf('CriOS') === -1 && userAgent.indexOf('ChannelName/Feishu') === -1;
-  }
-  return false;
-};
+const isSafari = () => {
+	if (isBrowser) {
+		let userAgent = window.navigator.userAgent;
+		return userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1 && userAgent.indexOf("CriOS") === -1 && userAgent.indexOf("ChannelName/Feishu") === -1;
+	}
+	return false;
+};
+//#endregion
+export { checkEnv, isAndroid, isIOS, isIos, isIpad, isMobile, isSafari, isWx, isWxApp };

package/es/select/hooks/useDebouncedSearch.d.ts

@@ -0,0 +1,23 @@
+//#region src/select/hooks/useDebouncedSearch.d.ts
+/**
+ * 防抖搜索 Hook
+ * 对用户输入进行防抖处理，避免频繁触发搜索
+ */
+/**
+ * 防抖搜索 Hook
+ * @template T 值的类型
+ * @param initialValue 初始值
+ * @param delay 防抖延迟时间（毫秒）
+ * @param callback 防抖后的回调函数
+ * @returns [防抖后的值, 设置值函数]
+ *
+ * @example
+ * ```tsx
+ * const [debouncedSearch, setSearchInput] = useDebouncedSearch('', 300, (text) => {
+ *   console.log('搜索关键词:', text);
+ * });
+ * ```
+ */
+declare function useDebouncedSearch<T = string>(initialValue: T, delay: number, callback?: (value: T) => void): [T, (value: T) => void];
+//#endregion
+export { useDebouncedSearch };

package/es/select/hooks/useDebouncedSearch.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+//#region src/select/hooks/useDebouncedSearch.ts
+/**
+* 防抖搜索 Hook
+* 对用户输入进行防抖处理，避免频繁触发搜索
+*/
+/**
+* 防抖搜索 Hook
+* @template T 值的类型
+* @param initialValue 初始值
+* @param delay 防抖延迟时间（毫秒）
+* @param callback 防抖后的回调函数
+* @returns [防抖后的值, 设置值函数]
+* 
+* @example
+* ```tsx
+* const [debouncedSearch, setSearchInput] = useDebouncedSearch('', 300, (text) => {
+*   console.log('搜索关键词:', text);
+* });
+* ```
+*/
+function useDebouncedSearch(initialValue, delay, callback) {
+	const [value, setValue] = useState(initialValue);
+	const [debouncedValue, setDebouncedValue] = useState(initialValue);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedValue(value);
+			callback === null || callback === void 0 || callback(value);
+		}, delay);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [
+		value,
+		delay,
+		callback
+	]);
+	return [debouncedValue, setValue];
+}
+//#endregion
+export { useDebouncedSearch };

package/es/select/hooks/useSelectState.d.ts

@@ -0,0 +1,19 @@
+import { MultipleSelectState, SelectState, UseMultipleSelectStateOptions, UseSelectStateOptions } from "../types.js";
+
+//#region src/select/hooks/useSelectState.d.ts
+/**
+ * 单选状态管理 Hook
+ * @template T 值的类型
+ * @param options Hook 配置选项
+ * @returns 状态管理对象
+ */
+declare function useSelectState<T = string | number>(options: UseSelectStateOptions<T>): SelectState<T>;
+/**
+ * 多选状态管理 Hook
+ * @template T 值的类型
+ * @param options Hook 配置选项
+ * @returns 状态管理对象
+ */
+declare function useMultipleSelectState<T = string | number>(options: UseMultipleSelectStateOptions<T>): MultipleSelectState<T>;
+//#endregion
+export { useMultipleSelectState, useSelectState };

package/es/select/hooks/useSelectState.js

@@ -0,0 +1,60 @@
+import { useCallback, useState } from "react";
+//#region src/select/hooks/useSelectState.ts
+/**
+* Select 状态管理 Hook
+* 处理受控/非受控模式，适用于单选和多选
+*/
+/**
+* 单选状态管理 Hook
+* @template T 值的类型
+* @param options Hook 配置选项
+* @returns 状态管理对象
+*/
+function useSelectState(options) {
+	const { value: controlledValue, defaultValue, onChange } = options;
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+	const value = isControlled ? controlledValue : internalValue;
+	const setValue = useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onChange === null || onChange === void 0 || onChange(newValue, null);
+	}, [isControlled, onChange]);
+	return {
+		value,
+		setValue,
+		clearValue: useCallback(() => {
+			setValue(null);
+		}, [setValue])
+	};
+}
+/**
+* 多选状态管理 Hook
+* @template T 值的类型
+* @param options Hook 配置选项
+* @returns 状态管理对象
+*/
+function useMultipleSelectState(options) {
+	const { value: controlledValue, defaultValue, onChange } = options;
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+	const value = isControlled ? controlledValue !== null && controlledValue !== void 0 ? controlledValue : [] : internalValue;
+	const setValue = useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onChange === null || onChange === void 0 || onChange(newValue, []);
+	}, [isControlled, onChange]);
+	return {
+		value,
+		setValue,
+		addValue: useCallback((val) => {
+			setValue([...value, val]);
+		}, [value, setValue]),
+		removeValue: useCallback((val) => {
+			setValue(value.filter((v) => v !== val));
+		}, [value, setValue]),
+		clearValue: useCallback(() => {
+			setValue([]);
+		}, [setValue])
+	};
+}
+//#endregion
+export { useMultipleSelectState, useSelectState };

package/es/select/index.d.ts

@@ -0,0 +1,7 @@
+import { BaseSelectProps, FilterOptionFunc, MultipleSelectState, SelectOption, SelectState, SortDirection, TagDisplayInfo, UseMultipleSelectStateOptions, UseSelectStateOptions } from "./types.js";
+import { useMultipleSelectState, useSelectState } from "./hooks/useSelectState.js";
+import { useDebouncedSearch } from "./hooks/useDebouncedSearch.js";
+import { calculateTagDisplay } from "./utils/tagAggregation.js";
+import { defaultFilterOption, filterOptions } from "./utils/filterOptions.js";
+import { sortOptions } from "./utils/sortOptions.js";
+import { findOptionByValue, findOptionsByValues, generateId, isOptionSelected, isOptionSelectedInMultiple } from "./utils/helpers.js";

package/es/select/types.d.ts

@@ -0,0 +1,256 @@
+import { DisplayState } from "../common/types.js";
+import React from "react";
+
+//#region src/select/types.d.ts
+/**
+ * 选项基础类型
+ * @template T 选项值的类型，默认为 string | number
+ */
+interface SelectOption<T = string | number> {
+  /**
+   * 选项值（唯一标识）
+   */
+  value: T;
+  /**
+   * 选项显示文本
+   */
+  label: string;
+  /**
+   * 是否禁用该选项
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 选项图标（可选）
+   */
+  icon?: React.ReactNode;
+  /**
+   * 标签背景色（多选时用于自定义标签颜色）
+   * @example '#61dafb'
+   */
+  color?: string;
+}
+/**
+ * 选项过滤函数类型
+ * @template T 选项值的类型
+ * @param input 用户输入的搜索文本
+ * @param option 当前选项对象
+ * @returns 是否保留该选项
+ */
+type FilterOptionFunc<T = string | number> = (input: string, option: SelectOption<T>) => boolean;
+/**
+ * 排序方向
+ */
+type SortDirection = 'asc' | 'desc';
+/**
+ * Select 状态 Hook 返回值（单选）
+ * @template T 值的类型
+ */
+interface SelectState<T = string | number> {
+  /**
+   * 当前选中值
+   */
+  value: T | null | undefined;
+  /**
+   * 设置选中值
+   */
+  setValue: (value: T | null) => void;
+  /**
+   * 清空选中值
+   */
+  clearValue: () => void;
+}
+/**
+ * Multiple Select 状态 Hook 返回值（多选）
+ * @template T 值的类型
+ */
+interface MultipleSelectState<T = string | number> {
+  /**
+   * 当前选中值数组
+   */
+  value: T[];
+  /**
+   * 设置选中值数组
+   */
+  setValue: (value: T[]) => void;
+  /**
+   * 添加一个选中值
+   */
+  addValue: (value: T) => void;
+  /**
+   * 移除一个选中值
+   */
+  removeValue: (value: T) => void;
+  /**
+   * 清空所有选中值
+   */
+  clearValue: () => void;
+}
+/**
+ * 标签显示信息（多选专用）
+ * @template T 选项值的类型
+ */
+interface TagDisplayInfo<T = string | number> {
+  /**
+   * 可见的标签列表
+   */
+  visibleTags: SelectOption<T>[];
+  /**
+   * 隐藏的标签列表
+   */
+  hiddenTags: SelectOption<T>[];
+  /**
+   * 隐藏的标签数量
+   */
+  hiddenCount: number;
+}
+/**
+ * useSelectState Hook 的配置选项（单选）
+ * @template T 值的类型
+ */
+interface UseSelectStateOptions<T = string | number> {
+  /**
+   * 受控模式：当前值
+   */
+  value?: T | null;
+  /**
+   * 非受控模式：默认值
+   */
+  defaultValue?: T;
+  /**
+   * 值变化回调
+   */
+  onChange?: (value: T | null, option: SelectOption<T> | null) => void;
+  /**
+   * 模式（用于类型区分）
+   */
+  mode: 'single';
+}
+/**
+ * useMultipleSelectState Hook 的配置选项（多选）
+ * @template T 值的类型
+ */
+interface UseMultipleSelectStateOptions<T = string | number> {
+  /**
+   * 受控模式：当前值数组
+   */
+  value?: T[];
+  /**
+   * 非受控模式：默认值数组
+   */
+  defaultValue?: T[];
+  /**
+   * 值变化回调
+   */
+  onChange?: (value: T[], options: SelectOption<T>[]) => void;
+  /**
+   * 模式（用于类型区分）
+   */
+  mode: 'multiple';
+}
+/**
+ * 基础 Select Props（公共属性）
+ * @template T 值的类型
+ */
+interface BaseSelectProps<T = string | number> {
+  /**
+   * 选项列表（必填）
+   */
+  options: SelectOption<T>[];
+  /**
+   * 占位符文本
+   * @default '请选择'
+   */
+  placeholder?: string;
+  /**
+   * 是否显示搜索框
+   * @default false
+   */
+  showSearch?: boolean;
+  /**
+   * 是否显示清空按钮
+   * @default false
+   */
+  allowClear?: boolean;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否只读
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * 尺寸
+   * @default 'middle'
+   */
+  size?: 'small' | 'middle' | 'large';
+  /**
+   * 自定义类名
+   */
+  className?: string;
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
+  /**
+   * 标签文本
+   */
+  label?: string;
+  /**
+   * 辅助提示文本
+   */
+  helperText?: string;
+  /**
+   * 是否必填
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * 是否显示错误状态
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * 错误提示文本
+   */
+  errorText?: string;
+  /**
+   * 是否启用过滤
+   * @default false
+   */
+  filterable?: boolean;
+  /**
+   * 自定义过滤函数
+   */
+  filterOption?: FilterOptionFunc<T>;
+  /**
+   * 是否启用排序
+   * @default false
+   */
+  sortable?: boolean;
+  /**
+   * 排序方向
+   */
+  sortDirection?: SortDirection;
+  /**
+   * 搜索输入回调
+   */
+  onSearch?: (value: string) => void;
+  /**
+   * 获得焦点回调
+   */
+  onFocus?: (event: React.FocusEvent) => void;
+  /**
+   * 失去焦点回调
+   */
+  onBlur?: (event: React.FocusEvent) => void;
+  /**
+   * 下拉框显隐回调
+   */
+  onDropdownVisibleChange?: (visible: boolean) => void;
+}
+//#endregion
+export { BaseSelectProps, FilterOptionFunc, MultipleSelectState, SelectOption, SelectState, SortDirection, TagDisplayInfo, UseMultipleSelectStateOptions, UseSelectStateOptions };

package/es/select/utils/filterOptions.d.ts

@@ -0,0 +1,23 @@
+import { FilterOptionFunc, SelectOption } from "../types.js";
+
+//#region src/select/utils/filterOptions.d.ts
+/**
+ * 默认的选项过滤函数
+ * 根据 label 进行模糊匹配（不区分大小写）
+ * @template T 选项值的类型
+ * @param input 搜索输入文本
+ * @param option 选项对象
+ * @returns 是否保留该选项
+ */
+declare function defaultFilterOption<T = string | number>(input: string, option: SelectOption<T>): boolean;
+/**
+ * 过滤选项列表
+ * @template T 选项值的类型
+ * @param options 原始选项列表
+ * @param searchText 搜索文本
+ * @param filterFunc 自定义过滤函数（可选）
+ * @returns 过滤后的选项列表
+ */
+declare function filterOptions<T = string | number>(options: SelectOption<T>[], searchText: string, filterFunc?: FilterOptionFunc<T>): SelectOption<T>[];
+//#endregion
+export { defaultFilterOption, filterOptions };

package/es/select/utils/filterOptions.js

@@ -0,0 +1,29 @@
+//#region src/select/utils/filterOptions.ts
+/**
+* 默认的选项过滤函数
+* 根据 label 进行模糊匹配（不区分大小写）
+* @template T 选项值的类型
+* @param input 搜索输入文本
+* @param option 选项对象
+* @returns 是否保留该选项
+*/
+function defaultFilterOption(input, option) {
+	if (!input) return true;
+	const searchText = input.toLowerCase();
+	return option.label.toLowerCase().includes(searchText);
+}
+/**
+* 过滤选项列表
+* @template T 选项值的类型
+* @param options 原始选项列表
+* @param searchText 搜索文本
+* @param filterFunc 自定义过滤函数（可选）
+* @returns 过滤后的选项列表
+*/
+function filterOptions(options, searchText, filterFunc) {
+	if (!searchText) return options;
+	const filterFn = filterFunc || defaultFilterOption;
+	return options.filter((opt) => filterFn(searchText, opt));
+}
+//#endregion
+export { defaultFilterOption, filterOptions };

package/es/select/utils/helpers.d.ts

@@ -0,0 +1,43 @@
+import { SelectOption } from "../types.js";
+
+//#region src/select/utils/helpers.d.ts
+/**
+ * 根据值查找选项对象
+ * @template T 选项值的类型
+ * @param value 选项值
+ * @param options 选项列表
+ * @returns 找到的选项对象，如果没找到返回 undefined
+ */
+declare function findOptionByValue<T = string | number>(value: T, options: SelectOption<T>[]): SelectOption<T> | undefined;
+/**
+ * 根据值数组查找选项对象数组
+ * @template T 选项值的类型
+ * @param values 选项值数组
+ * @param options 选项列表
+ * @returns 找到的选项对象数组
+ */
+declare function findOptionsByValues<T = string | number>(values: T[], options: SelectOption<T>[]): SelectOption<T>[];
+/**
+ * 判断选项是否被选中（单选）
+ * @template T 选项值的类型
+ * @param optionValue 选项值
+ * @param selectedValue 当前选中值
+ * @returns 是否选中
+ */
+declare function isOptionSelected<T = string | number>(optionValue: T, selectedValue: T | null | undefined): boolean;
+/**
+ * 判断选项是否被选中（多选）
+ * @template T 选项值的类型
+ * @param optionValue 选项值
+ * @param selectedValues 当前选中值数组
+ * @returns 是否选中
+ */
+declare function isOptionSelectedInMultiple<T = string | number>(optionValue: T, selectedValues: T[]): boolean;
+/**
+ * 生成唯一 ID
+ * @param prefix ID 前缀
+ * @returns 唯一 ID
+ */
+declare function generateId(prefix?: string): string;
+//#endregion
+export { findOptionByValue, findOptionsByValues, generateId, isOptionSelected, isOptionSelectedInMultiple };