@zhenliang/sheet 0.1.46 → 0.1.48
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/reducers/mouseReducer.js +32 -0
- package/dist/core/sheet/index.less +2 -1
- package/dist/core/sheet/useMouseEvent.js +9 -1
- package/dist/core/sheet/var.less +41 -34
- package/dist/core/shell/draggableShell/index.js +1 -1
- package/dist/core/table/useGroupConfig.js +6 -5
- package/dist/type/sheet.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g filter="url(#filter0_d_932_2301)">
|
|
3
|
+
<path d="M10 5.5V12.5H6L12 18.5L18 12.5H14V5.5H10Z" fill="white" />
|
|
4
|
+
<path d="M13.0002 6.5V13.5H15.5902L12.0002 17.09L8.41016 13.5H11.0002V6.5H13.0002Z" fill="black" />
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<filter id="filter0_d_932_2301" x="4.2" y="4.7" width="15.6" height="16.6" filterUnits="userSpaceOnUse"
|
|
8
|
+
color-interpolation-filters="sRGB">
|
|
9
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
10
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
|
11
|
+
result="hardAlpha" />
|
|
12
|
+
<feOffset dy="1" />
|
|
13
|
+
<feGaussianBlur stdDeviation="0.9" />
|
|
14
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0" />
|
|
15
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_932_2301" />
|
|
16
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_932_2301" result="shape" />
|
|
17
|
+
</filter>
|
|
18
|
+
</defs>
|
|
19
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g filter="url(#filter0_d_932_2297)">
|
|
3
|
+
<path d="M12.5 18L18.5 12L12.5 6V10H5.5V14H12.5V18Z" fill="white"/>
|
|
4
|
+
<path d="M6.5 11H13.5V8.40997L17.09 12L13.5 15.59V13H6.5V11Z" fill="black"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<filter id="filter0_d_932_2297" x="3.7" y="5.2" width="16.6" height="15.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
8
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
9
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
10
|
+
<feOffset dy="1"/>
|
|
11
|
+
<feGaussianBlur stdDeviation="0.9"/>
|
|
12
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
|
|
13
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_932_2297"/>
|
|
14
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_932_2297" result="shape"/>
|
|
15
|
+
</filter>
|
|
16
|
+
</defs>
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g filter="url(#filter0_d_932_2293)">
|
|
3
|
+
<path d="M10 5.5V12.5H6L12 18.5L18 12.5H14V5.5H10Z" fill="black"/>
|
|
4
|
+
<path d="M13.0002 6.5V13.5H15.5902L12.0002 17.09L8.41016 13.5H11.0002V6.5H13.0002Z" fill="white"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<filter id="filter0_d_932_2293" x="4.2" y="4.7" width="15.6" height="16.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
8
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
9
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
10
|
+
<feOffset dy="1"/>
|
|
11
|
+
<feGaussianBlur stdDeviation="0.9"/>
|
|
12
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
|
|
13
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_932_2293"/>
|
|
14
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_932_2293" result="shape"/>
|
|
15
|
+
</filter>
|
|
16
|
+
</defs>
|
|
17
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g filter="url(#filter0_d_932_2289)">
|
|
3
|
+
<path d="M12.5 18L18.5 12L12.5 6V10H5.5V14H12.5V18Z" fill="black"/>
|
|
4
|
+
<path d="M6.5 11H13.5V8.40997L17.09 12L13.5 15.59V13H6.5V11Z" fill="white"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<filter id="filter0_d_932_2289" x="3.7" y="5.2" width="16.6" height="15.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
8
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
9
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
10
|
+
<feOffset dy="1"/>
|
|
11
|
+
<feGaussianBlur stdDeviation="0.9"/>
|
|
12
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
|
|
13
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_932_2289"/>
|
|
14
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_932_2289" result="shape"/>
|
|
15
|
+
</filter>
|
|
16
|
+
</defs>
|
|
17
|
+
</svg>
|
|
@@ -77,6 +77,19 @@ export var mouseReducer = {
|
|
|
77
77
|
col = _ref2.col;
|
|
78
78
|
var data = state.data;
|
|
79
79
|
if (state.mouseDown === false || data !== null && data !== void 0 && data[row][col].fixed) return state;
|
|
80
|
+
if (state.isIndex && state.start && state.end && (data === null || data === void 0 ? void 0 : data[row][col].dataIndex) === 'index') {
|
|
81
|
+
var _state$end;
|
|
82
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
83
|
+
end: {
|
|
84
|
+
row: row,
|
|
85
|
+
col: (_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.col
|
|
86
|
+
},
|
|
87
|
+
lastSelected: {
|
|
88
|
+
start: state.start,
|
|
89
|
+
end: state.end
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
80
93
|
return _objectSpread(_objectSpread({}, state), {}, {
|
|
81
94
|
end: {
|
|
82
95
|
row: row,
|
|
@@ -94,8 +107,24 @@ export var mouseReducer = {
|
|
|
94
107
|
col = _ref3.col;
|
|
95
108
|
var data = state.data;
|
|
96
109
|
if (state.mouseDown === false || data !== null && data !== void 0 && data[row][col].fixed) return state;
|
|
110
|
+
if (state.isIndex && state.end) {
|
|
111
|
+
var _state$end2;
|
|
112
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
113
|
+
mouseDown: false,
|
|
114
|
+
isIndex: false,
|
|
115
|
+
end: {
|
|
116
|
+
row: row,
|
|
117
|
+
col: (_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.col
|
|
118
|
+
},
|
|
119
|
+
lastSelected: {
|
|
120
|
+
start: state.start,
|
|
121
|
+
end: state.end
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}
|
|
97
125
|
return _objectSpread(_objectSpread({}, state), {}, {
|
|
98
126
|
mouseDown: false,
|
|
127
|
+
isIndex: false,
|
|
99
128
|
end: {
|
|
100
129
|
row: row,
|
|
101
130
|
col: col
|
|
@@ -135,6 +164,7 @@ export var mouseReducer = {
|
|
|
135
164
|
}
|
|
136
165
|
return _objectSpread(_objectSpread({}, state), {}, {
|
|
137
166
|
mouseDown: false,
|
|
167
|
+
isIndex: false,
|
|
138
168
|
editing: {
|
|
139
169
|
row: row,
|
|
140
170
|
col: col
|
|
@@ -194,6 +224,8 @@ export var mouseReducer = {
|
|
|
194
224
|
start: state.start,
|
|
195
225
|
end: state.end
|
|
196
226
|
},
|
|
227
|
+
mouseDown: true,
|
|
228
|
+
isIndex: true,
|
|
197
229
|
editing: undefined,
|
|
198
230
|
lastEditing: lastEditing
|
|
199
231
|
});
|
|
@@ -200,7 +200,7 @@ span.harvest-sheet-container:focus {
|
|
|
200
200
|
}
|
|
201
201
|
|
|
202
202
|
.harvest-sheet-container .harvest-sheet .cell.index {
|
|
203
|
-
cursor: e-resize;
|
|
203
|
+
cursor: var(--arrow-right) 12 12, e-resize;
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
|
|
@@ -210,6 +210,7 @@ span.harvest-sheet-container:focus {
|
|
|
210
210
|
|
|
211
211
|
.harvest-sheet-container .harvest-sheet .cell.cell-title {
|
|
212
212
|
background-color: var(--cell-title-background-color);
|
|
213
|
+
cursor: var(--arrow-down) 12 12, s-resize;
|
|
213
214
|
|
|
214
215
|
&:hover {
|
|
215
216
|
background-color: var(--cell-title-background-color);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMouse } from "../..";
|
|
2
|
-
import { useCallback, useRef } from 'react';
|
|
2
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
3
3
|
import { extractDataRowAndCol, findParentTd } from "../util";
|
|
4
4
|
var rowCount = 10; //每秒10行
|
|
5
5
|
var colCount = 5; //每秒5列
|
|
@@ -283,6 +283,14 @@ export var useMouseEvent = function useMouseEvent(dispatch, elementRef) {
|
|
|
283
283
|
payload: currentPos
|
|
284
284
|
});
|
|
285
285
|
}, []);
|
|
286
|
+
useEffect(function () {
|
|
287
|
+
if (elementRef.current) {
|
|
288
|
+
if (navigator.appVersion.indexOf("Mac") !== -1) {
|
|
289
|
+
elementRef.current.style.setProperty('--arrow-down', 'var(--arrow-mac-down)');
|
|
290
|
+
elementRef.current.style.setProperty('--arrow-right', 'var(--arrow-mac-right)');
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
}, []);
|
|
286
294
|
useMouse({
|
|
287
295
|
mouseDown: mouseDown,
|
|
288
296
|
mouseOver: mouseOver,
|
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
|
}
|
|
@@ -104,7 +104,7 @@ export var DraggableShell = function DraggableShell(_ref) {
|
|
|
104
104
|
if (e.nativeEvent.offsetX > target.offsetWidth - 8) {
|
|
105
105
|
target.style.cursor = 'col-resize';
|
|
106
106
|
} else {
|
|
107
|
-
target.style.cursor = item.fixed ? 'default' : '
|
|
107
|
+
target.style.cursor = item.fixed ? 'default' : '';
|
|
108
108
|
}
|
|
109
109
|
//取出暂存的Table Cell
|
|
110
110
|
if (downRef.current === undefined) downRef.current = target;
|
|
@@ -90,15 +90,16 @@ export var useGroupConfig = function useGroupConfig(dataSource, tableGroupConfig
|
|
|
90
90
|
tableGroupConfig === null || tableGroupConfig === void 0 || (_tableGroupConfig$onC2 = tableGroupConfig.onChange) === null || _tableGroupConfig$onC2 === void 0 || _tableGroupConfig$onC2.call(tableGroupConfig, value);
|
|
91
91
|
groupConfigRef.current = value;
|
|
92
92
|
}, [setGroupConfig]);
|
|
93
|
-
var
|
|
94
|
-
|
|
93
|
+
var memoConfig = useMemo(function () {
|
|
94
|
+
var configMap = groupConfigToGroupMap({
|
|
95
95
|
groups: groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.groups,
|
|
96
96
|
groupOpen: groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.groupOpen
|
|
97
97
|
});
|
|
98
|
+
return _objectSpread(_objectSpread({}, groupConfig), {}, {
|
|
99
|
+
configMap: configMap
|
|
100
|
+
});
|
|
98
101
|
}, [groupConfig]);
|
|
99
|
-
return [
|
|
100
|
-
configMap: groupMap
|
|
101
|
-
}), handleGroupChange];
|
|
102
|
+
return [memoConfig, handleGroupChange];
|
|
102
103
|
};
|
|
103
104
|
export var formatGroupData = function formatGroupData(param) {
|
|
104
105
|
var dataSource = param.dataSource,
|
package/dist/type/sheet.d.ts
CHANGED