@zhenliang/sheet 0.1.57 → 0.1.59
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/reducers/sideEffectReducer.js +65 -3
- package/dist/core/sheet/Control.d.ts +8 -3
- package/dist/core/sheet/Control.js +75 -26
- package/dist/core/sheet/index.js +34 -9
- package/dist/core/sheet/index.less +30 -51
- package/dist/core/sheet/useKeyBoardEvent.js +6 -1
- package/dist/core/util.d.ts +1 -0
- package/dist/core/util.js +15 -0
- package/dist/example/basic.js +2 -1
- package/dist/hooks/useKeyboard.d.ts +1 -0
- package/dist/hooks/useKeyboard.js +6 -2
- package/dist/type/sheet.d.ts +3 -0
- package/dist/type/sheetTable.d.ts +2 -0
- package/package.json +1 -1
|
@@ -357,8 +357,11 @@ export var sideEffectReducer = {
|
|
|
357
357
|
start = _getState10.start,
|
|
358
358
|
end = _getState10.end,
|
|
359
359
|
history = _getState10.history,
|
|
360
|
+
_getState10$recoverHi = _getState10.recoverHisotry,
|
|
361
|
+
recoverHisotry = _getState10$recoverHi === void 0 ? [] : _getState10$recoverHi,
|
|
360
362
|
cellChangeHandler = _getState10.cellChangeHandler,
|
|
361
|
-
eventBus = _getState10.eventBus
|
|
363
|
+
eventBus = _getState10.eventBus,
|
|
364
|
+
data = _getState10.data;
|
|
362
365
|
if (!(history !== null && history !== void 0 && history.length)) return;
|
|
363
366
|
var changeHistory = _toConsumableArray(history);
|
|
364
367
|
var change = changeHistory.pop();
|
|
@@ -368,12 +371,70 @@ export var sideEffectReducer = {
|
|
|
368
371
|
dispatch({
|
|
369
372
|
type: 'changes',
|
|
370
373
|
payload: {
|
|
371
|
-
history: changeHistory
|
|
374
|
+
history: changeHistory,
|
|
375
|
+
recoverHisotry: [].concat(_toConsumableArray(recoverHisotry), [change])
|
|
372
376
|
}
|
|
373
377
|
});
|
|
374
378
|
return;
|
|
375
379
|
}
|
|
376
380
|
cellChangeHandler && cellChangeHandler(change.changes);
|
|
381
|
+
var recoverChange = _objectSpread(_objectSpread({}, change), {}, {
|
|
382
|
+
changes: change.changes.map(function (item) {
|
|
383
|
+
var _item$row, _item$col;
|
|
384
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
385
|
+
value: data[(_item$row = item.row) !== null && _item$row !== void 0 ? _item$row : 0][(_item$col = item.col) !== null && _item$col !== void 0 ? _item$col : -1].value
|
|
386
|
+
});
|
|
387
|
+
})
|
|
388
|
+
});
|
|
389
|
+
dispatch({
|
|
390
|
+
type: 'changes',
|
|
391
|
+
payload: {
|
|
392
|
+
start: pick(head(change.changes), ['row', 'col']),
|
|
393
|
+
end: pick(last(change.changes), ['row', 'col']),
|
|
394
|
+
lastSelected: {
|
|
395
|
+
start: start,
|
|
396
|
+
end: end
|
|
397
|
+
},
|
|
398
|
+
history: changeHistory,
|
|
399
|
+
recoverHisotry: [].concat(_toConsumableArray(recoverHisotry), [recoverChange])
|
|
400
|
+
}
|
|
401
|
+
});
|
|
402
|
+
},
|
|
403
|
+
recover: function recover(dispatch, getState) {
|
|
404
|
+
var _getState11 = getState(),
|
|
405
|
+
eventBus = _getState11.eventBus,
|
|
406
|
+
_getState11$recoverHi = _getState11.recoverHisotry,
|
|
407
|
+
recoverHisotry = _getState11$recoverHi === void 0 ? [] : _getState11$recoverHi,
|
|
408
|
+
_getState11$history = _getState11.history,
|
|
409
|
+
history = _getState11$history === void 0 ? [] : _getState11$history,
|
|
410
|
+
cellChangeHandler = _getState11.cellChangeHandler,
|
|
411
|
+
start = _getState11.start,
|
|
412
|
+
end = _getState11.end,
|
|
413
|
+
data = _getState11.data;
|
|
414
|
+
if (!(recoverHisotry !== null && recoverHisotry !== void 0 && recoverHisotry.length)) return;
|
|
415
|
+
var changeHistory = _toConsumableArray(recoverHisotry);
|
|
416
|
+
var change = changeHistory.pop();
|
|
417
|
+
var type = change.type;
|
|
418
|
+
if (!['Edit', 'Paste', 'Delete'].includes(type)) {
|
|
419
|
+
eventBus.emit('recover', change);
|
|
420
|
+
dispatch({
|
|
421
|
+
type: 'changes',
|
|
422
|
+
payload: {
|
|
423
|
+
recoverHisotry: changeHistory,
|
|
424
|
+
history: [].concat(_toConsumableArray(history), [change])
|
|
425
|
+
}
|
|
426
|
+
});
|
|
427
|
+
return;
|
|
428
|
+
}
|
|
429
|
+
var reverseChange = _objectSpread(_objectSpread({}, change), {}, {
|
|
430
|
+
changes: change.changes.map(function (item) {
|
|
431
|
+
var _item$row2, _item$col2;
|
|
432
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
433
|
+
value: data[(_item$row2 = item.row) !== null && _item$row2 !== void 0 ? _item$row2 : 0][(_item$col2 = item.col) !== null && _item$col2 !== void 0 ? _item$col2 : -1].value
|
|
434
|
+
});
|
|
435
|
+
})
|
|
436
|
+
});
|
|
437
|
+
cellChangeHandler && cellChangeHandler(change.changes);
|
|
377
438
|
dispatch({
|
|
378
439
|
type: 'changes',
|
|
379
440
|
payload: {
|
|
@@ -383,7 +444,8 @@ export var sideEffectReducer = {
|
|
|
383
444
|
start: start,
|
|
384
445
|
end: end
|
|
385
446
|
},
|
|
386
|
-
history:
|
|
447
|
+
history: [].concat(_toConsumableArray(history), [reverseChange]),
|
|
448
|
+
recoverHisotry: changeHistory
|
|
387
449
|
}
|
|
388
450
|
});
|
|
389
451
|
}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
interface ControlProps {
|
|
3
|
-
showBackEdit?: boolean;
|
|
4
3
|
startRowVisible: boolean;
|
|
5
|
-
|
|
4
|
+
firstRowVisible: boolean;
|
|
5
|
+
lastRowVisible: boolean;
|
|
6
|
+
showQuickLocationBtn: boolean;
|
|
7
|
+
backToEditRow: () => void;
|
|
8
|
+
toTop: () => void;
|
|
9
|
+
toBottom: () => void;
|
|
6
10
|
backEditStyle?: Partial<CSSProperties>;
|
|
7
|
-
|
|
11
|
+
ControlContainer?: React.FC;
|
|
12
|
+
showBackEdit?: boolean;
|
|
8
13
|
}
|
|
9
14
|
export declare const Control: React.FC<ControlProps>;
|
|
10
15
|
export {};
|
|
@@ -1,32 +1,81 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { EditOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
|
|
2
|
+
import { Button, Tooltip } from 'antd';
|
|
3
|
+
import React, { useMemo } from 'react';
|
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
|
+
var itemStyle = {
|
|
6
|
+
fontSize: 18,
|
|
7
|
+
marginTop: 2
|
|
8
|
+
};
|
|
5
9
|
export var Control = function Control(props) {
|
|
6
10
|
var showBackEdit = props.showBackEdit,
|
|
11
|
+
showQuickLocationBtn = props.showQuickLocationBtn,
|
|
7
12
|
startRowVisible = props.startRowVisible,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
13
|
+
firstRowVisible = props.firstRowVisible,
|
|
14
|
+
lastRowVisible = props.lastRowVisible,
|
|
15
|
+
toTop = props.toTop,
|
|
16
|
+
toBottom = props.toBottom,
|
|
17
|
+
backToEditRow = props.backToEditRow,
|
|
18
|
+
_props$backEditStyle = props.backEditStyle,
|
|
19
|
+
backEditStyle = _props$backEditStyle === void 0 ? {
|
|
20
|
+
bottom: 0,
|
|
21
|
+
right: 0
|
|
22
|
+
} : _props$backEditStyle,
|
|
23
|
+
ControlContainer = props.ControlContainer;
|
|
24
|
+
var btns = useMemo(function () {
|
|
25
|
+
var tempBtns = [{
|
|
26
|
+
title: '置顶',
|
|
27
|
+
disabled: firstRowVisible,
|
|
28
|
+
event: toTop,
|
|
29
|
+
icon: /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {
|
|
30
|
+
style: itemStyle
|
|
31
|
+
}),
|
|
32
|
+
isShow: showQuickLocationBtn
|
|
33
|
+
}, {
|
|
34
|
+
title: '置底',
|
|
35
|
+
disabled: lastRowVisible,
|
|
36
|
+
event: toBottom,
|
|
37
|
+
icon: /*#__PURE__*/_jsx(VerticalAlignBottomOutlined, {
|
|
38
|
+
style: itemStyle
|
|
39
|
+
}),
|
|
40
|
+
isShow: showQuickLocationBtn
|
|
41
|
+
}, {
|
|
42
|
+
title: '返回编辑行',
|
|
43
|
+
disabled: startRowVisible,
|
|
44
|
+
event: toBottom,
|
|
45
|
+
icon: /*#__PURE__*/_jsx(EditOutlined, {
|
|
46
|
+
style: itemStyle
|
|
47
|
+
}),
|
|
48
|
+
isShow: showBackEdit
|
|
49
|
+
}];
|
|
50
|
+
return tempBtns.filter(function (item) {
|
|
51
|
+
return item.isShow;
|
|
52
|
+
});
|
|
53
|
+
}, [firstRowVisible, showQuickLocationBtn, lastRowVisible, startRowVisible, showBackEdit]);
|
|
54
|
+
if (!showBackEdit && !showQuickLocationBtn) return null;
|
|
55
|
+
if (ControlContainer) {
|
|
56
|
+
return /*#__PURE__*/_jsx(ControlContainer, {});
|
|
57
|
+
}
|
|
58
|
+
return /*#__PURE__*/_jsx("div", {
|
|
59
|
+
className: "control",
|
|
60
|
+
onClick: backToEditRow,
|
|
61
|
+
style: backEditStyle,
|
|
62
|
+
children: btns.map(function (item) {
|
|
63
|
+
return /*#__PURE__*/_jsx("div", {
|
|
64
|
+
className: "control-item",
|
|
65
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
|
66
|
+
title: item.title,
|
|
67
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
68
|
+
style: {
|
|
69
|
+
width: 24,
|
|
70
|
+
height: 24,
|
|
71
|
+
padding: 0
|
|
72
|
+
},
|
|
73
|
+
disabled: item.disabled,
|
|
74
|
+
onClick: item.event,
|
|
75
|
+
children: item.icon
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
}, item.title);
|
|
79
|
+
})
|
|
31
80
|
});
|
|
32
81
|
};
|
package/dist/core/sheet/index.js
CHANGED
|
@@ -61,7 +61,10 @@ var Sheet = function Sheet(props) {
|
|
|
61
61
|
_props$boldScroll = props.boldScroll,
|
|
62
62
|
boldScroll = _props$boldScroll === void 0 ? true : _props$boldScroll,
|
|
63
63
|
_props$hideColBar = props.hideColBar,
|
|
64
|
-
hideColBar = _props$hideColBar === void 0 ? true : _props$hideColBar
|
|
64
|
+
hideColBar = _props$hideColBar === void 0 ? true : _props$hideColBar,
|
|
65
|
+
_props$showQuickLocat = props.showQuickLocationBtn,
|
|
66
|
+
showQuickLocationBtn = _props$showQuickLocat === void 0 ? false : _props$showQuickLocat,
|
|
67
|
+
ControlContainer = props.ControlContainer;
|
|
65
68
|
var sheetWrapperRef = useRef(null);
|
|
66
69
|
var contextMenuRef = useRef(null);
|
|
67
70
|
var eventBus = useEventBus();
|
|
@@ -233,9 +236,20 @@ var Sheet = function Sheet(props) {
|
|
|
233
236
|
}, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName]);
|
|
234
237
|
var memoHeight = Math.min(((_visibleData$length = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length !== void 0 ? _visibleData$length : 0) + 1, 10) * 42 + 43;
|
|
235
238
|
var _useSelectVisible = useSelectVisible(sheetWrapperRef, state.start),
|
|
236
|
-
_useSelectVisible2 = _slicedToArray(_useSelectVisible,
|
|
237
|
-
startRowVisible = _useSelectVisible2[0]
|
|
238
|
-
|
|
239
|
+
_useSelectVisible2 = _slicedToArray(_useSelectVisible, 1),
|
|
240
|
+
startRowVisible = _useSelectVisible2[0];
|
|
241
|
+
var _useSelectVisible3 = useSelectVisible(sheetWrapperRef, {
|
|
242
|
+
col: 0,
|
|
243
|
+
row: 0
|
|
244
|
+
}),
|
|
245
|
+
_useSelectVisible4 = _slicedToArray(_useSelectVisible3, 1),
|
|
246
|
+
firstRowVisible = _useSelectVisible4[0];
|
|
247
|
+
var _useSelectVisible5 = useSelectVisible(sheetWrapperRef, {
|
|
248
|
+
col: 0,
|
|
249
|
+
row: ((visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) || 1) - 1
|
|
250
|
+
}),
|
|
251
|
+
_useSelectVisible6 = _slicedToArray(_useSelectVisible5, 1),
|
|
252
|
+
lastRowVisible = _useSelectVisible6[0];
|
|
239
253
|
var isEmptyData = isEmpty(state.data);
|
|
240
254
|
var EmptyElement = useMemo(function () {
|
|
241
255
|
if (isEmptyData) {
|
|
@@ -281,16 +295,27 @@ var Sheet = function Sheet(props) {
|
|
|
281
295
|
}), EmptyElement]
|
|
282
296
|
}), /*#__PURE__*/_jsxs("div", {
|
|
283
297
|
className: "harvest-sheet-control",
|
|
284
|
-
children: [
|
|
298
|
+
children: [/*#__PURE__*/_jsx(Control, {
|
|
285
299
|
showBackEdit: showBackEdit,
|
|
286
300
|
startRowVisible: startRowVisible,
|
|
287
|
-
|
|
301
|
+
backToEditRow: function backToEditRow() {
|
|
288
302
|
var _sheetInstance$curren;
|
|
289
303
|
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
|
|
290
304
|
},
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
305
|
+
firstRowVisible: firstRowVisible,
|
|
306
|
+
lastRowVisible: lastRowVisible,
|
|
307
|
+
backEditStyle: backEditStyle,
|
|
308
|
+
toTop: function toTop() {
|
|
309
|
+
var _sheetInstance$curren2;
|
|
310
|
+
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren2 = sheetInstance.current) === null || _sheetInstance$curren2 === void 0 ? void 0 : _sheetInstance$curren2.zoomTo(0);
|
|
311
|
+
},
|
|
312
|
+
toBottom: function toBottom() {
|
|
313
|
+
var _sheetInstance$curren3, _visibleData$length2;
|
|
314
|
+
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren3 = sheetInstance.current) === null || _sheetInstance$curren3 === void 0 ? void 0 : _sheetInstance$curren3.zoomTo(((_visibleData$length2 = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length2 !== void 0 ? _visibleData$length2 : 1) - 1);
|
|
315
|
+
},
|
|
316
|
+
showQuickLocationBtn: showQuickLocationBtn,
|
|
317
|
+
ControlContainer: ControlContainer
|
|
318
|
+
}), children]
|
|
294
319
|
})]
|
|
295
320
|
}), /*#__PURE__*/_jsx(SearchInput, {
|
|
296
321
|
style: props.searchStyle,
|
|
@@ -22,9 +22,7 @@
|
|
|
22
22
|
height: 10px;
|
|
23
23
|
border-bottom: 10px solid #fff;
|
|
24
24
|
}
|
|
25
|
-
|
|
26
25
|
}
|
|
27
|
-
|
|
28
26
|
}
|
|
29
27
|
|
|
30
28
|
.harvest-sheet-container {
|
|
@@ -36,7 +34,6 @@
|
|
|
36
34
|
|
|
37
35
|
.harvest-sheet-container .header {
|
|
38
36
|
z-index: 2;
|
|
39
|
-
|
|
40
37
|
}
|
|
41
38
|
|
|
42
39
|
span.harvest-sheet-container,
|
|
@@ -65,16 +62,15 @@ span.harvest-sheet-container:focus {
|
|
|
65
62
|
.td {
|
|
66
63
|
border-bottom: 1px solid transparent;
|
|
67
64
|
}
|
|
68
|
-
|
|
69
65
|
}
|
|
70
66
|
}
|
|
71
|
-
|
|
72
67
|
}
|
|
73
68
|
|
|
74
69
|
.harvest-sheet-container .harvest-sheet .cell {
|
|
75
70
|
height: 17px;
|
|
76
71
|
font-size: var(--cell-font-size);
|
|
77
|
-
padding: var(--cell-padding-vertical) var(--cell-padding-horizontal)
|
|
72
|
+
padding: var(--cell-padding-vertical) var(--cell-padding-horizontal)
|
|
73
|
+
var(--cell-padding-vertical) var(--cell-padding-horizontal);
|
|
78
74
|
border: 1px solid var(--cell-border-color);
|
|
79
75
|
background-color: var(--cell-background-color);
|
|
80
76
|
cursor: cell;
|
|
@@ -83,20 +79,16 @@ span.harvest-sheet-container:focus {
|
|
|
83
79
|
user-select: none;
|
|
84
80
|
vertical-align: bottom;
|
|
85
81
|
position: relative;
|
|
86
|
-
|
|
87
82
|
}
|
|
88
83
|
|
|
89
|
-
|
|
90
84
|
.harvest-sheet-container .harvest-sheet .cell.fixed {
|
|
91
85
|
position: sticky;
|
|
92
86
|
z-index: 2;
|
|
93
87
|
|
|
94
88
|
&.cell-title {
|
|
95
89
|
z-index: 3;
|
|
96
|
-
|
|
97
90
|
}
|
|
98
91
|
|
|
99
|
-
|
|
100
92
|
&::before {
|
|
101
93
|
position: absolute;
|
|
102
94
|
top: -1px;
|
|
@@ -104,7 +96,7 @@ span.harvest-sheet-container:focus {
|
|
|
104
96
|
width: 100%;
|
|
105
97
|
border-color: var(--cell-border-color);
|
|
106
98
|
border-top: 1px solid var(--cell-border-color);
|
|
107
|
-
content:
|
|
99
|
+
content: '';
|
|
108
100
|
}
|
|
109
101
|
|
|
110
102
|
&.fixed-left::after {
|
|
@@ -114,14 +106,13 @@ span.harvest-sheet-container:focus {
|
|
|
114
106
|
right: -1px;
|
|
115
107
|
width: 30px;
|
|
116
108
|
border-left: 1px solid var(--cell-border-color);
|
|
117
|
-
content:
|
|
109
|
+
content: '';
|
|
118
110
|
pointer-events: none;
|
|
119
111
|
transform: translate(100%);
|
|
120
|
-
transition: box-shadow .3s;
|
|
112
|
+
transition: box-shadow 0.3s;
|
|
121
113
|
box-shadow: var(--cell-fixed-box-shadow-left);
|
|
122
114
|
}
|
|
123
115
|
|
|
124
|
-
|
|
125
116
|
&.fixed-right {
|
|
126
117
|
transform: translateX(1px);
|
|
127
118
|
}
|
|
@@ -133,13 +124,11 @@ span.harvest-sheet-container:focus {
|
|
|
133
124
|
left: -1px;
|
|
134
125
|
width: 30px;
|
|
135
126
|
border-right: 1px solid var(--cell-border-color);
|
|
136
|
-
content:
|
|
127
|
+
content: '';
|
|
137
128
|
pointer-events: none;
|
|
138
129
|
transform: translate(-100%);
|
|
139
|
-
transition: box-shadow .3s;
|
|
130
|
+
transition: box-shadow 0.3s;
|
|
140
131
|
box-shadow: var(--cell-fixed-box-shadow-right);
|
|
141
|
-
|
|
142
|
-
|
|
143
132
|
}
|
|
144
133
|
|
|
145
134
|
&.fixed-unset {
|
|
@@ -147,10 +136,7 @@ span.harvest-sheet-container:focus {
|
|
|
147
136
|
}
|
|
148
137
|
}
|
|
149
138
|
|
|
150
|
-
|
|
151
|
-
|
|
152
139
|
.harvest-sheet-container .harvest-sheet .cell.selected {
|
|
153
|
-
border: 1px double;
|
|
154
140
|
border-color: var(--cell-border-color);
|
|
155
141
|
box-shadow: var(--cell-box-shadow);
|
|
156
142
|
}
|
|
@@ -162,11 +148,13 @@ span.harvest-sheet-container:focus {
|
|
|
162
148
|
.harvest-sheet-container .harvest-sheet .cell.selected-top {
|
|
163
149
|
border-top-color: var(--resizer);
|
|
164
150
|
border-top-width: 1px;
|
|
151
|
+
border-top-style: double;
|
|
165
152
|
}
|
|
166
153
|
|
|
167
154
|
.harvest-sheet-container .harvest-sheet .cell.selected-left {
|
|
168
155
|
border-left-color: var(--resizer);
|
|
169
156
|
border-left-width: 1px;
|
|
157
|
+
border-left-style: double;
|
|
170
158
|
}
|
|
171
159
|
|
|
172
160
|
.harvest-sheet-container .harvest-sheet .cell.selected-bottom {
|
|
@@ -179,7 +167,6 @@ span.harvest-sheet-container:focus {
|
|
|
179
167
|
border-right-width: 1px;
|
|
180
168
|
}
|
|
181
169
|
|
|
182
|
-
|
|
183
170
|
.harvest-sheet-container .harvest-sheet .cell.sheet-control {
|
|
184
171
|
border-right: 1px solid transparent;
|
|
185
172
|
background: var(--cell-background-color);
|
|
@@ -203,7 +190,6 @@ span.harvest-sheet-container:focus {
|
|
|
203
190
|
cursor: var(--arrow-right) 12 12, e-resize;
|
|
204
191
|
}
|
|
205
192
|
|
|
206
|
-
|
|
207
193
|
.harvest-sheet-container .harvest-sheet .cell-title.sheet-control {
|
|
208
194
|
border-right: 1px solid var(--cell-title-background-color);
|
|
209
195
|
}
|
|
@@ -214,25 +200,20 @@ span.harvest-sheet-container:focus {
|
|
|
214
200
|
|
|
215
201
|
&:hover {
|
|
216
202
|
background-color: var(--cell-title-background-color);
|
|
217
|
-
|
|
218
203
|
}
|
|
219
204
|
}
|
|
220
205
|
|
|
221
|
-
|
|
222
206
|
.harvest-sheet-container .harvest-sheet .cell:not(.cell.read-only):hover {
|
|
223
207
|
background-color: var(--cell-hover);
|
|
224
208
|
}
|
|
225
209
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
.harvest-sheet-container .harvest-sheet .cell>.text {
|
|
210
|
+
.harvest-sheet-container .harvest-sheet .cell > .text {
|
|
229
211
|
overflow: hidden;
|
|
230
212
|
padding: 2px 5px;
|
|
231
213
|
text-overflow: ellipsis;
|
|
232
214
|
}
|
|
233
215
|
|
|
234
|
-
|
|
235
|
-
.harvest-sheet-container .harvest-sheet .cell>input {
|
|
216
|
+
.harvest-sheet-container .harvest-sheet .cell > input {
|
|
236
217
|
display: block;
|
|
237
218
|
width: calc(100% - 6px);
|
|
238
219
|
font-size: var(--cell-font-size);
|
|
@@ -282,7 +263,7 @@ span.harvest-sheet-container:focus {
|
|
|
282
263
|
font-size: var(--cell-font-size);
|
|
283
264
|
line-height: var(--cell-inner-height);
|
|
284
265
|
height: var(--cell-inner-height);
|
|
285
|
-
padding: 0
|
|
266
|
+
padding: 0;
|
|
286
267
|
}
|
|
287
268
|
|
|
288
269
|
.harvest-sheet-container .harvest-sheet .cell .data-editor {
|
|
@@ -291,8 +272,6 @@ span.harvest-sheet-container:focus {
|
|
|
291
272
|
height: var(--cell-inner-height);
|
|
292
273
|
}
|
|
293
274
|
|
|
294
|
-
|
|
295
|
-
|
|
296
275
|
.harvest-sheet-container .harvest-menu {
|
|
297
276
|
background-color: white;
|
|
298
277
|
position: fixed;
|
|
@@ -307,10 +286,9 @@ span.harvest-sheet-container:focus {
|
|
|
307
286
|
line-height: 22px;
|
|
308
287
|
|
|
309
288
|
&:hover {
|
|
310
|
-
background-color: rgba(31, 35, 41, 5%)
|
|
289
|
+
background-color: rgba(31, 35, 41, 5%);
|
|
311
290
|
}
|
|
312
291
|
}
|
|
313
|
-
|
|
314
292
|
}
|
|
315
293
|
|
|
316
294
|
.harvest-sheet-control {
|
|
@@ -321,19 +299,20 @@ span.harvest-sheet-container:focus {
|
|
|
321
299
|
background-color: white;
|
|
322
300
|
}
|
|
323
301
|
|
|
324
|
-
.harvest-sheet-control .
|
|
325
|
-
|
|
326
|
-
margin: 1px;
|
|
327
|
-
height: 30px;
|
|
302
|
+
.harvest-sheet-control .control {
|
|
303
|
+
margin: 4px 1px 4px 0;
|
|
328
304
|
display: flex;
|
|
329
|
-
width: 105px;
|
|
330
|
-
cursor: pointer;
|
|
331
305
|
align-items: center;
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
z-index: 4;
|
|
335
|
-
border: 1px solid #D8DFEB;
|
|
306
|
+
flex-direction: row;
|
|
307
|
+
justify-content: flex-end;
|
|
336
308
|
border-radius: 2px;
|
|
309
|
+
.control-item {
|
|
310
|
+
margin-right: 4px;
|
|
311
|
+
&:last-child {
|
|
312
|
+
margin-right: 0;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
337
316
|
}
|
|
338
317
|
|
|
339
318
|
.harvest-search-text {
|
|
@@ -348,21 +327,21 @@ span.harvest-sheet-container:focus {
|
|
|
348
327
|
|
|
349
328
|
.harvest-search-text .search-text-suffix {
|
|
350
329
|
.search-text-disabled {
|
|
351
|
-
color: #
|
|
330
|
+
color: #a4a9b2;
|
|
352
331
|
}
|
|
353
332
|
|
|
354
|
-
>span {
|
|
333
|
+
> span {
|
|
355
334
|
margin: 0 3px;
|
|
356
335
|
}
|
|
357
336
|
}
|
|
358
337
|
|
|
359
338
|
.harvest-search-text .ant-input-affix-wrapper-focused {
|
|
360
|
-
border-color: #
|
|
361
|
-
box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.
|
|
339
|
+
border-color: #0078e0;
|
|
340
|
+
box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.2);
|
|
362
341
|
}
|
|
363
342
|
|
|
364
343
|
:global {
|
|
365
344
|
.ant-empty-description {
|
|
366
|
-
color: #
|
|
345
|
+
color: #a4a9b2;
|
|
367
346
|
}
|
|
368
|
-
}
|
|
347
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useKeyBoard } from "../..";
|
|
2
2
|
import { sideEffectReducer } from "../reducers/sideEffectReducer";
|
|
3
|
-
import { getRowHeight } from "../util";
|
|
3
|
+
import { ensureFocus, getRowHeight } from "../util";
|
|
4
4
|
export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
|
|
5
5
|
useKeyBoard({
|
|
6
6
|
move: function move(e, value) {
|
|
@@ -34,6 +34,11 @@ export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
|
|
|
34
34
|
},
|
|
35
35
|
reverse: function reverse() {
|
|
36
36
|
dispatch(sideEffectReducer.reverse);
|
|
37
|
+
ensureFocus(elementRef.current);
|
|
38
|
+
},
|
|
39
|
+
recover: function recover(e) {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
dispatch(sideEffectReducer.recover);
|
|
37
42
|
},
|
|
38
43
|
delete: function _delete() {
|
|
39
44
|
dispatch(sideEffectReducer.delete);
|
package/dist/core/util.d.ts
CHANGED
package/dist/core/util.js
CHANGED
|
@@ -475,4 +475,19 @@ export var stripRowIndex = function stripRowIndex(data) {
|
|
|
475
475
|
startIndex: startIndex,
|
|
476
476
|
endIndex: endIndex
|
|
477
477
|
};
|
|
478
|
+
};
|
|
479
|
+
var focusInterval;
|
|
480
|
+
export var ensureFocus = function ensureFocus(container) {
|
|
481
|
+
if (!container) return;
|
|
482
|
+
if (focusInterval) {
|
|
483
|
+
clearInterval(focusInterval);
|
|
484
|
+
focusInterval = undefined;
|
|
485
|
+
}
|
|
486
|
+
focusInterval = setInterval(function () {
|
|
487
|
+
container === null || container === void 0 || container.focus();
|
|
488
|
+
}, 100);
|
|
489
|
+
setTimeout(function () {
|
|
490
|
+
clearInterval(focusInterval);
|
|
491
|
+
focusInterval = undefined;
|
|
492
|
+
}, 1000);
|
|
478
493
|
};
|
package/dist/example/basic.js
CHANGED
|
@@ -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, F_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, Y_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);
|
|
@@ -56,11 +56,15 @@ export var useKeyBoard = function useKeyBoard(handler, listenElement) {
|
|
|
56
56
|
handler.search(e);
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
|
-
var isReverse = ctrlKeyPressed && keyCode === Z_KEY;
|
|
59
|
+
var isReverse = ctrlKeyPressed && keyCode === Z_KEY && !shiftKey;
|
|
60
60
|
if (isReverse) {
|
|
61
61
|
handler.reverse(e);
|
|
62
62
|
return;
|
|
63
63
|
}
|
|
64
|
+
var isRecover = ctrlKeyPressed && (keyCode === Z_KEY && shiftKey || keyCode === Y_KEY);
|
|
65
|
+
if (isRecover) {
|
|
66
|
+
handler.recover(e);
|
|
67
|
+
}
|
|
64
68
|
var isSelectAll = ctrlKeyPressed && keyCode === A_KEY;
|
|
65
69
|
if (isSelectAll) {
|
|
66
70
|
handler.selectAll(e);
|
package/dist/type/sheet.d.ts
CHANGED
|
@@ -120,6 +120,8 @@ export type SheetProps = {
|
|
|
120
120
|
children?: any[];
|
|
121
121
|
boldScroll?: boolean;
|
|
122
122
|
hideColBar?: boolean;
|
|
123
|
+
showQuickLocationBtn?: boolean;
|
|
124
|
+
ControlContainer?: React.FC;
|
|
123
125
|
};
|
|
124
126
|
export type WidthConfigContext = {
|
|
125
127
|
onChange?: (value: Record<number | string, number>) => void;
|
|
@@ -191,6 +193,7 @@ export type UpdateStateType = {
|
|
|
191
193
|
value?: string;
|
|
192
194
|
};
|
|
193
195
|
history: OperateHistory[];
|
|
196
|
+
recoverHisotry: OperateHistory[];
|
|
194
197
|
freePaste?: boolean;
|
|
195
198
|
data: Cell[][];
|
|
196
199
|
mouseDown: boolean;
|
|
@@ -91,4 +91,6 @@ export type TableProps = {
|
|
|
91
91
|
handleBatchAdd?: (value: number) => void;
|
|
92
92
|
eventHandler?: Record<'reverse' | 'btn-click' | 'cell-edit' | 'cell-switch' | string, undefined | EventHandler>;
|
|
93
93
|
boldScroll?: boolean;
|
|
94
|
+
showQuickLocationBtn?: boolean;
|
|
95
|
+
ControlContainer?: React.FC;
|
|
94
96
|
};
|