pixel-react-excel-sheet 1.0.25 → 1.0.26
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/lib/components/Drawer/Types.d.ts +4 -0
- package/lib/index.d.ts +4 -0
- package/lib/index.esm.js +11 -13
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +11 -13
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AppHeader/AppHeader.scss +2 -2
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +16 -17
- package/src/components/Drawer/Drawer.scss +2 -2
- package/src/components/Drawer/Drawer.stories.tsx +1 -0
- package/src/components/Drawer/Drawer.tsx +2 -1
- package/src/components/Drawer/Types.ts +4 -0
- package/src/components/Editor/VariableDropdown.scss +1 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +3 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +31 -30
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +107 -105
- package/src/components/Icon/iconList.ts +0 -2
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
flex: 1 1 auto;
|
|
37
37
|
overflow: hidden;
|
|
38
38
|
transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
|
|
39
|
-
max-width:
|
|
39
|
+
max-width: 150px; /* Initial max-width */
|
|
40
40
|
&:not(.ff-app-header-nav-bar-item--selected):hover::after {
|
|
41
41
|
animation: oscillate-border-width 0.5s ease-in-out forwards;
|
|
42
42
|
}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
background-color: var(--primary-icon-color);
|
|
61
61
|
border-radius: 20px;
|
|
62
62
|
flex-grow: 12; /* Increase size on hover */
|
|
63
|
-
max-width:
|
|
63
|
+
max-width: 700px;
|
|
64
64
|
opacity: 1;
|
|
65
65
|
.ff-app-header-nav-bar-item-label {
|
|
66
66
|
box-shadow: 0px 4px 4px 0px #00000040 inset;
|
|
@@ -135,23 +135,22 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
|
|
|
135
135
|
/>
|
|
136
136
|
)}
|
|
137
137
|
</div>
|
|
138
|
-
{showDropdown &&
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
)}
|
|
138
|
+
{showDropdown &&
|
|
139
|
+
(isHash ? (
|
|
140
|
+
<OptionsDropdown
|
|
141
|
+
position="relative"
|
|
142
|
+
width={dropdownWidth}
|
|
143
|
+
filteredOptions={filteredOptions}
|
|
144
|
+
onSelectVariable={handleDropdownClick}
|
|
145
|
+
/>
|
|
146
|
+
) : (
|
|
147
|
+
<VariableDropdown
|
|
148
|
+
position="absolute"
|
|
149
|
+
width={dropdownWidth}
|
|
150
|
+
optionsList={variableList}
|
|
151
|
+
onSelectVariable={handleDropdownClick}
|
|
152
|
+
/>
|
|
153
|
+
))}
|
|
155
154
|
</div>
|
|
156
155
|
);
|
|
157
156
|
};
|
|
@@ -99,7 +99,6 @@
|
|
|
99
99
|
}
|
|
100
100
|
.ff-custom-header {
|
|
101
101
|
background-color: var(--drawer-footer-bg);
|
|
102
|
-
padding: 4px 8px;
|
|
103
102
|
width: 100%;
|
|
104
103
|
}
|
|
105
104
|
}
|
|
@@ -132,7 +131,8 @@
|
|
|
132
131
|
}
|
|
133
132
|
.ff-custom-footer {
|
|
134
133
|
background-color: var(--drawer-footer-bg);
|
|
135
|
-
|
|
134
|
+
width: 100%;
|
|
135
|
+
border-radius: 0 0 8px 8px;
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
}
|
|
@@ -39,6 +39,7 @@ const Drawer: FC<DrawerProps> = ({
|
|
|
39
39
|
height,
|
|
40
40
|
width,
|
|
41
41
|
right = 0,
|
|
42
|
+
overflow,
|
|
42
43
|
}: DrawerProps) => {
|
|
43
44
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
44
45
|
|
|
@@ -88,7 +89,7 @@ const Drawer: FC<DrawerProps> = ({
|
|
|
88
89
|
className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
|
|
89
90
|
'ff-drawer--open': isOpen,
|
|
90
91
|
})}
|
|
91
|
-
style={{ zIndex, top, height, width, right }}
|
|
92
|
+
style={{ zIndex, top, height, width, right, overflow }}
|
|
92
93
|
>
|
|
93
94
|
{showHeader && (
|
|
94
95
|
<div
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as Types from './types';
|
|
2
2
|
|
|
3
|
-
const HeaderRow: Types.HeaderRowComponent = (props) =>
|
|
3
|
+
const HeaderRow: Types.HeaderRowComponent = (props) => (
|
|
4
|
+
<tr className="ff-spreadsheet-row-header" {...props} />
|
|
5
|
+
);
|
|
4
6
|
|
|
5
7
|
export default HeaderRow;
|
|
@@ -102,36 +102,37 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
|
102
102
|
);
|
|
103
103
|
|
|
104
104
|
return (
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
105
|
+
<th
|
|
106
|
+
style={{
|
|
107
|
+
height: `${rowHeight}px`,
|
|
108
|
+
minWidth: '60px',
|
|
109
|
+
}}
|
|
110
|
+
className={classNames('ff-spreadsheet-header', {
|
|
111
|
+
'ff-spreadsheet-header--selected': selected,
|
|
112
|
+
})}
|
|
113
|
+
onClick={handleClick}
|
|
114
|
+
onContextMenu={contextClick}
|
|
115
|
+
tabIndex={0}
|
|
116
|
+
>
|
|
117
|
+
<Typography fontWeight="medium">
|
|
118
|
+
{label !== undefined ? label : row + 1}
|
|
119
|
+
</Typography>
|
|
120
|
+
|
|
121
|
+
<div
|
|
122
|
+
onMouseDown={onMouseDown}
|
|
123
|
+
onClick={() => activate({ row, column: -1 })}
|
|
124
|
+
style={{
|
|
125
|
+
zIndex: 'inherit',
|
|
126
|
+
height: '2px',
|
|
127
|
+
position: 'absolute',
|
|
128
|
+
right: 0,
|
|
129
|
+
bottom: 0,
|
|
130
|
+
width: '100%',
|
|
131
|
+
cursor: 'ns-resize',
|
|
132
|
+
}}
|
|
133
|
+
/>
|
|
134
|
+
</th>
|
|
135
|
+
|
|
135
136
|
);
|
|
136
137
|
};
|
|
137
138
|
|
|
@@ -24,8 +24,6 @@
|
|
|
24
24
|
|
|
25
25
|
position: relative;
|
|
26
26
|
overflow: scroll;
|
|
27
|
-
left: 0;
|
|
28
|
-
top: 0;
|
|
29
27
|
background: var(--background-color);
|
|
30
28
|
color: var(--text-color);
|
|
31
29
|
scrollbar-width: none;
|
|
@@ -54,126 +52,130 @@
|
|
|
54
52
|
}
|
|
55
53
|
border-collapse: collapse;
|
|
56
54
|
table-layout: fixed;
|
|
55
|
+
}
|
|
56
|
+
.ff-spreadsheet-cell {
|
|
57
|
+
outline: none;
|
|
58
|
+
position: relative;
|
|
59
|
+
z-index: 0;
|
|
60
|
+
}
|
|
57
61
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
.ff-spreadsheet-active-cell .select_dot {
|
|
63
|
+
background-color: var(--elevation);
|
|
64
|
+
height: 10px;
|
|
65
|
+
width: 10px;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
position: absolute;
|
|
68
|
+
bottom: -5px;
|
|
69
|
+
right: -5px;
|
|
70
|
+
cursor: crosshair;
|
|
71
|
+
z-index: 1000;
|
|
72
|
+
}
|
|
63
73
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
width: 10px;
|
|
68
|
-
border-radius: 50%;
|
|
69
|
-
position: absolute;
|
|
70
|
-
bottom: -5px;
|
|
71
|
-
right: -5px;
|
|
72
|
-
cursor: crosshair;
|
|
73
|
-
z-index: 1000;
|
|
74
|
-
}
|
|
74
|
+
.ff-spreadsheet-cell--readonly {
|
|
75
|
+
color: var(--readonly-text-color);
|
|
76
|
+
}
|
|
75
77
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
.ff-spreadsheet-cell,
|
|
79
|
+
.ff-spreadsheet-header {
|
|
80
|
+
border: 0.1px solid var(--border-color);
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
word-break: keep-all;
|
|
83
|
+
white-space: nowrap;
|
|
84
|
+
text-align: left;
|
|
85
|
+
box-sizing: border-box;
|
|
86
|
+
user-select: none;
|
|
87
|
+
}
|
|
79
88
|
|
|
80
|
-
|
|
81
|
-
.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
user-select: none;
|
|
89
|
-
}
|
|
89
|
+
.ff-spreadsheet-header {
|
|
90
|
+
border: 0.1px solid var(--border-color);
|
|
91
|
+
background-color: var(--header-background-color);
|
|
92
|
+
color: var(--readonly-text-color);
|
|
93
|
+
text-align: center;
|
|
94
|
+
z-index: 1000;
|
|
95
|
+
position: sticky;
|
|
96
|
+
}
|
|
90
97
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
text-align: center;
|
|
96
|
-
z-index: 1000;
|
|
97
|
-
position: sticky;
|
|
98
|
-
}
|
|
98
|
+
.ff-spreadsheet-corner-header {
|
|
99
|
+
position: fixed;
|
|
100
|
+
z-index: 2000;
|
|
101
|
+
}
|
|
99
102
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
103
|
+
.ff-spreadsheet-row-header {
|
|
104
|
+
// position: relative;
|
|
105
|
+
height: 34px;
|
|
106
|
+
}
|
|
104
107
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
108
|
+
.corner-header {
|
|
109
|
+
border: 0.1px solid var(--border-color);
|
|
110
|
+
background-color: var(--header-background-color);
|
|
111
|
+
position: absolute;
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
z-index: 1100;
|
|
116
|
+
top: -1px;
|
|
117
|
+
width: 60px;
|
|
118
|
+
height: 34px;
|
|
119
|
+
left: -1px;
|
|
120
|
+
}
|
|
118
121
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
.ff-spreadsheet-header--selected {
|
|
123
|
+
background: var(--brand-color);
|
|
124
|
+
color: var(--tooltip-text-color);
|
|
125
|
+
}
|
|
123
126
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
127
|
+
.ff-spreadsheet-data-viewer,
|
|
128
|
+
.ff-spreadsheet-data-editor input {
|
|
129
|
+
padding: 4px;
|
|
130
|
+
box-sizing: border-box;
|
|
131
|
+
}
|
|
132
|
+
.ff-spreadsheet-header {
|
|
133
|
+
box-sizing: border-box;
|
|
134
|
+
}
|
|
132
135
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
+
.ff-spreadsheet-data-viewer--preserve-breaks {
|
|
137
|
+
white-space: pre-wrap;
|
|
138
|
+
}
|
|
136
139
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
.ff-spreadsheet-data-editor,
|
|
141
|
+
.ff-spreadsheet-data-editor input {
|
|
142
|
+
width: 100%;
|
|
143
|
+
height: 100%;
|
|
144
|
+
}
|
|
142
145
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
146
|
+
.ff-spreadsheet-data-editor input {
|
|
147
|
+
font: inherit;
|
|
148
|
+
color: inherit;
|
|
149
|
+
background: none;
|
|
150
|
+
border: none;
|
|
151
|
+
outline: none;
|
|
152
|
+
margin: 0;
|
|
153
|
+
}
|
|
151
154
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
+
.ff-spreadsheet-data-viewer--boolean {
|
|
156
|
+
text-align: center;
|
|
157
|
+
}
|
|
155
158
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
159
|
+
.ff-spreadsheet-floating-rect {
|
|
160
|
+
position: absolute;
|
|
161
|
+
pointer-events: none;
|
|
162
|
+
box-sizing: border-box;
|
|
163
|
+
}
|
|
161
164
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
+
.ff-spreadsheet-floating-rect--hidden {
|
|
166
|
+
display: none;
|
|
167
|
+
}
|
|
165
168
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
169
|
+
.ff-spreadsheet-floating-rect--selected {
|
|
170
|
+
background: var(--outline-background-color);
|
|
171
|
+
border: 2px var(--outline-color) solid;
|
|
172
|
+
}
|
|
170
173
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
+
.ff-spreadsheet-floating-rect--dragging {
|
|
175
|
+
border: none;
|
|
176
|
+
}
|
|
174
177
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}
|
|
178
|
+
.ff-spreadsheet-floating-rect--copied {
|
|
179
|
+
border: 2px var(--outline-color) dashed;
|
|
178
180
|
}
|
|
179
181
|
}
|
|
@@ -82,7 +82,6 @@ import IpkFileType from '../../assets/icons/ipk_file_type.svg?react';
|
|
|
82
82
|
import TxtFileType from '../../assets/icons/txt_file_type.svg?react';
|
|
83
83
|
import GifFileType from '../../assets/icons/gif_file_type.svg?react';
|
|
84
84
|
import JpgFileType from '../../assets/icons/jpg_file_type.svg?react';
|
|
85
|
-
|
|
86
85
|
import InfoIcon from '../../assets/icons/info_icon.svg?react';
|
|
87
86
|
import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
|
|
88
87
|
import HideIcon from '../../assets/icons/hide_icon.svg?react';
|
|
@@ -421,7 +420,6 @@ Components['add_testcase'] = AddTestCaseIcon;
|
|
|
421
420
|
Components['automation_testcase'] = AutomationTestCaseIcon;
|
|
422
421
|
Components['manual_testcase'] = ManualTestCaseIcon;
|
|
423
422
|
Components['back_icon'] = BackIcon;
|
|
424
|
-
|
|
425
423
|
Components['sause_lab'] = SauseLabIcon;
|
|
426
424
|
Components['local'] = LocalIcon;
|
|
427
425
|
Components['internet_explorer'] = InternetExplorerIcon;
|