@pisell/utils 1.0.56 → 1.0.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/common/index.d.ts +5 -0
- package/es/common/index.js +5 -0
- package/es/common/stateHelper.d.ts +18 -0
- package/es/common/stateHelper.js +25 -0
- package/es/common/types.d.ts +28 -0
- package/es/common/types.js +1 -0
- package/es/index.d.ts +24 -0
- package/es/index.js +4 -0
- package/es/number-input/hooks/index.d.ts +4 -0
- package/es/number-input/hooks/index.js +5 -0
- package/es/number-input/hooks/useNumberInputState.d.ts +25 -0
- package/es/number-input/hooks/useNumberInputState.js +129 -0
- package/es/number-input/index.d.ts +14 -0
- package/es/number-input/index.js +21 -0
- package/es/number-input/types.d.ts +96 -0
- package/es/number-input/types.js +1 -0
- package/es/number-input/utils/formatter.d.ts +53 -0
- package/es/number-input/utils/formatter.js +82 -0
- package/es/number-input/utils/index.d.ts +7 -0
- package/es/number-input/utils/index.js +8 -0
- package/es/number-input/utils/validation.d.ts +27 -0
- package/es/number-input/utils/validation.js +67 -0
- package/es/select/hooks/index.d.ts +5 -0
- package/es/select/hooks/index.js +6 -0
- package/es/select/hooks/useDebouncedSearch.d.ts +20 -0
- package/es/select/hooks/useDebouncedSearch.js +55 -0
- package/es/select/hooks/useSelectState.d.ts +19 -0
- package/es/select/hooks/useSelectState.js +117 -0
- package/es/select/index.d.ts +8 -0
- package/es/select/index.js +13 -0
- package/es/select/types.d.ts +256 -0
- package/es/select/types.js +1 -0
- package/es/select/utils/filterOptions.d.ts +22 -0
- package/es/select/utils/filterOptions.js +34 -0
- package/es/select/utils/helpers.d.ts +42 -0
- package/es/select/utils/helpers.js +61 -0
- package/es/select/utils/index.d.ts +7 -0
- package/es/select/utils/index.js +8 -0
- package/es/select/utils/sortOptions.d.ts +12 -0
- package/es/select/utils/sortOptions.js +32 -0
- package/es/select/utils/tagAggregation.d.ts +25 -0
- package/es/select/utils/tagAggregation.js +48 -0
- package/es/text-input/hooks/index.d.ts +4 -0
- package/es/text-input/hooks/index.js +5 -0
- package/es/text-input/hooks/useTextInputState.d.ts +24 -0
- package/es/text-input/hooks/useTextInputState.js +127 -0
- package/es/text-input/index.d.ts +14 -0
- package/es/text-input/index.js +20 -0
- package/es/text-input/types.d.ts +56 -0
- package/es/text-input/types.js +1 -0
- package/es/text-input/utils/index.d.ts +5 -0
- package/es/text-input/utils/index.js +7 -0
- package/es/text-input/utils/validation.d.ts +23 -0
- package/es/text-input/utils/validation.js +71 -0
- package/lib/common/index.d.ts +5 -0
- package/lib/common/index.js +29 -0
- package/lib/common/stateHelper.d.ts +18 -0
- package/lib/common/stateHelper.js +34 -0
- package/lib/common/types.d.ts +28 -0
- package/lib/common/types.js +17 -0
- package/lib/index.d.ts +24 -0
- package/lib/index.js +9 -1
- package/lib/number-input/hooks/index.d.ts +4 -0
- package/lib/number-input/hooks/index.js +29 -0
- package/lib/number-input/hooks/useNumberInputState.d.ts +25 -0
- package/lib/number-input/hooks/useNumberInputState.js +83 -0
- package/lib/number-input/index.d.ts +14 -0
- package/lib/number-input/index.js +41 -0
- package/lib/number-input/types.d.ts +96 -0
- package/lib/number-input/types.js +17 -0
- package/lib/number-input/utils/formatter.d.ts +53 -0
- package/lib/number-input/utils/formatter.js +55 -0
- package/lib/number-input/utils/index.d.ts +7 -0
- package/lib/number-input/utils/index.js +39 -0
- package/lib/number-input/utils/validation.d.ts +27 -0
- package/lib/number-input/utils/validation.js +54 -0
- package/lib/select/hooks/index.d.ts +5 -0
- package/lib/select/hooks/index.js +34 -0
- package/lib/select/hooks/useDebouncedSearch.d.ts +20 -0
- package/lib/select/hooks/useDebouncedSearch.js +43 -0
- package/lib/select/hooks/useSelectState.d.ts +19 -0
- package/lib/select/hooks/useSelectState.js +97 -0
- package/lib/select/index.d.ts +8 -0
- package/lib/select/index.js +53 -0
- package/lib/select/types.d.ts +256 -0
- package/lib/select/types.js +17 -0
- package/lib/select/utils/filterOptions.d.ts +22 -0
- package/lib/select/utils/filterOptions.js +41 -0
- package/lib/select/utils/helpers.d.ts +42 -0
- package/lib/select/utils/helpers.js +51 -0
- package/lib/select/utils/index.d.ts +7 -0
- package/lib/select/utils/index.js +48 -0
- package/lib/select/utils/sortOptions.d.ts +12 -0
- package/lib/select/utils/sortOptions.js +41 -0
- package/lib/select/utils/tagAggregation.d.ts +25 -0
- package/lib/select/utils/tagAggregation.js +43 -0
- package/lib/text-input/hooks/index.d.ts +4 -0
- package/lib/text-input/hooks/index.js +29 -0
- package/lib/text-input/hooks/useTextInputState.d.ts +24 -0
- package/lib/text-input/hooks/useTextInputState.js +81 -0
- package/lib/text-input/index.d.ts +14 -0
- package/lib/text-input/index.js +35 -0
- package/lib/text-input/types.d.ts +56 -0
- package/lib/text-input/types.js +17 -0
- package/lib/text-input/utils/index.d.ts +5 -0
- package/lib/text-input/utils/index.js +32 -0
- package/lib/text-input/utils/validation.d.ts +23 -0
- package/lib/text-input/utils/validation.js +60 -0
- package/package.json +1 -1
- package/es/format.d.ts +0 -28
- package/es/jsBridge/index.d.ts +0 -22
- package/es/miniRedux.d.ts +0 -16
- package/es/otherUtils.d.ts +0 -48
- package/lib/format.d.ts +0 -28
- package/lib/jsBridge/index.d.ts +0 -22
- package/lib/miniRedux.d.ts +0 -16
- package/lib/otherUtils.d.ts +0 -48
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 防抖搜索 Hook
|
|
3
|
+
* 对用户输入进行防抖处理,避免频繁触发搜索
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* 防抖搜索 Hook
|
|
7
|
+
* @template T 值的类型
|
|
8
|
+
* @param initialValue 初始值
|
|
9
|
+
* @param delay 防抖延迟时间(毫秒)
|
|
10
|
+
* @param callback 防抖后的回调函数
|
|
11
|
+
* @returns [防抖后的值, 设置值函数]
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* const [debouncedSearch, setSearchInput] = useDebouncedSearch('', 300, (text) => {
|
|
16
|
+
* console.log('搜索关键词:', text);
|
|
17
|
+
* });
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare function useDebouncedSearch<T = string>(initialValue: T, delay: number, callback?: (value: T) => void): [T, (value: T) => void];
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
/**
|
|
8
|
+
* 防抖搜索 Hook
|
|
9
|
+
* 对用户输入进行防抖处理,避免频繁触发搜索
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import { useState, useEffect } from 'react';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* 防抖搜索 Hook
|
|
16
|
+
* @template T 值的类型
|
|
17
|
+
* @param initialValue 初始值
|
|
18
|
+
* @param delay 防抖延迟时间(毫秒)
|
|
19
|
+
* @param callback 防抖后的回调函数
|
|
20
|
+
* @returns [防抖后的值, 设置值函数]
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* const [debouncedSearch, setSearchInput] = useDebouncedSearch('', 300, (text) => {
|
|
25
|
+
* console.log('搜索关键词:', text);
|
|
26
|
+
* });
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export function useDebouncedSearch(initialValue, delay, callback) {
|
|
30
|
+
// 实时值(用户输入)
|
|
31
|
+
var _useState = useState(initialValue),
|
|
32
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
+
value = _useState2[0],
|
|
34
|
+
setValue = _useState2[1];
|
|
35
|
+
|
|
36
|
+
// 防抖后的值
|
|
37
|
+
var _useState3 = useState(initialValue),
|
|
38
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
39
|
+
debouncedValue = _useState4[0],
|
|
40
|
+
setDebouncedValue = _useState4[1];
|
|
41
|
+
useEffect(function () {
|
|
42
|
+
// 创建定时器
|
|
43
|
+
var timer = setTimeout(function () {
|
|
44
|
+
setDebouncedValue(value);
|
|
45
|
+
// 触发回调
|
|
46
|
+
callback === null || callback === void 0 || callback(value);
|
|
47
|
+
}, delay);
|
|
48
|
+
|
|
49
|
+
// 清理定时器
|
|
50
|
+
return function () {
|
|
51
|
+
clearTimeout(timer);
|
|
52
|
+
};
|
|
53
|
+
}, [value, delay, callback]);
|
|
54
|
+
return [debouncedValue, setValue];
|
|
55
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 状态管理 Hook
|
|
3
|
+
* 处理受控/非受控模式,适用于单选和多选
|
|
4
|
+
*/
|
|
5
|
+
import type { UseSelectStateOptions, UseMultipleSelectStateOptions, SelectState, MultipleSelectState } from '../types';
|
|
6
|
+
/**
|
|
7
|
+
* 单选状态管理 Hook
|
|
8
|
+
* @template T 值的类型
|
|
9
|
+
* @param options Hook 配置选项
|
|
10
|
+
* @returns 状态管理对象
|
|
11
|
+
*/
|
|
12
|
+
export declare function useSelectState<T = string | number>(options: UseSelectStateOptions<T>): SelectState<T>;
|
|
13
|
+
/**
|
|
14
|
+
* 多选状态管理 Hook
|
|
15
|
+
* @template T 值的类型
|
|
16
|
+
* @param options Hook 配置选项
|
|
17
|
+
* @returns 状态管理对象
|
|
18
|
+
*/
|
|
19
|
+
export declare function useMultipleSelectState<T = string | number>(options: UseMultipleSelectStateOptions<T>): MultipleSelectState<T>;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
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."); }
|
|
3
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
4
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
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."); }
|
|
7
|
+
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); }
|
|
8
|
+
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; }
|
|
9
|
+
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; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
/**
|
|
12
|
+
* Select 状态管理 Hook
|
|
13
|
+
* 处理受控/非受控模式,适用于单选和多选
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
import { useState, useCallback } from 'react';
|
|
17
|
+
/**
|
|
18
|
+
* 单选状态管理 Hook
|
|
19
|
+
* @template T 值的类型
|
|
20
|
+
* @param options Hook 配置选项
|
|
21
|
+
* @returns 状态管理对象
|
|
22
|
+
*/
|
|
23
|
+
export function useSelectState(options) {
|
|
24
|
+
var controlledValue = options.value,
|
|
25
|
+
defaultValue = options.defaultValue,
|
|
26
|
+
onChange = options.onChange;
|
|
27
|
+
|
|
28
|
+
// 判断是否为受控组件
|
|
29
|
+
var isControlled = controlledValue !== undefined;
|
|
30
|
+
|
|
31
|
+
// 内部状态(非受控模式使用)
|
|
32
|
+
var _useState = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
|
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
+
internalValue = _useState2[0],
|
|
35
|
+
setInternalValue = _useState2[1];
|
|
36
|
+
|
|
37
|
+
// 当前值
|
|
38
|
+
var value = isControlled ? controlledValue : internalValue;
|
|
39
|
+
|
|
40
|
+
// 设置值
|
|
41
|
+
var setValue = useCallback(function (newValue) {
|
|
42
|
+
if (!isControlled) {
|
|
43
|
+
setInternalValue(newValue);
|
|
44
|
+
}
|
|
45
|
+
// 触发 onChange 回调
|
|
46
|
+
onChange === null || onChange === void 0 || onChange(newValue, null); // TODO: 传入对应的 option 对象
|
|
47
|
+
}, [isControlled, onChange]);
|
|
48
|
+
|
|
49
|
+
// 清空值
|
|
50
|
+
var clearValue = useCallback(function () {
|
|
51
|
+
setValue(null);
|
|
52
|
+
}, [setValue]);
|
|
53
|
+
return {
|
|
54
|
+
value: value,
|
|
55
|
+
setValue: setValue,
|
|
56
|
+
clearValue: clearValue
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* 多选状态管理 Hook
|
|
62
|
+
* @template T 值的类型
|
|
63
|
+
* @param options Hook 配置选项
|
|
64
|
+
* @returns 状态管理对象
|
|
65
|
+
*/
|
|
66
|
+
export function useMultipleSelectState(options) {
|
|
67
|
+
var controlledValue = options.value,
|
|
68
|
+
defaultValue = options.defaultValue,
|
|
69
|
+
onChange = options.onChange;
|
|
70
|
+
|
|
71
|
+
// 判断是否为受控组件
|
|
72
|
+
var isControlled = controlledValue !== undefined;
|
|
73
|
+
|
|
74
|
+
// 内部状态(非受控模式使用)
|
|
75
|
+
var _useState3 = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
|
|
76
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
77
|
+
internalValue = _useState4[0],
|
|
78
|
+
setInternalValue = _useState4[1];
|
|
79
|
+
|
|
80
|
+
// 当前值
|
|
81
|
+
var value = isControlled ? controlledValue !== null && controlledValue !== void 0 ? controlledValue : [] : internalValue;
|
|
82
|
+
|
|
83
|
+
// 设置值
|
|
84
|
+
var setValue = useCallback(function (newValue) {
|
|
85
|
+
if (!isControlled) {
|
|
86
|
+
setInternalValue(newValue);
|
|
87
|
+
}
|
|
88
|
+
// 触发 onChange 回调
|
|
89
|
+
onChange === null || onChange === void 0 || onChange(newValue, []); // TODO: 传入对应的 options 数组
|
|
90
|
+
}, [isControlled, onChange]);
|
|
91
|
+
|
|
92
|
+
// 添加一个值
|
|
93
|
+
var addValue = useCallback(function (val) {
|
|
94
|
+
var newValue = [].concat(_toConsumableArray(value), [val]);
|
|
95
|
+
setValue(newValue);
|
|
96
|
+
}, [value, setValue]);
|
|
97
|
+
|
|
98
|
+
// 移除一个值
|
|
99
|
+
var removeValue = useCallback(function (val) {
|
|
100
|
+
var newValue = value.filter(function (v) {
|
|
101
|
+
return v !== val;
|
|
102
|
+
});
|
|
103
|
+
setValue(newValue);
|
|
104
|
+
}, [value, setValue]);
|
|
105
|
+
|
|
106
|
+
// 清空所有值
|
|
107
|
+
var clearValue = useCallback(function () {
|
|
108
|
+
setValue([]);
|
|
109
|
+
}, [setValue]);
|
|
110
|
+
return {
|
|
111
|
+
value: value,
|
|
112
|
+
setValue: setValue,
|
|
113
|
+
addValue: addValue,
|
|
114
|
+
removeValue: removeValue,
|
|
115
|
+
clearValue: clearValue
|
|
116
|
+
};
|
|
117
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 组件相关工具和类型导出
|
|
3
|
+
* 供 PisellSingleSelect、PisellMultipleSelect 等组件使用
|
|
4
|
+
*/
|
|
5
|
+
export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, MultipleSelectState, TagDisplayInfo, UseSelectStateOptions, UseMultipleSelectStateOptions, BaseSelectProps, } from './types';
|
|
6
|
+
export { useSelectState, useMultipleSelectState } from './hooks/useSelectState';
|
|
7
|
+
export { useDebouncedSearch } from './hooks/useDebouncedSearch';
|
|
8
|
+
export { filterOptions, defaultFilterOption, sortOptions, calculateTagDisplay, findOptionByValue, findOptionsByValues, isOptionSelected, isOptionSelectedInMultiple, generateId, } from './utils';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 组件相关工具和类型导出
|
|
3
|
+
* 供 PisellSingleSelect、PisellMultipleSelect 等组件使用
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// 导出所有类型
|
|
7
|
+
|
|
8
|
+
// 导出 Hooks
|
|
9
|
+
export { useSelectState, useMultipleSelectState } from "./hooks/useSelectState";
|
|
10
|
+
export { useDebouncedSearch } from "./hooks/useDebouncedSearch";
|
|
11
|
+
|
|
12
|
+
// 导出工具函数
|
|
13
|
+
export { filterOptions, defaultFilterOption, sortOptions, calculateTagDisplay, findOptionByValue, findOptionsByValues, isOptionSelected, isOptionSelectedInMultiple, generateId } from "./utils";
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 组件公共类型定义
|
|
3
|
+
* 供 PisellSingleSelect、PisellMultipleSelect 等组件使用
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
export type { DisplayState } from '../common';
|
|
7
|
+
/**
|
|
8
|
+
* 选项基础类型
|
|
9
|
+
* @template T 选项值的类型,默认为 string | number
|
|
10
|
+
*/
|
|
11
|
+
export interface SelectOption<T = string | number> {
|
|
12
|
+
/**
|
|
13
|
+
* 选项值(唯一标识)
|
|
14
|
+
*/
|
|
15
|
+
value: T;
|
|
16
|
+
/**
|
|
17
|
+
* 选项显示文本
|
|
18
|
+
*/
|
|
19
|
+
label: string;
|
|
20
|
+
/**
|
|
21
|
+
* 是否禁用该选项
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* 选项图标(可选)
|
|
27
|
+
*/
|
|
28
|
+
icon?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* 标签背景色(多选时用于自定义标签颜色)
|
|
31
|
+
* @example '#61dafb'
|
|
32
|
+
*/
|
|
33
|
+
color?: string;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* 选项过滤函数类型
|
|
37
|
+
* @template T 选项值的类型
|
|
38
|
+
* @param input 用户输入的搜索文本
|
|
39
|
+
* @param option 当前选项对象
|
|
40
|
+
* @returns 是否保留该选项
|
|
41
|
+
*/
|
|
42
|
+
export declare type FilterOptionFunc<T = string | number> = (input: string, option: SelectOption<T>) => boolean;
|
|
43
|
+
/**
|
|
44
|
+
* 排序方向
|
|
45
|
+
*/
|
|
46
|
+
export declare type SortDirection = 'asc' | 'desc';
|
|
47
|
+
/**
|
|
48
|
+
* Select 状态 Hook 返回值(单选)
|
|
49
|
+
* @template T 值的类型
|
|
50
|
+
*/
|
|
51
|
+
export interface SelectState<T = string | number> {
|
|
52
|
+
/**
|
|
53
|
+
* 当前选中值
|
|
54
|
+
*/
|
|
55
|
+
value: T | null | undefined;
|
|
56
|
+
/**
|
|
57
|
+
* 设置选中值
|
|
58
|
+
*/
|
|
59
|
+
setValue: (value: T | null) => void;
|
|
60
|
+
/**
|
|
61
|
+
* 清空选中值
|
|
62
|
+
*/
|
|
63
|
+
clearValue: () => void;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Multiple Select 状态 Hook 返回值(多选)
|
|
67
|
+
* @template T 值的类型
|
|
68
|
+
*/
|
|
69
|
+
export interface MultipleSelectState<T = string | number> {
|
|
70
|
+
/**
|
|
71
|
+
* 当前选中值数组
|
|
72
|
+
*/
|
|
73
|
+
value: T[];
|
|
74
|
+
/**
|
|
75
|
+
* 设置选中值数组
|
|
76
|
+
*/
|
|
77
|
+
setValue: (value: T[]) => void;
|
|
78
|
+
/**
|
|
79
|
+
* 添加一个选中值
|
|
80
|
+
*/
|
|
81
|
+
addValue: (value: T) => void;
|
|
82
|
+
/**
|
|
83
|
+
* 移除一个选中值
|
|
84
|
+
*/
|
|
85
|
+
removeValue: (value: T) => void;
|
|
86
|
+
/**
|
|
87
|
+
* 清空所有选中值
|
|
88
|
+
*/
|
|
89
|
+
clearValue: () => void;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* 标签显示信息(多选专用)
|
|
93
|
+
* @template T 选项值的类型
|
|
94
|
+
*/
|
|
95
|
+
export interface TagDisplayInfo<T = string | number> {
|
|
96
|
+
/**
|
|
97
|
+
* 可见的标签列表
|
|
98
|
+
*/
|
|
99
|
+
visibleTags: SelectOption<T>[];
|
|
100
|
+
/**
|
|
101
|
+
* 隐藏的标签列表
|
|
102
|
+
*/
|
|
103
|
+
hiddenTags: SelectOption<T>[];
|
|
104
|
+
/**
|
|
105
|
+
* 隐藏的标签数量
|
|
106
|
+
*/
|
|
107
|
+
hiddenCount: number;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* useSelectState Hook 的配置选项(单选)
|
|
111
|
+
* @template T 值的类型
|
|
112
|
+
*/
|
|
113
|
+
export interface UseSelectStateOptions<T = string | number> {
|
|
114
|
+
/**
|
|
115
|
+
* 受控模式:当前值
|
|
116
|
+
*/
|
|
117
|
+
value?: T | null;
|
|
118
|
+
/**
|
|
119
|
+
* 非受控模式:默认值
|
|
120
|
+
*/
|
|
121
|
+
defaultValue?: T;
|
|
122
|
+
/**
|
|
123
|
+
* 值变化回调
|
|
124
|
+
*/
|
|
125
|
+
onChange?: (value: T | null, option: SelectOption<T> | null) => void;
|
|
126
|
+
/**
|
|
127
|
+
* 模式(用于类型区分)
|
|
128
|
+
*/
|
|
129
|
+
mode: 'single';
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* useMultipleSelectState Hook 的配置选项(多选)
|
|
133
|
+
* @template T 值的类型
|
|
134
|
+
*/
|
|
135
|
+
export interface UseMultipleSelectStateOptions<T = string | number> {
|
|
136
|
+
/**
|
|
137
|
+
* 受控模式:当前值数组
|
|
138
|
+
*/
|
|
139
|
+
value?: T[];
|
|
140
|
+
/**
|
|
141
|
+
* 非受控模式:默认值数组
|
|
142
|
+
*/
|
|
143
|
+
defaultValue?: T[];
|
|
144
|
+
/**
|
|
145
|
+
* 值变化回调
|
|
146
|
+
*/
|
|
147
|
+
onChange?: (value: T[], options: SelectOption<T>[]) => void;
|
|
148
|
+
/**
|
|
149
|
+
* 模式(用于类型区分)
|
|
150
|
+
*/
|
|
151
|
+
mode: 'multiple';
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* 基础 Select Props(公共属性)
|
|
155
|
+
* @template T 值的类型
|
|
156
|
+
*/
|
|
157
|
+
export interface BaseSelectProps<T = string | number> {
|
|
158
|
+
/**
|
|
159
|
+
* 选项列表(必填)
|
|
160
|
+
*/
|
|
161
|
+
options: SelectOption<T>[];
|
|
162
|
+
/**
|
|
163
|
+
* 占位符文本
|
|
164
|
+
* @default '请选择'
|
|
165
|
+
*/
|
|
166
|
+
placeholder?: string;
|
|
167
|
+
/**
|
|
168
|
+
* 是否显示搜索框
|
|
169
|
+
* @default false
|
|
170
|
+
*/
|
|
171
|
+
showSearch?: boolean;
|
|
172
|
+
/**
|
|
173
|
+
* 是否显示清空按钮
|
|
174
|
+
* @default false
|
|
175
|
+
*/
|
|
176
|
+
allowClear?: boolean;
|
|
177
|
+
/**
|
|
178
|
+
* 是否禁用
|
|
179
|
+
* @default false
|
|
180
|
+
*/
|
|
181
|
+
disabled?: boolean;
|
|
182
|
+
/**
|
|
183
|
+
* 是否只读
|
|
184
|
+
* @default false
|
|
185
|
+
*/
|
|
186
|
+
readOnly?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* 尺寸
|
|
189
|
+
* @default 'middle'
|
|
190
|
+
*/
|
|
191
|
+
size?: 'small' | 'middle' | 'large';
|
|
192
|
+
/**
|
|
193
|
+
* 自定义类名
|
|
194
|
+
*/
|
|
195
|
+
className?: string;
|
|
196
|
+
/**
|
|
197
|
+
* 自定义样式
|
|
198
|
+
*/
|
|
199
|
+
style?: React.CSSProperties;
|
|
200
|
+
/**
|
|
201
|
+
* 标签文本
|
|
202
|
+
*/
|
|
203
|
+
label?: string;
|
|
204
|
+
/**
|
|
205
|
+
* 辅助提示文本
|
|
206
|
+
*/
|
|
207
|
+
helperText?: string;
|
|
208
|
+
/**
|
|
209
|
+
* 是否必填
|
|
210
|
+
* @default false
|
|
211
|
+
*/
|
|
212
|
+
required?: boolean;
|
|
213
|
+
/**
|
|
214
|
+
* 是否显示错误状态
|
|
215
|
+
* @default false
|
|
216
|
+
*/
|
|
217
|
+
error?: boolean;
|
|
218
|
+
/**
|
|
219
|
+
* 错误提示文本
|
|
220
|
+
*/
|
|
221
|
+
errorText?: string;
|
|
222
|
+
/**
|
|
223
|
+
* 是否启用过滤
|
|
224
|
+
* @default false
|
|
225
|
+
*/
|
|
226
|
+
filterable?: boolean;
|
|
227
|
+
/**
|
|
228
|
+
* 自定义过滤函数
|
|
229
|
+
*/
|
|
230
|
+
filterOption?: FilterOptionFunc<T>;
|
|
231
|
+
/**
|
|
232
|
+
* 是否启用排序
|
|
233
|
+
* @default false
|
|
234
|
+
*/
|
|
235
|
+
sortable?: boolean;
|
|
236
|
+
/**
|
|
237
|
+
* 排序方向
|
|
238
|
+
*/
|
|
239
|
+
sortDirection?: SortDirection;
|
|
240
|
+
/**
|
|
241
|
+
* 搜索输入回调
|
|
242
|
+
*/
|
|
243
|
+
onSearch?: (value: string) => void;
|
|
244
|
+
/**
|
|
245
|
+
* 获得焦点回调
|
|
246
|
+
*/
|
|
247
|
+
onFocus?: (event: React.FocusEvent) => void;
|
|
248
|
+
/**
|
|
249
|
+
* 失去焦点回调
|
|
250
|
+
*/
|
|
251
|
+
onBlur?: (event: React.FocusEvent) => void;
|
|
252
|
+
/**
|
|
253
|
+
* 下拉框显隐回调
|
|
254
|
+
*/
|
|
255
|
+
onDropdownVisibleChange?: (visible: boolean) => void;
|
|
256
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 选项过滤工具函数
|
|
3
|
+
*/
|
|
4
|
+
import type { SelectOption, FilterOptionFunc } from '../types';
|
|
5
|
+
/**
|
|
6
|
+
* 默认的选项过滤函数
|
|
7
|
+
* 根据 label 进行模糊匹配(不区分大小写)
|
|
8
|
+
* @template T 选项值的类型
|
|
9
|
+
* @param input 搜索输入文本
|
|
10
|
+
* @param option 选项对象
|
|
11
|
+
* @returns 是否保留该选项
|
|
12
|
+
*/
|
|
13
|
+
export declare function defaultFilterOption<T = string | number>(input: string, option: SelectOption<T>): boolean;
|
|
14
|
+
/**
|
|
15
|
+
* 过滤选项列表
|
|
16
|
+
* @template T 选项值的类型
|
|
17
|
+
* @param options 原始选项列表
|
|
18
|
+
* @param searchText 搜索文本
|
|
19
|
+
* @param filterFunc 自定义过滤函数(可选)
|
|
20
|
+
* @returns 过滤后的选项列表
|
|
21
|
+
*/
|
|
22
|
+
export declare function filterOptions<T = string | number>(options: SelectOption<T>[], searchText: string, filterFunc?: FilterOptionFunc<T>): SelectOption<T>[];
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 选项过滤工具函数
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* 默认的选项过滤函数
|
|
7
|
+
* 根据 label 进行模糊匹配(不区分大小写)
|
|
8
|
+
* @template T 选项值的类型
|
|
9
|
+
* @param input 搜索输入文本
|
|
10
|
+
* @param option 选项对象
|
|
11
|
+
* @returns 是否保留该选项
|
|
12
|
+
*/
|
|
13
|
+
export function defaultFilterOption(input, option) {
|
|
14
|
+
if (!input) return true;
|
|
15
|
+
var searchText = input.toLowerCase();
|
|
16
|
+
var labelText = option.label.toLowerCase();
|
|
17
|
+
return labelText.includes(searchText);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* 过滤选项列表
|
|
22
|
+
* @template T 选项值的类型
|
|
23
|
+
* @param options 原始选项列表
|
|
24
|
+
* @param searchText 搜索文本
|
|
25
|
+
* @param filterFunc 自定义过滤函数(可选)
|
|
26
|
+
* @returns 过滤后的选项列表
|
|
27
|
+
*/
|
|
28
|
+
export function filterOptions(options, searchText, filterFunc) {
|
|
29
|
+
if (!searchText) return options;
|
|
30
|
+
var filterFn = filterFunc || defaultFilterOption;
|
|
31
|
+
return options.filter(function (opt) {
|
|
32
|
+
return filterFn(searchText, opt);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 组件辅助函数
|
|
3
|
+
*/
|
|
4
|
+
import type { SelectOption } from '../types';
|
|
5
|
+
/**
|
|
6
|
+
* 根据值查找选项对象
|
|
7
|
+
* @template T 选项值的类型
|
|
8
|
+
* @param value 选项值
|
|
9
|
+
* @param options 选项列表
|
|
10
|
+
* @returns 找到的选项对象,如果没找到返回 undefined
|
|
11
|
+
*/
|
|
12
|
+
export declare function findOptionByValue<T = string | number>(value: T, options: SelectOption<T>[]): SelectOption<T> | undefined;
|
|
13
|
+
/**
|
|
14
|
+
* 根据值数组查找选项对象数组
|
|
15
|
+
* @template T 选项值的类型
|
|
16
|
+
* @param values 选项值数组
|
|
17
|
+
* @param options 选项列表
|
|
18
|
+
* @returns 找到的选项对象数组
|
|
19
|
+
*/
|
|
20
|
+
export declare function findOptionsByValues<T = string | number>(values: T[], options: SelectOption<T>[]): SelectOption<T>[];
|
|
21
|
+
/**
|
|
22
|
+
* 判断选项是否被选中(单选)
|
|
23
|
+
* @template T 选项值的类型
|
|
24
|
+
* @param optionValue 选项值
|
|
25
|
+
* @param selectedValue 当前选中值
|
|
26
|
+
* @returns 是否选中
|
|
27
|
+
*/
|
|
28
|
+
export declare function isOptionSelected<T = string | number>(optionValue: T, selectedValue: T | null | undefined): boolean;
|
|
29
|
+
/**
|
|
30
|
+
* 判断选项是否被选中(多选)
|
|
31
|
+
* @template T 选项值的类型
|
|
32
|
+
* @param optionValue 选项值
|
|
33
|
+
* @param selectedValues 当前选中值数组
|
|
34
|
+
* @returns 是否选中
|
|
35
|
+
*/
|
|
36
|
+
export declare function isOptionSelectedInMultiple<T = string | number>(optionValue: T, selectedValues: T[]): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* 生成唯一 ID
|
|
39
|
+
* @param prefix ID 前缀
|
|
40
|
+
* @returns 唯一 ID
|
|
41
|
+
*/
|
|
42
|
+
export declare function generateId(prefix?: string): string;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 组件辅助函数
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* 根据值查找选项对象
|
|
7
|
+
* @template T 选项值的类型
|
|
8
|
+
* @param value 选项值
|
|
9
|
+
* @param options 选项列表
|
|
10
|
+
* @returns 找到的选项对象,如果没找到返回 undefined
|
|
11
|
+
*/
|
|
12
|
+
export function findOptionByValue(value, options) {
|
|
13
|
+
return options.find(function (opt) {
|
|
14
|
+
return opt.value === value;
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* 根据值数组查找选项对象数组
|
|
20
|
+
* @template T 选项值的类型
|
|
21
|
+
* @param values 选项值数组
|
|
22
|
+
* @param options 选项列表
|
|
23
|
+
* @returns 找到的选项对象数组
|
|
24
|
+
*/
|
|
25
|
+
export function findOptionsByValues(values, options) {
|
|
26
|
+
return values.map(function (val) {
|
|
27
|
+
return findOptionByValue(val, options);
|
|
28
|
+
}).filter(Boolean);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* 判断选项是否被选中(单选)
|
|
33
|
+
* @template T 选项值的类型
|
|
34
|
+
* @param optionValue 选项值
|
|
35
|
+
* @param selectedValue 当前选中值
|
|
36
|
+
* @returns 是否选中
|
|
37
|
+
*/
|
|
38
|
+
export function isOptionSelected(optionValue, selectedValue) {
|
|
39
|
+
return selectedValue !== null && selectedValue !== undefined && optionValue === selectedValue;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* 判断选项是否被选中(多选)
|
|
44
|
+
* @template T 选项值的类型
|
|
45
|
+
* @param optionValue 选项值
|
|
46
|
+
* @param selectedValues 当前选中值数组
|
|
47
|
+
* @returns 是否选中
|
|
48
|
+
*/
|
|
49
|
+
export function isOptionSelectedInMultiple(optionValue, selectedValues) {
|
|
50
|
+
return selectedValues.includes(optionValue);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* 生成唯一 ID
|
|
55
|
+
* @param prefix ID 前缀
|
|
56
|
+
* @returns 唯一 ID
|
|
57
|
+
*/
|
|
58
|
+
export function generateId() {
|
|
59
|
+
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'select';
|
|
60
|
+
return "".concat(prefix, "-").concat(Math.random().toString(36).substr(2, 9));
|
|
61
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select 工具函数导出
|
|
3
|
+
*/
|
|
4
|
+
export { calculateTagDisplay } from './tagAggregation';
|
|
5
|
+
export { filterOptions, defaultFilterOption } from './filterOptions';
|
|
6
|
+
export { sortOptions } from './sortOptions';
|
|
7
|
+
export { findOptionByValue, findOptionsByValues, isOptionSelected, isOptionSelectedInMultiple, generateId, } from './helpers';
|