@rainbow-oh/yee-c 0.14.6 → 0.15.0
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/dist/cjs/Form/Field.js +20 -1
- package/dist/cjs/Form/Group.js +3 -1
- package/dist/cjs/Form/index.d.ts +1 -1
- package/dist/cjs/Input/style/index.less +1 -0
- package/dist/cjs/InputNumber/style/index.less +1 -0
- package/dist/cjs/Select/hooks/useSelectKeyboard.js +5 -2
- package/dist/cjs/Selector/selector.js +6 -3
- package/dist/cjs/Selector/style/index.less +2 -2
- package/dist/cjs/TableSelect/hooks/useTableSelectKeyboard.d.ts +27 -0
- package/dist/cjs/TableSelect/hooks/useTableSelectKeyboard.js +128 -0
- package/dist/cjs/TableSelect/interface.d.ts +9 -4
- package/dist/cjs/TableSelect/internal-table.js +27 -14
- package/dist/cjs/TableSelect/style/index.less +3 -11
- package/dist/cjs/TableSelect/table-select.js +40 -3
- package/dist/cjs/style/color.css +5 -5
- package/dist/cjs/style/color.gemini.css +1 -1
- package/dist/cjs/style/size.css +1 -1
- package/dist/cjs/style/themes.css +2 -2
- package/dist/cjs/style/variables.css +7 -7
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/Form/Field.js +35 -4
- package/dist/esm/Form/Group.js +10 -6
- package/dist/esm/Form/index.d.ts +1 -1
- package/dist/esm/Input/style/index.less +1 -0
- package/dist/esm/InputNumber/style/index.less +1 -0
- package/dist/esm/Select/hooks/useSelectKeyboard.js +7 -2
- package/dist/esm/Selector/selector.js +10 -5
- package/dist/esm/Selector/style/index.less +2 -2
- package/dist/esm/TableSelect/hooks/useTableSelectKeyboard.d.ts +27 -0
- package/dist/esm/TableSelect/hooks/useTableSelectKeyboard.js +132 -0
- package/dist/esm/TableSelect/interface.d.ts +9 -4
- package/dist/esm/TableSelect/internal-table.js +6 -2
- package/dist/esm/TableSelect/style/index.less +3 -11
- package/dist/esm/TableSelect/table-select.js +36 -3
- package/dist/esm/style/color.css +5 -5
- package/dist/esm/style/color.gemini.css +1 -1
- package/dist/esm/style/size.css +1 -1
- package/dist/esm/style/themes.css +2 -2
- package/dist/esm/style/variables.css +7 -7
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/yee-c.min.css +3 -3
- package/dist/umd/yee-c.min.js +1 -1
- package/package.json +1 -1
- package/src/Form/Field.required.test.tsx +146 -0
- package/src/Form/Field.tsx +32 -2
- package/src/Form/Group.tsx +7 -2
- package/src/Form/index.ts +4 -0
- package/src/Input/style/index.less +1 -0
- package/src/InputNumber/style/index.less +1 -0
- package/src/Select/hooks/useSelectKeyboard.ts +7 -2
- package/src/Selector/selector.tsx +10 -5
- package/src/Selector/style/index.less +2 -2
- package/src/TableSelect/hooks/useTableSelectKeyboard.ts +141 -0
- package/src/TableSelect/index.en-US.md +47 -44
- package/src/TableSelect/index.zh-CN.md +47 -44
- package/src/TableSelect/interface.ts +9 -4
- package/src/TableSelect/internal-table.tsx +14 -6
- package/src/TableSelect/style/index.less +3 -11
- package/src/TableSelect/table-select.tsx +45 -3
- package/src/style/color.css +5 -5
- package/src/style/color.gemini.css +1 -1
- package/src/style/size.css +1 -1
- package/src/version.ts +1 -1
package/dist/cjs/Form/Field.js
CHANGED
|
@@ -99,6 +99,7 @@ var Field = (props) => {
|
|
|
99
99
|
const {
|
|
100
100
|
getCallbacks,
|
|
101
101
|
getFieldStatus,
|
|
102
|
+
getFieldValidate,
|
|
102
103
|
getFieldValue,
|
|
103
104
|
getFieldsValue,
|
|
104
105
|
setFieldsValue,
|
|
@@ -119,13 +120,31 @@ var Field = (props) => {
|
|
|
119
120
|
const normalizedName = (0, import_react2.useMemo)(() => {
|
|
120
121
|
return stringifyPath(fullFieldNamePath);
|
|
121
122
|
}, [fullFieldNamePath]);
|
|
123
|
+
const propsRef = (0, import_react2.useRef)(props);
|
|
124
|
+
propsRef.current = props;
|
|
122
125
|
(0, import_react2.useLayoutEffect)(() => {
|
|
123
126
|
const unregister = registerFieldEntities == null ? void 0 : registerFieldEntities({
|
|
124
|
-
props
|
|
127
|
+
get props() {
|
|
128
|
+
return __spreadProps(__spreadValues({}, propsRef.current), { name: normalizedName });
|
|
129
|
+
},
|
|
125
130
|
onStoreChange: forceUpdate
|
|
126
131
|
});
|
|
127
132
|
return unregister;
|
|
128
133
|
}, [normalizedName, registerFieldEntities]);
|
|
134
|
+
const validateSignature = (0, import_react2.useMemo)(
|
|
135
|
+
() => JSON.stringify({ required, rules }),
|
|
136
|
+
[required, rules]
|
|
137
|
+
);
|
|
138
|
+
const prevValidateSignatureRef = (0, import_react2.useRef)(validateSignature);
|
|
139
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
140
|
+
const prev = prevValidateSignatureRef.current;
|
|
141
|
+
prevValidateSignatureRef.current = validateSignature;
|
|
142
|
+
if (prev === validateSignature)
|
|
143
|
+
return;
|
|
144
|
+
if (getFieldValidate == null ? void 0 : getFieldValidate(normalizedName)) {
|
|
145
|
+
void (validateField == null ? void 0 : validateField(normalizedName));
|
|
146
|
+
}
|
|
147
|
+
}, [validateSignature, normalizedName]);
|
|
129
148
|
const isRequired = () => {
|
|
130
149
|
return Array.isArray(rules) && rules.find((rule) => rule.required) || required;
|
|
131
150
|
};
|
package/dist/cjs/Form/Group.js
CHANGED
|
@@ -130,10 +130,12 @@ var Group = (props) => {
|
|
|
130
130
|
);
|
|
131
131
|
return () => unsubscribes.forEach((fn) => fn());
|
|
132
132
|
}, [childNames, formInstance]);
|
|
133
|
+
const validateRef = (0, import_react2.useRef)(validate);
|
|
134
|
+
validateRef.current = validate;
|
|
133
135
|
(0, import_react2.useEffect)(() => {
|
|
134
136
|
const unregister = formInstance.registerGroupEntity(groupId, {
|
|
135
137
|
validate: (force) => __async(void 0, null, function* () {
|
|
136
|
-
const result = yield
|
|
138
|
+
const result = yield validateRef.current(force);
|
|
137
139
|
setErrors(result);
|
|
138
140
|
forceUpdate();
|
|
139
141
|
return result;
|
package/dist/cjs/Form/index.d.ts
CHANGED
|
@@ -16,5 +16,5 @@ type FormInterface = typeof InternalForm & {
|
|
|
16
16
|
List: typeof List;
|
|
17
17
|
};
|
|
18
18
|
declare const Form: FormInterface;
|
|
19
|
-
export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, Rule as FormRule, ValidateMessage, } from './interface';
|
|
19
|
+
export type { FieldGroupProps, FieldProps, FieldStatus, FieldStatusData, FieldTooltip, FormInstance, FormListField, FormListOperation, FormListProps, FormProps, Rule as FormRule, ValidateMessage, } from './interface';
|
|
20
20
|
export default Form;
|
|
@@ -218,8 +218,11 @@ function useSelectKeyboard({
|
|
|
218
218
|
handleEnter();
|
|
219
219
|
break;
|
|
220
220
|
case "Escape":
|
|
221
|
-
|
|
222
|
-
|
|
221
|
+
if (open) {
|
|
222
|
+
event.preventDefault();
|
|
223
|
+
event.stopPropagation();
|
|
224
|
+
handleEscape();
|
|
225
|
+
}
|
|
223
226
|
break;
|
|
224
227
|
default:
|
|
225
228
|
}
|
|
@@ -313,10 +313,13 @@ var Selector = import_react.default.forwardRef(
|
|
|
313
313
|
onKeyDown: (event) => {
|
|
314
314
|
if (disabled)
|
|
315
315
|
return;
|
|
316
|
-
if (
|
|
317
|
-
|
|
316
|
+
if (event.key === "Enter" && !open && onOpenChange) {
|
|
317
|
+
event.preventDefault();
|
|
318
|
+
onOpenChange(true);
|
|
319
|
+
}
|
|
320
|
+
if (event.target !== inputRef.current) {
|
|
321
|
+
externalOnKeyDown == null ? void 0 : externalOnKeyDown(event);
|
|
318
322
|
}
|
|
319
|
-
externalOnKeyDown == null ? void 0 : externalOnKeyDown(event);
|
|
320
323
|
},
|
|
321
324
|
ref
|
|
322
325
|
}),
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { TableSelectDataType } from '../interface';
|
|
3
|
+
type KeyType = string | number;
|
|
4
|
+
interface UseTableSelectKeyboardParams {
|
|
5
|
+
open: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
dataSource: Array<TableSelectDataType>;
|
|
8
|
+
rowKey: string | ((record: any) => string);
|
|
9
|
+
selectionType: 'radio' | 'checkbox';
|
|
10
|
+
selectedRowKeys: Array<KeyType>;
|
|
11
|
+
searchValue: string;
|
|
12
|
+
onSelect: (keys: Array<KeyType>, rows: Array<TableSelectDataType>) => void;
|
|
13
|
+
onClose: () => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Keyboard navigation for the popup table. The highlight is positional (like a
|
|
17
|
+
* hover cursor): `activeRow` is a rendered row index, and Space selects the
|
|
18
|
+
* record displayed there. The rendered order is the filter→sort→paginate
|
|
19
|
+
* result inside Table and is not derivable from `dataSource`, so the row count
|
|
20
|
+
* and the highlighted row's key are both read from the popup DOM.
|
|
21
|
+
*/
|
|
22
|
+
export default function useTableSelectKeyboard({ open, disabled, dataSource, rowKey, selectionType, selectedRowKeys, searchValue, onSelect, onClose, }: UseTableSelectKeyboardParams): {
|
|
23
|
+
popupRef: import("react").RefObject<HTMLDivElement | null>;
|
|
24
|
+
activeRow: number;
|
|
25
|
+
handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/TableSelect/hooks/useTableSelectKeyboard.ts
|
|
20
|
+
var useTableSelectKeyboard_exports = {};
|
|
21
|
+
__export(useTableSelectKeyboard_exports, {
|
|
22
|
+
default: () => useTableSelectKeyboard
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(useTableSelectKeyboard_exports);
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
function useTableSelectKeyboard({
|
|
27
|
+
open,
|
|
28
|
+
disabled,
|
|
29
|
+
dataSource,
|
|
30
|
+
rowKey,
|
|
31
|
+
selectionType,
|
|
32
|
+
selectedRowKeys,
|
|
33
|
+
searchValue,
|
|
34
|
+
onSelect,
|
|
35
|
+
onClose
|
|
36
|
+
}) {
|
|
37
|
+
const popupRef = (0, import_react.useRef)(null);
|
|
38
|
+
const [activeRow, setActiveRow] = (0, import_react.useState)(0);
|
|
39
|
+
(0, import_react.useEffect)(() => {
|
|
40
|
+
setActiveRow(0);
|
|
41
|
+
}, [open, searchValue]);
|
|
42
|
+
const getRecordKey = (item) => typeof rowKey === "function" ? rowKey(item) : item[rowKey];
|
|
43
|
+
const getRowCount = () => {
|
|
44
|
+
var _a, _b;
|
|
45
|
+
return (_b = (_a = popupRef.current) == null ? void 0 : _a.querySelectorAll("tr[data-row-index]").length) != null ? _b : 0;
|
|
46
|
+
};
|
|
47
|
+
(0, import_react.useEffect)(() => {
|
|
48
|
+
var _a;
|
|
49
|
+
if (!open || activeRow < 1)
|
|
50
|
+
return;
|
|
51
|
+
const rowEl = (_a = popupRef.current) == null ? void 0 : _a.querySelector(
|
|
52
|
+
`tr[data-row-index="${activeRow}"]`
|
|
53
|
+
);
|
|
54
|
+
if (!rowEl)
|
|
55
|
+
return;
|
|
56
|
+
let parent = rowEl.parentElement;
|
|
57
|
+
while (parent && parent !== popupRef.current) {
|
|
58
|
+
const { overflowY } = window.getComputedStyle(parent);
|
|
59
|
+
if (/(auto|scroll)/.test(overflowY) && parent.scrollHeight > parent.clientHeight) {
|
|
60
|
+
const parentRect = parent.getBoundingClientRect();
|
|
61
|
+
const rowRect = rowEl.getBoundingClientRect();
|
|
62
|
+
if (rowRect.bottom > parentRect.bottom) {
|
|
63
|
+
parent.scrollTop += rowRect.bottom - parentRect.bottom;
|
|
64
|
+
} else if (rowRect.top < parentRect.top) {
|
|
65
|
+
parent.scrollTop -= parentRect.top - rowRect.top;
|
|
66
|
+
}
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
parent = parent.parentElement;
|
|
70
|
+
}
|
|
71
|
+
}, [activeRow, open]);
|
|
72
|
+
const selectActiveRow = () => {
|
|
73
|
+
var _a;
|
|
74
|
+
const rowEl = (_a = popupRef.current) == null ? void 0 : _a.querySelector(
|
|
75
|
+
`tr[data-row-index="${activeRow}"]`
|
|
76
|
+
);
|
|
77
|
+
const inputEl = rowEl == null ? void 0 : rowEl.querySelector(
|
|
78
|
+
'input[type="radio"],input[type="checkbox"]'
|
|
79
|
+
);
|
|
80
|
+
if (!inputEl || inputEl.disabled)
|
|
81
|
+
return;
|
|
82
|
+
const record = dataSource.find(
|
|
83
|
+
(item) => String(getRecordKey(item)) === inputEl.value
|
|
84
|
+
);
|
|
85
|
+
if (!record)
|
|
86
|
+
return;
|
|
87
|
+
const key = getRecordKey(record);
|
|
88
|
+
if (selectionType === "radio") {
|
|
89
|
+
onSelect([key], [record]);
|
|
90
|
+
onClose();
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
const checked = selectedRowKeys.some((k) => String(k) === String(key));
|
|
94
|
+
const nextKeys = checked ? selectedRowKeys.filter((k) => String(k) !== String(key)) : [...selectedRowKeys, key];
|
|
95
|
+
const rows = dataSource.filter(
|
|
96
|
+
(item) => nextKeys.some((k) => String(getRecordKey(item)) === String(k))
|
|
97
|
+
);
|
|
98
|
+
onSelect(nextKeys, rows);
|
|
99
|
+
};
|
|
100
|
+
const handleKeyDown = (event) => {
|
|
101
|
+
if (!open || disabled)
|
|
102
|
+
return;
|
|
103
|
+
switch (event.key) {
|
|
104
|
+
case "ArrowDown":
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
setActiveRow(Math.min(activeRow + 1, getRowCount()));
|
|
107
|
+
break;
|
|
108
|
+
case "ArrowUp":
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
setActiveRow(activeRow <= 1 ? getRowCount() : activeRow - 1);
|
|
111
|
+
break;
|
|
112
|
+
case " ":
|
|
113
|
+
if (activeRow > 0) {
|
|
114
|
+
event.preventDefault();
|
|
115
|
+
selectActiveRow();
|
|
116
|
+
}
|
|
117
|
+
break;
|
|
118
|
+
case "Escape":
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
event.stopPropagation();
|
|
121
|
+
onClose();
|
|
122
|
+
break;
|
|
123
|
+
default:
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
return { popupRef, activeRow, handleKeyDown };
|
|
128
|
+
}
|
|
@@ -9,7 +9,7 @@ type SelectedKeyType = string | number;
|
|
|
9
9
|
/**
|
|
10
10
|
* Data item type
|
|
11
11
|
*/
|
|
12
|
-
type
|
|
12
|
+
export type TableSelectDataType = {
|
|
13
13
|
[propName: string]: any;
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
@@ -40,7 +40,7 @@ export interface InternalTableProps {
|
|
|
40
40
|
/**
|
|
41
41
|
* Data source
|
|
42
42
|
*/
|
|
43
|
-
dataSource: Array<
|
|
43
|
+
dataSource: Array<TableSelectDataType>;
|
|
44
44
|
/**
|
|
45
45
|
* Custom class name
|
|
46
46
|
*/
|
|
@@ -65,6 +65,11 @@ export interface InternalTableProps {
|
|
|
65
65
|
* Whether popup is visible (for focus trap)
|
|
66
66
|
*/
|
|
67
67
|
visible?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Ref to the popup root element, used by TableSelect for keyboard navigation
|
|
70
|
+
* @internal
|
|
71
|
+
*/
|
|
72
|
+
popupRef?: React.RefObject<HTMLDivElement | null>;
|
|
68
73
|
}
|
|
69
74
|
/**
|
|
70
75
|
* TableSelect component Props interface
|
|
@@ -77,7 +82,7 @@ export interface TableSelectProps extends Omit<InternalTableProps, 'value' | 'on
|
|
|
77
82
|
/**
|
|
78
83
|
* Data source
|
|
79
84
|
*/
|
|
80
|
-
dataSource: Array<
|
|
85
|
+
dataSource: Array<TableSelectDataType>;
|
|
81
86
|
/**
|
|
82
87
|
* Single or multiple selection
|
|
83
88
|
* @default: 'radio'
|
|
@@ -161,7 +166,7 @@ export interface TableSelectProps extends Omit<InternalTableProps, 'value' | 'on
|
|
|
161
166
|
* Option label property (text field for displaying labels)
|
|
162
167
|
* @default 'name'
|
|
163
168
|
*/
|
|
164
|
-
optionLabelProp?: string | ((option:
|
|
169
|
+
optionLabelProp?: string | ((option: TableSelectDataType) => string);
|
|
165
170
|
/**
|
|
166
171
|
* Selection change callback
|
|
167
172
|
* @param keys Selected keys
|
|
@@ -75,7 +75,8 @@ var InternalTable = (props) => {
|
|
|
75
75
|
rowKey = "key",
|
|
76
76
|
isShowFilter = true,
|
|
77
77
|
rowSelection = {},
|
|
78
|
-
visible
|
|
78
|
+
visible,
|
|
79
|
+
popupRef: externalPopupRef
|
|
79
80
|
} = _a, rest = __objRest(_a, [
|
|
80
81
|
"prefixCls",
|
|
81
82
|
"type",
|
|
@@ -85,11 +86,10 @@ var InternalTable = (props) => {
|
|
|
85
86
|
"rowKey",
|
|
86
87
|
"isShowFilter",
|
|
87
88
|
"rowSelection",
|
|
88
|
-
"visible"
|
|
89
|
+
"visible",
|
|
90
|
+
"popupRef"
|
|
89
91
|
]);
|
|
90
|
-
const [internalDataSource, setInternalDataSource] = (0, import_react.useState)(
|
|
91
|
-
[]
|
|
92
|
-
);
|
|
92
|
+
const [internalDataSource, setInternalDataSource] = (0, import_react.useState)([]);
|
|
93
93
|
const renderRowSelection = __spreadValues({ type, selectedRowKeys: value }, rowSelection);
|
|
94
94
|
(0, import_react.useEffect)(() => {
|
|
95
95
|
setInternalDataSource(dataSource || []);
|
|
@@ -134,14 +134,27 @@ var InternalTable = (props) => {
|
|
|
134
134
|
}
|
|
135
135
|
return null;
|
|
136
136
|
};
|
|
137
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
137
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
138
|
+
"div",
|
|
139
|
+
{
|
|
140
|
+
className: `${prefixCls}-popup`,
|
|
141
|
+
tabIndex: 0,
|
|
142
|
+
ref: (node) => {
|
|
143
|
+
popupRef.current = node;
|
|
144
|
+
if (externalPopupRef)
|
|
145
|
+
externalPopupRef.current = node;
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
renderRadio(),
|
|
149
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
150
|
+
import_Table.default,
|
|
151
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
152
|
+
rowKey,
|
|
153
|
+
dataSource: internalDataSource,
|
|
154
|
+
columns,
|
|
155
|
+
rowSelection: renderRowSelection
|
|
156
|
+
})
|
|
157
|
+
)
|
|
158
|
+
);
|
|
146
159
|
};
|
|
147
160
|
var internal_table_default = InternalTable;
|
|
@@ -6,16 +6,8 @@
|
|
|
6
6
|
margin: 0;
|
|
7
7
|
padding: 12px 0;
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.rb-table-select {
|
|
16
|
-
margin-bottom: 0;
|
|
17
|
-
|
|
18
|
-
.rb-table-footer-operate {
|
|
19
|
-
padding: 0 12px;
|
|
9
|
+
// Keyboard-navigated row (TableSelect arrow keys)
|
|
10
|
+
.yee-table-highlight-row {
|
|
11
|
+
background-color: var(--yee-table-tbody-tr-hover-bg-color);
|
|
20
12
|
}
|
|
21
13
|
}
|
|
@@ -70,10 +70,13 @@ var import_Trigger = __toESM(require("../Trigger"));
|
|
|
70
70
|
var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
|
|
71
71
|
var import_omit = __toESM(require("../utils/omit"));
|
|
72
72
|
var import_pick = __toESM(require("../utils/pick"));
|
|
73
|
+
var import_useTableSelectKeyboard = __toESM(require("./hooks/useTableSelectKeyboard"));
|
|
73
74
|
var import_internal_table = __toESM(require("./internal-table"));
|
|
74
75
|
var import_style = require("./style/index.less");
|
|
75
76
|
var handleState = (value) => {
|
|
76
|
-
if (
|
|
77
|
+
if (value === "") {
|
|
78
|
+
return [];
|
|
79
|
+
} else if (typeof value === "string" || typeof value === "number") {
|
|
77
80
|
return [value];
|
|
78
81
|
} else if (Array.isArray(value)) {
|
|
79
82
|
return value;
|
|
@@ -182,9 +185,28 @@ var TableSelect = (baseprops) => {
|
|
|
182
185
|
const renderKeys = keys.length === 0 ? selectionType === "checkbox" ? [] : "" : keys;
|
|
183
186
|
onChange == null ? void 0 : onChange(renderKeys, void 0);
|
|
184
187
|
};
|
|
188
|
+
const {
|
|
189
|
+
popupRef,
|
|
190
|
+
activeRow,
|
|
191
|
+
handleKeyDown: handleSelectorKeyDown
|
|
192
|
+
} = (0, import_useTableSelectKeyboard.default)({
|
|
193
|
+
open,
|
|
194
|
+
disabled,
|
|
195
|
+
dataSource,
|
|
196
|
+
rowKey,
|
|
197
|
+
selectionType,
|
|
198
|
+
selectedRowKeys: mergedValue,
|
|
199
|
+
searchValue,
|
|
200
|
+
onSelect: onSelectChange,
|
|
201
|
+
onClose: () => onVisibleChange(false)
|
|
202
|
+
});
|
|
203
|
+
const userHighlight = rest.highlight;
|
|
185
204
|
const tableProps = (0, import_omit.default)(
|
|
186
205
|
__spreadProps(__spreadValues({}, rest), {
|
|
187
206
|
prefixCls,
|
|
207
|
+
// Keyboard navigation reuses the row highlight; it takes precedence over
|
|
208
|
+
// a user-supplied index list while active.
|
|
209
|
+
highlight: activeRow > 0 ? [activeRow, ...Array.isArray(userHighlight) ? userHighlight : []] : userHighlight,
|
|
188
210
|
rowSelection: __spreadProps(__spreadValues({}, props.rowSelection), {
|
|
189
211
|
onChange: onSelectChange,
|
|
190
212
|
selectedRowKeys: mergedValue
|
|
@@ -212,8 +234,15 @@ var TableSelect = (baseprops) => {
|
|
|
212
234
|
selectedKeys: mergedValue,
|
|
213
235
|
onSearch: handleSearch,
|
|
214
236
|
onRemove: onTagRemove,
|
|
237
|
+
onClear: () => {
|
|
238
|
+
setMergedValue([]);
|
|
239
|
+
onChange == null ? void 0 : onChange(selectionType === "radio" ? "" : [], void 0);
|
|
240
|
+
},
|
|
241
|
+
onKeyDown: handleSelectorKeyDown,
|
|
215
242
|
onOpenChange: (open2) => {
|
|
216
|
-
if (
|
|
243
|
+
if (open2) {
|
|
244
|
+
onVisibleChange(true);
|
|
245
|
+
} else {
|
|
217
246
|
clearSearchValue();
|
|
218
247
|
}
|
|
219
248
|
},
|
|
@@ -222,11 +251,19 @@ var TableSelect = (baseprops) => {
|
|
|
222
251
|
closable,
|
|
223
252
|
placeholder
|
|
224
253
|
});
|
|
225
|
-
const renderPopup = () => /* @__PURE__ */ import_react.default.createElement(
|
|
254
|
+
const renderPopup = () => /* @__PURE__ */ import_react.default.createElement(
|
|
255
|
+
import_internal_table.default,
|
|
256
|
+
__spreadProps(__spreadValues({}, tableProps), {
|
|
257
|
+
value,
|
|
258
|
+
rowKey,
|
|
259
|
+
popupRef
|
|
260
|
+
})
|
|
261
|
+
);
|
|
226
262
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
227
263
|
import_Trigger.default,
|
|
228
264
|
__spreadProps(__spreadValues({}, rest), {
|
|
229
265
|
trigger: "click",
|
|
266
|
+
open,
|
|
230
267
|
popupClassName: `${prefixCls}-popup`,
|
|
231
268
|
popup: renderPopup(),
|
|
232
269
|
placement,
|
package/dist/cjs/style/color.css
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
--yee-color-text: #39364e;
|
|
30
30
|
--yee-color-text-secondary: #696969;
|
|
31
31
|
--yee-color-text-description: #7c7c7c;
|
|
32
|
-
--yee-color-text-disabled: #
|
|
32
|
+
--yee-color-text-disabled: #b8b8b8;
|
|
33
33
|
--yee-color-text-highlight: #f58220;
|
|
34
34
|
--yee-color-text-auxiliary: #d1d1d1;
|
|
35
35
|
--yee-color-split: #e7e7e7;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
--yee-color-border-hover: #75b9f0;
|
|
38
38
|
--yee-color-border-focus: #75b9f0;
|
|
39
39
|
--yee-color-bg-highlight: rgba(245, 130, 32, 16%);
|
|
40
|
-
--yee-color-bg-disabled: #
|
|
40
|
+
--yee-color-bg-disabled: #f5f5f5;
|
|
41
41
|
--yee-color-bg-head: #f8f8f8;
|
|
42
42
|
--yee-color-bg-rail: #f5f5f5;
|
|
43
43
|
--yee-color-bg-fill: #ededed;
|
|
@@ -493,7 +493,7 @@
|
|
|
493
493
|
--yee-checkbox-checked-after-border-color: #fff;
|
|
494
494
|
--yee-checkbox-disabled-unchecked-bg-color: var(--yee-color-bg-disabled);
|
|
495
495
|
--yee-checkbox-disabled-checked-bg-color: var(--yee-color-bg-disabled);
|
|
496
|
-
--yee-checkbox-disabled-checked-border-color: var(--yee-color-
|
|
496
|
+
--yee-checkbox-disabled-checked-border-color: var(--yee-color-text-disabled);
|
|
497
497
|
--yee-checkbox-disabled-checked-after-border-color: var(
|
|
498
498
|
--yee-color-text-disabled
|
|
499
499
|
);
|
|
@@ -1223,7 +1223,7 @@
|
|
|
1223
1223
|
--yee-border-color-hover-focus: var(--yee-color-border-focus);
|
|
1224
1224
|
--yee-placeholder-color: var(--yee-color-placeholder);
|
|
1225
1225
|
|
|
1226
|
-
|
|
1226
|
+
/* deprecated:2026-09-11 hover/focus 拆分为 --yee-color-border-hover / --yee-color-border-focus */
|
|
1227
1227
|
--yee-color-border-hover-focus: var(--yee-color-border-focus);
|
|
1228
1228
|
/* deprecated:2026-09-11 更名 --yee-input-focus-border-color */
|
|
1229
1229
|
--yee-input-content-focus-border-color: var(--yee-input-focus-border-color);
|
|
@@ -1339,5 +1339,5 @@
|
|
|
1339
1339
|
--yee-timepicker-bg-color: var(--yee-time-picker-bg-color);
|
|
1340
1340
|
--yee-treeselect-dropdown-bg-color: var(--yee-tree-select-dropdown-bg-color);
|
|
1341
1341
|
|
|
1342
|
-
|
|
1342
|
+
/* deprecated-aliases:end */
|
|
1343
1343
|
}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
/* ================= 背景 ================= */
|
|
80
80
|
--yee-color-bg-layout: #f1f2f4;
|
|
81
81
|
--yee-color-bg-head: #fff;
|
|
82
|
-
--yee-color-bg-disabled: #
|
|
82
|
+
--yee-color-bg-disabled: #f5f5f5;
|
|
83
83
|
/* 衍生:规范 --hover(极浅悬浮底) */
|
|
84
84
|
--yee-color-bg-hover: rgba(109, 93, 252, 3.5%);
|
|
85
85
|
|
package/dist/cjs/style/size.css
CHANGED
|
@@ -587,7 +587,7 @@
|
|
|
587
587
|
--yee-select-popup-max-height: 200px;
|
|
588
588
|
|
|
589
589
|
/* --Selector-- */
|
|
590
|
-
--yee-selector-padding:
|
|
590
|
+
--yee-selector-padding: 3px 6px;
|
|
591
591
|
--yee-selector-border-width: 1px;
|
|
592
592
|
--yee-selector-border-radius: 4px;
|
|
593
593
|
--yee-selector-height: var(--yee-input-height);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* @rainbow-oh/yee-c CSS Variables
|
|
3
3
|
* Auto-generated, do not edit manually
|
|
4
|
-
* Generated on 2026-10-
|
|
4
|
+
* Generated on 2026-10-15T09:51:26.325Z
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/* ========== color.blue.css ========== */
|
|
@@ -3846,7 +3846,7 @@
|
|
|
3846
3846
|
/* ================= 背景 ================= */
|
|
3847
3847
|
--yee-color-bg-layout: #f1f2f4;
|
|
3848
3848
|
--yee-color-bg-head: #fff;
|
|
3849
|
-
--yee-color-bg-disabled: #
|
|
3849
|
+
--yee-color-bg-disabled: #f5f5f5;
|
|
3850
3850
|
/* 衍生:规范 --hover(极浅悬浮底) */
|
|
3851
3851
|
--yee-color-bg-hover: rgba(109, 93, 252, 3.5%);
|
|
3852
3852
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* @rainbow-oh/yee-c CSS Variables
|
|
3
3
|
* Auto-generated, do not edit manually
|
|
4
|
-
* Generated on 2026-10-
|
|
4
|
+
* Generated on 2026-10-15T09:51:26.325Z
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/* ========== color.css ========== */
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
--yee-color-text: #39364e;
|
|
37
37
|
--yee-color-text-secondary: #696969;
|
|
38
38
|
--yee-color-text-description: #7c7c7c;
|
|
39
|
-
--yee-color-text-disabled: #
|
|
39
|
+
--yee-color-text-disabled: #b8b8b8;
|
|
40
40
|
--yee-color-text-highlight: #f58220;
|
|
41
41
|
--yee-color-text-auxiliary: #d1d1d1;
|
|
42
42
|
--yee-color-split: #e7e7e7;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
--yee-color-border-hover: #75b9f0;
|
|
45
45
|
--yee-color-border-focus: #75b9f0;
|
|
46
46
|
--yee-color-bg-highlight: rgba(245, 130, 32, 16%);
|
|
47
|
-
--yee-color-bg-disabled: #
|
|
47
|
+
--yee-color-bg-disabled: #f5f5f5;
|
|
48
48
|
--yee-color-bg-head: #f8f8f8;
|
|
49
49
|
--yee-color-bg-rail: #f5f5f5;
|
|
50
50
|
--yee-color-bg-fill: #ededed;
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
--yee-checkbox-checked-after-border-color: #fff;
|
|
501
501
|
--yee-checkbox-disabled-unchecked-bg-color: var(--yee-color-bg-disabled);
|
|
502
502
|
--yee-checkbox-disabled-checked-bg-color: var(--yee-color-bg-disabled);
|
|
503
|
-
--yee-checkbox-disabled-checked-border-color: var(--yee-color-
|
|
503
|
+
--yee-checkbox-disabled-checked-border-color: var(--yee-color-text-disabled);
|
|
504
504
|
--yee-checkbox-disabled-checked-after-border-color: var(
|
|
505
505
|
--yee-color-text-disabled
|
|
506
506
|
);
|
|
@@ -1230,7 +1230,7 @@
|
|
|
1230
1230
|
--yee-border-color-hover-focus: var(--yee-color-border-focus);
|
|
1231
1231
|
--yee-placeholder-color: var(--yee-color-placeholder);
|
|
1232
1232
|
|
|
1233
|
-
|
|
1233
|
+
/* deprecated:2026-09-11 hover/focus 拆分为 --yee-color-border-hover / --yee-color-border-focus */
|
|
1234
1234
|
--yee-color-border-hover-focus: var(--yee-color-border-focus);
|
|
1235
1235
|
/* deprecated:2026-09-11 更名 --yee-input-focus-border-color */
|
|
1236
1236
|
--yee-input-content-focus-border-color: var(--yee-input-focus-border-color);
|
|
@@ -1346,7 +1346,7 @@
|
|
|
1346
1346
|
--yee-timepicker-bg-color: var(--yee-time-picker-bg-color);
|
|
1347
1347
|
--yee-treeselect-dropdown-bg-color: var(--yee-tree-select-dropdown-bg-color);
|
|
1348
1348
|
|
|
1349
|
-
|
|
1349
|
+
/* deprecated-aliases:end */
|
|
1350
1350
|
}
|
|
1351
1351
|
|
|
1352
1352
|
|
|
@@ -1940,7 +1940,7 @@
|
|
|
1940
1940
|
--yee-select-popup-max-height: 200px;
|
|
1941
1941
|
|
|
1942
1942
|
/* --Selector-- */
|
|
1943
|
-
--yee-selector-padding:
|
|
1943
|
+
--yee-selector-padding: 3px 6px;
|
|
1944
1944
|
--yee-selector-border-width: 1px;
|
|
1945
1945
|
--yee-selector-border-radius: 4px;
|
|
1946
1946
|
--yee-selector-height: var(--yee-input-height);
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED