@zhenliang/sheet 0.0.1

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.
Files changed (64) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +3 -0
  3. package/dist/core/config.js +13 -0
  4. package/dist/core/editor/cascaderEditor/index.js +63 -0
  5. package/dist/core/editor/cascaderEditor/index.less +24 -0
  6. package/dist/core/editor/dateEditor/index.js +42 -0
  7. package/dist/core/editor/dateEditor/index.less +7 -0
  8. package/dist/core/editor/numberEditor/index.js +25 -0
  9. package/dist/core/editor/numberEditor/index.less +17 -0
  10. package/dist/core/editor/selectEditor/index.js +44 -0
  11. package/dist/core/editor/selectEditor/index.less +41 -0
  12. package/dist/core/reducers/index.js +36 -0
  13. package/dist/core/reducers/keyboardReducer.js +91 -0
  14. package/dist/core/reducers/mouseReducer.js +151 -0
  15. package/dist/core/reducers/sideEffectReducer.js +324 -0
  16. package/dist/core/reducers/stateReducer.js +140 -0
  17. package/dist/core/sheet/Cell.js +160 -0
  18. package/dist/core/sheet/DataEditor.js +21 -0
  19. package/dist/core/sheet/DefaultCell.js +31 -0
  20. package/dist/core/sheet/DefaultRow.js +25 -0
  21. package/dist/core/sheet/DefaultRowMapper.js +15 -0
  22. package/dist/core/sheet/DefaultShell.js +12 -0
  23. package/dist/core/sheet/Event.js +17 -0
  24. package/dist/core/sheet/ValueViewer.js +9 -0
  25. package/dist/core/sheet/index.js +201 -0
  26. package/dist/core/sheet/index.less +261 -0
  27. package/dist/core/sheet/useCellEvent.js +22 -0
  28. package/dist/core/sheet/useContextMenu.js +86 -0
  29. package/dist/core/sheet/useKeyBoardEvent.js +44 -0
  30. package/dist/core/sheet/useMouseEvent.js +298 -0
  31. package/dist/core/sheet/useVirtualList.js +74 -0
  32. package/dist/core/sheet/var.less +41 -0
  33. package/dist/core/shell/draggableShell/index.js +182 -0
  34. package/dist/core/shell/draggableShell/index.less +16 -0
  35. package/dist/core/shell/resizeShell.js +57 -0
  36. package/dist/core/shell/tableShell.js +105 -0
  37. package/dist/core/table/index.js +311 -0
  38. package/dist/core/table/useGroupConfig.js +32 -0
  39. package/dist/core/table/useRowSelection.js +24 -0
  40. package/dist/core/table/util.js +29 -0
  41. package/dist/core/util.js +363 -0
  42. package/dist/core/viewer/checkViewer/index.js +23 -0
  43. package/dist/core/viewer/groupViewer/index.js +28 -0
  44. package/dist/example/basic.js +120 -0
  45. package/dist/example/draggable.js +0 -0
  46. package/dist/example/ellipsis.js +63 -0
  47. package/dist/example/fixed.js +88 -0
  48. package/dist/example/group.js +84 -0
  49. package/dist/example/index.less +5 -0
  50. package/dist/example/selection.js +85 -0
  51. package/dist/example/sheet.js +356 -0
  52. package/dist/hooks/index.js +6 -0
  53. package/dist/hooks/useEventBus.js +17 -0
  54. package/dist/hooks/useKeyboard.js +108 -0
  55. package/dist/hooks/useMiddlewareReducer.js +47 -0
  56. package/dist/hooks/useMouse.js +52 -0
  57. package/dist/hooks/useSetState.js +27 -0
  58. package/dist/hooks/useSheetEvent.js +5 -0
  59. package/dist/index.js +3 -0
  60. package/dist/standardUtils/index.js +32 -0
  61. package/dist/typings/index.d.ts +1 -0
  62. package/dist/typings/sheet.d.ts +209 -0
  63. package/dist/typings/table.js +0 -0
  64. package/package.json +84 -0
@@ -0,0 +1,21 @@
1
+ import { useEffect, useRef } from 'react';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ var DataEditor = function DataEditor(_ref) {
4
+ var value = _ref.value,
5
+ onChange = _ref.onChange;
6
+ var inputRef = useRef(null);
7
+ useEffect(function () {
8
+ var _inputRef$current;
9
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
10
+ }, []);
11
+ var handleChange = function handleChange(e) {
12
+ onChange(e.target.value);
13
+ };
14
+ return /*#__PURE__*/_jsx("input", {
15
+ ref: inputRef,
16
+ className: "data-editor",
17
+ value: value,
18
+ onChange: handleChange
19
+ });
20
+ };
21
+ export default DataEditor;
@@ -0,0 +1,31 @@
1
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
6
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
7
+ import { classNames } from "../util";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ var DefaultCell = function DefaultCell(props) {
10
+ var cell = props.cell,
11
+ row = props.row,
12
+ col = props.col,
13
+ attributesRenderer = props.attributesRenderer,
14
+ className = props.className,
15
+ style = props.style,
16
+ children = props.children;
17
+ var colSpan = cell.colSpan,
18
+ rowSpan = cell.rowSpan;
19
+ var attributes = attributesRenderer ? attributesRenderer(cell, row, col) : {};
20
+ return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
21
+ "data-row": row,
22
+ "data-col": col,
23
+ className: classNames(className, cell.fixed && 'fixed', cell.fixed && "fixed-".concat(cell.fixed)),
24
+ colSpan: colSpan,
25
+ rowSpan: rowSpan,
26
+ style: style
27
+ }, attributes), {}, {
28
+ children: children
29
+ }));
30
+ };
31
+ export default DefaultCell;
@@ -0,0 +1,25 @@
1
+ import { useMemo } from 'react';
2
+ import { groupConfigToGroupMap } from "../util";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ var DefaultRow = function DefaultRow(_ref) {
5
+ var _groupMap$get, _groupMap$get2;
6
+ var children = _ref.children,
7
+ row = _ref.row,
8
+ groupConfig = _ref.groupConfig;
9
+ var groupMap = useMemo(function () {
10
+ // 分组逻辑
11
+ return groupConfigToGroupMap(groupConfig);
12
+ }, [groupConfig]);
13
+ if (groupMap.get(row) && !((_groupMap$get = groupMap.get(row)) !== null && _groupMap$get !== void 0 && _groupMap$get.isStart) && !((_groupMap$get2 = groupMap.get(row)) !== null && _groupMap$get2 !== void 0 && _groupMap$get2.isOpen)) {
14
+ return /*#__PURE__*/_jsx("tr", {
15
+ style: {
16
+ display: 'none'
17
+ },
18
+ children: children
19
+ });
20
+ }
21
+ return /*#__PURE__*/_jsx("tr", {
22
+ children: children
23
+ });
24
+ };
25
+ export default DefaultRow;
@@ -0,0 +1,15 @@
1
+ import { memo } from 'react';
2
+ import Cell from "./Cell";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ export var DefaultRowMapper = /*#__PURE__*/memo(function (_ref) {
5
+ var rowData = _ref.rowData,
6
+ row = _ref.row;
7
+ var cls = rowData.map(function (cell, col) {
8
+ return /*#__PURE__*/_jsx(Cell, {
9
+ row: row,
10
+ col: col,
11
+ cell: cell
12
+ }, col);
13
+ });
14
+ return cls;
15
+ });
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ var DefaultShell = function DefaultShell(_ref) {
3
+ var children = _ref.children,
4
+ className = _ref.className;
5
+ return /*#__PURE__*/_jsx("table", {
6
+ className: className,
7
+ children: /*#__PURE__*/_jsx("tbody", {
8
+ children: children
9
+ })
10
+ });
11
+ };
12
+ export default DefaultShell;
@@ -0,0 +1,17 @@
1
+ import { useSheetEvent } from "../../hooks";
2
+ import { useEffect } from 'react';
3
+ export var SheetEvent = function SheetEvent(_ref) {
4
+ var handler = _ref.handler,
5
+ name = _ref.name;
6
+ var eventBus = useSheetEvent();
7
+ useEffect(function () {
8
+ if (!eventBus) {
9
+ return;
10
+ }
11
+ eventBus.on(name, handler);
12
+ return function () {
13
+ eventBus.off(name, handler);
14
+ };
15
+ }, [eventBus, handler, name]);
16
+ return null;
17
+ };
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ var ValueViewer = function ValueViewer(_ref) {
3
+ var value = _ref.value;
4
+ return /*#__PURE__*/_jsx("span", {
5
+ className: "value-viewer",
6
+ children: value
7
+ });
8
+ };
9
+ export default ValueViewer;
@@ -0,0 +1,201 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
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
+ 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
+ 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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { useEffect, useMemo, useRef } from 'react';
8
+ import ReduxThunk from 'redux-thunk';
9
+ import DefaultRow from "./DefaultRow";
10
+ import DefaultShell from "./DefaultShell";
11
+ import { isNil } from 'lodash';
12
+ import { SheetEventContext, useEventBus, useMiddlewareReducer } from "../../hooks";
13
+ import sheetReducer from "../reducers";
14
+ import { classNames, getRowHeight, rowToActualRow } from "../util";
15
+ import { DefaultRowMapper } from "./DefaultRowMapper";
16
+ import "./index.less";
17
+ import { useCellEvent } from "./useCellEvent";
18
+ import { useContextMenu } from "./useContextMenu";
19
+ import { useKeyBoardEvent } from "./useKeyBoardEvent";
20
+ import { useMouseEvent } from "./useMouseEvent";
21
+ import { useVirtualList } from "./useVirtualList";
22
+ import { jsx as _jsx } from "react/jsx-runtime";
23
+ import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ var Sheet = function Sheet(props) {
25
+ var _state$data$length, _state$data2, _scroll$y, _scroll$x;
26
+ var _props$sheetInstance = props.sheetInstance,
27
+ sheetInstance = _props$sheetInstance === void 0 ? {
28
+ current: null
29
+ } : _props$sheetInstance,
30
+ _props$sheetRenderer = props.sheetRenderer,
31
+ SheetShell = _props$sheetRenderer === void 0 ? DefaultShell : _props$sheetRenderer,
32
+ _props$rowRenderer = props.rowRenderer,
33
+ Row = _props$rowRenderer === void 0 ? DefaultRow : _props$rowRenderer,
34
+ ContextMenu = props.menuRenderer,
35
+ _props$virtualized = props.virtualized,
36
+ virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
37
+ className = props.className,
38
+ data = props.data,
39
+ _props$freePaste = props.freePaste,
40
+ freePaste = _props$freePaste === void 0 ? false : _props$freePaste,
41
+ _props$groupConfig = props.groupConfig,
42
+ groupConfig = _props$groupConfig === void 0 ? undefined : _props$groupConfig,
43
+ onCellsChanged = props.onCellsChanged,
44
+ onContextMenu = props.onContextMenu,
45
+ rowClassName = props.rowClassName,
46
+ scroll = props.scroll,
47
+ children = props.children;
48
+ var sheetWrapperRef = useRef(null);
49
+ var contextMenuRef = useRef(null);
50
+ var eventBus = useEventBus();
51
+ var _useMiddlewareReducer = useMiddlewareReducer(sheetReducer, {
52
+ data: data,
53
+ mouseDown: false,
54
+ editing: undefined,
55
+ lastFocus: [],
56
+ groupConfig: groupConfig,
57
+ eventBus: eventBus
58
+ }, [ReduxThunk]),
59
+ _useMiddlewareReducer2 = _slicedToArray(_useMiddlewareReducer, 2),
60
+ state = _useMiddlewareReducer2[0],
61
+ dispatch = _useMiddlewareReducer2[1];
62
+ useEffect(function () {
63
+ sheetInstance.current = {
64
+ zoomTo: function zoomTo(row) {
65
+ // 默认回到编辑行
66
+ dispatch(function (d, getState) {
67
+ var _ref, _sheetWrapperRef$curr;
68
+ var _getState = getState(),
69
+ start = _getState.start,
70
+ groupConfig = _getState.groupConfig;
71
+ if (!start && isNil(row)) return;
72
+ var actual = rowToActualRow((_ref = row) !== null && _ref !== void 0 ? _ref : start === null || start === void 0 ? void 0 : start.row, groupConfig);
73
+ console.log(actual);
74
+ var rowHeight = getRowHeight(sheetWrapperRef.current);
75
+ (_sheetWrapperRef$curr = sheetWrapperRef.current) === null || _sheetWrapperRef$curr === void 0 ? void 0 : _sheetWrapperRef$curr.scrollTo(0, rowHeight * actual);
76
+ });
77
+ },
78
+ pushToHistory: function pushToHistory(config) {
79
+ dispatch({
80
+ type: 'pushHistory',
81
+ payload: config
82
+ });
83
+ },
84
+ selectRow: function selectRow(row) {
85
+ if (isNil(row)) {
86
+ dispatch({
87
+ type: 'clearSelect'
88
+ });
89
+ } else {
90
+ dispatch({
91
+ type: 'selectRow',
92
+ payload: row
93
+ });
94
+ }
95
+ },
96
+ popHistory: function popHistory() {
97
+ return {};
98
+ }
99
+ };
100
+ }, [sheetWrapperRef.current]);
101
+ useEffect(function () {
102
+ // 同步必要的状态
103
+ dispatch({
104
+ type: 'changes',
105
+ payload: {
106
+ cellChangeHandler: onCellsChanged,
107
+ data: data,
108
+ freePaste: freePaste,
109
+ groupConfig: groupConfig
110
+ }
111
+ });
112
+ }, [onCellsChanged, data, freePaste, groupConfig]);
113
+ useCellEvent(dispatch, state);
114
+ useMouseEvent(dispatch, sheetWrapperRef);
115
+ useKeyBoardEvent(dispatch, sheetWrapperRef);
116
+ var menu = useContextMenu(dispatch, sheetWrapperRef, !!ContextMenu, contextMenuRef);
117
+
118
+ // timeout 的副作用不适合放reducer里面
119
+ useEffect(function () {
120
+ if (!state.editing && state.start) {
121
+ setTimeout(function () {
122
+ var _sheetWrapperRef$curr2;
123
+ // 表格获取焦点 + 接收keyboard event
124
+ (_sheetWrapperRef$curr2 = sheetWrapperRef.current) === null || _sheetWrapperRef$curr2 === void 0 ? void 0 : _sheetWrapperRef$curr2.focus({
125
+ preventScroll: true
126
+ });
127
+ }, 1);
128
+ }
129
+ }, [state.editing, state.start]);
130
+ var _useVirtualList = useVirtualList(sheetWrapperRef, state.data, virtualized),
131
+ virtualStart = _useVirtualList.virtualStart,
132
+ virtualEnd = _useVirtualList.virtualEnd,
133
+ paddingTop = _useVirtualList.paddingTop,
134
+ paddingBottom = _useVirtualList.paddingBottom;
135
+ useEffect(function () {
136
+ dispatch({
137
+ type: 'clearEdit'
138
+ });
139
+ dispatch({
140
+ type: 'clearSelectIfNotSingleRow'
141
+ });
142
+ }, [groupConfig]);
143
+ var rowElements = useMemo(function () {
144
+ var _state$data;
145
+ return state === null || state === void 0 ? void 0 : (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.map(function (rowData, row) {
146
+ return /*#__PURE__*/_jsx(Row, {
147
+ row: row,
148
+ cells: rowData,
149
+ groupConfig: groupConfig,
150
+ rowClassName: rowClassName,
151
+ children: /*#__PURE__*/_jsx(DefaultRowMapper, {
152
+ rowData: rowData,
153
+ row: row
154
+ })
155
+ }, row);
156
+ });
157
+ }, [state.data, groupConfig]);
158
+ var memoHeight = Math.min(((_state$data$length = state === null || state === void 0 ? void 0 : (_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.length) !== null && _state$data$length !== void 0 ? _state$data$length : 0) + 1, 10) * 42 + 43;
159
+ return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
160
+ value: eventBus,
161
+ children: /*#__PURE__*/_jsxs("span", {
162
+ ref: sheetWrapperRef,
163
+ tabIndex: 0,
164
+ className: classNames('harvest harvest-sheet-container', className),
165
+ style: {
166
+ maxHeight: (_scroll$y = scroll === null || scroll === void 0 ? void 0 : scroll.y) !== null && _scroll$y !== void 0 ? _scroll$y : memoHeight,
167
+ width: (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$x : '100%'
168
+ },
169
+ children: [/*#__PURE__*/_jsxs(SheetShell, {
170
+ className: classNames('harvest-sheet', className),
171
+ children: [virtualized && /*#__PURE__*/_jsx("tr", {
172
+ style: {
173
+ height: 0,
174
+ paddingBottom: paddingTop,
175
+ display: 'block'
176
+ }
177
+ }), rowElements === null || rowElements === void 0 ? void 0 : rowElements.slice(virtualStart, virtualEnd), /*#__PURE__*/_jsx("tr", {
178
+ style: {
179
+ height: 0,
180
+ paddingBottom: paddingBottom,
181
+ display: 'block'
182
+ }
183
+ })]
184
+ }, "sheet"), ContextMenu ? /*#__PURE__*/_jsx("div", {
185
+ ref: contextMenuRef,
186
+ style: {
187
+ display: menu.showMenu ? '' : 'none'
188
+ },
189
+ children: /*#__PURE__*/_jsx(ContextMenu, {
190
+ position: menu.position,
191
+ cell: menu.cellPosition,
192
+ onContextMenu: onContextMenu
193
+ })
194
+ }) : null, /*#__PURE__*/_jsx("div", {
195
+ className: "harvest-sheet-control",
196
+ children: children
197
+ })]
198
+ })
199
+ });
200
+ };
201
+ export default Sheet;
@@ -0,0 +1,261 @@
1
+ @import './var.less';
2
+
3
+ .harvest-sheet-container{
4
+ overflow: auto;
5
+ display: block;
6
+ position: relative ;
7
+ // scroll-behavior:smooth;
8
+ }
9
+
10
+ .harvest-sheet-container .header{
11
+ z-index: 2;
12
+
13
+ }
14
+
15
+
16
+
17
+
18
+ span.harvest-sheet-container, span.harvest-sheet-container:focus {
19
+ outline: none;
20
+ }
21
+
22
+ .harvest-sheet-container .harvest-sheet {
23
+ width: 100%;
24
+ border-collapse: collapse;
25
+ table-layout: fixed;
26
+
27
+ tr{
28
+ height:var(--row-height);
29
+
30
+ th{
31
+ line-height: var(--row-height);
32
+ }
33
+
34
+ td{
35
+ line-height: var(--row-height);
36
+ }
37
+ }
38
+
39
+ }
40
+
41
+ .harvest-sheet-container .harvest-sheet .cell {
42
+ height: 17px;
43
+ font-size: var(--cell-font-size);
44
+ padding:var(--cell-padding-vertical);
45
+ border: 1px solid var(--cell-border-color);
46
+ background-color: var(--cell-background-color);
47
+ cursor: cell;
48
+ text-align: right;
49
+ transition: box-shadow 100ms ease-out;
50
+ user-select: none;
51
+ vertical-align: bottom;
52
+ position: relative;
53
+
54
+ }
55
+
56
+
57
+ .harvest-sheet-container .harvest-sheet .cell.fixed{
58
+ position: sticky;
59
+ z-index: 2;
60
+
61
+ &.cell-title{
62
+ z-index: 3;
63
+
64
+ }
65
+
66
+
67
+ &::before{
68
+ position: absolute;
69
+ top: -1px;
70
+ left: 0;
71
+ width: 100%;
72
+ border-color: var(--cell-border-color);
73
+ border-top: 1px solid var(--cell-border-color);
74
+ content: "";
75
+ }
76
+
77
+ &.fixed-left::after{
78
+ position: absolute;
79
+ top: 0;
80
+ bottom: -1px;
81
+ right: -1px;
82
+ width: 30px;
83
+ border-left: 1px solid var(--cell-border-color);
84
+ content: "";
85
+ pointer-events: none;
86
+ transform: translate(100%);
87
+ transition: box-shadow .3s;
88
+ box-shadow: var(--cell-fixed-box-shadow-left);
89
+ }
90
+
91
+ &.fixed-right::after{
92
+ position: absolute;
93
+ top: 0;
94
+ bottom: -1px;
95
+ left: -1px;
96
+ width: 30px;
97
+ border-right: 1px solid var(--cell-border-color);
98
+ content: "";
99
+ pointer-events: none;
100
+ transform: translate(-100%);
101
+ transition: box-shadow .3s;
102
+ box-shadow: var(--cell-fixed-box-shadow-right);
103
+
104
+
105
+ }
106
+ }
107
+
108
+
109
+ .harvest-sheet-container .harvest-sheet .cell.selected {
110
+ border:1px double;
111
+ border-color:var(--cell-border-color);
112
+ box-shadow: var(--cell-box-shadow);
113
+ }
114
+
115
+ .harvest-sheet-container .harvest-sheet .cell.selected-start {
116
+ box-shadow: none;
117
+ }
118
+
119
+ .harvest-sheet-container .harvest-sheet .cell.selected-top{
120
+ border-top-color: var(--resizer) !important;
121
+ }
122
+
123
+ .harvest-sheet-container .harvest-sheet .cell.selected-left{
124
+ border-left-color: var(--resizer) !important;
125
+ }
126
+
127
+ .harvest-sheet-container .harvest-sheet .cell.selected-bottom{
128
+ border-bottom-color: var(--resizer) !important;
129
+ }
130
+
131
+ .harvest-sheet-container .harvest-sheet .cell.selected-right{
132
+ border-right-color: var(--resizer) !important;
133
+ }
134
+
135
+
136
+
137
+ .harvest-sheet-container .harvest-sheet .cell.read-only {
138
+ background: var(--cell-read-only-background-color);
139
+ color: var(--read-color);
140
+ text-align: center;
141
+ }
142
+
143
+ .harvest-sheet-container .harvest-sheet .cell.sheet-control{
144
+ border-right: 1px solid transparent;
145
+ background: var(--cell-background-color) ;
146
+ // position: relative !important;
147
+ }
148
+
149
+ .harvest-sheet-container .harvest-sheet .cell-title.sheet-control{
150
+ border-right: 1px solid var(--cell-title-background-color);
151
+ }
152
+
153
+ .harvest-sheet-container .harvest-sheet .cell.cell-title{
154
+ background-color: var(--cell-title-background-color);
155
+
156
+ &:hover{
157
+ background-color: var(--cell-title-background-color);
158
+
159
+ }
160
+ }
161
+
162
+
163
+ .harvest-sheet-container .harvest-sheet .cell:not(.cell.read-only):hover{
164
+ background-color: var(--cell-hover);
165
+ }
166
+
167
+
168
+
169
+ .harvest-sheet-container .harvest-sheet .cell > .text {
170
+ overflow: hidden;
171
+ padding: 2px 5px;
172
+ text-overflow: ellipsis;
173
+ }
174
+
175
+
176
+ .harvest-sheet-container .harvest-sheet .cell > input {
177
+ display: block;
178
+ width: calc(100% - 6px);
179
+ height: 11px;
180
+ border: 2px solid rgb(33, 133, 208);
181
+ background: none;
182
+ outline: none !important;
183
+ text-align:inherit;
184
+ }
185
+
186
+ .harvest-sheet-container .harvest-sheet .cell,
187
+ .harvest-sheet-container .harvest-sheet.wrap .cell,
188
+ .harvest-sheet-container .harvest-sheet .cell.wrap,
189
+ .harvest-sheet-container .harvest-sheet.wrap .cell.wrap,
190
+ .harvest-sheet-container .harvest-sheet.nowrap .cell.wrap,
191
+ .harvest-sheet-container .harvest-sheet.clip .cell.wrap {
192
+ white-space: normal;
193
+ }
194
+
195
+ .harvest-sheet-container .harvest-sheet.nowrap .cell,
196
+ .harvest-sheet-container .harvest-sheet .cell.nowrap,
197
+ .harvest-sheet-container .harvest-sheet.nowrap .cell.nowrap,
198
+ .harvest-sheet-container .harvest-sheet.wrap .cell.nowrap,
199
+ .harvest-sheet-container .harvest-sheet.clip .cell.nowrap {
200
+ overflow-x: visible;
201
+ white-space: nowrap;
202
+ }
203
+
204
+ .harvest-sheet-container .harvest-sheet.clip .cell,
205
+ .harvest-sheet-container .harvest-sheet .cell.clip,
206
+ .harvest-sheet-container .harvest-sheet.clip .cell.clip,
207
+ .harvest-sheet-container .harvest-sheet.wrap .cell.clip,
208
+ .harvest-sheet-container .harvest-sheet.nowrap .cell.clip {
209
+ overflow-x: hidden;
210
+ white-space: nowrap;
211
+ }
212
+
213
+ .harvest-sheet-container .harvest-sheet .cell .value-viewer{
214
+ overflow: hidden;
215
+ text-overflow: ellipsis;
216
+ white-space: nowrap;
217
+ }
218
+
219
+ .harvest-sheet-container .harvest-sheet .cell .value-viewer, .harvest-sheet-container .harvest-sheet .cell .data-editor {
220
+ display: block;
221
+ font-size: var(--cell-font-size);
222
+ line-height:var(--cell-inner-height) ;
223
+ padding:0
224
+ }
225
+
226
+ .harvest-sheet-container .harvest-sheet .cell .data-editor {
227
+ border:none;
228
+ border-radius: none;
229
+ height:var(--cell-inner-height);
230
+ }
231
+
232
+
233
+
234
+ .harvest-sheet-container .harvest-menu{
235
+ background-color: white;
236
+ position: fixed;
237
+ z-index: 3;
238
+ box-shadow: 0 3px 12px 2px rgba(31, 35, 41, 10%);
239
+
240
+ .harvest-menu-item{
241
+ margin: 1px 3px;
242
+ padding: 4px 8px;
243
+ cursor: pointer;
244
+ font-size: 14px;
245
+ line-height: 22px;
246
+
247
+ &:hover{
248
+ background-color: rgba(31, 35, 41, 5%)
249
+ }
250
+ }
251
+
252
+ }
253
+
254
+ .harvest-sheet-container .harvest-sheet-control{
255
+ position: sticky;
256
+ z-index: 3;
257
+ height: 32px;
258
+ bottom: 0;
259
+ left: 0;
260
+ background-color: white;
261
+ }
@@ -0,0 +1,22 @@
1
+ import { useEffect } from 'react';
2
+ import { sideEffectReducer } from "../reducers";
3
+ export var useCellEvent = function useCellEvent(dispatch, listenerVar) {
4
+ var _ref = listenerVar || {},
5
+ start = _ref.start,
6
+ end = _ref.end,
7
+ lastSelected = _ref.lastSelected,
8
+ editing = _ref.editing,
9
+ lastEditing = _ref.lastEditing;
10
+ useEffect(function () {
11
+ dispatch(sideEffectReducer.init);
12
+ return function () {
13
+ dispatch(sideEffectReducer.destroy);
14
+ };
15
+ }, []);
16
+ useEffect(function () {
17
+ dispatch(sideEffectReducer.emitSelectChange);
18
+ }, [start, end, lastSelected]);
19
+ useEffect(function () {
20
+ dispatch(sideEffectReducer.emitEditChange);
21
+ }, [editing, lastEditing]);
22
+ };