@zhenliang/sheet 0.1.50 → 0.1.52
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/core/config.d.ts +1 -0
- package/dist/core/config.js +1 -0
- package/dist/core/reducers/index.d.ts +1 -1
- package/dist/core/reducers/index.js +3 -0
- package/dist/core/reducers/mouseReducer.js +7 -1
- package/dist/core/reducers/stateReducer.d.ts +1 -0
- package/dist/core/reducers/stateReducer.js +73 -2
- package/dist/core/sheet/index.js +66 -35
- package/dist/core/sheet/index.less +25 -0
- package/dist/core/sheet/searchInput.d.ts +15 -0
- package/dist/core/sheet/searchInput.js +78 -0
- package/dist/core/sheet/useKeyBoardEvent.js +6 -0
- package/dist/core/sheet/useMouseEvent.js +5 -3
- package/dist/core/sheet/useSearchInput.d.ts +11 -0
- package/dist/core/sheet/useSearchInput.js +65 -0
- package/dist/core/table/events.js +3 -0
- package/dist/core/table/useGroupConfig.js +1 -0
- package/dist/core/table/useRowSelection.js +1 -0
- package/dist/hooks/useKeyboard.d.ts +1 -0
- package/dist/hooks/useKeyboard.js +6 -1
- package/dist/type/sheet.d.ts +12 -1
- package/dist/type/sheetTable.d.ts +2 -0
- package/package.json +1 -1
package/dist/core/config.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export declare const DOWN_KEY = 40;
|
|
|
8
8
|
export declare const DELETE_KEY = 46;
|
|
9
9
|
export declare const BACKSPACE_KEY = 8;
|
|
10
10
|
export declare const Z_KEY = 90;
|
|
11
|
+
export declare const F_KEY = 70;
|
|
11
12
|
export declare const C_KEY = 67;
|
|
12
13
|
export declare const V_KEY = 86;
|
|
13
14
|
export declare const X_KEY = 88;
|
package/dist/core/config.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SheetType } from "../../type";
|
|
2
|
-
export type SheetAction = 'change' | 'changes' | 'rowMove' | 'colMove' | 'editFinish' | 'pushHistory' | 'popHistory' | 'select' | 'selectOneRow' | 'clearSelect' | 'clearSelectIfNotSingleRow' | 'clearEdit' | 'mouseDown' | 'mouseOver' | 'mouseUp' | 'selectRow' | 'selectCol' | 'loseFocus' | 'doubleClick' | 'mouseLeaveInterval' | 'move' | 'selectAll' | 'escape' | 'reverse' | 'delete' | 'enter' | 'otherInput' | 'none';
|
|
2
|
+
export type SheetAction = 'change' | 'changes' | 'rowMove' | 'colMove' | 'editFinish' | 'pushHistory' | 'popHistory' | 'select' | 'selectOneRow' | 'changeSearch' | 'closeSearch' | 'openSearch' | 'clearSelect' | 'clearSelectIfNotSingleRow' | 'clearEdit' | 'mouseDown' | 'mouseOver' | 'mouseUp' | 'selectRow' | 'selectCol' | 'loseFocus' | 'doubleClick' | 'mouseLeaveInterval' | 'move' | 'selectAll' | 'escape' | 'reverse' | 'delete' | 'enter' | 'otherInput' | 'none';
|
|
3
3
|
export type reducerAction = (type: Partial<SheetType.UpdateStateType>, payload?: unknown) => Partial<SheetType.UpdateStateType>;
|
|
4
4
|
declare const sheetReducer: (state: Partial<SheetType.UpdateStateType>, action: {
|
|
5
5
|
type: SheetAction;
|
|
@@ -15,6 +15,9 @@ var sheetReducer = function sheetReducer(state, action) {
|
|
|
15
15
|
case 'clearSelect':
|
|
16
16
|
case 'clearSelectIfNotSingleRow':
|
|
17
17
|
case 'clearEdit':
|
|
18
|
+
case 'changeSearch':
|
|
19
|
+
case 'closeSearch':
|
|
20
|
+
case 'openSearch':
|
|
18
21
|
return stateReducer[action.type](state, action.payload);
|
|
19
22
|
case 'mouseDown':
|
|
20
23
|
case 'mouseOver':
|
|
@@ -150,7 +150,13 @@ export var mouseReducer = {
|
|
|
150
150
|
lastSelected: {
|
|
151
151
|
start: state.start,
|
|
152
152
|
end: state.end
|
|
153
|
-
}
|
|
153
|
+
},
|
|
154
|
+
searchText: '',
|
|
155
|
+
showSearch: false,
|
|
156
|
+
searchTotal: 0,
|
|
157
|
+
searchCurrent: 0,
|
|
158
|
+
searchCalledCount: 0,
|
|
159
|
+
searchResultList: []
|
|
154
160
|
});
|
|
155
161
|
},
|
|
156
162
|
doubleClick: function doubleClick(state, payload) {
|
|
@@ -11,7 +11,78 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
|
|
|
11
11
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
12
12
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
13
|
import { SheetType } from "../..";
|
|
14
|
-
export var
|
|
14
|
+
export var searchReducer = {
|
|
15
|
+
changeSearch: function changeSearch(state, payload) {
|
|
16
|
+
var data = state.data;
|
|
17
|
+
var count = 0;
|
|
18
|
+
var searchResultList = [];
|
|
19
|
+
payload && (data === null || data === void 0 ? void 0 : data.forEach(function (row, i) {
|
|
20
|
+
return row.forEach(function (item, j) {
|
|
21
|
+
var _item$dataEditor, _item$value;
|
|
22
|
+
if (item.fixed) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
var formatterValue;
|
|
26
|
+
if (item.searchKey) {
|
|
27
|
+
var _formatterValue;
|
|
28
|
+
formatterValue = item.searchKey(item.record);
|
|
29
|
+
if ((_formatterValue = formatterValue) !== null && _formatterValue !== void 0 && _formatterValue.includes(payload)) {
|
|
30
|
+
count++;
|
|
31
|
+
searchResultList.push({
|
|
32
|
+
row: i,
|
|
33
|
+
col: j,
|
|
34
|
+
value: item.value,
|
|
35
|
+
formatterValue: formatterValue
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
} else if ((_item$dataEditor = item.dataEditor) !== null && _item$dataEditor !== void 0 && _item$dataEditor.formatter) {
|
|
39
|
+
var _item$dataEditor2, _formatterValue2;
|
|
40
|
+
formatterValue = (_item$dataEditor2 = item.dataEditor) === null || _item$dataEditor2 === void 0 || (_item$dataEditor2 = _item$dataEditor2.formatter(item.value, item.record)) === null || _item$dataEditor2 === void 0 ? void 0 : _item$dataEditor2.toString();
|
|
41
|
+
if ((_formatterValue2 = formatterValue) !== null && _formatterValue2 !== void 0 && _formatterValue2.includes(payload)) {
|
|
42
|
+
count++;
|
|
43
|
+
searchResultList.push({
|
|
44
|
+
row: i,
|
|
45
|
+
col: j,
|
|
46
|
+
value: item.value,
|
|
47
|
+
formatterValue: formatterValue
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
} else if ((_item$value = item.value) !== null && _item$value !== void 0 && _item$value.toString().includes(payload)) {
|
|
51
|
+
count++;
|
|
52
|
+
searchResultList.push({
|
|
53
|
+
row: i,
|
|
54
|
+
col: j,
|
|
55
|
+
value: item.value
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}));
|
|
60
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
61
|
+
searchText: payload,
|
|
62
|
+
searchTotal: count,
|
|
63
|
+
searchCurrent: -1,
|
|
64
|
+
searchResultList: searchResultList
|
|
65
|
+
});
|
|
66
|
+
},
|
|
67
|
+
closeSearch: function closeSearch(state) {
|
|
68
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
69
|
+
searchText: '',
|
|
70
|
+
showSearch: false,
|
|
71
|
+
searchTotal: 0,
|
|
72
|
+
searchCurrent: 0,
|
|
73
|
+
searchCalledCount: 0,
|
|
74
|
+
searchResultList: []
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
openSearch: function openSearch(state) {
|
|
78
|
+
var _state$searchCalledCo;
|
|
79
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
80
|
+
showSearch: true,
|
|
81
|
+
searchCalledCount: ((_state$searchCalledCo = state.searchCalledCount) !== null && _state$searchCalledCo !== void 0 ? _state$searchCalledCo : 0) + 1
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
export var stateReducer = _objectSpread({
|
|
15
86
|
change: function change(state, payload) {
|
|
16
87
|
var _ref = payload,
|
|
17
88
|
key = _ref.key,
|
|
@@ -171,4 +242,4 @@ export var stateReducer = {
|
|
|
171
242
|
lastEditing: editing
|
|
172
243
|
});
|
|
173
244
|
}
|
|
174
|
-
};
|
|
245
|
+
}, searchReducer);
|
package/dist/core/sheet/index.js
CHANGED
|
@@ -25,8 +25,11 @@ import { useKeyBoardEvent } from "./useKeyBoardEvent";
|
|
|
25
25
|
import { useMouseEvent } from "./useMouseEvent";
|
|
26
26
|
import { useSelectVisible } from "./useSelectVisible";
|
|
27
27
|
import { VirtualizeEnd, VirtualizeStart, useVirtualList } from "./useVirtualList";
|
|
28
|
+
import { SearchInput } from "./searchInput";
|
|
29
|
+
import { useSearchInput } from "./useSearchInput";
|
|
28
30
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
31
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
30
33
|
var Sheet = function Sheet(props) {
|
|
31
34
|
var _visibleData$length, _scroll$y, _scroll$x;
|
|
32
35
|
var _props$sheetInstance = props.sheetInstance,
|
|
@@ -138,6 +141,16 @@ var Sheet = function Sheet(props) {
|
|
|
138
141
|
type: 'popHistory'
|
|
139
142
|
});
|
|
140
143
|
return history !== null && history !== void 0 && history.length ? history === null || history === void 0 ? void 0 : history[history.length - 1] : {};
|
|
144
|
+
},
|
|
145
|
+
dropHistory: function dropHistory() {
|
|
146
|
+
var history = state.history;
|
|
147
|
+
dispatch({
|
|
148
|
+
type: 'changes',
|
|
149
|
+
payload: {
|
|
150
|
+
history: []
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
return history !== null && history !== void 0 ? history : [];
|
|
141
154
|
}
|
|
142
155
|
};
|
|
143
156
|
}, [state.history]);
|
|
@@ -188,6 +201,11 @@ var Sheet = function Sheet(props) {
|
|
|
188
201
|
virtualEnd = _useVirtualList.virtualEnd,
|
|
189
202
|
paddingTop = _useVirtualList.paddingTop,
|
|
190
203
|
paddingBottom = _useVirtualList.paddingBottom;
|
|
204
|
+
var _useSearchInput = useSearchInput(state, dispatch, sheetInstance),
|
|
205
|
+
closeSearch = _useSearchInput.closeSearch,
|
|
206
|
+
changeSearch = _useSearchInput.changeSearch,
|
|
207
|
+
goNext = _useSearchInput.goNext,
|
|
208
|
+
goLast = _useSearchInput.goLast;
|
|
191
209
|
useEffect(function () {
|
|
192
210
|
dispatch({
|
|
193
211
|
type: 'clearEdit'
|
|
@@ -234,44 +252,57 @@ var Sheet = function Sheet(props) {
|
|
|
234
252
|
var hasHorizontalScrollbar = sheetWrapperRef.current && sheetWrapperRef.current.scrollWidth > sheetWrapperRef.current.clientWidth;
|
|
235
253
|
return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
|
|
236
254
|
value: eventBus,
|
|
237
|
-
children: /*#__PURE__*/_jsxs(
|
|
255
|
+
children: /*#__PURE__*/_jsxs(_Fragment, {
|
|
238
256
|
children: [/*#__PURE__*/_jsxs("span", {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
children: [/*#__PURE__*/_jsxs(SheetShell, {
|
|
247
|
-
className: classNames('harvest-sheet', className),
|
|
248
|
-
children: [/*#__PURE__*/_jsx(VirtualizeStart, {
|
|
249
|
-
virtualized: virtualized,
|
|
250
|
-
paddingTop: paddingTop
|
|
251
|
-
}), rowElements, /*#__PURE__*/_jsx(VirtualizeEnd, {
|
|
252
|
-
virtualized: virtualized,
|
|
253
|
-
paddingBottom: paddingBottom
|
|
254
|
-
})]
|
|
255
|
-
}, "sheet"), /*#__PURE__*/_jsx(Menu, {
|
|
256
|
-
ref: contextMenuRef,
|
|
257
|
-
position: menu.position,
|
|
258
|
-
cell: menu.cellPosition,
|
|
259
|
-
showMenu: menu.showMenu,
|
|
260
|
-
contextMenu: ContextMenu,
|
|
261
|
-
onContextMenu: onContextMenu
|
|
262
|
-
})]
|
|
263
|
-
}), EmptyElement, /*#__PURE__*/_jsxs("div", {
|
|
264
|
-
className: "harvest-sheet-control",
|
|
265
|
-
children: [children, /*#__PURE__*/_jsx(Control, {
|
|
266
|
-
showBackEdit: showBackEdit,
|
|
267
|
-
startRowVisible: startRowVisible,
|
|
268
|
-
handelClick: function handelClick() {
|
|
269
|
-
var _sheetInstance$curren;
|
|
270
|
-
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
|
|
257
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
|
258
|
+
ref: sheetWrapperRef,
|
|
259
|
+
tabIndex: 0,
|
|
260
|
+
className: classNames('harvest harvest-sheet-container', className, hasHorizontalScrollbar && boldScroll ? 'tableWarpScroll' : null, hideColBar ? 'hideColBar' : null),
|
|
261
|
+
style: {
|
|
262
|
+
maxHeight: (_scroll$y = scroll === null || scroll === void 0 ? void 0 : scroll.y) !== null && _scroll$y !== void 0 ? _scroll$y : memoHeight,
|
|
263
|
+
width: (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$x : '100%'
|
|
271
264
|
},
|
|
272
|
-
|
|
273
|
-
|
|
265
|
+
children: [/*#__PURE__*/_jsxs(SheetShell, {
|
|
266
|
+
className: classNames('harvest-sheet', className),
|
|
267
|
+
children: [/*#__PURE__*/_jsx(VirtualizeStart, {
|
|
268
|
+
virtualized: virtualized,
|
|
269
|
+
paddingTop: paddingTop
|
|
270
|
+
}), rowElements, /*#__PURE__*/_jsx(VirtualizeEnd, {
|
|
271
|
+
virtualized: virtualized,
|
|
272
|
+
paddingBottom: paddingBottom
|
|
273
|
+
})]
|
|
274
|
+
}, "sheet"), /*#__PURE__*/_jsx(Menu, {
|
|
275
|
+
ref: contextMenuRef,
|
|
276
|
+
position: menu.position,
|
|
277
|
+
cell: menu.cellPosition,
|
|
278
|
+
showMenu: menu.showMenu,
|
|
279
|
+
contextMenu: ContextMenu,
|
|
280
|
+
onContextMenu: onContextMenu
|
|
281
|
+
}), EmptyElement]
|
|
282
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
283
|
+
className: "harvest-sheet-control",
|
|
284
|
+
children: [children, /*#__PURE__*/_jsx(Control, {
|
|
285
|
+
showBackEdit: showBackEdit,
|
|
286
|
+
startRowVisible: startRowVisible,
|
|
287
|
+
handelClick: function handelClick() {
|
|
288
|
+
var _sheetInstance$curren;
|
|
289
|
+
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
|
|
290
|
+
},
|
|
291
|
+
direction: direction,
|
|
292
|
+
backEditStyle: backEditStyle
|
|
293
|
+
})]
|
|
274
294
|
})]
|
|
295
|
+
}), /*#__PURE__*/_jsx(SearchInput, {
|
|
296
|
+
style: props.searchStyle,
|
|
297
|
+
value: state.searchText,
|
|
298
|
+
total: state.searchTotal,
|
|
299
|
+
current: state.searchCurrent,
|
|
300
|
+
calledCount: state.searchCalledCount,
|
|
301
|
+
open: state.showSearch,
|
|
302
|
+
goNext: goNext,
|
|
303
|
+
goLast: goLast,
|
|
304
|
+
onChange: changeSearch,
|
|
305
|
+
onClose: closeSearch
|
|
275
306
|
})]
|
|
276
307
|
})
|
|
277
308
|
});
|
|
@@ -336,6 +336,31 @@ span.harvest-sheet-container:focus {
|
|
|
336
336
|
border-radius: 2px;
|
|
337
337
|
}
|
|
338
338
|
|
|
339
|
+
.harvest-search-text {
|
|
340
|
+
position: absolute;
|
|
341
|
+
top: 0px;
|
|
342
|
+
right: 0px;
|
|
343
|
+
width: 280px;
|
|
344
|
+
z-index: 4;
|
|
345
|
+
font-size: 14px;
|
|
346
|
+
margin: 5px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.harvest-search-text .search-text-suffix {
|
|
350
|
+
.search-text-disabled {
|
|
351
|
+
color: #A4A9B2;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
>span {
|
|
355
|
+
margin: 0 3px;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.harvest-search-text .ant-input-affix-wrapper-focused {
|
|
360
|
+
border-color: #0078E0;
|
|
361
|
+
box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.20);
|
|
362
|
+
}
|
|
363
|
+
|
|
339
364
|
:global {
|
|
340
365
|
.ant-empty-description {
|
|
341
366
|
color: #A4A9B2;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
interface SearchInputProps {
|
|
3
|
+
open?: boolean;
|
|
4
|
+
style?: Partial<CSSProperties>;
|
|
5
|
+
value?: string;
|
|
6
|
+
current?: number;
|
|
7
|
+
total?: number;
|
|
8
|
+
calledCount?: number;
|
|
9
|
+
goNext?: () => void;
|
|
10
|
+
goLast?: () => void;
|
|
11
|
+
onClose?: () => void;
|
|
12
|
+
onChange?: (value: string) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const SearchInput: React.FC<SearchInputProps>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { CloseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
|
|
2
|
+
import { Divider, Input } from 'antd';
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
export var SearchInput = function SearchInput(props) {
|
|
7
|
+
var inputRef = useRef(null);
|
|
8
|
+
var _props$current = props.current,
|
|
9
|
+
current = _props$current === void 0 ? 0 : _props$current,
|
|
10
|
+
_props$total = props.total,
|
|
11
|
+
total = _props$total === void 0 ? 0 : _props$total,
|
|
12
|
+
value = props.value,
|
|
13
|
+
_onChange = props.onChange,
|
|
14
|
+
open = props.open,
|
|
15
|
+
onClose = props.onClose,
|
|
16
|
+
goLast = props.goLast,
|
|
17
|
+
goNext = props.goNext,
|
|
18
|
+
_props$calledCount = props.calledCount,
|
|
19
|
+
calledCount = _props$calledCount === void 0 ? 0 : _props$calledCount,
|
|
20
|
+
style = props.style;
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
if (calledCount > 0 && inputRef.current) {
|
|
23
|
+
inputRef.current.focus();
|
|
24
|
+
}
|
|
25
|
+
}, [calledCount]);
|
|
26
|
+
if (!open) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
return /*#__PURE__*/_jsx("div", {
|
|
30
|
+
className: "harvest-search-text",
|
|
31
|
+
style: style,
|
|
32
|
+
children: /*#__PURE__*/_jsx(Input, {
|
|
33
|
+
ref: inputRef,
|
|
34
|
+
placeholder: "\u67E5\u627E",
|
|
35
|
+
autoFocus: true,
|
|
36
|
+
style: {
|
|
37
|
+
height: 40
|
|
38
|
+
},
|
|
39
|
+
value: value,
|
|
40
|
+
onChange: function onChange(e) {
|
|
41
|
+
return _onChange && _onChange(e.target.value);
|
|
42
|
+
},
|
|
43
|
+
onPressEnter: function onPressEnter(e) {
|
|
44
|
+
if (e.shiftKey) goLast && goLast();else goNext && goNext();
|
|
45
|
+
setTimeout(function () {
|
|
46
|
+
var _inputRef$current;
|
|
47
|
+
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
|
|
48
|
+
}, 100);
|
|
49
|
+
},
|
|
50
|
+
suffix: /*#__PURE__*/_jsxs("span", {
|
|
51
|
+
className: "ant-input-suffix",
|
|
52
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
|
53
|
+
className: "ant-input-show-count-suffix",
|
|
54
|
+
children: [!total ? 0 : (current || 0) + 1, "/", total || 0]
|
|
55
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
|
56
|
+
type: "vertical"
|
|
57
|
+
}), /*#__PURE__*/_jsxs("span", {
|
|
58
|
+
className: "search-text-suffix",
|
|
59
|
+
children: [/*#__PURE__*/_jsx(UpOutlined, {
|
|
60
|
+
className: !total ? 'search-text-disabled' : '',
|
|
61
|
+
onClick: function onClick() {
|
|
62
|
+
return goLast && goLast();
|
|
63
|
+
}
|
|
64
|
+
}), /*#__PURE__*/_jsx(DownOutlined, {
|
|
65
|
+
className: !total ? 'search-text-disabled' : '',
|
|
66
|
+
onClick: function onClick() {
|
|
67
|
+
return goNext && goNext();
|
|
68
|
+
}
|
|
69
|
+
}), /*#__PURE__*/_jsx(CloseOutlined, {
|
|
70
|
+
onClick: function onClick() {
|
|
71
|
+
return onClose && onClose();
|
|
72
|
+
}
|
|
73
|
+
})]
|
|
74
|
+
})]
|
|
75
|
+
})
|
|
76
|
+
})
|
|
77
|
+
});
|
|
78
|
+
};
|
|
@@ -67,6 +67,12 @@ export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
|
|
|
67
67
|
cut: function cut() {
|
|
68
68
|
dispatch(sideEffectReducer.copy);
|
|
69
69
|
dispatch(sideEffectReducer.delete);
|
|
70
|
+
},
|
|
71
|
+
search: function search(e) {
|
|
72
|
+
e.preventDefault();
|
|
73
|
+
dispatch({
|
|
74
|
+
type: 'openSearch'
|
|
75
|
+
});
|
|
70
76
|
}
|
|
71
77
|
}, elementRef.current);
|
|
72
78
|
};
|
|
@@ -264,14 +264,16 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
264
264
|
});
|
|
265
265
|
}, []);
|
|
266
266
|
var loseFocus = useCallback(function (e) {
|
|
267
|
-
var _elementRef$current10;
|
|
268
|
-
|
|
267
|
+
var _elementRef$current10, _elementRef$current11;
|
|
268
|
+
var isSearch = (_elementRef$current10 = elementRef.current) === null || _elementRef$current10 === void 0 || (_elementRef$current10 = _elementRef$current10.parentElement) === null || _elementRef$current10 === void 0 || (_elementRef$current10 = _elementRef$current10.nextSibling) === null || _elementRef$current10 === void 0 ? void 0 : _elementRef$current10.contains(e.target);
|
|
269
|
+
var isTableAControl = (_elementRef$current11 = elementRef.current) === null || _elementRef$current11 === void 0 || (_elementRef$current11 = _elementRef$current11.parentElement) === null || _elementRef$current11 === void 0 ? void 0 : _elementRef$current11.contains(e.target);
|
|
270
|
+
if (!(isTableAControl || isSearch)) {
|
|
269
271
|
dispatch({
|
|
270
272
|
type: 'loseFocus'
|
|
271
273
|
});
|
|
272
274
|
return;
|
|
273
275
|
}
|
|
274
|
-
e.preventDefault();
|
|
276
|
+
// e.preventDefault();
|
|
275
277
|
var currentCell = findParentTd(e.target);
|
|
276
278
|
if (!(currentCell !== null && currentCell !== void 0 && currentCell.classList) || currentCell.classList.contains('read-only')) {
|
|
277
279
|
// 只读
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Dispatch } from "../../hooks/useMiddlewareReducer";
|
|
2
|
+
import type { SheetType } from "../../type";
|
|
3
|
+
export declare const useSearchInput: (state: Partial<SheetType.UpdateStateType>, dispatch: Dispatch, handlerRef: React.RefObject<SheetType.SheetInstance>) => {
|
|
4
|
+
goNext: () => void;
|
|
5
|
+
goLast: () => void;
|
|
6
|
+
changeSearch: (value: string) => void;
|
|
7
|
+
closeSearch: () => void;
|
|
8
|
+
searchText?: string | undefined;
|
|
9
|
+
searchTotal?: number | undefined;
|
|
10
|
+
searchCurrent?: number | undefined;
|
|
11
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { pick } from 'lodash';
|
|
8
|
+
import { useCallback, useEffect } from 'react';
|
|
9
|
+
export var useSearchInput = function useSearchInput(state, dispatch, handlerRef) {
|
|
10
|
+
var goSearchResult = useCallback(function (value) {
|
|
11
|
+
var _state$searchResultLi;
|
|
12
|
+
var _state$searchTotal = state.searchTotal,
|
|
13
|
+
searchTotal = _state$searchTotal === void 0 ? 0 : _state$searchTotal;
|
|
14
|
+
var index = (value < 0 ? value + searchTotal : value) % (searchTotal || 1);
|
|
15
|
+
var result = (_state$searchResultLi = state.searchResultList) === null || _state$searchResultLi === void 0 ? void 0 : _state$searchResultLi[index];
|
|
16
|
+
if (result) {
|
|
17
|
+
var _state$eventBus, _handlerRef$current, _handlerRef$current2;
|
|
18
|
+
(_state$eventBus = state.eventBus) === null || _state$eventBus === void 0 || _state$eventBus.emit('group-open-title', true);
|
|
19
|
+
dispatch({
|
|
20
|
+
type: 'changes',
|
|
21
|
+
payload: {
|
|
22
|
+
searchCurrent: index
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
(_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 || _handlerRef$current.select({
|
|
26
|
+
start: result,
|
|
27
|
+
end: result
|
|
28
|
+
});
|
|
29
|
+
handlerRef === null || handlerRef === void 0 || (_handlerRef$current2 = handlerRef.current) === null || _handlerRef$current2 === void 0 || _handlerRef$current2.zoomTo();
|
|
30
|
+
}
|
|
31
|
+
}, [state.searchTotal, state.searchResultList]);
|
|
32
|
+
var goNext = useCallback(function () {
|
|
33
|
+
var _state$searchCurrent;
|
|
34
|
+
goSearchResult(((_state$searchCurrent = state.searchCurrent) !== null && _state$searchCurrent !== void 0 ? _state$searchCurrent : 0) + 1);
|
|
35
|
+
}, [goSearchResult, state.searchCurrent]);
|
|
36
|
+
var goLast = useCallback(function () {
|
|
37
|
+
var _state$searchCurrent2;
|
|
38
|
+
goSearchResult(((_state$searchCurrent2 = state.searchCurrent) !== null && _state$searchCurrent2 !== void 0 ? _state$searchCurrent2 : 0) - 1);
|
|
39
|
+
}, [goSearchResult, state.searchCurrent]);
|
|
40
|
+
var closeSearch = useCallback(function () {
|
|
41
|
+
dispatch({
|
|
42
|
+
type: 'closeSearch'
|
|
43
|
+
});
|
|
44
|
+
}, []);
|
|
45
|
+
var changeSearch = useCallback(function (value) {
|
|
46
|
+
dispatch({
|
|
47
|
+
type: 'changeSearch',
|
|
48
|
+
payload: value
|
|
49
|
+
});
|
|
50
|
+
}, [state.data]);
|
|
51
|
+
useEffect(function () {
|
|
52
|
+
var _state$searchResultLi2;
|
|
53
|
+
if (!((_state$searchResultLi2 = state.searchResultList) !== null && _state$searchResultLi2 !== void 0 && _state$searchResultLi2.length)) {
|
|
54
|
+
dispatch({
|
|
55
|
+
type: 'clearSelect'
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}, [state.searchResultList, state.searchTotal]);
|
|
59
|
+
return _objectSpread(_objectSpread({}, pick(state, ['searchText', 'searchTotal', 'searchCurrent'])), {}, {
|
|
60
|
+
goNext: goNext,
|
|
61
|
+
goLast: goLast,
|
|
62
|
+
changeSearch: changeSearch,
|
|
63
|
+
closeSearch: closeSearch
|
|
64
|
+
});
|
|
65
|
+
};
|
|
@@ -68,6 +68,9 @@ export var GroupEvent = function GroupEvent(props) {
|
|
|
68
68
|
}, "group-open"), /*#__PURE__*/_jsx(SheetEvent, {
|
|
69
69
|
name: "group-open-title",
|
|
70
70
|
handler: function handler(value) {
|
|
71
|
+
if (!(rowGroupConfig !== null && rowGroupConfig !== void 0 && rowGroupConfig.groupOpen.some(function (item) {
|
|
72
|
+
return item !== value;
|
|
73
|
+
}))) return;
|
|
71
74
|
onGroupChange && onGroupChange(_objectSpread(_objectSpread({}, rowGroupConfig), {}, {
|
|
72
75
|
groupOpen: Array(rowGroupConfig === null || rowGroupConfig === void 0 ? void 0 : rowGroupConfig.groupOpen.length).fill(value),
|
|
73
76
|
defaultOpen: !groups.length ? value : undefined
|
|
@@ -147,6 +147,7 @@ export var formatGroupData = function formatGroupData(param) {
|
|
|
147
147
|
editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, itemRow, currentIndex, col),
|
|
148
148
|
valueViewer: colInfo.render ? colInfo.render : undefined,
|
|
149
149
|
dataEditor: colInfo.editor ? colInfo.editor : undefined,
|
|
150
|
+
searchKey: colInfo.searchKey,
|
|
150
151
|
row: currentIndex,
|
|
151
152
|
className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, itemRow, currentIndex),
|
|
152
153
|
dataIndex: colInfo.dataIndex,
|
|
@@ -64,6 +64,7 @@ export var formatSelectionData = function formatSelectionData(param) {
|
|
|
64
64
|
editable: !(colInfo.editable instanceof Function) ? colInfo.editable : colInfo.editable(value, item, row),
|
|
65
65
|
valueViewer: colInfo.render ? colInfo.render : undefined,
|
|
66
66
|
dataEditor: colInfo.editor ? colInfo.editor : undefined,
|
|
67
|
+
searchKey: colInfo.searchKey,
|
|
67
68
|
className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, item, row),
|
|
68
69
|
row: row,
|
|
69
70
|
col: col,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useCallback, useEffect } from 'react';
|
|
2
|
-
import { A_KEY, BACKSPACE_KEY, C_KEY, DELETE_KEY, DOWN_KEY, ENTER_KEY, ESCAPE_KEY, LEFT_KEY, RIGHT_KEY, TAB_KEY, UP_KEY, V_KEY, X_KEY, Z_KEY } from "../core/config";
|
|
2
|
+
import { A_KEY, BACKSPACE_KEY, C_KEY, DELETE_KEY, DOWN_KEY, ENTER_KEY, ESCAPE_KEY, F_KEY, LEFT_KEY, RIGHT_KEY, TAB_KEY, UP_KEY, V_KEY, X_KEY, Z_KEY } from "../core/config";
|
|
3
3
|
import { isInputKey } from "../core/util";
|
|
4
4
|
var ua = window.navigator.userAgent;
|
|
5
5
|
var isIE = /MSIE|Trident/.test(ua);
|
|
@@ -51,6 +51,11 @@ export var useKeyBoard = function useKeyBoard(handler, listenElement) {
|
|
|
51
51
|
handler.escape(e);
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
54
|
+
var isSearch = ctrlKeyPressed && keyCode === F_KEY;
|
|
55
|
+
if (isSearch) {
|
|
56
|
+
handler.search(e);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
54
59
|
var isReverse = ctrlKeyPressed && keyCode === Z_KEY;
|
|
55
60
|
if (isReverse) {
|
|
56
61
|
handler.reverse(e);
|
package/dist/type/sheet.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export type Cell = {
|
|
|
24
24
|
dataEditor?: CellEditor;
|
|
25
25
|
dataIndex?: string;
|
|
26
26
|
valueViewer?: CellViewer;
|
|
27
|
+
searchKey?: (value: unknown, record?: unknown) => string;
|
|
27
28
|
className?: string;
|
|
28
29
|
align?: CellAlign;
|
|
29
30
|
fixed?: Omit<CellAlign, 'center'>;
|
|
@@ -92,6 +93,7 @@ export type SheetInstance = {
|
|
|
92
93
|
end: SheetType.CellPosition;
|
|
93
94
|
}) => void;
|
|
94
95
|
popHistory: () => OperateHistory;
|
|
96
|
+
dropHistory: () => OperateHistory[];
|
|
95
97
|
};
|
|
96
98
|
export type SheetProps = {
|
|
97
99
|
sheetInstance?: React.MutableRefObject<SheetInstance | null>;
|
|
@@ -104,6 +106,7 @@ export type SheetProps = {
|
|
|
104
106
|
virtualized?: boolean;
|
|
105
107
|
showBackEdit?: boolean;
|
|
106
108
|
backEditStyle?: Partial<CSSProperties>;
|
|
109
|
+
searchStyle?: Partial<CSSProperties>;
|
|
107
110
|
sticky?: boolean;
|
|
108
111
|
groupConfig?: RowGroupConfig;
|
|
109
112
|
onCellsChanged?: CellChangeHandler;
|
|
@@ -169,6 +172,14 @@ export type CellProps = {
|
|
|
169
172
|
valueViewer?: React.ElementType;
|
|
170
173
|
attributesRenderer?: AttributesRenderer;
|
|
171
174
|
};
|
|
175
|
+
export type SearchState = {
|
|
176
|
+
showSearch: boolean;
|
|
177
|
+
searchText: string;
|
|
178
|
+
searchTotal: number;
|
|
179
|
+
searchCurrent: number;
|
|
180
|
+
searchResultList?: CellPosition[];
|
|
181
|
+
searchCalledCount: number;
|
|
182
|
+
};
|
|
172
183
|
export type UpdateStateType = {
|
|
173
184
|
eventBus: EventEmitter;
|
|
174
185
|
start: CellPosition;
|
|
@@ -200,7 +211,7 @@ export type UpdateStateType = {
|
|
|
200
211
|
confirm?: boolean;
|
|
201
212
|
};
|
|
202
213
|
cellChangeHandler: (cells: CellData[], additions?: CellData[]) => void;
|
|
203
|
-
};
|
|
214
|
+
} & SearchState;
|
|
204
215
|
export type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
|
|
205
216
|
export type Options<T = any> = {
|
|
206
217
|
value: string | number;
|
|
@@ -36,6 +36,7 @@ export type ColumnProps = {
|
|
|
36
36
|
readonly?: boolean | RecordRowMap<boolean>;
|
|
37
37
|
render?: SheetType.CellViewer;
|
|
38
38
|
editor?: SheetType.CellEditor;
|
|
39
|
+
searchKey?: (value: unknown, record: Record<string, unknown>) => string;
|
|
39
40
|
};
|
|
40
41
|
export type TableChange = {
|
|
41
42
|
col?: number;
|
|
@@ -80,6 +81,7 @@ export type TableProps = {
|
|
|
80
81
|
freePaste?: boolean;
|
|
81
82
|
showBackEdit?: boolean;
|
|
82
83
|
backEditStyle?: Partial<CSSProperties>;
|
|
84
|
+
searchStyle?: Partial<CSSProperties>;
|
|
83
85
|
rowSelection?: TableRowSelection;
|
|
84
86
|
groupConfig?: TableGroupConfig;
|
|
85
87
|
menuRenderer?: React.FC<SheetType.MenuRenderProps>;
|