@zhenliang/sheet 0.1.7-3.beta.1 → 0.1.7-3.beta.3
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 +29 -0
- package/dist/core/sheet/index.js +45 -8
- package/dist/core/sheet/index.less +13 -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 +88 -8
- package/dist/core/table/index.less +19 -0
- package/dist/core/table/remarkEvent.d.ts +5 -0
- package/dist/core/table/remarkEvent.js +13 -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 +287 -10
- package/dist/type/sheet.d.ts +7 -1
- package/dist/type/sheetTable.d.ts +12 -0
- package/package.json +1 -1
|
@@ -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,29 @@
|
|
|
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
|
+
if (document.body.clientWidth - position.left < 200) {
|
|
9
|
+
return 'translate(-100%,40px)';
|
|
10
|
+
}
|
|
11
|
+
return '';
|
|
12
|
+
}, [position.left]);
|
|
13
|
+
return /*#__PURE__*/_jsx("div", {
|
|
14
|
+
ref: ref,
|
|
15
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
16
|
+
className: "harvest-remark-container",
|
|
17
|
+
style: {
|
|
18
|
+
position: 'fixed',
|
|
19
|
+
top: position.top,
|
|
20
|
+
left: position.left,
|
|
21
|
+
transform: transform,
|
|
22
|
+
opacity: showRemark ? 1 : 0,
|
|
23
|
+
pointerEvents: showRemark ? 'all' : 'none',
|
|
24
|
+
minWidth: showRemark ? 200 : 0
|
|
25
|
+
},
|
|
26
|
+
children: showRemark ? children : null
|
|
27
|
+
})
|
|
28
|
+
});
|
|
29
|
+
});
|
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,16 @@ var Sheet = function Sheet(props) {
|
|
|
126
132
|
},
|
|
127
133
|
goTo: function goTo(row, col) {
|
|
128
134
|
dispatch(function (d, getState) {
|
|
129
|
-
var _sheetWrapperRef$curr4;
|
|
130
135
|
var _getState2 = getState(),
|
|
131
136
|
groupConfig = _getState2.groupConfig,
|
|
132
|
-
data = _getState2.data
|
|
137
|
+
data = _getState2.data,
|
|
138
|
+
eventBus = _getState2.eventBus;
|
|
139
|
+
var nextLoop = groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.groupOpen.some(function (v) {
|
|
140
|
+
return !v;
|
|
141
|
+
});
|
|
142
|
+
if (nextLoop) {
|
|
143
|
+
eventBus === null || eventBus === void 0 || eventBus.emit('group-open-title', true);
|
|
144
|
+
}
|
|
133
145
|
var container = sheetWrapperRef.current;
|
|
134
146
|
if (isNil(row) || isNil(col)) return;
|
|
135
147
|
var actual = rowToActualRow(row, groupConfig, data.length);
|
|
@@ -137,7 +149,15 @@ var Sheet = function Sheet(props) {
|
|
|
137
149
|
var firstRowCell = container.querySelector("td.cell[data-col='".concat(col, "']"));
|
|
138
150
|
var colPosition = firstRowCell ? firstRowCell.offsetLeft - firstRowCell.clientWidth : 0;
|
|
139
151
|
var scrollHeight = actual * rowHeight;
|
|
140
|
-
(
|
|
152
|
+
if (nextLoop) {
|
|
153
|
+
setTimeout(function () {
|
|
154
|
+
var _sheetWrapperRef$curr4;
|
|
155
|
+
(_sheetWrapperRef$curr4 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr4 === void 0 || _sheetWrapperRef$curr4.scrollTo(colPosition, scrollHeight);
|
|
156
|
+
}, 1);
|
|
157
|
+
} else {
|
|
158
|
+
var _sheetWrapperRef$curr5;
|
|
159
|
+
(_sheetWrapperRef$curr5 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr5 === void 0 || _sheetWrapperRef$curr5.scrollTo(colPosition, scrollHeight);
|
|
160
|
+
}
|
|
141
161
|
});
|
|
142
162
|
},
|
|
143
163
|
pushToHistory: function pushToHistory(config) {
|
|
@@ -191,22 +211,25 @@ var Sheet = function Sheet(props) {
|
|
|
191
211
|
cellChangeHandler: onCellsChanged,
|
|
192
212
|
data: data,
|
|
193
213
|
freePaste: freePaste,
|
|
194
|
-
groupConfig: groupConfig
|
|
214
|
+
groupConfig: groupConfig,
|
|
215
|
+
freeze: freeze
|
|
195
216
|
}
|
|
196
217
|
});
|
|
197
|
-
}, [onCellsChanged, data, freePaste, groupConfig]);
|
|
218
|
+
}, [onCellsChanged, data, freePaste, groupConfig, freeze]);
|
|
198
219
|
useCellEvent(dispatch, state);
|
|
199
220
|
useMouseEvent(dispatch, sheetWrapperRef);
|
|
200
221
|
useKeyBoardEvent(dispatch, sheetWrapperRef);
|
|
201
222
|
var menu = useContextMenu(dispatch, sheetWrapperRef, !!ContextMenu, contextMenuRef);
|
|
223
|
+
var _useRemarkContainer = useRemarkContainer(sheetWrapperRef, state.start, state.editing, showRemark),
|
|
224
|
+
remarkInfo = _useRemarkContainer.remarkInfo;
|
|
202
225
|
|
|
203
226
|
// timeout 的副作用不适合放reducer里面
|
|
204
227
|
useEffect(function () {
|
|
205
228
|
if (!state.editing && state.start) {
|
|
206
229
|
setTimeout(function () {
|
|
207
|
-
var _sheetWrapperRef$
|
|
230
|
+
var _sheetWrapperRef$curr6;
|
|
208
231
|
// 表格获取焦点 + 接收keyboard event
|
|
209
|
-
(_sheetWrapperRef$
|
|
232
|
+
(_sheetWrapperRef$curr6 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr6 === void 0 || _sheetWrapperRef$curr6.focus({
|
|
210
233
|
preventScroll: true
|
|
211
234
|
});
|
|
212
235
|
}, 1);
|
|
@@ -235,6 +258,13 @@ var Sheet = function Sheet(props) {
|
|
|
235
258
|
changeSearch = _useSearchInput.changeSearch,
|
|
236
259
|
goNext = _useSearchInput.goNext,
|
|
237
260
|
goLast = _useSearchInput.goLast;
|
|
261
|
+
useEffect(function () {
|
|
262
|
+
if (!state.mouseDown && state.start && state.end && state.start.row === state.end.row && state.start.col === state.end.col) {
|
|
263
|
+
eventBus.emit('cell-select-single', state.start);
|
|
264
|
+
} else {
|
|
265
|
+
eventBus.emit('cell-select-single', null);
|
|
266
|
+
}
|
|
267
|
+
}, [state.start, state.end, state.mouseDown]);
|
|
238
268
|
useEffect(function () {
|
|
239
269
|
dispatch({
|
|
240
270
|
type: 'clearEdit'
|
|
@@ -356,6 +386,13 @@ var Sheet = function Sheet(props) {
|
|
|
356
386
|
showMenu: menu.showMenu,
|
|
357
387
|
contextMenu: ContextMenu,
|
|
358
388
|
onContextMenu: onContextMenu
|
|
389
|
+
}), /*#__PURE__*/_jsx(Remark, {
|
|
390
|
+
showRemark: remarkInfo.show && !menu.showMenu,
|
|
391
|
+
position: {
|
|
392
|
+
left: remarkInfo.position.left,
|
|
393
|
+
top: remarkInfo.position.top
|
|
394
|
+
},
|
|
395
|
+
children: remarkElement
|
|
359
396
|
}), EmptyElement]
|
|
360
397
|
}), /*#__PURE__*/_jsxs("div", {
|
|
361
398
|
className: "harvest-sheet-control",
|
|
@@ -378,3 +378,16 @@ span.harvest-sheet-container:focus {
|
|
|
378
378
|
color: #a4a9b2;
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
|
+
.harvest-sheet-container .harvest-remark-container{
|
|
382
|
+
opacity: 1;
|
|
383
|
+
border:1px solid #E5E5E5;
|
|
384
|
+
border-radius: 2px;
|
|
385
|
+
z-index: 10;
|
|
386
|
+
margin-left: 5px;
|
|
387
|
+
transition: min-height .2s linear,height .2s linear;
|
|
388
|
+
padding: 8px;
|
|
389
|
+
overflow: hidden;
|
|
390
|
+
background: rgb(255,255,255);
|
|
391
|
+
// box-shadow: 2px 2px 5px #888888;
|
|
392
|
+
box-shadow: 0 4px 8px rgba(216,223,235,.5);
|
|
393
|
+
}
|
|
@@ -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 < 1) {
|
|
100
|
+
setRemarkInfo({
|
|
101
|
+
show: false
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
}, {
|
|
105
|
+
threshold: 1
|
|
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
|
};
|
|
@@ -7,7 +7,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
7
7
|
import { MoreOutlined } from "@ant-design/icons";
|
|
8
8
|
import { Form, InputNumber, Popover, Button } from "antd";
|
|
9
9
|
import React, { useEffect, useRef, useState } from "react";
|
|
10
|
-
import "./index.less";
|
|
11
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
12
|
var RowPop = function RowPop(props) {
|