pixel-react 1.5.5 → 1.5.7
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/.storybook/main.ts +7 -1
- package/lib/components/Charts/LineChart/types.d.ts +3 -0
- 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/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
- package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
- package/lib/index.d.ts +52 -2
- package/lib/index.esm.js +950 -581
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +950 -580
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/dashboard_icon.svg +31 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/info_user.svg +5 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/styles/_colors.scss +1 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/Charts/LineChart/LineChart.scss +8 -7
- package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
- package/src/components/Charts/LineChart/LineChart.tsx +30 -27
- package/src/components/Charts/LineChart/types.ts +22 -20
- 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 +4 -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
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -79,64 +79,55 @@
|
|
79
79
|
top: -6px;
|
80
80
|
pointer-events: none;
|
81
81
|
}
|
82
|
-
.ff-multiselect-chip-
|
83
|
-
width: 100%;
|
82
|
+
.ff-multiselect-chip-container {
|
84
83
|
display: flex;
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
.
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
height:
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
line-height: 14px;
|
102
|
-
color: var(--tooltip-bg-color);
|
103
|
-
&.label-padding {
|
104
|
-
padding: 5px 2px;
|
105
|
-
}
|
106
|
-
}
|
107
|
-
.ff-multiselect-chip-close-icon {
|
108
|
-
color: var(--brand-color);
|
109
|
-
cursor: pointer;
|
84
|
+
flex-wrap: wrap;
|
85
|
+
align-items: center;
|
86
|
+
gap: 5px;
|
87
|
+
.ff-multiselect-chip {
|
88
|
+
@include flex-center;
|
89
|
+
box-sizing: border-box;
|
90
|
+
border: 0.5px solid var(--tabs-border-color);
|
91
|
+
padding-left: 4px;
|
92
|
+
gap: 4px;
|
93
|
+
height: 16px;
|
94
|
+
border-radius: 15px;
|
95
|
+
.ff-multiselect-chip-label {
|
96
|
+
line-height: 14px;
|
97
|
+
color: var(--tooltip-bg-color);
|
98
|
+
&.label-padding {
|
99
|
+
padding-right: 3px;
|
110
100
|
}
|
111
101
|
}
|
112
|
-
.ff-multiselect-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
width: 100%;
|
117
|
-
min-width: 30px;
|
118
|
-
max-width: calc(100% - 0px);
|
119
|
-
padding: 2px;
|
120
|
-
box-sizing: border-box;
|
121
|
-
border: none;
|
122
|
-
font-size: 12px;
|
123
|
-
&:focus {
|
124
|
-
outline: none;
|
125
|
-
}
|
126
|
-
}
|
102
|
+
.ff-multiselect-chip-close-icon {
|
103
|
+
color: var(--brand-color);
|
104
|
+
cursor: pointer;
|
105
|
+
padding: 0px;
|
127
106
|
}
|
128
107
|
}
|
129
|
-
.ff-multiselect-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
108
|
+
.ff-multiselect-input-container {
|
109
|
+
flex: 1;
|
110
|
+
min-width: 20px;
|
111
|
+
input {
|
112
|
+
width: 100%;
|
113
|
+
min-width: 30px;
|
114
|
+
max-width: calc(100% - 0px);
|
115
|
+
padding: 2px;
|
116
|
+
box-sizing: border-box;
|
117
|
+
border: none;
|
118
|
+
font-size: 12px;
|
119
|
+
&:focus {
|
120
|
+
outline: none;
|
121
|
+
}
|
122
|
+
}
|
137
123
|
}
|
138
124
|
}
|
139
125
|
}
|
126
|
+
.ff-multiselect-more-chip {
|
127
|
+
display: flex;
|
128
|
+
align-items: center;
|
129
|
+
width: 16px;
|
130
|
+
}
|
140
131
|
&__toggle {
|
141
132
|
display: flex;
|
142
133
|
align-items: center;
|
@@ -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,
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddButton';
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AttachImage from './AttachImage';
|
3
|
-
import { AttachImageProps } from './types';
|
4
|
-
declare const meta: Meta<typeof AttachImage>;
|
5
|
-
export default meta;
|
6
|
-
type Story = StoryObj<AttachImageProps>;
|
7
|
-
export declare const Default: Story;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import IconRadialChart from './IconRadialChart';
|
3
|
-
declare const meta: Meta<typeof IconRadialChart>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof IconRadialChart>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const Mobile: Story;
|
8
|
-
export declare const WithoutIcon: Story;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import LineChart from './LineChart';
|
3
|
-
import { LineChartProps } from './types';
|
4
|
-
declare const meta: Meta<typeof LineChart>;
|
5
|
-
export default meta;
|
6
|
-
export declare const DefaultLineChart: StoryObj<LineChartProps>;
|
7
|
-
export declare const StatusLineChart: StoryObj<LineChartProps>;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import MultiRadialChart from './MultiRadialChart';
|
3
|
-
declare const meta: Meta<typeof MultiRadialChart>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof MultiRadialChart>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const numberLegend: Story;
|
8
|
-
export declare const PillLegend: Story;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import ConnectingBranch from './ConnectingBranch';
|
3
|
-
declare const meta: Meta<typeof ConnectingBranch>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof ConnectingBranch>;
|
6
|
-
export declare const Default: Story;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import EditTextField from './EditTextField';
|
3
|
-
import '../../assets/styles/_colors.scss';
|
4
|
-
import './EditTextField.scss';
|
5
|
-
declare const meta: Meta<typeof EditTextField>;
|
6
|
-
type Story = StoryObj<typeof EditTextField>;
|
7
|
-
export declare const textFieldWithLabel: Story;
|
8
|
-
export declare const textFieldWithOutLabel: Story;
|
9
|
-
export declare const openTextField: Story;
|
10
|
-
export default meta;
|