@zhenliang/sheet 0.1.7-3.beta.1 → 0.1.7-3.beta.11
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/keyboardReducer.js +2 -1
- package/dist/core/reducers/mouseReducer.js +3 -2
- package/dist/core/reducers/sideEffectReducer.js +3 -3
- package/dist/core/sheet/Remark.d.ts +9 -0
- package/dist/core/sheet/Remark.js +32 -0
- package/dist/core/sheet/index.js +48 -10
- package/dist/core/sheet/index.less +35 -0
- package/dist/core/sheet/useContextMenu.js +3 -3
- package/dist/core/sheet/useRemarkContainer.d.ts +14 -0
- package/dist/core/sheet/useRemarkContainer.js +121 -0
- package/dist/core/shell/draggableShell/index.d.ts +1 -1
- package/dist/core/shell/draggableShell/index.js +5 -0
- package/dist/core/shell/tableShell.d.ts +2 -2
- package/dist/core/shell/tableShell.js +11 -155
- package/dist/core/table/addButton.d.ts +0 -1
- package/dist/core/table/addButton.js +0 -1
- package/dist/core/table/index.d.ts +1 -0
- package/dist/core/table/index.js +162 -10
- 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 +6 -4
- package/dist/core/table/useRowSelection.d.ts +1 -1
- package/dist/core/table/useRowSelection.js +6 -3
- package/dist/example/valuationAnalyze.js +355 -12
- package/dist/type/sheet.d.ts +8 -1
- package/dist/type/sheetTable.d.ts +14 -1
- package/package.json +5 -5
|
@@ -71,7 +71,8 @@ export var keyboardReducer = {
|
|
|
71
71
|
end = state.end,
|
|
72
72
|
editing = state.editing,
|
|
73
73
|
data = state.data;
|
|
74
|
-
|
|
74
|
+
var freeze = state.freeze;
|
|
75
|
+
if (!start || !end || data !== null && data !== void 0 && (_data$start$row = data[start.row]) !== null && _data$start$row !== void 0 && _data$start$row[start.col].readonly || !(data !== null && data !== void 0 && (_data$start$row2 = data[start.row]) !== null && _data$start$row2 !== void 0 && _data$start$row2[start.col].editable) || freeze) {
|
|
75
76
|
return state;
|
|
76
77
|
}
|
|
77
78
|
if (!editing) {
|
|
@@ -164,8 +164,9 @@ export var mouseReducer = {
|
|
|
164
164
|
var _ref4 = payload,
|
|
165
165
|
row = _ref4.row,
|
|
166
166
|
col = _ref4.col;
|
|
167
|
-
var data = state.data
|
|
168
|
-
|
|
167
|
+
var data = state.data,
|
|
168
|
+
freeze = state.freeze;
|
|
169
|
+
if (data !== null && data !== void 0 && (_data$row$col = data[row][col]) !== null && _data$row$col !== void 0 && _data$row$col.readonly || freeze) {
|
|
169
170
|
return state;
|
|
170
171
|
}
|
|
171
172
|
return _objectSpread(_objectSpread({}, state), {}, {
|
|
@@ -206,12 +206,12 @@ export var sideEffectReducer = {
|
|
|
206
206
|
paste: function paste(dispatch, getState) {
|
|
207
207
|
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
208
208
|
var _extChanges$;
|
|
209
|
-
var _getState8, start, end, cellChangeHandler, history, _getState8$freePaste, freePaste, data, groupConfig, pasteData, changeInfo, changes, extChanges, legalChanges, lastRow, lastIndex, legalExtChanges, newHistory;
|
|
209
|
+
var _getState8, start, end, cellChangeHandler, history, _getState8$freePaste, freePaste, data, freeze, groupConfig, pasteData, changeInfo, changes, extChanges, legalChanges, lastRow, lastIndex, legalExtChanges, newHistory;
|
|
210
210
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
211
211
|
while (1) switch (_context.prev = _context.next) {
|
|
212
212
|
case 0:
|
|
213
|
-
_getState8 = getState(), start = _getState8.start, end = _getState8.end, cellChangeHandler = _getState8.cellChangeHandler, history = _getState8.history, _getState8$freePaste = _getState8.freePaste, freePaste = _getState8$freePaste === void 0 ? false : _getState8$freePaste, data = _getState8.data, groupConfig = _getState8.groupConfig;
|
|
214
|
-
if (!(!start || !end)) {
|
|
213
|
+
_getState8 = getState(), start = _getState8.start, end = _getState8.end, cellChangeHandler = _getState8.cellChangeHandler, history = _getState8.history, _getState8$freePaste = _getState8.freePaste, freePaste = _getState8$freePaste === void 0 ? false : _getState8$freePaste, data = _getState8.data, freeze = _getState8.freeze, groupConfig = _getState8.groupConfig;
|
|
214
|
+
if (!(!start || !end || freeze)) {
|
|
215
215
|
_context.next = 3;
|
|
216
216
|
break;
|
|
217
217
|
}
|
|
@@ -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(-100%, -100%)";
|
|
12
|
+
} else if (rightOverflow && !bottomOverflow) {
|
|
13
|
+
return "translate(-100%, 40px)";
|
|
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
|
@@ -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],
|
|
@@ -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) {
|
|
@@ -191,30 +212,33 @@ var Sheet = function Sheet(props) {
|
|
|
191
212
|
cellChangeHandler: onCellsChanged,
|
|
192
213
|
data: data,
|
|
193
214
|
freePaste: freePaste,
|
|
194
|
-
groupConfig: groupConfig
|
|
215
|
+
groupConfig: groupConfig,
|
|
216
|
+
freeze: freeze
|
|
195
217
|
}
|
|
196
218
|
});
|
|
197
|
-
}, [onCellsChanged, data, freePaste, groupConfig]);
|
|
219
|
+
}, [onCellsChanged, data, freePaste, groupConfig, freeze]);
|
|
198
220
|
useCellEvent(dispatch, state);
|
|
199
221
|
useMouseEvent(dispatch, sheetWrapperRef);
|
|
200
222
|
useKeyBoardEvent(dispatch, sheetWrapperRef);
|
|
201
223
|
var menu = useContextMenu(dispatch, sheetWrapperRef, !!ContextMenu, contextMenuRef);
|
|
224
|
+
var _useRemarkContainer = useRemarkContainer(sheetWrapperRef, state.start, state.editing, showRemark),
|
|
225
|
+
remarkInfo = _useRemarkContainer.remarkInfo;
|
|
202
226
|
|
|
203
227
|
// timeout 的副作用不适合放reducer里面
|
|
204
228
|
useEffect(function () {
|
|
205
229
|
if (!state.editing && state.start) {
|
|
206
230
|
setTimeout(function () {
|
|
207
|
-
var _sheetWrapperRef$
|
|
231
|
+
var _sheetWrapperRef$curr6;
|
|
208
232
|
// 表格获取焦点 + 接收keyboard event
|
|
209
|
-
(_sheetWrapperRef$
|
|
233
|
+
(_sheetWrapperRef$curr6 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr6 === void 0 || _sheetWrapperRef$curr6.focus({
|
|
210
234
|
preventScroll: true
|
|
211
235
|
});
|
|
212
236
|
}, 1);
|
|
213
237
|
}
|
|
214
238
|
}, [state.editing, state.start]);
|
|
215
239
|
var visibleData = useMemo(function () {
|
|
216
|
-
var _groupConfig$
|
|
217
|
-
if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$
|
|
240
|
+
var _groupConfig$groups2, _state$data;
|
|
241
|
+
if (!(groupConfig !== null && groupConfig !== void 0 && (_groupConfig$groups2 = groupConfig.groups) !== null && _groupConfig$groups2 !== void 0 && _groupConfig$groups2.length)) {
|
|
218
242
|
return state.data;
|
|
219
243
|
}
|
|
220
244
|
return (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.filter(function (item, index) {
|
|
@@ -235,6 +259,13 @@ var Sheet = function Sheet(props) {
|
|
|
235
259
|
changeSearch = _useSearchInput.changeSearch,
|
|
236
260
|
goNext = _useSearchInput.goNext,
|
|
237
261
|
goLast = _useSearchInput.goLast;
|
|
262
|
+
useEffect(function () {
|
|
263
|
+
if (!state.mouseDown && state.start && state.end && state.start.row === state.end.row && state.start.col === state.end.col) {
|
|
264
|
+
eventBus.emit('cell-select-single', state.start);
|
|
265
|
+
} else {
|
|
266
|
+
eventBus.emit('cell-select-single', null);
|
|
267
|
+
}
|
|
268
|
+
}, [state.start, state.end, state.mouseDown]);
|
|
238
269
|
useEffect(function () {
|
|
239
270
|
dispatch({
|
|
240
271
|
type: 'clearEdit'
|
|
@@ -386,6 +417,13 @@ var Sheet = function Sheet(props) {
|
|
|
386
417
|
}
|
|
387
418
|
}), children]
|
|
388
419
|
})]
|
|
420
|
+
}), /*#__PURE__*/_jsx(Remark, {
|
|
421
|
+
showRemark: remarkInfo.show && !menu.showMenu,
|
|
422
|
+
position: {
|
|
423
|
+
left: remarkInfo.position.left,
|
|
424
|
+
top: remarkInfo.position.top
|
|
425
|
+
},
|
|
426
|
+
children: remarkElement
|
|
389
427
|
}), /*#__PURE__*/_jsx(SearchInput, {
|
|
390
428
|
style: props.searchStyle,
|
|
391
429
|
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,37 @@ 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
|
+
}
|
|
394
|
+
.harvest-remark-container::-webkit-scrollbar{
|
|
395
|
+
display: none;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.harvest-remark-container.remark-show{
|
|
399
|
+
padding: 8px;
|
|
400
|
+
animation: scaleAnimation .3s ease-in-out normal;
|
|
401
|
+
min-width:20px
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
@keyframes scaleAnimation {
|
|
405
|
+
0% {
|
|
406
|
+
scale:0;
|
|
407
|
+
opacity: 0;
|
|
408
|
+
transform-origin:top left;
|
|
409
|
+
}
|
|
410
|
+
100% {
|
|
411
|
+
scale:1;
|
|
412
|
+
opacity: 1;
|
|
413
|
+
transform-origin:top left;
|
|
414
|
+
}
|
|
415
|
+
}
|
|
@@ -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({
|
|
@@ -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
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
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
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
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
|
+
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
|
+
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(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
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import { useSetState } from "../../hooks";
|
|
14
|
+
import { throttle } from 'lodash';
|
|
15
|
+
import { useCallback, useEffect } from 'react';
|
|
16
|
+
export var useRemarkContainer = function useRemarkContainer(elementRef, start, editing) {
|
|
17
|
+
var showRemark = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
18
|
+
var _useSetState = useSetState({
|
|
19
|
+
position: {
|
|
20
|
+
top: 0,
|
|
21
|
+
left: 0
|
|
22
|
+
},
|
|
23
|
+
cellPosition: {
|
|
24
|
+
row: 0,
|
|
25
|
+
col: 0
|
|
26
|
+
},
|
|
27
|
+
show: showRemark
|
|
28
|
+
}),
|
|
29
|
+
_useSetState2 = _slicedToArray(_useSetState, 2),
|
|
30
|
+
remarkInfo = _useSetState2[0],
|
|
31
|
+
setRemarkInfo = _useSetState2[1];
|
|
32
|
+
var calcPosition = useCallback(function () {
|
|
33
|
+
if (!start || !showRemark || !elementRef.current) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
var cell = elementRef.current.querySelector("td[data-row=\"".concat(start.row, "\"][data-col=\"").concat(start.col, "\"]"));
|
|
37
|
+
if (!cell) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
var containerRect = elementRef.current.getBoundingClientRect();
|
|
41
|
+
var cellRect = cell.getBoundingClientRect();
|
|
42
|
+
var visible = containerRect.top < cellRect.top && containerRect.left < cellRect.left && containerRect.top + (containerRect === null || containerRect === void 0 ? void 0 : containerRect.height) > cellRect.bottom && containerRect.left + (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) > (cellRect === null || cellRect === void 0 ? void 0 : cellRect.right);
|
|
43
|
+
return {
|
|
44
|
+
top: cellRect.y,
|
|
45
|
+
left: cellRect.x + cellRect.width,
|
|
46
|
+
visible: visible
|
|
47
|
+
};
|
|
48
|
+
}, [start, showRemark]);
|
|
49
|
+
useEffect(function () {
|
|
50
|
+
var position = calcPosition();
|
|
51
|
+
if (!position) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
setRemarkInfo({
|
|
55
|
+
position: position
|
|
56
|
+
});
|
|
57
|
+
}, [start, showRemark]);
|
|
58
|
+
useEffect(function () {
|
|
59
|
+
setRemarkInfo({
|
|
60
|
+
show: showRemark && !editing
|
|
61
|
+
});
|
|
62
|
+
}, [showRemark, editing]);
|
|
63
|
+
useEffect(function () {
|
|
64
|
+
var _elementRef$current, _elementRef$current2;
|
|
65
|
+
var remarkScroll = throttle(function () {
|
|
66
|
+
setRemarkInfo({
|
|
67
|
+
show: false
|
|
68
|
+
});
|
|
69
|
+
}, 50);
|
|
70
|
+
var remarkScrollEnd = function remarkScrollEnd() {
|
|
71
|
+
var position = calcPosition();
|
|
72
|
+
if (!position) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
setRemarkInfo({
|
|
76
|
+
position: position,
|
|
77
|
+
show: position.visible && showRemark && !editing && position.left > 0 && position.top > 0
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.addEventListener('scroll', remarkScroll);
|
|
81
|
+
(_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 || _elementRef$current2.addEventListener('scrollend', remarkScrollEnd);
|
|
82
|
+
return function () {
|
|
83
|
+
var _elementRef$current3, _elementRef$current4;
|
|
84
|
+
(_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 || _elementRef$current3.removeEventListener('scroll', remarkScroll);
|
|
85
|
+
(_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 || _elementRef$current4.removeEventListener('scrollend', remarkScrollEnd);
|
|
86
|
+
};
|
|
87
|
+
}, [start, showRemark, editing]);
|
|
88
|
+
useEffect(function () {
|
|
89
|
+
var _elementRef$current5;
|
|
90
|
+
if (!start) return;
|
|
91
|
+
var cell = (_elementRef$current5 = elementRef.current) === null || _elementRef$current5 === void 0 ? void 0 : _elementRef$current5.querySelector("td[data-row=\"".concat(start.row, "\"][data-col=\"").concat(start.col, "\"]"));
|
|
92
|
+
if (!cell) return;
|
|
93
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
94
|
+
if (!cell) {
|
|
95
|
+
return function () {};
|
|
96
|
+
}
|
|
97
|
+
var io = new IntersectionObserver(function (entries) {
|
|
98
|
+
var ratio = entries[0].intersectionRatio;
|
|
99
|
+
if (ratio < 0.8) {
|
|
100
|
+
setRemarkInfo({
|
|
101
|
+
show: false
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
}, {
|
|
105
|
+
threshold: 0.8
|
|
106
|
+
});
|
|
107
|
+
io.observe(cell);
|
|
108
|
+
return function () {
|
|
109
|
+
var _io2;
|
|
110
|
+
if (cell) {
|
|
111
|
+
var _io;
|
|
112
|
+
(_io = io) === null || _io === void 0 || _io.unobserve(cell);
|
|
113
|
+
}
|
|
114
|
+
(_io2 = io) === null || _io2 === void 0 || _io2.disconnect();
|
|
115
|
+
io = undefined;
|
|
116
|
+
};
|
|
117
|
+
}, [start]);
|
|
118
|
+
return {
|
|
119
|
+
remarkInfo: _objectSpread({}, remarkInfo)
|
|
120
|
+
};
|
|
121
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { SheetType } from "../../../type";
|
|
3
3
|
import './index.less';
|
|
4
|
-
export declare const DraggableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{
|
|
4
|
+
export declare const DraggableShell: ({ columns, className, showGroup, showSelect, controlProps, dragable, controlWidth, }: SheetType.SheetShell) => import("react").FC<{
|
|
5
5
|
children: React.ReactElement;
|
|
6
6
|
isScrolledOver: boolean;
|
|
7
7
|
isScrolledToEnd: boolean;
|
|
@@ -23,6 +23,8 @@ export var DraggableShell = function DraggableShell(_ref) {
|
|
|
23
23
|
showGroup = _ref.showGroup,
|
|
24
24
|
showSelect = _ref.showSelect,
|
|
25
25
|
controlProps = _ref.controlProps,
|
|
26
|
+
_ref$dragable = _ref.dragable,
|
|
27
|
+
dragable = _ref$dragable === void 0 ? true : _ref$dragable,
|
|
26
28
|
_ref$controlWidth = _ref.controlWidth,
|
|
27
29
|
controlWidth = _ref$controlWidth === void 0 ? 30 : _ref$controlWidth;
|
|
28
30
|
var TableShell = function TableShell(_ref2) {
|
|
@@ -203,6 +205,9 @@ export var DraggableShell = function DraggableShell(_ref) {
|
|
|
203
205
|
return ths;
|
|
204
206
|
}, [columns, colItems, isScrolledOver, isScrolledToEnd]);
|
|
205
207
|
useEffect(function () {
|
|
208
|
+
if (!dragable) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
206
211
|
var handleMouseUp = function handleMouseUp() {
|
|
207
212
|
//结束宽度调整
|
|
208
213
|
if (downRef.current) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { SheetType } from "../../type";
|
|
3
3
|
import './draggableShell/index.less';
|
|
4
|
-
export declare const TableShell: (
|
|
5
|
-
children:
|
|
4
|
+
export declare const TableShell: (props: SheetType.SheetShell) => import("react").FC<{
|
|
5
|
+
children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
6
6
|
isScrolledOver: boolean;
|
|
7
7
|
isScrolledToEnd: boolean;
|
|
8
8
|
}>;
|
|
@@ -1,157 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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); }
|
|
6
7
|
import "./draggableShell/index.less";
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
className = _ref.className,
|
|
13
|
-
showGroup = _ref.showGroup,
|
|
14
|
-
showSelect = _ref.showSelect,
|
|
15
|
-
controlProps = _ref.controlProps,
|
|
16
|
-
_ref$controlWidth = _ref.controlWidth,
|
|
17
|
-
controlWidth = _ref$controlWidth === void 0 ? 30 : _ref$controlWidth;
|
|
18
|
-
var TableShell = function TableShell(_ref2) {
|
|
19
|
-
var children = _ref2.children,
|
|
20
|
-
isScrolledOver = _ref2.isScrolledOver,
|
|
21
|
-
isScrolledToEnd = _ref2.isScrolledToEnd;
|
|
22
|
-
var eventBus = useSheetEvent();
|
|
23
|
-
var colItems = useMemo(function () {
|
|
24
|
-
var cols = [];
|
|
25
|
-
if (showGroup || showSelect) {
|
|
26
|
-
cols.push( /*#__PURE__*/_jsx("col", {
|
|
27
|
-
className: classNames('sheet-control'),
|
|
28
|
-
style: {
|
|
29
|
-
width: controlWidth,
|
|
30
|
-
border: 'none'
|
|
31
|
-
}
|
|
32
|
-
}, "sheet-control"));
|
|
33
|
-
}
|
|
34
|
-
columns.forEach(function (item, index) {
|
|
35
|
-
cols.push( /*#__PURE__*/_jsx("col", {
|
|
36
|
-
className: classNames('cell'),
|
|
37
|
-
style: {
|
|
38
|
-
width: item.width || 'unset',
|
|
39
|
-
border: 'none'
|
|
40
|
-
}
|
|
41
|
-
}, item.dataIndex || index));
|
|
42
|
-
});
|
|
43
|
-
return cols;
|
|
44
|
-
}, [columns, showGroup || showSelect, controlWidth]);
|
|
45
|
-
var thItems = useMemo(function () {
|
|
46
|
-
var ths = [];
|
|
47
|
-
var hasControl = showGroup || showSelect;
|
|
48
|
-
var positionArr = [];
|
|
49
|
-
if (hasControl) {
|
|
50
|
-
var _controlProps$group, _controlProps$check, _controlProps$check2, _controlProps$check3;
|
|
51
|
-
ths.push( /*#__PURE__*/_jsxs("th", {
|
|
52
|
-
className: "cell cell-title read-only sheet-control",
|
|
53
|
-
children: [showGroup && /*#__PURE__*/_jsx(GroupViewer, {
|
|
54
|
-
row: -1,
|
|
55
|
-
col: -1,
|
|
56
|
-
value: true,
|
|
57
|
-
record: {
|
|
58
|
-
open: controlProps === null || controlProps === void 0 || (_controlProps$group = controlProps.group) === null || _controlProps$group === void 0 ? void 0 : _controlProps$group.open,
|
|
59
|
-
isHeader: true
|
|
60
|
-
}
|
|
61
|
-
}), showSelect && /*#__PURE__*/_jsx(CheckViewer, {
|
|
62
|
-
row: -1,
|
|
63
|
-
col: -1,
|
|
64
|
-
value: controlProps === null || controlProps === void 0 || (_controlProps$check = controlProps.check) === null || _controlProps$check === void 0 ? void 0 : _controlProps$check.checked,
|
|
65
|
-
record: {
|
|
66
|
-
open: controlProps === null || controlProps === void 0 || (_controlProps$check2 = controlProps.check) === null || _controlProps$check2 === void 0 ? void 0 : _controlProps$check2.checked,
|
|
67
|
-
isHeader: true,
|
|
68
|
-
indeterminate: controlProps === null || controlProps === void 0 || (_controlProps$check3 = controlProps.check) === null || _controlProps$check3 === void 0 ? void 0 : _controlProps$check3.indeterminate
|
|
69
|
-
}
|
|
70
|
-
})]
|
|
71
|
-
}, "-1"));
|
|
72
|
-
positionArr.push({
|
|
73
|
-
isLastFixedLeft: false,
|
|
74
|
-
isFirstFixedRight: false,
|
|
75
|
-
fixPosition: 0
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
var fixLeftPosition = 0;
|
|
79
|
-
var fixRightPosition = columns.reduce(function (pre, cur, index) {
|
|
80
|
-
if (cur.fixed === 'right') {
|
|
81
|
-
var positionIndex = hasControl ? index + 1 : index;
|
|
82
|
-
return pre + colItems[positionIndex].props.style.width;
|
|
83
|
-
}
|
|
84
|
-
return pre + 0;
|
|
85
|
-
}, 0);
|
|
86
|
-
columns.forEach(function (item, index) {
|
|
87
|
-
var _item$titleConfig, _item$titleConfig2, _ref3;
|
|
88
|
-
var positionIndex = hasControl ? index + 1 : index;
|
|
89
|
-
if (item.fixed === 'right') {
|
|
90
|
-
fixRightPosition -= colItems[positionIndex].props.style.width;
|
|
91
|
-
}
|
|
92
|
-
var isLastFixedLeft = item.fixed === 'left' && !columns.slice(index + 1).some(function (item) {
|
|
93
|
-
return item.fixed === 'left';
|
|
94
|
-
});
|
|
95
|
-
var isFirstFixedRight = item.fixed === 'right' && !columns.slice(0, index).some(function (item) {
|
|
96
|
-
return item.fixed === 'right';
|
|
97
|
-
});
|
|
98
|
-
positionArr.push({
|
|
99
|
-
isLastFixedLeft: isLastFixedLeft,
|
|
100
|
-
isFirstFixedRight: isFirstFixedRight,
|
|
101
|
-
fixPosition: item.fixed === 'right' ? fixRightPosition : fixLeftPosition
|
|
102
|
-
});
|
|
103
|
-
((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
|
|
104
|
-
className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), isLastFixedLeft && isScrolledOver ? "last-fixed-left" : '', isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : ''),
|
|
105
|
-
colSpan: (_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.colSpan,
|
|
106
|
-
onClick: function onClick() {
|
|
107
|
-
eventBus.emit('col-select', {
|
|
108
|
-
col: index
|
|
109
|
-
});
|
|
110
|
-
},
|
|
111
|
-
style: {
|
|
112
|
-
textAlign: (_ref3 = item.align) !== null && _ref3 !== void 0 ? _ref3 : 'unset',
|
|
113
|
-
cursor: 'e-resizer',
|
|
114
|
-
left: item.fixed === 'left' ? fixLeftPosition : 'unset',
|
|
115
|
-
right: item.fixed === 'right' ? fixRightPosition : 'unset'
|
|
116
|
-
},
|
|
117
|
-
children: /*#__PURE__*/_jsx("span", {
|
|
118
|
-
className: "value-viewer",
|
|
119
|
-
children: item.title
|
|
120
|
-
})
|
|
121
|
-
}, item.dataIndex || index));
|
|
122
|
-
if (item.fixed === 'left') {
|
|
123
|
-
fixLeftPosition += colItems[positionIndex].props.style.width;
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
setTimeout(function () {
|
|
127
|
-
eventBus.emit('change-fixed-position', positionArr);
|
|
128
|
-
}, 16);
|
|
129
|
-
return ths;
|
|
130
|
-
}, [columns, showGroup || showSelect, controlProps, isScrolledOver, isScrolledToEnd]);
|
|
131
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
132
|
-
children: [/*#__PURE__*/_jsxs("table", {
|
|
133
|
-
className: classNames('header', 'harvest-sheet', className),
|
|
134
|
-
style: {
|
|
135
|
-
position: 'sticky',
|
|
136
|
-
top: 0,
|
|
137
|
-
zIndex: 3
|
|
138
|
-
},
|
|
139
|
-
children: [/*#__PURE__*/_jsx("colgroup", {
|
|
140
|
-
children: colItems
|
|
141
|
-
}), /*#__PURE__*/_jsx("thead", {
|
|
142
|
-
children: /*#__PURE__*/_jsx("tr", {
|
|
143
|
-
children: thItems
|
|
144
|
-
})
|
|
145
|
-
})]
|
|
146
|
-
}, "header"), /*#__PURE__*/_jsxs("table", {
|
|
147
|
-
className: classNames('body', 'harvest-sheet'),
|
|
148
|
-
children: [/*#__PURE__*/_jsx("colgroup", {
|
|
149
|
-
children: colItems
|
|
150
|
-
}), /*#__PURE__*/_jsx("tbody", {
|
|
151
|
-
children: children
|
|
152
|
-
}, "tbody")]
|
|
153
|
-
}, "body")]
|
|
154
|
-
});
|
|
155
|
-
};
|
|
156
|
-
return TableShell;
|
|
8
|
+
import { DraggableShell } from "./draggableShell";
|
|
9
|
+
export var TableShell = function TableShell(props) {
|
|
10
|
+
return DraggableShell(_objectSpread(_objectSpread({}, props), {}, {
|
|
11
|
+
dragable: false
|
|
12
|
+
}));
|
|
157
13
|
};
|