@zhenliang/sheet 0.1.73 → 0.1.75
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/editor/dateEditor/index.js +6 -6
- package/dist/core/editor/numberEditor/index.d.ts +1 -1
- package/dist/core/editor/numberEditor/index.js +7 -7
- package/dist/core/editor/selectEditor/index.js +6 -6
- package/dist/core/reducers/index.d.ts +2 -2
- package/dist/core/reducers/keyboardReducer.js +8 -7
- package/dist/core/reducers/mouseReducer.js +10 -9
- package/dist/core/reducers/sideEffectReducer.d.ts +1 -1
- package/dist/core/reducers/sideEffectReducer.js +17 -17
- package/dist/core/reducers/stateReducer.js +10 -10
- package/dist/core/sheet/Cell.js +2 -2
- package/dist/core/sheet/DataEditor.js +1 -1
- package/dist/core/sheet/DefaultCell.d.ts +4 -3
- package/dist/core/sheet/DefaultCell.js +5 -5
- package/dist/core/sheet/DefaultRowMapper.js +5 -5
- package/dist/core/sheet/Remark.d.ts +9 -0
- package/dist/core/sheet/Remark.js +32 -0
- package/dist/core/sheet/index.js +67 -19
- package/dist/core/sheet/index.less +36 -0
- package/dist/core/sheet/searchInput.js +1 -1
- package/dist/core/sheet/useContextMenu.d.ts +1 -1
- package/dist/core/sheet/useContextMenu.js +11 -11
- package/dist/core/sheet/useKeyBoardEvent.js +14 -7
- package/dist/core/sheet/useMouseEvent.js +13 -13
- package/dist/core/sheet/useRemarkContainer.d.ts +14 -0
- package/dist/core/sheet/useRemarkContainer.js +144 -0
- package/dist/core/sheet/useSearchInput.js +8 -8
- package/dist/core/sheet/useSelectVisible.js +3 -3
- package/dist/core/sheet/useVirtualList.js +3 -3
- package/dist/core/shell/draggableShell/index.d.ts +2 -1
- package/dist/core/shell/draggableShell/index.js +15 -10
- package/dist/core/shell/tableShell.d.ts +3 -2
- package/dist/core/shell/tableShell.js +11 -155
- package/dist/core/table/addButton.d.ts +0 -1
- package/dist/core/table/addButton.js +2 -3
- package/dist/core/table/events.js +7 -7
- package/dist/core/table/index.d.ts +1 -0
- package/dist/core/table/index.js +167 -17
- package/dist/core/table/index.less +19 -0
- package/dist/core/table/remarkEvent.d.ts +5 -0
- package/dist/core/table/remarkEvent.js +9 -0
- package/dist/core/table/useGroupConfig.d.ts +1 -1
- package/dist/core/table/useGroupConfig.js +16 -14
- package/dist/core/table/useRowSelection.d.ts +3 -25
- package/dist/core/table/useRowSelection.js +7 -4
- package/dist/core/util.d.ts +1 -0
- package/dist/core/util.js +18 -14
- package/dist/core/viewer/editViewer/index.js +1 -2
- package/dist/core/viewer/groupViewer/index.js +4 -8
- package/dist/example/antComponent.js +9 -9
- package/dist/example/basic.js +6 -6
- package/dist/example/group.js +1 -2
- package/dist/example/selection.js +6 -6
- package/dist/example/sheet.js +16 -21
- package/dist/example/valuationAnalyze.d.ts +1 -0
- package/dist/example/valuationAnalyze.js +356 -14
- package/dist/hooks/useEventBus.d.ts +1 -0
- package/dist/hooks/useEventBus.js +1 -1
- package/dist/hooks/useKeyboard.d.ts +2 -2
- package/dist/hooks/useKeyboard.js +3 -2
- package/dist/hooks/useMiddlewareReducer.d.ts +5 -5
- package/dist/hooks/useMiddlewareReducer.js +2 -2
- package/dist/hooks/useMouse.d.ts +1 -1
- package/dist/hooks/useMouse.js +6 -6
- package/dist/hooks/useSetState.js +6 -6
- package/dist/standardUtils/index.d.ts +1 -1
- package/dist/standardUtils/index.js +1 -1
- package/dist/type/sheet.d.ts +40 -32
- package/dist/type/sheetTable.d.ts +24 -11
- package/package.json +9 -4
- package/changes.md +0 -45
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { forwardRef, useMemo } from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
export var Remark = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
4
|
+
var showRemark = props.showRemark,
|
|
5
|
+
children = props.children,
|
|
6
|
+
position = props.position;
|
|
7
|
+
var transform = useMemo(function () {
|
|
8
|
+
var rightOverflow = document.body.clientWidth - position.left < 400;
|
|
9
|
+
var bottomOverflow = document.body.clientHeight - position.top < 400;
|
|
10
|
+
if (rightOverflow && bottomOverflow) {
|
|
11
|
+
return "translate(calc(-100% - 4px), calc(-100% - 4px))";
|
|
12
|
+
} else if (rightOverflow && !bottomOverflow) {
|
|
13
|
+
return "translate(calc(-100% - 4px), 44px)";
|
|
14
|
+
} else if (!rightOverflow && bottomOverflow) {
|
|
15
|
+
return "translate(0, calc(40px - 100%))";
|
|
16
|
+
}
|
|
17
|
+
return '';
|
|
18
|
+
}, [position.left, showRemark]);
|
|
19
|
+
return /*#__PURE__*/_jsx("div", {
|
|
20
|
+
ref: ref,
|
|
21
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
22
|
+
className: "harvest-remark-container ".concat(showRemark ? 'remark-show' : null),
|
|
23
|
+
style: {
|
|
24
|
+
position: 'fixed',
|
|
25
|
+
top: position.top,
|
|
26
|
+
left: position.left,
|
|
27
|
+
transform: transform
|
|
28
|
+
},
|
|
29
|
+
children: showRemark ? children : null
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
});
|
package/dist/core/sheet/index.js
CHANGED
|
@@ -2,7 +2,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
|
|
|
2
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
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
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(
|
|
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
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
8
8
|
// import ReduxLogger from 'redux-logger';
|
|
@@ -18,12 +18,14 @@ import { classNames, getRowHeight, rowToActualRow } from "../util";
|
|
|
18
18
|
import { Control } from "./Control";
|
|
19
19
|
import { DefaultRowMapper } from "./DefaultRowMapper";
|
|
20
20
|
import { Menu } from "./Menu";
|
|
21
|
+
import { Remark } from "./Remark";
|
|
21
22
|
import "./index.less";
|
|
22
23
|
import { SearchInput } from "./searchInput";
|
|
23
24
|
import { useCellEvent } from "./useCellEvent";
|
|
24
25
|
import { useContextMenu } from "./useContextMenu";
|
|
25
26
|
import { useKeyBoardEvent } from "./useKeyBoardEvent";
|
|
26
27
|
import { useMouseEvent } from "./useMouseEvent";
|
|
28
|
+
import { useRemarkContainer } from "./useRemarkContainer";
|
|
27
29
|
import { useSearchInput } from "./useSearchInput";
|
|
28
30
|
import { useSelectVisible } from "./useSelectVisible";
|
|
29
31
|
import { VirtualizeEnd, VirtualizeStart, useVirtualList } from "./useVirtualList";
|
|
@@ -49,6 +51,7 @@ var Sheet = function Sheet(props) {
|
|
|
49
51
|
virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
|
|
50
52
|
className = props.className,
|
|
51
53
|
data = props.data,
|
|
54
|
+
freeze = props.freeze,
|
|
52
55
|
_props$freePaste = props.freePaste,
|
|
53
56
|
freePaste = _props$freePaste === void 0 ? false : _props$freePaste,
|
|
54
57
|
onCellsChanged = props.onCellsChanged,
|
|
@@ -56,6 +59,7 @@ var Sheet = function Sheet(props) {
|
|
|
56
59
|
rowClassName = props.rowClassName,
|
|
57
60
|
scroll = props.scroll,
|
|
58
61
|
children = props.children,
|
|
62
|
+
ControlContainer = props.ControlContainer,
|
|
59
63
|
_props$showBackEdit = props.showBackEdit,
|
|
60
64
|
showBackEdit = _props$showBackEdit === void 0 ? true : _props$showBackEdit,
|
|
61
65
|
backEditStyle = props.backEditStyle,
|
|
@@ -65,7 +69,9 @@ var Sheet = function Sheet(props) {
|
|
|
65
69
|
hideColBar = _props$hideColBar === void 0 ? true : _props$hideColBar,
|
|
66
70
|
_props$showQuickLocat = props.showQuickLocationBtn,
|
|
67
71
|
showQuickLocationBtn = _props$showQuickLocat === void 0 ? false : _props$showQuickLocat,
|
|
68
|
-
|
|
72
|
+
_props$showRemark = props.showRemark,
|
|
73
|
+
showRemark = _props$showRemark === void 0 ? false : _props$showRemark,
|
|
74
|
+
remarkElement = props.remarkElement;
|
|
69
75
|
var _useState = useState(false),
|
|
70
76
|
_useState2 = _slicedToArray(_useState, 2),
|
|
71
77
|
isScrolledOver = _useState2[0],
|
|
@@ -111,14 +117,14 @@ var Sheet = function Sheet(props) {
|
|
|
111
117
|
var firstRowCell = container.querySelector("td.cell[data-col='".concat(start === null || start === void 0 ? void 0 : start.col, "']"));
|
|
112
118
|
var colPosition = firstRowCell ? firstRowCell.offsetLeft - firstRowCell.clientWidth : 0;
|
|
113
119
|
var scrollHeight = actual * rowHeight;
|
|
114
|
-
(_sheetWrapperRef$curr = sheetWrapperRef.current) === null || _sheetWrapperRef$curr === void 0
|
|
120
|
+
(_sheetWrapperRef$curr = sheetWrapperRef.current) === null || _sheetWrapperRef$curr === void 0 || _sheetWrapperRef$curr.scrollTo(isNumber(row) ? 0 : colPosition, scrollHeight);
|
|
115
121
|
|
|
116
122
|
// 最后一行的bug暂时用 scroll end 事件来处理
|
|
117
123
|
if (isNil(row) && start.row === data.length - 1 && sheetWrapperRef.current) {
|
|
118
124
|
var handleScrollEnd = function handleScrollEnd() {
|
|
119
125
|
var _sheetWrapperRef$curr2, _sheetWrapperRef$curr3;
|
|
120
|
-
(_sheetWrapperRef$curr2 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr2 === void 0
|
|
121
|
-
(_sheetWrapperRef$curr3 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr3 === void 0
|
|
126
|
+
(_sheetWrapperRef$curr2 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr2 === void 0 || _sheetWrapperRef$curr2.scrollTo(isNumber(row) ? 0 : colPosition, scrollHeight);
|
|
127
|
+
(_sheetWrapperRef$curr3 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr3 === void 0 || _sheetWrapperRef$curr3.removeEventListener('scrollend', handleScrollEnd);
|
|
122
128
|
};
|
|
123
129
|
sheetWrapperRef.current.addEventListener('scrollend', handleScrollEnd);
|
|
124
130
|
}
|
|
@@ -126,10 +132,17 @@ var Sheet = function Sheet(props) {
|
|
|
126
132
|
},
|
|
127
133
|
goTo: function goTo(row, col) {
|
|
128
134
|
dispatch(function (d, getState) {
|
|
129
|
-
var
|
|
135
|
+
var _groupConfig$groupOpe, _groupConfig$groups;
|
|
130
136
|
var _getState2 = getState(),
|
|
131
137
|
groupConfig = _getState2.groupConfig,
|
|
132
|
-
data = _getState2.data
|
|
138
|
+
data = _getState2.data,
|
|
139
|
+
eventBus = _getState2.eventBus;
|
|
140
|
+
var nextLoop = groupConfig === null || groupConfig === void 0 || (_groupConfig$groupOpe = groupConfig.groupOpen) === null || _groupConfig$groupOpe === void 0 ? void 0 : _groupConfig$groupOpe.some(function (v) {
|
|
141
|
+
return !v;
|
|
142
|
+
});
|
|
143
|
+
if (nextLoop && groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups = groupConfig.groups) !== null && _groupConfig$groups !== void 0 && _groupConfig$groups.length) {
|
|
144
|
+
eventBus === null || eventBus === void 0 || eventBus.emit('group-open-title', true);
|
|
145
|
+
}
|
|
133
146
|
var container = sheetWrapperRef.current;
|
|
134
147
|
if (isNil(row) || isNil(col)) return;
|
|
135
148
|
var actual = rowToActualRow(row, groupConfig, data.length);
|
|
@@ -137,7 +150,15 @@ var Sheet = function Sheet(props) {
|
|
|
137
150
|
var firstRowCell = container.querySelector("td.cell[data-col='".concat(col, "']"));
|
|
138
151
|
var colPosition = firstRowCell ? firstRowCell.offsetLeft - firstRowCell.clientWidth : 0;
|
|
139
152
|
var scrollHeight = actual * rowHeight;
|
|
140
|
-
(
|
|
153
|
+
if (nextLoop) {
|
|
154
|
+
setTimeout(function () {
|
|
155
|
+
var _sheetWrapperRef$curr4;
|
|
156
|
+
(_sheetWrapperRef$curr4 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr4 === void 0 || _sheetWrapperRef$curr4.scrollTo(colPosition, scrollHeight);
|
|
157
|
+
}, 1);
|
|
158
|
+
} else {
|
|
159
|
+
var _sheetWrapperRef$curr5;
|
|
160
|
+
(_sheetWrapperRef$curr5 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr5 === void 0 || _sheetWrapperRef$curr5.scrollTo(colPosition, scrollHeight);
|
|
161
|
+
}
|
|
141
162
|
});
|
|
142
163
|
},
|
|
143
164
|
pushToHistory: function pushToHistory(config) {
|
|
@@ -180,6 +201,16 @@ var Sheet = function Sheet(props) {
|
|
|
180
201
|
}
|
|
181
202
|
});
|
|
182
203
|
return history !== null && history !== void 0 ? history : [];
|
|
204
|
+
},
|
|
205
|
+
call: function call(caller) {
|
|
206
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
207
|
+
args[_key - 1] = arguments[_key];
|
|
208
|
+
}
|
|
209
|
+
return dispatch(function (d, getState) {
|
|
210
|
+
var _getState3 = getState(),
|
|
211
|
+
data = _getState3.data;
|
|
212
|
+
caller === null || caller === void 0 || caller.apply(void 0, args.concat([data]));
|
|
213
|
+
});
|
|
183
214
|
}
|
|
184
215
|
};
|
|
185
216
|
}, [state.history]);
|
|
@@ -191,30 +222,33 @@ var Sheet = function Sheet(props) {
|
|
|
191
222
|
cellChangeHandler: onCellsChanged,
|
|
192
223
|
data: data,
|
|
193
224
|
freePaste: freePaste,
|
|
194
|
-
groupConfig: groupConfig
|
|
225
|
+
groupConfig: groupConfig,
|
|
226
|
+
freeze: freeze
|
|
195
227
|
}
|
|
196
228
|
});
|
|
197
|
-
}, [onCellsChanged, data, freePaste, groupConfig]);
|
|
229
|
+
}, [onCellsChanged, data, freePaste, groupConfig, freeze]);
|
|
198
230
|
useCellEvent(dispatch, state);
|
|
199
231
|
useMouseEvent(dispatch, sheetWrapperRef);
|
|
200
232
|
useKeyBoardEvent(dispatch, sheetWrapperRef);
|
|
201
233
|
var menu = useContextMenu(dispatch, sheetWrapperRef, !!ContextMenu, contextMenuRef);
|
|
234
|
+
var _useRemarkContainer = useRemarkContainer(sheetWrapperRef, state.start, state.editing, showRemark),
|
|
235
|
+
remarkInfo = _useRemarkContainer.remarkInfo;
|
|
202
236
|
|
|
203
237
|
// timeout 的副作用不适合放reducer里面
|
|
204
238
|
useEffect(function () {
|
|
205
239
|
if (!state.editing && state.start) {
|
|
206
240
|
setTimeout(function () {
|
|
207
|
-
var _sheetWrapperRef$
|
|
241
|
+
var _sheetWrapperRef$curr6;
|
|
208
242
|
// 表格获取焦点 + 接收keyboard event
|
|
209
|
-
(_sheetWrapperRef$
|
|
243
|
+
(_sheetWrapperRef$curr6 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr6 === void 0 || _sheetWrapperRef$curr6.focus({
|
|
210
244
|
preventScroll: true
|
|
211
245
|
});
|
|
212
246
|
}, 1);
|
|
213
247
|
}
|
|
214
248
|
}, [state.editing, state.start]);
|
|
215
249
|
var visibleData = useMemo(function () {
|
|
216
|
-
var _groupConfig$
|
|
217
|
-
if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$
|
|
250
|
+
var _groupConfig$groups2, _state$data;
|
|
251
|
+
if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups2 = groupConfig.groups) !== null && _groupConfig$groups2 !== void 0 && _groupConfig$groups2.length)) {
|
|
218
252
|
return state.data;
|
|
219
253
|
}
|
|
220
254
|
return (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.filter(function (item, index) {
|
|
@@ -235,6 +269,13 @@ var Sheet = function Sheet(props) {
|
|
|
235
269
|
changeSearch = _useSearchInput.changeSearch,
|
|
236
270
|
goNext = _useSearchInput.goNext,
|
|
237
271
|
goLast = _useSearchInput.goLast;
|
|
272
|
+
useEffect(function () {
|
|
273
|
+
if (!state.mouseDown && state.start && state.end && state.start.row === state.end.row && state.start.col === state.end.col) {
|
|
274
|
+
eventBus.emit('cell-select-single', state.start);
|
|
275
|
+
} else {
|
|
276
|
+
eventBus.emit('cell-select-single', null);
|
|
277
|
+
}
|
|
278
|
+
}, [state.start, state.end, state.mouseDown]);
|
|
238
279
|
useEffect(function () {
|
|
239
280
|
dispatch({
|
|
240
281
|
type: 'clearEdit'
|
|
@@ -245,10 +286,10 @@ var Sheet = function Sheet(props) {
|
|
|
245
286
|
}, [groupConfig]);
|
|
246
287
|
var rowElements = useMemo(function () {
|
|
247
288
|
var _visibleData$slice;
|
|
248
|
-
return visibleData === null || visibleData === void 0
|
|
289
|
+
return visibleData === null || visibleData === void 0 || (_visibleData$slice = visibleData.slice(virtualStart, virtualEnd)) === null || _visibleData$slice === void 0 ? void 0 : _visibleData$slice.map(function (rowData) {
|
|
249
290
|
var _rowData$, _rowData;
|
|
250
291
|
var row = ((_rowData$ = rowData[0]) === null || _rowData$ === void 0 ? void 0 : _rowData$.row) || 0;
|
|
251
|
-
var rowCN = rowClassName instanceof Function ? rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData === null || rowData === void 0
|
|
292
|
+
var rowCN = rowClassName instanceof Function ? rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData === null || rowData === void 0 || (_rowData = rowData[rowData.length - 1]) === null || _rowData === void 0 ? void 0 : _rowData.record, row) : rowClassName;
|
|
252
293
|
return /*#__PURE__*/_jsx(Row, {
|
|
253
294
|
row: row,
|
|
254
295
|
cells: rowData,
|
|
@@ -364,18 +405,18 @@ var Sheet = function Sheet(props) {
|
|
|
364
405
|
startRowVisible: startRowVisible,
|
|
365
406
|
backToEditRow: function backToEditRow() {
|
|
366
407
|
var _sheetInstance$curren;
|
|
367
|
-
return sheetInstance === null || sheetInstance === void 0
|
|
408
|
+
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren = sheetInstance.current) === null || _sheetInstance$curren === void 0 ? void 0 : _sheetInstance$curren.zoomTo();
|
|
368
409
|
},
|
|
369
410
|
firstRowVisible: firstRowVisible,
|
|
370
411
|
lastRowVisible: lastRowVisible,
|
|
371
412
|
backEditStyle: backEditStyle,
|
|
372
413
|
toTop: function toTop() {
|
|
373
414
|
var _sheetInstance$curren2;
|
|
374
|
-
return sheetInstance === null || sheetInstance === void 0
|
|
415
|
+
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren2 = sheetInstance.current) === null || _sheetInstance$curren2 === void 0 ? void 0 : _sheetInstance$curren2.zoomTo(0);
|
|
375
416
|
},
|
|
376
417
|
toBottom: function toBottom() {
|
|
377
418
|
var _sheetInstance$curren3, _data$length;
|
|
378
|
-
return sheetInstance === null || sheetInstance === void 0
|
|
419
|
+
return sheetInstance === null || sheetInstance === void 0 || (_sheetInstance$curren3 = sheetInstance.current) === null || _sheetInstance$curren3 === void 0 ? void 0 : _sheetInstance$curren3.zoomTo(((_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 1) - 1);
|
|
379
420
|
},
|
|
380
421
|
showQuickLocationBtn: showQuickLocationBtn,
|
|
381
422
|
ControlContainer: ControlContainer,
|
|
@@ -386,6 +427,13 @@ var Sheet = function Sheet(props) {
|
|
|
386
427
|
}
|
|
387
428
|
}), children]
|
|
388
429
|
})]
|
|
430
|
+
}), /*#__PURE__*/_jsx(Remark, {
|
|
431
|
+
showRemark: remarkInfo.show && !menu.showMenu,
|
|
432
|
+
position: {
|
|
433
|
+
left: remarkInfo.position.left,
|
|
434
|
+
top: remarkInfo.position.top
|
|
435
|
+
},
|
|
436
|
+
children: remarkElement
|
|
389
437
|
}), /*#__PURE__*/_jsx(SearchInput, {
|
|
390
438
|
style: props.searchStyle,
|
|
391
439
|
value: state.searchText,
|
|
@@ -96,6 +96,7 @@ span.harvest-sheet-container:focus {
|
|
|
96
96
|
border-right: 1px solid;
|
|
97
97
|
border-color: var(--cell-border-color);
|
|
98
98
|
content: '';
|
|
99
|
+
pointer-events: none;
|
|
99
100
|
}
|
|
100
101
|
|
|
101
102
|
&.cell-title {
|
|
@@ -378,3 +379,38 @@ span.harvest-sheet-container:focus {
|
|
|
378
379
|
color: #a4a9b2;
|
|
379
380
|
}
|
|
380
381
|
}
|
|
382
|
+
.harvest-remark-container{
|
|
383
|
+
border:1px solid #E5E5E5;
|
|
384
|
+
max-height: 400px;
|
|
385
|
+
border-radius: 2px;
|
|
386
|
+
z-index: 10;
|
|
387
|
+
margin-left: 5px;
|
|
388
|
+
overflow: auto;
|
|
389
|
+
scroll-behavior: smooth;
|
|
390
|
+
padding: 0;
|
|
391
|
+
background: rgb(255,255,255);
|
|
392
|
+
box-shadow: 0 4px 8px rgba(216,223,235,.5);
|
|
393
|
+
transition: top .1s linear,left .1s linear,transform .05s linear;
|
|
394
|
+
}
|
|
395
|
+
.harvest-remark-container::-webkit-scrollbar{
|
|
396
|
+
display: none;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.harvest-remark-container.remark-show{
|
|
400
|
+
padding: 8px;
|
|
401
|
+
animation: scaleAnimation .3s ease-in-out normal;
|
|
402
|
+
min-width:20px
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
@keyframes scaleAnimation {
|
|
406
|
+
0% {
|
|
407
|
+
scale:0;
|
|
408
|
+
opacity: 0;
|
|
409
|
+
transform-origin:top left;
|
|
410
|
+
}
|
|
411
|
+
100% {
|
|
412
|
+
scale:1;
|
|
413
|
+
opacity: 1;
|
|
414
|
+
transform-origin:top left;
|
|
415
|
+
}
|
|
416
|
+
}
|
|
@@ -44,7 +44,7 @@ export var SearchInput = function SearchInput(props) {
|
|
|
44
44
|
if (e.shiftKey) goLast && goLast();else goNext && goNext();
|
|
45
45
|
setTimeout(function () {
|
|
46
46
|
var _inputRef$current;
|
|
47
|
-
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0
|
|
47
|
+
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
|
|
48
48
|
}, 100);
|
|
49
49
|
},
|
|
50
50
|
suffix: /*#__PURE__*/_jsxs("span", {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
function _typeof(
|
|
2
|
-
function ownKeys(
|
|
3
|
-
function _objectSpread(
|
|
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
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(
|
|
6
|
-
function _toPrimitive(
|
|
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
7
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
8
|
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."); }
|
|
9
9
|
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); }
|
|
10
10
|
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; }
|
|
11
|
-
function _iterableToArrayLimit(
|
|
11
|
+
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; } }
|
|
12
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
13
|
import { useSetState } from "../..";
|
|
14
14
|
import { useEffect } from 'react';
|
|
@@ -37,10 +37,10 @@ export var useContextMenu = function useContextMenu(dispatch, elementRef) {
|
|
|
37
37
|
if (!currentCell) return;
|
|
38
38
|
var currentPos = extractDataRowAndCol(currentCell);
|
|
39
39
|
dispatch({
|
|
40
|
-
type: '
|
|
40
|
+
type: 'select',
|
|
41
41
|
payload: {
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
start: currentPos,
|
|
43
|
+
end: currentPos
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
var _calcMenuPosition = calcMenuPosition({
|
|
@@ -64,10 +64,10 @@ export var useContextMenu = function useContextMenu(dispatch, elementRef) {
|
|
|
64
64
|
});
|
|
65
65
|
};
|
|
66
66
|
useEffect(function () {
|
|
67
|
-
var _contextMenuRef$curre2
|
|
67
|
+
var _contextMenuRef$curre2;
|
|
68
68
|
if (!elementRef.current || !enableContextMenu) return;
|
|
69
69
|
// 添加统一规范
|
|
70
|
-
(_contextMenuRef$curre2 = contextMenuRef.current) === null || _contextMenuRef$curre2 === void 0
|
|
70
|
+
(_contextMenuRef$curre2 = contextMenuRef.current) === null || _contextMenuRef$curre2 === void 0 || (_contextMenuRef$curre2 = _contextMenuRef$curre2.firstElementChild) === null || _contextMenuRef$curre2 === void 0 || _contextMenuRef$curre2.setAttribute('style', 'z-index: 5;word-break: keep-all;');
|
|
71
71
|
var handleClose = function handleClose() {
|
|
72
72
|
setMenuEvent({
|
|
73
73
|
showMenu: false
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useKeyBoard } from "../..";
|
|
2
2
|
import { sideEffectReducer } from "../reducers/sideEffectReducer";
|
|
3
|
-
import { ensureFocus, getRowHeight } from "../util";
|
|
3
|
+
import { ensureFocus, getRowHeight, isSearchElement } from "../util";
|
|
4
4
|
export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
|
|
5
5
|
useKeyBoard({
|
|
6
6
|
move: function move(e, value) {
|
|
@@ -16,7 +16,7 @@ export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
|
|
|
16
16
|
var _elementRef$current;
|
|
17
17
|
var rowHeight = getRowHeight(elementRef.current);
|
|
18
18
|
var itemHeight = rowHeight || 30;
|
|
19
|
-
elementRef === null || elementRef === void 0
|
|
19
|
+
elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.scrollBy({
|
|
20
20
|
top: itemHeight * row
|
|
21
21
|
});
|
|
22
22
|
}
|
|
@@ -63,13 +63,20 @@ export var useKeyBoardEvent = function useKeyBoardEvent(dispatch, elementRef) {
|
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
},
|
|
66
|
-
copy: function copy() {
|
|
67
|
-
|
|
66
|
+
copy: function copy(e) {
|
|
67
|
+
var _elementRef$current2;
|
|
68
|
+
var isFromSearch = isSearchElement((_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.parentElement, e.target);
|
|
69
|
+
isFromSearch ? null : dispatch(sideEffectReducer.copy);
|
|
68
70
|
},
|
|
69
|
-
paste: function paste() {
|
|
70
|
-
|
|
71
|
+
paste: function paste(e) {
|
|
72
|
+
var _elementRef$current3;
|
|
73
|
+
var isFromSearch = isSearchElement((_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.parentElement, e.target);
|
|
74
|
+
isFromSearch ? null : dispatch(sideEffectReducer.paste);
|
|
71
75
|
},
|
|
72
|
-
cut: function cut() {
|
|
76
|
+
cut: function cut(e) {
|
|
77
|
+
var _elementRef$current4;
|
|
78
|
+
var isFromSearch = isSearchElement((_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 ? void 0 : _elementRef$current4.parentElement, e.target);
|
|
79
|
+
if (isFromSearch) return;
|
|
73
80
|
dispatch(sideEffectReducer.copy);
|
|
74
81
|
dispatch(sideEffectReducer.delete);
|
|
75
82
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMouse } from "../..";
|
|
2
2
|
import { useCallback, useEffect, useRef } from 'react';
|
|
3
|
-
import { extractDataRowAndCol, findParentTd } from "../util";
|
|
3
|
+
import { extractDataRowAndCol, findParentTd, isSearchElement } from "../util";
|
|
4
4
|
var rowCount = 10; //每秒10行
|
|
5
5
|
var colCount = 5; //每秒5列
|
|
6
6
|
|
|
@@ -32,7 +32,7 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
32
32
|
var colCalled = 0;
|
|
33
33
|
var step = function step() {
|
|
34
34
|
var _elementRef$current;
|
|
35
|
-
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0
|
|
35
|
+
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.style.setProperty('scroll-behavior', 'auto');
|
|
36
36
|
var position = {
|
|
37
37
|
x: destination.x,
|
|
38
38
|
y: destination.y
|
|
@@ -93,11 +93,11 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
93
93
|
if (!animateRef.current) return;
|
|
94
94
|
if (Math.abs(distance.x) + Math.abs(distance.y) < 2) {
|
|
95
95
|
var _elementRef$current2;
|
|
96
|
-
(_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0
|
|
96
|
+
(_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 || _elementRef$current2.scrollTo(destination.x, destination.y);
|
|
97
97
|
resetInterval();
|
|
98
98
|
} else {
|
|
99
99
|
var _elementRef$current3;
|
|
100
|
-
(_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0
|
|
100
|
+
(_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 || _elementRef$current3.scrollTo(destination.x, destination.y);
|
|
101
101
|
requestAnimationFrame(step);
|
|
102
102
|
called++;
|
|
103
103
|
}
|
|
@@ -132,7 +132,7 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
132
132
|
if (!((_elementRef$current5 = elementRef.current) !== null && _elementRef$current5 !== void 0 && _elementRef$current5.contains(e.target))) return;
|
|
133
133
|
var currentCell = findParentTd(e.target);
|
|
134
134
|
if (!currentCell || currentCell.classList.contains('fixed')) return;
|
|
135
|
-
(_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0
|
|
135
|
+
(_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0 || _elementRef$current6.style.setProperty('scroll-behavior', 'smooth');
|
|
136
136
|
var currentPos = extractDataRowAndCol(currentCell);
|
|
137
137
|
dispatch({
|
|
138
138
|
type: 'mouseOver',
|
|
@@ -173,17 +173,14 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
173
173
|
scrollTo('bottom');
|
|
174
174
|
// elementRef.current.scrollTop += cellHeight;
|
|
175
175
|
}
|
|
176
|
-
|
|
177
176
|
if (dTop < 40) {
|
|
178
177
|
scrollTo('top');
|
|
179
178
|
// elementRef.current.scrollTop -= cellHeight;
|
|
180
179
|
}
|
|
181
|
-
|
|
182
180
|
if (dLeft < 40) {
|
|
183
181
|
scrollTo('left');
|
|
184
182
|
// elementRef.current.scrollLeft -= cellWidth;
|
|
185
183
|
}
|
|
186
|
-
|
|
187
184
|
if (dRight > -40) {
|
|
188
185
|
scrollTo('right');
|
|
189
186
|
// elementRef.current.scrollLeft += cellWidth;
|
|
@@ -191,7 +188,9 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
191
188
|
});
|
|
192
189
|
}, []);
|
|
193
190
|
var mouseUp = useCallback(function (e) {
|
|
194
|
-
|
|
191
|
+
// input select 问题
|
|
192
|
+
// e.preventDefault();
|
|
193
|
+
|
|
195
194
|
resetInterval();
|
|
196
195
|
var currentCell = findParentTd(e.target);
|
|
197
196
|
if (!currentCell || currentCell.classList.contains('fixed')) {
|
|
@@ -267,9 +266,10 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
267
266
|
});
|
|
268
267
|
}, []);
|
|
269
268
|
var loseFocus = useCallback(function (e) {
|
|
270
|
-
var _elementRef$current10, _elementRef$current11
|
|
271
|
-
|
|
272
|
-
var
|
|
269
|
+
var _elementRef$current10, _elementRef$current11;
|
|
270
|
+
// todo 加一个root node
|
|
271
|
+
var isSearch = isSearchElement((_elementRef$current10 = elementRef.current) === null || _elementRef$current10 === void 0 ? void 0 : _elementRef$current10.parentElement, e.target);
|
|
272
|
+
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);
|
|
273
273
|
if (!(isTableAControl || isSearch)) {
|
|
274
274
|
dispatch({
|
|
275
275
|
type: 'loseFocus'
|
|
@@ -290,7 +290,7 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
290
290
|
}, []);
|
|
291
291
|
useEffect(function () {
|
|
292
292
|
if (elementRef.current) {
|
|
293
|
-
if (navigator.appVersion.indexOf(
|
|
293
|
+
if (navigator.appVersion.indexOf('Mac') !== -1) {
|
|
294
294
|
elementRef.current.style.setProperty('--arrow-down', 'var(--arrow-mac-down)');
|
|
295
295
|
elementRef.current.style.setProperty('--arrow-right', 'var(--arrow-mac-right)');
|
|
296
296
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SheetType } from "../../type";
|
|
2
|
+
export declare const useRemarkContainer: (elementRef: React.RefObject<SheetType.refAssertion>, start?: SheetType.CellPosition, editing?: SheetType.CellPosition, showRemark?: boolean) => {
|
|
3
|
+
remarkInfo: {
|
|
4
|
+
position: {
|
|
5
|
+
top: number;
|
|
6
|
+
left: number;
|
|
7
|
+
};
|
|
8
|
+
cellPosition: {
|
|
9
|
+
row: number;
|
|
10
|
+
col: number;
|
|
11
|
+
};
|
|
12
|
+
show: boolean;
|
|
13
|
+
};
|
|
14
|
+
};
|