@zhenliang/sheet 0.1.4 → 0.1.7-3.beta.0
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/assets/arrow-mac-down.svg +19 -0
- package/dist/assets/arrow-mac-right.svg +17 -0
- package/dist/assets/arrow-windows-down.svg +17 -0
- package/dist/assets/arrow-windows-right.svg +17 -0
- package/dist/core/config.d.ts +3 -0
- package/dist/core/config.js +4 -1
- package/dist/core/editor/cascaderEditor/index.d.ts +1 -1
- package/dist/core/editor/cascaderEditor/index.js +12 -11
- package/dist/core/editor/cascaderEditor/index.less +15 -7
- package/dist/core/editor/dateEditor/index.js +31 -8
- package/dist/core/editor/dateEditor/index.less +9 -2
- package/dist/core/editor/numberEditor/index.d.ts +3 -1
- package/dist/core/editor/numberEditor/index.js +62 -27
- package/dist/core/editor/numberEditor/index.less +3 -2
- package/dist/core/editor/selectEditor/index.d.ts +1 -1
- package/dist/core/editor/selectEditor/index.js +34 -19
- package/dist/core/editor/selectEditor/index.less +16 -5
- package/dist/core/reducers/index.d.ts +2 -2
- package/dist/core/reducers/index.js +8 -1
- package/dist/core/reducers/keyboardReducer.js +39 -9
- package/dist/core/reducers/mouseReducer.js +115 -11
- package/dist/core/reducers/sideEffectReducer.d.ts +1 -1
- package/dist/core/reducers/sideEffectReducer.js +146 -41
- package/dist/core/reducers/stateReducer.d.ts +1 -0
- package/dist/core/reducers/stateReducer.js +96 -27
- package/dist/core/sheet/Cell.d.ts +1 -1
- package/dist/core/sheet/Cell.js +33 -24
- package/dist/core/sheet/Control.d.ts +21 -0
- package/dist/core/sheet/Control.js +83 -0
- package/dist/core/sheet/DataEditor.js +3 -3
- package/dist/core/sheet/DefaultCell.d.ts +8 -3
- package/dist/core/sheet/DefaultCell.js +12 -8
- package/dist/core/sheet/DefaultRow.js +3 -9
- package/dist/core/sheet/DefaultRowMapper.d.ts +3 -0
- package/dist/core/sheet/DefaultRowMapper.js +22 -6
- package/dist/core/sheet/DefaultShell.js +1 -1
- package/dist/core/sheet/Event.d.ts +1 -1
- package/dist/core/sheet/Event.js +1 -1
- package/dist/core/sheet/Menu.d.ts +6 -0
- package/dist/core/sheet/Menu.js +21 -0
- package/dist/core/sheet/ValueViewer.js +1 -1
- package/dist/core/sheet/index.js +249 -88
- package/dist/core/sheet/index.less +199 -107
- package/dist/core/sheet/searchInput.d.ts +15 -0
- package/dist/core/sheet/searchInput.js +78 -0
- package/dist/core/sheet/useCellEvent.js +1 -1
- package/dist/core/sheet/useContextMenu.d.ts +1 -1
- package/dist/core/sheet/useContextMenu.js +13 -10
- package/dist/core/sheet/useKeyBoardEvent.js +19 -2
- package/dist/core/sheet/useMouseEvent.js +19 -12
- package/dist/core/sheet/useSearchInput.d.ts +11 -0
- package/dist/core/sheet/useSearchInput.js +65 -0
- package/dist/core/sheet/useSelectVisible.d.ts +1 -1
- package/dist/core/sheet/useSelectVisible.js +17 -7
- package/dist/core/sheet/useVirtualList.d.ts +10 -1
- package/dist/core/sheet/useVirtualList.js +44 -28
- package/dist/core/sheet/var.less +41 -34
- package/dist/core/shell/draggableShell/index.d.ts +4 -1
- package/dist/core/shell/draggableShell/index.js +133 -50
- package/dist/core/shell/tableShell.d.ts +4 -1
- package/dist/core/shell/tableShell.js +82 -34
- package/dist/core/table/addButton.d.ts +6 -0
- package/dist/core/table/addButton.js +103 -0
- package/dist/core/table/events.d.ts +1 -3
- package/dist/core/table/events.js +30 -35
- package/dist/core/table/index.js +97 -189
- package/dist/core/table/index.less +12 -0
- package/dist/core/table/useGroupConfig.d.ts +4 -1
- package/dist/core/table/useGroupConfig.js +139 -14
- package/dist/core/table/useRowSelection.d.ts +3 -0
- package/dist/core/table/useRowSelection.js +68 -2
- package/dist/core/util.d.ts +10 -4
- package/dist/core/util.js +121 -69
- package/dist/core/viewer/btnViewer/index.js +3 -3
- package/dist/core/viewer/cascaderViewer/index.js +6 -1
- package/dist/core/viewer/checkViewer/index.js +2 -2
- package/dist/core/viewer/editViewer/index.js +3 -3
- package/dist/core/viewer/groupViewer/index.js +26 -10
- package/dist/core/viewer/selectorViewer/index.js +7 -3
- package/dist/core/viewer/switchViewer/index.js +10 -4
- package/dist/example/antComponent.d.ts +1 -1
- package/dist/example/antComponent.js +63 -37
- package/dist/example/basic.d.ts +1 -1
- package/dist/example/basic.js +20 -14
- package/dist/example/ellipsis.d.ts +1 -1
- package/dist/example/ellipsis.js +3 -2
- package/dist/example/fixed.d.ts +1 -1
- package/dist/example/fixed.js +3 -2
- package/dist/example/group.js +40 -17
- package/dist/example/selection.d.ts +1 -1
- package/dist/example/selection.js +9 -8
- package/dist/example/sheet.d.ts +1 -1
- package/dist/example/sheet.js +21 -22
- package/dist/example/valuationAnalyze.d.ts +1 -0
- package/dist/example/valuationAnalyze.js +3 -4
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/useEventBus.d.ts +1 -0
- package/dist/hooks/useEventBus.js +2 -2
- package/dist/hooks/useGroupConfig.d.ts +4 -0
- package/dist/hooks/useGroupConfig.js +5 -0
- package/dist/hooks/useKeyboard.d.ts +5 -2
- package/dist/hooks/useKeyboard.js +17 -3
- package/dist/hooks/useMiddlewareReducer.d.ts +5 -5
- package/dist/hooks/useMiddlewareReducer.js +3 -3
- package/dist/hooks/useMouse.d.ts +1 -1
- package/dist/hooks/useMouse.js +7 -7
- package/dist/hooks/useSetState.js +7 -7
- package/dist/hooks/useSheetEvent.d.ts +1 -1
- package/dist/hooks/useSheetEvent.js +2 -2
- package/dist/hooks/useWidthConfig.d.ts +3 -3
- package/dist/hooks/useWidthConfig.js +2 -2
- package/dist/standardUtils/index.d.ts +1 -1
- package/dist/standardUtils/index.js +1 -1
- package/dist/type/sheet.d.ts +77 -31
- package/dist/type/sheetTable.d.ts +21 -12
- package/package.json +7 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMouse } from "../..";
|
|
2
|
-
import { useCallback, useRef } from
|
|
2
|
+
import { useCallback, useEffect, useRef } from "../../../node_modules/@types/react";
|
|
3
3
|
import { extractDataRowAndCol, findParentTd } from "../util";
|
|
4
4
|
var rowCount = 10; //每秒10行
|
|
5
5
|
var colCount = 5; //每秒5列
|
|
@@ -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;
|
|
@@ -267,16 +264,18 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
267
264
|
});
|
|
268
265
|
}, []);
|
|
269
266
|
var loseFocus = useCallback(function (e) {
|
|
270
|
-
var _elementRef$current10;
|
|
271
|
-
|
|
267
|
+
var _elementRef$current10, _elementRef$current11;
|
|
268
|
+
var isSearch = (_elementRef$current10 = elementRef.current) === null || _elementRef$current10 === void 0 || (_elementRef$current10 = _elementRef$current10.parentElement) === null || _elementRef$current10 === void 0 || (_elementRef$current10 = _elementRef$current10.nextSibling) === null || _elementRef$current10 === void 0 ? void 0 : _elementRef$current10.contains(e.target);
|
|
269
|
+
var isTableAControl = (_elementRef$current11 = elementRef.current) === null || _elementRef$current11 === void 0 || (_elementRef$current11 = _elementRef$current11.parentElement) === null || _elementRef$current11 === void 0 ? void 0 : _elementRef$current11.contains(e.target);
|
|
270
|
+
if (!(isTableAControl || isSearch)) {
|
|
272
271
|
dispatch({
|
|
273
272
|
type: 'loseFocus'
|
|
274
273
|
});
|
|
275
274
|
return;
|
|
276
275
|
}
|
|
277
|
-
e.preventDefault();
|
|
276
|
+
// e.preventDefault();
|
|
278
277
|
var currentCell = findParentTd(e.target);
|
|
279
|
-
if (currentCell.classList.contains('read-only')) {
|
|
278
|
+
if (!(currentCell !== null && currentCell !== void 0 && currentCell.classList) || currentCell.classList.contains('read-only')) {
|
|
280
279
|
// 只读
|
|
281
280
|
return;
|
|
282
281
|
}
|
|
@@ -286,6 +285,14 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
286
285
|
payload: currentPos
|
|
287
286
|
});
|
|
288
287
|
}, []);
|
|
288
|
+
useEffect(function () {
|
|
289
|
+
if (elementRef.current) {
|
|
290
|
+
if (navigator.appVersion.indexOf("Mac") !== -1) {
|
|
291
|
+
elementRef.current.style.setProperty('--arrow-down', 'var(--arrow-mac-down)');
|
|
292
|
+
elementRef.current.style.setProperty('--arrow-right', 'var(--arrow-mac-right)');
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}, []);
|
|
289
296
|
useMouse({
|
|
290
297
|
mouseDown: mouseDown,
|
|
291
298
|
mouseOver: mouseOver,
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Dispatch } from "../../hooks/useMiddlewareReducer";
|
|
2
|
+
import type { SheetType } from "../../type";
|
|
3
|
+
export declare const useSearchInput: (state: Partial<SheetType.UpdateStateType>, dispatch: Dispatch, handlerRef: React.RefObject<SheetType.SheetInstance>) => {
|
|
4
|
+
goNext: () => void;
|
|
5
|
+
goLast: () => void;
|
|
6
|
+
changeSearch: (value: string) => void;
|
|
7
|
+
closeSearch: () => void;
|
|
8
|
+
searchText?: string | undefined;
|
|
9
|
+
searchTotal?: number | undefined;
|
|
10
|
+
searchCurrent?: number | undefined;
|
|
11
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { pick } from 'lodash';
|
|
8
|
+
import { useCallback, useEffect } from "../../../node_modules/@types/react";
|
|
9
|
+
export var useSearchInput = function useSearchInput(state, dispatch, handlerRef) {
|
|
10
|
+
var goSearchResult = useCallback(function (value) {
|
|
11
|
+
var _state$searchResultLi;
|
|
12
|
+
var _state$searchTotal = state.searchTotal,
|
|
13
|
+
searchTotal = _state$searchTotal === void 0 ? 0 : _state$searchTotal;
|
|
14
|
+
var index = (value < 0 ? value + searchTotal : value) % (searchTotal || 1);
|
|
15
|
+
var result = (_state$searchResultLi = state.searchResultList) === null || _state$searchResultLi === void 0 ? void 0 : _state$searchResultLi[index];
|
|
16
|
+
if (result) {
|
|
17
|
+
var _state$eventBus, _handlerRef$current, _handlerRef$current2;
|
|
18
|
+
(_state$eventBus = state.eventBus) === null || _state$eventBus === void 0 || _state$eventBus.emit('group-open-title', true);
|
|
19
|
+
dispatch({
|
|
20
|
+
type: 'changes',
|
|
21
|
+
payload: {
|
|
22
|
+
searchCurrent: index
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
(_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 || _handlerRef$current.select({
|
|
26
|
+
start: result,
|
|
27
|
+
end: result
|
|
28
|
+
});
|
|
29
|
+
handlerRef === null || handlerRef === void 0 || (_handlerRef$current2 = handlerRef.current) === null || _handlerRef$current2 === void 0 || _handlerRef$current2.zoomTo();
|
|
30
|
+
}
|
|
31
|
+
}, [state.searchTotal, state.searchResultList]);
|
|
32
|
+
var goNext = useCallback(function () {
|
|
33
|
+
var _state$searchCurrent;
|
|
34
|
+
goSearchResult(((_state$searchCurrent = state.searchCurrent) !== null && _state$searchCurrent !== void 0 ? _state$searchCurrent : 0) + 1);
|
|
35
|
+
}, [goSearchResult, state.searchCurrent]);
|
|
36
|
+
var goLast = useCallback(function () {
|
|
37
|
+
var _state$searchCurrent2;
|
|
38
|
+
goSearchResult(((_state$searchCurrent2 = state.searchCurrent) !== null && _state$searchCurrent2 !== void 0 ? _state$searchCurrent2 : 0) - 1);
|
|
39
|
+
}, [goSearchResult, state.searchCurrent]);
|
|
40
|
+
var closeSearch = useCallback(function () {
|
|
41
|
+
dispatch({
|
|
42
|
+
type: 'closeSearch'
|
|
43
|
+
});
|
|
44
|
+
}, []);
|
|
45
|
+
var changeSearch = useCallback(function (value) {
|
|
46
|
+
dispatch({
|
|
47
|
+
type: 'changeSearch',
|
|
48
|
+
payload: value
|
|
49
|
+
});
|
|
50
|
+
}, [state.data]);
|
|
51
|
+
useEffect(function () {
|
|
52
|
+
var _state$searchResultLi2;
|
|
53
|
+
if (!((_state$searchResultLi2 = state.searchResultList) !== null && _state$searchResultLi2 !== void 0 && _state$searchResultLi2.length)) {
|
|
54
|
+
dispatch({
|
|
55
|
+
type: 'clearSelect'
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}, [state.searchResultList, state.searchTotal]);
|
|
59
|
+
return _objectSpread(_objectSpread({}, pick(state, ['searchText', 'searchTotal', 'searchCurrent'])), {}, {
|
|
60
|
+
goNext: goNext,
|
|
61
|
+
goLast: goLast,
|
|
62
|
+
changeSearch: changeSearch,
|
|
63
|
+
closeSearch: closeSearch
|
|
64
|
+
});
|
|
65
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { SheetType } from "../../type";
|
|
2
|
-
export declare const useSelectVisible: (sheetWrapper: React.RefObject<SheetType.refAssertion>, start?: SheetType.CellPosition) => boolean;
|
|
2
|
+
export declare const useSelectVisible: (sheetWrapper: React.RefObject<SheetType.refAssertion>, start?: SheetType.CellPosition) => [boolean, 'up' | 'down'];
|
|
@@ -2,24 +2,33 @@ 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 { throttle } from 'lodash';
|
|
8
|
-
import { useEffect, useState } from
|
|
8
|
+
import { useEffect, useState } from "../../../node_modules/@types/react";
|
|
9
9
|
export var useSelectVisible = function useSelectVisible(sheetWrapper, start) {
|
|
10
10
|
var _useState = useState(true),
|
|
11
11
|
_useState2 = _slicedToArray(_useState, 2),
|
|
12
12
|
startVisible = _useState2[0],
|
|
13
13
|
setStartVisible = _useState2[1];
|
|
14
|
+
var _useState3 = useState('up'),
|
|
15
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
16
|
+
backDirection = _useState4[0],
|
|
17
|
+
setBackDirection = _useState4[1];
|
|
14
18
|
useEffect(function () {
|
|
15
19
|
var _sheetWrapper$current3;
|
|
16
20
|
var handleScroll = throttle(function () {
|
|
17
21
|
var _sheetWrapper$current, _sheetWrapper$current2;
|
|
18
22
|
if (!start) {
|
|
23
|
+
setStartVisible(true);
|
|
19
24
|
return;
|
|
20
25
|
}
|
|
21
26
|
var startCell = (_sheetWrapper$current = sheetWrapper.current) === null || _sheetWrapper$current === void 0 ? void 0 : _sheetWrapper$current.querySelector("td.cell[data-row='".concat(start.row, "']"));
|
|
22
|
-
if (!startCell)
|
|
27
|
+
if (!startCell) {
|
|
28
|
+
// 找不到说明已经不在可视区域了
|
|
29
|
+
setStartVisible(false);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
23
32
|
var _ref = ((_sheetWrapper$current2 = sheetWrapper.current) === null || _sheetWrapper$current2 === void 0 ? void 0 : _sheetWrapper$current2.getBoundingClientRect()) || {},
|
|
24
33
|
_ref$top = _ref.top,
|
|
25
34
|
top = _ref$top === void 0 ? 0 : _ref$top,
|
|
@@ -32,17 +41,18 @@ export var useSelectVisible = function useSelectVisible(sheetWrapper, start) {
|
|
|
32
41
|
setStartVisible(true);
|
|
33
42
|
} else {
|
|
34
43
|
setStartVisible(false);
|
|
44
|
+
setBackDirection(top < cellTop ? 'down' : 'up');
|
|
35
45
|
}
|
|
36
46
|
}, 100);
|
|
37
47
|
handleScroll();
|
|
38
|
-
(_sheetWrapper$current3 = sheetWrapper.current) === null || _sheetWrapper$current3 === void 0
|
|
48
|
+
(_sheetWrapper$current3 = sheetWrapper.current) === null || _sheetWrapper$current3 === void 0 || _sheetWrapper$current3.addEventListener('scroll', handleScroll);
|
|
39
49
|
return function () {
|
|
40
50
|
var _sheetWrapper$current4;
|
|
41
|
-
(_sheetWrapper$current4 = sheetWrapper.current) === null || _sheetWrapper$current4 === void 0
|
|
51
|
+
(_sheetWrapper$current4 = sheetWrapper.current) === null || _sheetWrapper$current4 === void 0 || _sheetWrapper$current4.removeEventListener('scroll', handleScroll);
|
|
42
52
|
};
|
|
43
53
|
}, [sheetWrapper.current, start]);
|
|
44
54
|
if (!start) {
|
|
45
|
-
return true;
|
|
55
|
+
return [true, 'up'];
|
|
46
56
|
}
|
|
47
|
-
return startVisible;
|
|
57
|
+
return [startVisible, backDirection];
|
|
48
58
|
};
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import type { SheetType } from "../../type";
|
|
2
|
-
export declare const useVirtualList: (elementRef: React.RefObject<SheetType.refAssertion>, data?: SheetType.Cell[][],
|
|
3
|
+
export declare const useVirtualList: (elementRef: React.RefObject<SheetType.refAssertion>, data?: SheetType.Cell[][], virtualized?: boolean) => {
|
|
3
4
|
virtualStart: number;
|
|
4
5
|
virtualEnd: number;
|
|
5
6
|
paddingTop: number;
|
|
6
7
|
paddingBottom: number;
|
|
7
8
|
};
|
|
9
|
+
export declare const VirtualizeStart: React.FC<{
|
|
10
|
+
virtualized: boolean;
|
|
11
|
+
paddingTop: number;
|
|
12
|
+
}>;
|
|
13
|
+
export declare const VirtualizeEnd: React.FC<{
|
|
14
|
+
virtualized: boolean;
|
|
15
|
+
paddingBottom: number;
|
|
16
|
+
}>;
|
|
@@ -2,17 +2,19 @@ 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
|
-
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
7
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
8
|
+
import { useGroup } from "../../hooks/useGroupConfig";
|
|
9
|
+
import { throttle } from 'lodash';
|
|
10
|
+
import { useEffect, useState } from "../../../node_modules/@types/react";
|
|
11
|
+
import { getRowHeight } from "../util";
|
|
12
|
+
import { jsx as _jsx } from "../../../node_modules/@types/react/jsx-runtime";
|
|
10
13
|
var extra = 20;
|
|
11
14
|
// 虚拟列表
|
|
12
15
|
export var useVirtualList = function useVirtualList(elementRef) {
|
|
13
16
|
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
14
|
-
var
|
|
15
|
-
var virtualized = arguments.length > 3 ? arguments[3] : undefined;
|
|
17
|
+
var virtualized = arguments.length > 2 ? arguments[2] : undefined;
|
|
16
18
|
var _useState = useState({
|
|
17
19
|
virtualStart: 0,
|
|
18
20
|
virtualEnd: virtualized ? Math.min(data.length - 1, 2 * extra) : data.length - 1,
|
|
@@ -22,14 +24,18 @@ export var useVirtualList = function useVirtualList(elementRef) {
|
|
|
22
24
|
_useState2 = _slicedToArray(_useState, 2),
|
|
23
25
|
state = _useState2[0],
|
|
24
26
|
setState = _useState2[1];
|
|
27
|
+
var _useGroup = useGroup(),
|
|
28
|
+
groupConfig = _useGroup.config;
|
|
25
29
|
var virtualStart = state.virtualStart,
|
|
26
30
|
virtualEnd = state.virtualEnd,
|
|
27
31
|
paddingTop = state.paddingTop,
|
|
28
32
|
paddingBottom = state.paddingBottom;
|
|
29
|
-
|
|
30
|
-
var groupConfigRef = useRef(groupConfig);
|
|
33
|
+
// const virtualRef = useRef<VirtualConfig | null>();
|
|
31
34
|
useEffect(function () {
|
|
32
|
-
|
|
35
|
+
var _elementRef$current;
|
|
36
|
+
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.scrollBy({
|
|
37
|
+
top: 0
|
|
38
|
+
});
|
|
33
39
|
}, [groupConfig]);
|
|
34
40
|
useEffect(function () {
|
|
35
41
|
if (!elementRef.current) return;
|
|
@@ -43,31 +49,22 @@ export var useVirtualList = function useVirtualList(elementRef) {
|
|
|
43
49
|
clientHeight = _ref.clientHeight;
|
|
44
50
|
var start = Math.floor(scrollTop / itemHeight) - extra;
|
|
45
51
|
var end = Math.ceil((scrollTop + clientHeight) / itemHeight) + extra;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
// const minStart = start - (actualStart - start)
|
|
52
|
-
var maxEnd = end - (actualEnd - end);
|
|
53
|
-
var updateVirtualConfig = {
|
|
54
|
-
virtualStart: actualStart,
|
|
55
|
-
virtualEnd: maxEnd,
|
|
56
|
-
paddingTop: actualStart * itemHeight,
|
|
57
|
-
paddingBottom: (data.length - maxEnd) * itemHeight
|
|
52
|
+
var newConfig = {
|
|
53
|
+
virtualStart: start,
|
|
54
|
+
virtualEnd: end,
|
|
55
|
+
paddingTop: start * itemHeight,
|
|
56
|
+
paddingBottom: (data.length - end) * itemHeight
|
|
58
57
|
};
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
setState(updateVirtualConfig);
|
|
63
|
-
virtualRef.current = updateVirtualConfig;
|
|
58
|
+
// virtualRef.current = newConfig;
|
|
59
|
+
setState(newConfig);
|
|
60
|
+
return;
|
|
64
61
|
}, 50);
|
|
65
62
|
// data.length change 的时候用 handleScroll 重设 virtual params
|
|
66
63
|
handleScroll();
|
|
67
64
|
elementRef.current.addEventListener('scroll', handleScroll);
|
|
68
65
|
return function () {
|
|
69
|
-
var _elementRef$
|
|
70
|
-
(_elementRef$
|
|
66
|
+
var _elementRef$current2;
|
|
67
|
+
(_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 || _elementRef$current2.removeEventListener('scroll', handleScroll);
|
|
71
68
|
};
|
|
72
69
|
}, [elementRef.current, data.length]);
|
|
73
70
|
if (!virtualized) {
|
|
@@ -84,4 +81,23 @@ export var useVirtualList = function useVirtualList(elementRef) {
|
|
|
84
81
|
paddingTop: Math.max(0, paddingTop),
|
|
85
82
|
paddingBottom: data.length - 1 <= virtualEnd ? 0 : paddingBottom
|
|
86
83
|
};
|
|
84
|
+
};
|
|
85
|
+
export var VirtualizeStart = function VirtualizeStart(_ref2) {
|
|
86
|
+
var virtualized = _ref2.virtualized,
|
|
87
|
+
paddingTop = _ref2.paddingTop;
|
|
88
|
+
return virtualized && paddingTop > 0 ? /*#__PURE__*/_jsx("tr", {
|
|
89
|
+
style: {
|
|
90
|
+
height: 0,
|
|
91
|
+
paddingBottom: paddingTop,
|
|
92
|
+
display: 'block'
|
|
93
|
+
}
|
|
94
|
+
}) : null;
|
|
95
|
+
};
|
|
96
|
+
export var VirtualizeEnd = function VirtualizeEnd(_ref3) {
|
|
97
|
+
var virtualized = _ref3.virtualized,
|
|
98
|
+
paddingBottom = _ref3.paddingBottom;
|
|
99
|
+
return /*#__PURE__*/_jsx(VirtualizeStart, {
|
|
100
|
+
virtualized: virtualized,
|
|
101
|
+
paddingTop: paddingBottom
|
|
102
|
+
});
|
|
87
103
|
};
|
package/dist/core/sheet/var.less
CHANGED
|
@@ -1,41 +1,48 @@
|
|
|
1
|
-
.harvest{
|
|
2
|
-
--row-height:40px;
|
|
3
|
-
--cell-font-size:12px;
|
|
4
|
-
--cell-title-font-size:12px;
|
|
5
|
-
--cell-line-height:40px;
|
|
6
|
-
--cell-inner-height:39px;
|
|
7
|
-
--cell-padding-vertical:0;
|
|
8
|
-
--cell-padding-horizontal:5px;
|
|
1
|
+
.harvest {
|
|
2
|
+
--row-height: 40px;
|
|
3
|
+
--cell-font-size: 12px;
|
|
4
|
+
--cell-title-font-size: 12px;
|
|
5
|
+
--cell-line-height: 40px;
|
|
6
|
+
--cell-inner-height: 39px;
|
|
7
|
+
--cell-padding-vertical: 0;
|
|
8
|
+
--cell-padding-horizontal: 5px;
|
|
9
9
|
--cell-border-color: #DDD;
|
|
10
|
-
--cell-background-color:white;
|
|
11
|
-
--cell-title-background-color
|
|
12
|
-
--cell-read-only-background-color
|
|
13
|
-
--cell-hover:white;
|
|
14
|
-
--cell-box-shadow:inset 0 -100px 0 rgba(33, 133, 208, 15%)
|
|
15
|
-
|
|
16
|
-
--cell-fixed-box-shadow-
|
|
10
|
+
--cell-background-color: white;
|
|
11
|
+
--cell-title-background-color: #f7f9fc;
|
|
12
|
+
--cell-read-only-background-color: #f7f9fc;
|
|
13
|
+
--cell-hover: white;
|
|
14
|
+
--cell-box-shadow: inset 0 -100px 0 rgba(33, 133, 208, 15%);
|
|
15
|
+
;
|
|
16
|
+
--cell-fixed-box-shadow-left: inset 10px 0 8px -8px rgba(5, 5, 5, 6%);
|
|
17
|
+
--cell-fixed-box-shadow-right: inset -10px 0 8px -8px rgba(5, 5, 5, 6%);
|
|
17
18
|
--resizer: #2185d0;
|
|
18
|
-
--color:black;
|
|
19
|
-
--title-color
|
|
20
|
-
--read-color
|
|
19
|
+
--color: black;
|
|
20
|
+
--title-color: #999;
|
|
21
|
+
--read-color: #999;
|
|
22
|
+
--arrow-mac-down: url('../../assets/arrow-mac-down.svg');
|
|
23
|
+
--arrow-mac-right: url('../../assets/arrow-mac-right.svg');
|
|
24
|
+
--arrow-windows-down: url('../../assets/arrow-windows-down.svg');
|
|
25
|
+
--arrow-windows-right: url('../../assets/arrow-windows-right.svg');
|
|
26
|
+
--arrow-down: var(--arrow-windows-down);
|
|
27
|
+
--arrow-right: var(--arrow-windows-right);
|
|
21
28
|
}
|
|
22
29
|
|
|
23
|
-
.ali-devops{
|
|
24
|
-
--row-height:40px;
|
|
25
|
-
--cell-font-size:14px;
|
|
26
|
-
--cell-line-height:20px;
|
|
27
|
-
--cell-padding-vertical:12px;
|
|
28
|
-
--cell-padding-horizontal:12px;
|
|
30
|
+
.ali-devops {
|
|
31
|
+
--row-height: 40px;
|
|
32
|
+
--cell-font-size: 14px;
|
|
33
|
+
--cell-line-height: 20px;
|
|
34
|
+
--cell-padding-vertical: 12px;
|
|
35
|
+
--cell-padding-horizontal: 12px;
|
|
29
36
|
--cell-border-color: #e5e5e5;
|
|
30
|
-
--cell-background-color:white;
|
|
31
|
-
--cell-title-background-color:white;
|
|
32
|
-
--cell-read-only-background-color:white;
|
|
33
|
-
--cell-fixed-box-shadow:inset -10px 0 8px -8px rgba(5, 5, 5,6%);
|
|
34
|
-
--cell-hover
|
|
35
|
-
--cell-fixed-box-shadow-left:inset 10px 0 8px -8px rgba(5, 5, 5,6%);
|
|
36
|
-
--cell-fixed-box-shadow-right:inset -10px 0 8px -8px rgba(5, 5, 5,6%);
|
|
37
|
+
--cell-background-color: white;
|
|
38
|
+
--cell-title-background-color: white;
|
|
39
|
+
--cell-read-only-background-color: white;
|
|
40
|
+
--cell-fixed-box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 6%);
|
|
41
|
+
--cell-hover: #f7f7f7;
|
|
42
|
+
--cell-fixed-box-shadow-left: inset 10px 0 8px -8px rgba(5, 5, 5, 6%);
|
|
43
|
+
--cell-fixed-box-shadow-right: inset -10px 0 8px -8px rgba(5, 5, 5, 6%);
|
|
37
44
|
--resizer: #1b9aee;
|
|
38
|
-
--color
|
|
39
|
-
--title-color
|
|
40
|
-
--read-color
|
|
45
|
+
--color: #262626;
|
|
46
|
+
--title-color: #8c8c8c;
|
|
47
|
+
--read-color: #8c8c8c;
|
|
41
48
|
}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import type { SheetType } from "../../../type";
|
|
2
3
|
import './index.less';
|
|
3
|
-
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, controlWidth, }: SheetType.SheetShell) => import("../../../../node_modules/@types/react").FC<{
|
|
4
5
|
children: React.ReactElement;
|
|
6
|
+
isScrolledOver: boolean;
|
|
7
|
+
isScrolledToEnd: boolean;
|
|
5
8
|
}>;
|