pixel-react 1.5.5 → 1.5.6
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/DatePicker/types.d.ts +4 -0
- package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
- package/lib/components/FileDropzone/types.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
- package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
- package/lib/index.d.ts +49 -2
- package/lib/index.esm.js +899 -550
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +899 -549
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/dashboard_icon.svg +31 -0
- package/src/assets/styles/_colors.scss +1 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/DatePicker/DatePicker.scss +4 -3
- package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
- package/src/components/DatePicker/DatePicker.tsx +62 -49
- package/src/components/DatePicker/types.ts +5 -0
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
- package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
- package/src/components/Excel/ExcelFile.stories.tsx +42 -43
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
- package/src/components/FileDropzone/Dropzone.tsx +2 -0
- package/src/components/FileDropzone/FileDropzone.scss +1 -2
- package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
- package/src/components/FileDropzone/FileDropzone.tsx +11 -3
- package/src/components/FileDropzone/types.ts +5 -0
- package/src/components/Icon/Icon.stories.tsx +5 -4
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/MultiSelect/MultiSelect.scss +41 -50
- package/src/components/MultiSelect/MultiSelect.tsx +48 -48
- package/src/components/Select/Select.scss +11 -1
- package/src/components/Select/Select.tsx +2 -2
- package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
- package/src/components/StateDropdown/StateDropdown.tsx +27 -12
- package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
- package/src/components/TableTree/TableTree.scss +17 -15
- package/src/components/TableTree/TableTree.tsx +42 -40
- package/src/index.ts +2 -0
@@ -38,7 +38,9 @@ const ChipElement = ({
|
|
38
38
|
title={label?.length > 25 ? label : ''}
|
39
39
|
zIndex={zIndex + 1}
|
40
40
|
>
|
41
|
-
{
|
41
|
+
<Typography fontSize={10} lineHeight={'14px'} className="stye">
|
42
|
+
{truncateText(label, 25)}
|
43
|
+
</Typography>
|
42
44
|
</Tooltip>
|
43
45
|
</span>
|
44
46
|
{!disableChip && (
|
@@ -342,6 +344,7 @@ const MultiSelect = ({
|
|
342
344
|
(isFieldSkipped && required),
|
343
345
|
'default-label': !isOpen && !selectedOptions?.length,
|
344
346
|
})}
|
347
|
+
required={required}
|
345
348
|
children={label}
|
346
349
|
/>
|
347
350
|
) : (
|
@@ -355,26 +358,10 @@ const MultiSelect = ({
|
|
355
358
|
)}
|
356
359
|
|
357
360
|
{!withSelectButton && (
|
358
|
-
<div className=
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
{selectedOptions
|
363
|
-
.slice(0, maxVisibleChips)
|
364
|
-
.map((option) => (
|
365
|
-
<ChipElement
|
366
|
-
zIndex={zIndex}
|
367
|
-
key={getLabel(option, labelAccessor)}
|
368
|
-
label={getLabel(option, labelAccessor) || ''}
|
369
|
-
onChipCloseClick={(e) =>
|
370
|
-
handleChipCloseClick(option, e)
|
371
|
-
}
|
372
|
-
disableChip={option?.isDisabled || false}
|
373
|
-
/>
|
374
|
-
))}
|
375
|
-
</>
|
376
|
-
) : (
|
377
|
-
selectedOptions.map((option) => (
|
361
|
+
<div className="ff-multiselect-chip-container">
|
362
|
+
{displayCount ? (
|
363
|
+
<>
|
364
|
+
{selectedOptions.slice(0, maxVisibleChips).map((option) => (
|
378
365
|
<ChipElement
|
379
366
|
zIndex={zIndex}
|
380
367
|
key={getLabel(option, labelAccessor)}
|
@@ -384,38 +371,51 @@ const MultiSelect = ({
|
|
384
371
|
}
|
385
372
|
disableChip={option?.isDisabled || false}
|
386
373
|
/>
|
387
|
-
))
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
onKeyDown={handleKeyEnter}
|
398
|
-
id="input-ele"
|
399
|
-
className="ff-select-input"
|
400
|
-
style={{
|
401
|
-
display:
|
402
|
-
isOpen || selectedOptions.length ? 'inherit' : 'none',
|
403
|
-
}}
|
374
|
+
))}
|
375
|
+
</>
|
376
|
+
) : (
|
377
|
+
selectedOptions.map((option) => (
|
378
|
+
<ChipElement
|
379
|
+
zIndex={zIndex}
|
380
|
+
key={getLabel(option, labelAccessor)}
|
381
|
+
label={getLabel(option, labelAccessor) || ''}
|
382
|
+
onChipCloseClick={(e) => handleChipCloseClick(option, e)}
|
383
|
+
disableChip={option?.isDisabled || false}
|
404
384
|
/>
|
405
|
-
|
406
|
-
</div>
|
407
|
-
{hiddenCount > 0 && displayCount && (
|
408
|
-
<div
|
409
|
-
className="ff-multiselect-more-chip"
|
410
|
-
onClick={toggleDropdown}
|
411
|
-
>
|
412
|
-
+{hiddenCount}
|
413
|
-
</div>
|
385
|
+
))
|
414
386
|
)}
|
387
|
+
<div className="ff-multiselect-input-container">
|
388
|
+
<input
|
389
|
+
value={searchedKeyword}
|
390
|
+
type={type}
|
391
|
+
autoComplete="off"
|
392
|
+
placeholder={placeholderForSearching}
|
393
|
+
ref={inputRef}
|
394
|
+
onChange={handleSearch}
|
395
|
+
onKeyDown={handleKeyEnter}
|
396
|
+
id="input-ele"
|
397
|
+
className="ff-select-input"
|
398
|
+
style={{
|
399
|
+
display:
|
400
|
+
isOpen || selectedOptions.length ? 'inherit' : 'none',
|
401
|
+
}}
|
402
|
+
/>
|
403
|
+
</div>
|
415
404
|
</div>
|
416
405
|
)}
|
417
406
|
</div>
|
418
|
-
|
407
|
+
{hiddenCount > 0 && displayCount && (
|
408
|
+
<div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
|
409
|
+
<Typography
|
410
|
+
fontSize={12}
|
411
|
+
fontWeight="semi-bold"
|
412
|
+
lineHeight="16px"
|
413
|
+
color="var(--brand-color)"
|
414
|
+
>
|
415
|
+
+{hiddenCount}
|
416
|
+
</Typography>
|
417
|
+
</div>
|
418
|
+
)}
|
419
419
|
<div
|
420
420
|
onClick={(e) => {
|
421
421
|
toggleDropdown(e);
|
@@ -38,7 +38,17 @@
|
|
38
38
|
box-sizing: border-box;
|
39
39
|
|
40
40
|
&:hover {
|
41
|
-
|
41
|
+
border-color: var(--ff-select-brand-color);
|
42
|
+
|
43
|
+
.ff-select-labels {
|
44
|
+
color: var(--ff-select-default-color);
|
45
|
+
}
|
46
|
+
|
47
|
+
.ff-select-arrows-wrapper {
|
48
|
+
.ff-select-arrows {
|
49
|
+
@include svg-path-style(var(--ff-select-text-hover-color));
|
50
|
+
}
|
51
|
+
}
|
42
52
|
}
|
43
53
|
|
44
54
|
.ff-select-inputField {
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import StateDropdown from './StateDropdown';
|
3
|
+
import React from 'react';
|
3
4
|
|
4
5
|
const meta: Meta<typeof StateDropdown> = {
|
5
6
|
title: 'Components/StateDropdown',
|
@@ -23,6 +24,8 @@ export const Disable: Story = {
|
|
23
24
|
isApprovePage: false,
|
24
25
|
disabled: true,
|
25
26
|
userHasOnlyViewAccess: true,
|
27
|
+
showBorder: true,
|
28
|
+
height:24,
|
26
29
|
},
|
27
30
|
};
|
28
31
|
|
@@ -91,6 +94,8 @@ export const NewState: Story = {
|
|
91
94
|
disabled={false}
|
92
95
|
isOnlyReviewer={false}
|
93
96
|
userHasOnlyViewAccess={false}
|
97
|
+
showBorder={true}
|
98
|
+
height={24}
|
94
99
|
/>
|
95
100
|
);
|
96
101
|
},
|
@@ -11,6 +11,9 @@ const StateDropdown = ({
|
|
11
11
|
disabled = false,
|
12
12
|
isOnlyReviewer = false,
|
13
13
|
userHasOnlyViewAccess = false,
|
14
|
+
showBorder=true,
|
15
|
+
height=24,
|
16
|
+
zIndex=100,
|
14
17
|
}: StateDropdownProps) => {
|
15
18
|
let currentState = value.toUpperCase();
|
16
19
|
let content;
|
@@ -129,9 +132,11 @@ const StateDropdown = ({
|
|
129
132
|
optionsList={options}
|
130
133
|
selectedOption={selectedOption}
|
131
134
|
showLabel={false}
|
132
|
-
showBorder={
|
135
|
+
showBorder={showBorder}
|
133
136
|
disableInput={true}
|
134
|
-
height={
|
137
|
+
height={height}
|
138
|
+
selectedOptionColor={'var(--brand-color'}
|
139
|
+
optionZIndex={zIndex}
|
135
140
|
/>
|
136
141
|
) : (
|
137
142
|
<Select
|
@@ -141,9 +146,11 @@ const StateDropdown = ({
|
|
141
146
|
optionsList={options}
|
142
147
|
selectedOption={selectedOption}
|
143
148
|
showLabel={false}
|
144
|
-
showBorder={
|
149
|
+
showBorder={showBorder}
|
145
150
|
disableInput={true}
|
146
|
-
height={
|
151
|
+
height={height}
|
152
|
+
selectedOptionColor={'var(--brand-color'}
|
153
|
+
optionZIndex={zIndex}
|
147
154
|
/>
|
148
155
|
);
|
149
156
|
} else if (
|
@@ -158,9 +165,11 @@ const StateDropdown = ({
|
|
158
165
|
optionsList={options}
|
159
166
|
selectedOption={selectedOption}
|
160
167
|
showLabel={false}
|
161
|
-
showBorder={
|
168
|
+
showBorder={showBorder}
|
162
169
|
disableInput={true}
|
163
|
-
height={
|
170
|
+
height={height}
|
171
|
+
selectedOptionColor={'var(--brand-color'}
|
172
|
+
optionZIndex={zIndex}
|
164
173
|
/>
|
165
174
|
);
|
166
175
|
} else if (currentState === 'APPROVED') {
|
@@ -172,9 +181,11 @@ const StateDropdown = ({
|
|
172
181
|
optionsList={options}
|
173
182
|
selectedOption={selectedOption}
|
174
183
|
showLabel={false}
|
175
|
-
showBorder={
|
184
|
+
showBorder={showBorder}
|
176
185
|
disableInput={true}
|
177
|
-
height={
|
186
|
+
height={height}
|
187
|
+
selectedOptionColor={'var(--brand-color'}
|
188
|
+
optionZIndex={zIndex}
|
178
189
|
/>
|
179
190
|
);
|
180
191
|
} else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
|
@@ -186,9 +197,11 @@ const StateDropdown = ({
|
|
186
197
|
optionsList={options}
|
187
198
|
selectedOption={selectedOption}
|
188
199
|
showLabel={false}
|
189
|
-
showBorder={
|
200
|
+
showBorder={showBorder}
|
190
201
|
disableInput={true}
|
191
|
-
height={
|
202
|
+
height={height}
|
203
|
+
selectedOptionColor={'var(--brand-color'}
|
204
|
+
optionZIndex={zIndex}
|
192
205
|
/>
|
193
206
|
);
|
194
207
|
} else if (currentState === 'NEW' && userHasOnlyViewAccess) {
|
@@ -200,9 +213,11 @@ const StateDropdown = ({
|
|
200
213
|
optionsList={options}
|
201
214
|
selectedOption={selectedOption}
|
202
215
|
showLabel={false}
|
203
|
-
showBorder={
|
216
|
+
showBorder={showBorder}
|
204
217
|
disableInput={true}
|
205
|
-
height={
|
218
|
+
height={height}
|
219
|
+
selectedOptionColor={'var(--brand-color'}
|
220
|
+
optionZIndex={zIndex}
|
206
221
|
/>
|
207
222
|
);
|
208
223
|
} else {
|
@@ -108,17 +108,21 @@
|
|
108
108
|
padding: 0 8px;
|
109
109
|
white-space: nowrap;
|
110
110
|
text-overflow: ellipsis;
|
111
|
-
|
112
111
|
&:first-child {
|
113
|
-
position: sticky;
|
114
|
-
|
115
112
|
padding-left: calc(var(--level) * var(--indent-size));
|
116
113
|
height: 32px;
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
114
|
+
z-index: 0;
|
115
|
+
}
|
116
|
+
|
117
|
+
.first-div {
|
118
|
+
background-color: white;
|
119
|
+
display: flex;
|
120
|
+
width: 100%;
|
121
|
+
height: 32px;
|
122
|
+
|
123
|
+
&:hover {
|
124
|
+
background-color: var(--hover-color);
|
125
|
+
}
|
122
126
|
&::before {
|
123
127
|
content: '';
|
124
128
|
position: absolute;
|
@@ -126,7 +130,6 @@
|
|
126
130
|
left: calc(var(--level) * var(--indent-size) - 4px);
|
127
131
|
width: 1px;
|
128
132
|
height: calc(var(--total-children-height));
|
129
|
-
// background-color: var(--tree-connecting-lines-color);
|
130
133
|
background-color: var(--tree-connecting-lines-color);
|
131
134
|
z-index: 9999;
|
132
135
|
}
|
@@ -155,15 +158,14 @@
|
|
155
158
|
content: none;
|
156
159
|
}
|
157
160
|
}
|
158
|
-
|
159
|
-
th:first-child,
|
160
|
-
td:first-child {
|
161
|
-
position: sticky;
|
162
|
-
left: 0;
|
163
|
-
}
|
164
161
|
}
|
165
162
|
|
166
163
|
.ff-title-action-container {
|
167
164
|
display: none;
|
168
165
|
align-items: center;
|
169
166
|
}
|
167
|
+
th:first-child,
|
168
|
+
td:first-child {
|
169
|
+
position: sticky;
|
170
|
+
left: 0;
|
171
|
+
}
|
@@ -169,46 +169,48 @@ const TableTree = ({
|
|
169
169
|
if (column.accessor === 'title') {
|
170
170
|
return (
|
171
171
|
<td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
|
172
|
-
<
|
173
|
-
{
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
172
|
+
<div className="first-div">
|
173
|
+
{' '}
|
174
|
+
<span className="ff-toggle-folder" onClick={handleToggleExpand}>
|
175
|
+
{node.folder && (
|
176
|
+
<span
|
177
|
+
className={`ff-toggle-arrow-icon ${
|
178
|
+
isExpanded ? 'ff-expanded' : 'ff-collapsed'
|
179
|
+
}`}
|
180
|
+
>
|
181
|
+
<Arrow />
|
182
|
+
</span>
|
183
|
+
)}
|
184
|
+
</span>
|
185
|
+
<div
|
186
|
+
className="ff-title"
|
187
|
+
style={{ fontWeight: node.folder ? 600 : 400 }}
|
188
|
+
onClick={(event) => onClick(event, node)}
|
189
|
+
>
|
190
|
+
{select === 'checkbox' && (
|
191
|
+
<Checkbox
|
192
|
+
checked={selected.includes(node.key)}
|
193
|
+
onChange={(e) => handleCheckBoxChange(e, node)}
|
194
|
+
/>
|
195
|
+
)}
|
196
|
+
{select === 'radio' && (
|
197
|
+
<RadioButton
|
198
|
+
name={node.title}
|
199
|
+
value={node.key}
|
200
|
+
onChange={(e) => handleCheckBoxChange(e, node)}
|
201
|
+
/>
|
202
|
+
)}
|
203
|
+
|
204
|
+
<Typography className="ff-title-label" fontWeight="medium">
|
205
|
+
{prepareData(node, column)}
|
206
|
+
</Typography>
|
207
|
+
|
208
|
+
{column.actions && (
|
209
|
+
<div className="ff-title-action-container">
|
210
|
+
{column.actions(node)}
|
211
|
+
</div>
|
212
|
+
)}
|
213
|
+
</div>
|
212
214
|
</div>
|
213
215
|
</td>
|
214
216
|
);
|
package/src/index.ts
CHANGED
@@ -64,6 +64,7 @@ import StatusCard from './components/StatusCard';
|
|
64
64
|
import VariableDropdown from './components/Editor/VariableDropdown';
|
65
65
|
|
66
66
|
import LineChart from './components/Charts/LineChart';
|
67
|
+
import DownloadClient from './components/DownloadClient/DownloadClient';
|
67
68
|
// Utils imports
|
68
69
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
69
70
|
import {
|
@@ -157,6 +158,7 @@ export {
|
|
157
158
|
ToggleSwitch,
|
158
159
|
Avatar,
|
159
160
|
VariableDropdown,
|
161
|
+
DownloadClient,
|
160
162
|
// utils exports
|
161
163
|
checkEmpty,
|
162
164
|
getExtension,
|