pixel-react 1.5.9 → 1.6.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.
- package/.yarn/install-state.gz +0 -0
- package/lib/components/AppHeader/AppHeader.d.ts +1 -0
- package/lib/components/AppHeader/types.d.ts +18 -6
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
- package/lib/components/FieldSet/FieldSet.d.ts +5 -0
- package/lib/components/FieldSet/index.d.ts +1 -0
- package/lib/components/FieldSet/types.d.ts +7 -0
- package/lib/components/FileDropzone/types.d.ts +8 -0
- package/lib/components/MachineInputField/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
- package/lib/components/PopUpModal/types.d.ts +14 -0
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
- package/lib/components/TableTree/TableTree.d.ts +4 -24
- package/lib/components/TableTree/data.d.ts +112 -273
- package/lib/components/TableTree/types.d.ts +28 -0
- package/lib/index.d.ts +149 -32
- package/lib/index.esm.js +1104 -742
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1109 -742
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/assets/Themes/BaseTheme.scss +5 -14
- package/src/assets/Themes/DarkTheme.scss +5 -2
- package/src/assets/icons/arrow_up.svg +1 -1
- package/src/assets/icons/export.svg +5 -0
- package/src/assets/icons/import.svg +5 -0
- package/src/assets/icons/info_icon.svg +4 -16
- package/src/assets/icons/replace_file.svg +14 -0
- package/src/assets/icons/web_service_icon.svg +3 -0
- package/src/assets/styles/_fonts.scss +4 -2
- package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
- package/src/components/AppHeader/AppHeader.tsx +158 -139
- package/src/components/AppHeader/types.ts +19 -6
- package/src/components/Charts/BarChart/BarChart.scss +34 -34
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
- package/src/components/Charts/BarChart/BarChart.tsx +79 -55
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
- package/src/components/Charts/LineChart/LineChart.scss +13 -4
- package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
- package/src/components/Charts/LineChart/LineChart.tsx +143 -131
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
- package/src/components/Charts/PieChart/PieChart.scss +5 -3
- package/src/components/Charts/PieChart/PieChart.tsx +1 -2
- package/src/components/Checkbox/Checkbox.tsx +1 -7
- package/src/components/DatePicker/DatePicker.scss +15 -1
- package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
- package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
- package/src/components/FieldSet/FieldSet.scss +9 -0
- package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
- package/src/components/FieldSet/FieldSet.tsx +29 -0
- package/src/components/FieldSet/index.ts +1 -0
- package/src/components/FieldSet/types.ts +8 -0
- package/src/components/FileDropzone/FileDropzone.scss +1 -1
- package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
- package/src/components/FileDropzone/FileDropzone.tsx +5 -0
- package/src/components/FileDropzone/FilePreview.tsx +1 -1
- package/src/components/FileDropzone/types.ts +8 -0
- package/src/components/Icon/Icons.scss +1 -1
- package/src/components/Icon/iconList.ts +11 -7
- package/src/components/MachineInputField/MachineInputField.scss +15 -2
- package/src/components/MachineInputField/MachineInputField.tsx +17 -3
- package/src/components/MachineInputField/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.tsx +7 -3
- package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
- package/src/components/MultiSelect/MultiSelect.tsx +4 -20
- package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
- package/src/components/PopUpModal/PopUpModal.scss +36 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
- package/src/components/PopUpModal/PopUpModal.tsx +85 -0
- package/src/components/PopUpModal/types.ts +14 -0
- package/src/components/RadioGroup/RadioGroup.scss +7 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
- package/src/components/RadioGroup/RadioGroup.tsx +16 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
- package/src/components/Select/Select.tsx +3 -4
- package/src/components/Select/components/Dropdown.tsx +34 -34
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/types.ts +18 -3
- package/src/components/TableTree/TableTree.scss +154 -123
- package/src/components/TableTree/TableTree.stories.tsx +148 -96
- package/src/components/TableTree/TableTree.tsx +250 -282
- package/src/components/TableTree/data.ts +318 -569
- package/src/components/TableTree/types.ts +30 -0
- package/src/components/Toast/Toast.tsx +1 -1
- package/src/index.ts +11 -0
@@ -7,10 +7,11 @@ import Select from '../../Select';
|
|
7
7
|
import { CellBase } from '../ExcelFile/ExcelFileComponents';
|
8
8
|
import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
|
9
9
|
import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
|
10
|
+
import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
|
11
|
+
import { convertStyleToBackend } from '../dataConversion';
|
10
12
|
|
11
13
|
interface ExcelToolBarProps {
|
12
14
|
toolbar?: 'show' | 'disable' | 'hide';
|
13
|
-
data: Matrix.Matrix<CellBase>;
|
14
15
|
onBold: (data: Matrix.Matrix<CellBase>) => void;
|
15
16
|
onItalic: (data: Matrix.Matrix<CellBase>) => void;
|
16
17
|
setUnderlineType: (
|
@@ -33,7 +34,6 @@ interface ExcelToolBarProps {
|
|
33
34
|
|
34
35
|
const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
35
36
|
toolbar = 'show',
|
36
|
-
data,
|
37
37
|
onBold,
|
38
38
|
onItalic,
|
39
39
|
setUnderlineType,
|
@@ -45,6 +45,42 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
45
45
|
setBorderType,
|
46
46
|
setFormatePainter,
|
47
47
|
}) => {
|
48
|
+
const cell = useSelector((state) =>
|
49
|
+
state.active ? Matrix.get(state.active, state.model.data) : null
|
50
|
+
);
|
51
|
+
const data = useSelector((state) => state.model.data);
|
52
|
+
const formattedStyle = useSelector((state) => state.formattedStyle.open);
|
53
|
+
|
54
|
+
const [cellStyle, setCellStyle] = useState(
|
55
|
+
cell?.style || {
|
56
|
+
color: 'var(--text-color)',
|
57
|
+
backgroundColor: 'var(--drawer-footer-bg)',
|
58
|
+
borderColor: 'var(--toggle-strip-color)',
|
59
|
+
}
|
60
|
+
);
|
61
|
+
|
62
|
+
useEffect(() => {
|
63
|
+
setCellStyle(
|
64
|
+
cell?.style || {
|
65
|
+
color: 'var(--text-color)',
|
66
|
+
backgroundColor: 'var(--drawer-footer-bg)',
|
67
|
+
borderColor: 'var(--toggle-strip-color)',
|
68
|
+
}
|
69
|
+
);
|
70
|
+
}, [cell]);
|
71
|
+
|
72
|
+
useEffect(() => {
|
73
|
+
if (
|
74
|
+
cell?.style &&
|
75
|
+
JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
|
76
|
+
) {
|
77
|
+
setCellStyle(cell.style);
|
78
|
+
}
|
79
|
+
}, [cell]);
|
80
|
+
|
81
|
+
const styleBackend = convertStyleToBackend(cellStyle);
|
82
|
+
|
83
|
+
|
48
84
|
const [border, setBorder] = useState<string>('border-none');
|
49
85
|
const [underLine, setUnderLine] = useState<string>('underline');
|
50
86
|
const [selectedFontFamily, setSelectedFontFamily] = useState<{
|
@@ -167,13 +203,13 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
167
203
|
<Tooltip placement="top" title={'Font Family'}>
|
168
204
|
<div className="ff-excel-toolbar-font-family">
|
169
205
|
<Select
|
206
|
+
showLabel={false}
|
170
207
|
onChange={(e) => {
|
171
208
|
setSelectedFontFamily({ label: e.label, value: e.value });
|
172
209
|
setFontFamily(data, e.label);
|
173
210
|
}}
|
174
211
|
required={false}
|
175
212
|
optionsList={fontFamily}
|
176
|
-
label=""
|
177
213
|
selectedOption={selectedFontFamily}
|
178
214
|
/>
|
179
215
|
</div>
|
@@ -181,8 +217,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
181
217
|
<Tooltip placement="top" title={'Font Size'}>
|
182
218
|
<div className="ff-excel-toolbar-font-size">
|
183
219
|
<Select
|
220
|
+
showLabel={false}
|
184
221
|
required={false}
|
185
|
-
label=""
|
186
222
|
onChange={(e) => setFontSize(data, e.value)}
|
187
223
|
optionsList={fontSize}
|
188
224
|
selectedOption={{
|
@@ -197,6 +233,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
197
233
|
<div className="ff-excel-toolbar-icon">
|
198
234
|
<Tooltip placement="top" title={'Text Left'}>
|
199
235
|
<Icon
|
236
|
+
variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
|
200
237
|
hoverEffect
|
201
238
|
disabled={toolbar === 'disable'}
|
202
239
|
onClick={() => setTextAlign(data, 'left')}
|
@@ -205,6 +242,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
205
242
|
</Tooltip>
|
206
243
|
<Tooltip placement="top" title={'Text Center'}>
|
207
244
|
<Icon
|
245
|
+
variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
|
208
246
|
hoverEffect
|
209
247
|
disabled={toolbar === 'disable'}
|
210
248
|
onClick={() => setTextAlign(data, 'center')}
|
@@ -214,6 +252,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
214
252
|
|
215
253
|
<Tooltip placement="top" title={'Text Right'}>
|
216
254
|
<Icon
|
255
|
+
variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
|
217
256
|
hoverEffect
|
218
257
|
disabled={toolbar === 'disable'}
|
219
258
|
onClick={() => setTextAlign(data, 'right')}
|
@@ -225,6 +264,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
225
264
|
<div className="ff-excel-toolbar-text">
|
226
265
|
<Tooltip placement="top" title={'Bold'}>
|
227
266
|
<Icon
|
267
|
+
variant={styleBackend.bold ? 'dark' : 'light'}
|
228
268
|
hoverEffect
|
229
269
|
disabled={toolbar === 'disable'}
|
230
270
|
onClick={() => onBold(data)}
|
@@ -234,6 +274,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
234
274
|
<Tooltip placement="top" title={'Italic'}>
|
235
275
|
<Icon
|
236
276
|
hoverEffect
|
277
|
+
variant={styleBackend.italic ? 'dark' : 'light'}
|
237
278
|
disabled={toolbar === 'disable'}
|
238
279
|
onClick={() => onItalic(data)}
|
239
280
|
name="italic"
|
@@ -242,6 +283,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
242
283
|
<Tooltip placement="top" title={'Underline Type'}>
|
243
284
|
<div className="ff-excel-toolbar-icon-underline">
|
244
285
|
<Icon
|
286
|
+
variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
|
245
287
|
hoverEffect
|
246
288
|
disabled={toolbar === 'disable'}
|
247
289
|
onClick={() => setUnderlineType(data, underLine, true)}
|
@@ -266,6 +308,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
266
308
|
<div className="ff-excel-toolbar-icon">
|
267
309
|
<Tooltip placement="top" title={'Format Painter'}>
|
268
310
|
<Icon
|
311
|
+
variant={formattedStyle?'dark':'light'}
|
269
312
|
hoverEffect
|
270
313
|
disabled={toolbar === 'disable'}
|
271
314
|
onClick={() => {
|
@@ -0,0 +1,103 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
3
|
+
import FieldSet from './FieldSet';
|
4
|
+
|
5
|
+
const meta: Meta<typeof FieldSet> = {
|
6
|
+
title: 'Components/FieldSet',
|
7
|
+
component: FieldSet,
|
8
|
+
parameters: {
|
9
|
+
layout: 'centered',
|
10
|
+
},
|
11
|
+
tags: ['autodocs'],
|
12
|
+
};
|
13
|
+
|
14
|
+
type Story = StoryObj<typeof FieldSet>;
|
15
|
+
|
16
|
+
const defaultArgs = {
|
17
|
+
legendName: 'Default Legend',
|
18
|
+
height: '200px',
|
19
|
+
width: '300px',
|
20
|
+
children: 'Default content inside the FieldSet.',
|
21
|
+
};
|
22
|
+
|
23
|
+
export const Default: Story = {
|
24
|
+
args: {
|
25
|
+
...defaultArgs,
|
26
|
+
},
|
27
|
+
};
|
28
|
+
|
29
|
+
export const CustomDimensions: Story = {
|
30
|
+
args: {
|
31
|
+
...defaultArgs,
|
32
|
+
height: '300px',
|
33
|
+
width: '400px',
|
34
|
+
legendName: 'Custom Dimensions',
|
35
|
+
},
|
36
|
+
};
|
37
|
+
|
38
|
+
export const WithNestedChildren: Story = {
|
39
|
+
args: {
|
40
|
+
...defaultArgs,
|
41
|
+
legendName: 'Nested Content',
|
42
|
+
children: (
|
43
|
+
<div>
|
44
|
+
<p>This is some nested content inside the FieldSet.</p>
|
45
|
+
<button>Click Me</button>
|
46
|
+
</div>
|
47
|
+
),
|
48
|
+
},
|
49
|
+
};
|
50
|
+
|
51
|
+
export const Controlled: Story = {
|
52
|
+
render: () => {
|
53
|
+
const [legend, setLegend] = useState('Controlled FieldSet');
|
54
|
+
const [content, setContent] = useState('Initial Content');
|
55
|
+
|
56
|
+
const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
|
57
|
+
setLegend(event.target.value);
|
58
|
+
|
59
|
+
const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
|
60
|
+
setContent(event.target.value);
|
61
|
+
|
62
|
+
return (
|
63
|
+
<>
|
64
|
+
<div style={{ marginBottom: '1rem' }}>
|
65
|
+
<label>
|
66
|
+
Legend:
|
67
|
+
<input
|
68
|
+
type="text"
|
69
|
+
value={legend}
|
70
|
+
onChange={handleLegendChange}
|
71
|
+
style={{ marginLeft: '0.5rem' }}
|
72
|
+
/>
|
73
|
+
</label>
|
74
|
+
</div>
|
75
|
+
<div style={{ marginBottom: '1rem' }}>
|
76
|
+
<label>
|
77
|
+
Content:
|
78
|
+
<input
|
79
|
+
type="text"
|
80
|
+
value={content}
|
81
|
+
onChange={handleContentChange}
|
82
|
+
style={{ marginLeft: '0.5rem' }}
|
83
|
+
/>
|
84
|
+
</label>
|
85
|
+
</div>
|
86
|
+
<FieldSet legendName={legend} height="250px" width="350px">
|
87
|
+
{content}
|
88
|
+
</FieldSet>
|
89
|
+
</>
|
90
|
+
);
|
91
|
+
},
|
92
|
+
};
|
93
|
+
|
94
|
+
export const EmptyFieldSet: Story = {
|
95
|
+
args: {
|
96
|
+
legendName: 'Empty FieldSet',
|
97
|
+
height: '32px',
|
98
|
+
width: '317px',
|
99
|
+
children: null,
|
100
|
+
},
|
101
|
+
};
|
102
|
+
|
103
|
+
export default meta;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { FC } from 'react';
|
2
|
+
import './FieldSet.scss';
|
3
|
+
import { fieldSetProps } from './types';
|
4
|
+
import Typography from '../Typography';
|
5
|
+
const FieldSet: FC<fieldSetProps> = ({
|
6
|
+
legendName,
|
7
|
+
height,
|
8
|
+
width,
|
9
|
+
children,
|
10
|
+
}) => {
|
11
|
+
return (
|
12
|
+
<div className="ff_fieldSet_container">
|
13
|
+
<fieldset className="ff_fieldSet" style={{ height, width }}>
|
14
|
+
<legend className="ff_legend_container">
|
15
|
+
<Typography
|
16
|
+
color="var(--license_header_text_color)"
|
17
|
+
fontSize={8}
|
18
|
+
lineHeight="12px"
|
19
|
+
>
|
20
|
+
{legendName}
|
21
|
+
</Typography>
|
22
|
+
</legend>
|
23
|
+
<div className="ff_children_container">{children}</div>
|
24
|
+
</fieldset>
|
25
|
+
</div>
|
26
|
+
);
|
27
|
+
};
|
28
|
+
|
29
|
+
export default FieldSet;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './FieldSet';
|
@@ -1,8 +1,8 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import { StoryObj, Meta } from '@storybook/react';
|
2
3
|
import FileDropzone from './FileDropzone';
|
3
4
|
import Toaster from '../Toast';
|
4
5
|
import { useState } from 'react';
|
5
|
-
import React from 'react';
|
6
6
|
|
7
7
|
const meta: Meta<typeof FileDropzone> = {
|
8
8
|
title: 'Components/FileDropzone',
|
@@ -23,8 +23,8 @@ const defaultArgs = {
|
|
23
23
|
maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
|
24
24
|
invalidFileMessage: 'Invalid file format',
|
25
25
|
fileExistMessage: 'File already exist with same name and type',
|
26
|
-
width:
|
27
|
-
height:
|
26
|
+
width: 640,
|
27
|
+
height: 188,
|
28
28
|
};
|
29
29
|
|
30
30
|
export const Primary: Story = {
|
@@ -49,6 +49,8 @@ export const withMIMEValidation: Story = {
|
|
49
49
|
export const Controlled: Story = {
|
50
50
|
render: () => {
|
51
51
|
const [showToaster, setShowToaster] = useState<boolean>(false);
|
52
|
+
const [acceptedFiles, setAcceptedFiles] = useState([]);
|
53
|
+
const [rejectedFiles, setRejectedFiles] = useState([]);
|
52
54
|
|
53
55
|
const showMaxFilesError = () => {
|
54
56
|
setShowToaster(true);
|
@@ -57,6 +59,14 @@ export const Controlled: Story = {
|
|
57
59
|
}, 2000);
|
58
60
|
};
|
59
61
|
|
62
|
+
const getAcceptedFiles = (files) => {
|
63
|
+
setAcceptedFiles(files);
|
64
|
+
}
|
65
|
+
|
66
|
+
const getRejectedFiles = (files) => {
|
67
|
+
setRejectedFiles(files);
|
68
|
+
}
|
69
|
+
|
60
70
|
return (
|
61
71
|
<>
|
62
72
|
<FileDropzone
|
@@ -69,6 +79,8 @@ export const Controlled: Story = {
|
|
69
79
|
]}
|
70
80
|
validateMIMEType={true}
|
71
81
|
onMaxFilesError={showMaxFilesError}
|
82
|
+
getAcceptedFiles={getAcceptedFiles}
|
83
|
+
getRejectedFiles={getRejectedFiles}
|
72
84
|
/>
|
73
85
|
{showToaster && (
|
74
86
|
<Toaster
|
@@ -25,6 +25,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
25
25
|
validateMIMEType = false,
|
26
26
|
width = 640,
|
27
27
|
height = 188,
|
28
|
+
getAcceptedFiles = () => {},
|
29
|
+
getRejectedFiles = () => {},
|
28
30
|
}) => {
|
29
31
|
const {
|
30
32
|
getRootProps,
|
@@ -47,6 +49,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
47
49
|
// onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
|
48
50
|
});
|
49
51
|
|
52
|
+
getAcceptedFiles(acceptedFiles);
|
53
|
+
getRejectedFiles(rejectedFiles);
|
54
|
+
|
50
55
|
const acceptedFilesList = useMemo(
|
51
56
|
() =>
|
52
57
|
acceptedFiles.map((file) => (
|
@@ -57,6 +57,14 @@ export interface FileDropzoneProps {
|
|
57
57
|
width?: number | string;
|
58
58
|
|
59
59
|
height?: number | string;
|
60
|
+
/**
|
61
|
+
* Returns the accepted files in the state
|
62
|
+
**/
|
63
|
+
getAcceptedFiles?: (files: File[]) => void;
|
64
|
+
/**
|
65
|
+
* Returns the rejected files in the state
|
66
|
+
**/
|
67
|
+
getRejectedFiles?: (files: FileRejection[]) => void;
|
60
68
|
}
|
61
69
|
export interface FileState {
|
62
70
|
accepted: File[];
|
@@ -31,7 +31,7 @@ import Tick from '../../assets/Icons/tick_icon.svg?react';
|
|
31
31
|
import Search from '../../assets/icons/search.svg?react';
|
32
32
|
import Filter from '../../assets/icons/filter.svg?react';
|
33
33
|
import Alert from '../../assets/icons/alert.svg?react';
|
34
|
-
|
34
|
+
import ReplaceFile from '../../assets/icons/replace_file.svg?react';
|
35
35
|
import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
|
36
36
|
import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
|
37
37
|
import ClockIcon from '../../assets/icons/clock_icon.svg?react';
|
@@ -46,7 +46,7 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
|
|
46
46
|
import DeleteIcon from '../../assets/icons/delete.svg?react';
|
47
47
|
import DetailsIcon from '../../assets/icons/details.svg?react';
|
48
48
|
import ImpactListIcon from '../../assets/icons/impactList.svg?react';
|
49
|
-
|
49
|
+
import Export from '../../assets/icons/export.svg?react';
|
50
50
|
import FormatePainter from '../../assets/icons/formate_painter.svg?react';
|
51
51
|
import Bold from '../../assets/icons/bold.svg?react';
|
52
52
|
import Italic from '../../assets/icons/italic.svg?react';
|
@@ -191,7 +191,7 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
|
|
191
191
|
import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
|
192
192
|
import UserWarning from '../../assets/icons/user_warning.svg?react';
|
193
193
|
import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
|
194
|
-
|
194
|
+
import Import from '../../assets/icons/import.svg?react';
|
195
195
|
import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
|
196
196
|
import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
|
197
197
|
import dashboardWebMobileIcon from '../../assets/icons/web_mobile_icon.svg?react';
|
@@ -221,9 +221,11 @@ import RemoveUser from '../../assets/icons/remove_user.svg?react';
|
|
221
221
|
import AddToArchive from '../../assets/icons/add_archive.svg?react';
|
222
222
|
import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
|
223
223
|
import InfoUser from '../../assets/icons/info_user.svg?react';
|
224
|
+
import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
|
224
225
|
|
225
226
|
Components['success'] = ToastSuccessIcon;
|
226
227
|
Components['alert'] = Alert;
|
228
|
+
Components['alert'] = Alert;
|
227
229
|
Components['delete_info'] = DeleteInfoIcon;
|
228
230
|
Components['warning'] = WarningIcon;
|
229
231
|
Components['toast_info'] = ToastInfoIcon;
|
@@ -266,7 +268,7 @@ Components['details'] = DetailsIcon;
|
|
266
268
|
Components['impactList'] = ImpactListIcon;
|
267
269
|
Components['beautify_icon'] = BeautifyIcon;
|
268
270
|
Components['add_variable'] = AddVariable;
|
269
|
-
|
271
|
+
Components['replace_file'] = ReplaceFile;
|
270
272
|
Components['formate_painter'] = FormatePainter;
|
271
273
|
Components['bold'] = Bold;
|
272
274
|
Components['italic'] = Italic;
|
@@ -286,7 +288,7 @@ Components['text_color'] = TextColor;
|
|
286
288
|
Components['fill_color'] = FillColor;
|
287
289
|
Components['formula_icon'] = FormulaIcon;
|
288
290
|
Components['excel_corner_menu'] = ExcelCornerMenu;
|
289
|
-
|
291
|
+
Components['export'] = Export;
|
290
292
|
Components['apk_file_type'] = ApkFileType;
|
291
293
|
Components['csv_file_type'] = CsvFileType;
|
292
294
|
Components['compressed_file_type'] = CompressedFileType;
|
@@ -301,7 +303,7 @@ Components['ipk_file_type'] = IpkFileType;
|
|
301
303
|
Components['txt_file_type'] = TxtFileType;
|
302
304
|
Components['gif_file_type'] = GifFileType;
|
303
305
|
Components['jpg_file_type'] = JpgFileType;
|
304
|
-
|
306
|
+
Components['import'] = Import;
|
305
307
|
Components['info'] = InfoIcon;
|
306
308
|
Components['calendar_icon'] = CalendarIcon;
|
307
309
|
Components['hide_icon'] = HideIcon;
|
@@ -424,6 +426,7 @@ Components['run_manual_testcase'] = RunManualTestcaseIcon;
|
|
424
426
|
Components['run_automation_scripts'] = RunAutomationScriptsIcon;
|
425
427
|
Components['eye_open_icon'] = EyeOpenIcon;
|
426
428
|
Components['replace_icon'] = ReplaceIcon;
|
429
|
+
Components['replace_icon'] = ReplaceIcon;
|
427
430
|
Components['header_preset'] = HeaderPreset;
|
428
431
|
Components['project_element'] = ProjectElement;
|
429
432
|
Components['element'] = Element;
|
@@ -436,7 +439,8 @@ Components['no_data'] = NoData;
|
|
436
439
|
Components['add_user'] = AddUser;
|
437
440
|
Components['add_to_archive'] = AddToArchive;
|
438
441
|
Components['remove_user'] = RemoveUser;
|
439
|
-
Components['dashboard_icon'] = DashboardIcon
|
442
|
+
Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
|
440
443
|
Components['info_user'] = InfoUser;
|
444
|
+
Components['web_service_icon'] = WebServiceIcon;
|
441
445
|
|
442
446
|
export default Components;
|
@@ -13,7 +13,7 @@
|
|
13
13
|
border-radius: 4px;
|
14
14
|
display: flex;
|
15
15
|
align-items: center;
|
16
|
-
justify-content: space-
|
16
|
+
justify-content: space-between;
|
17
17
|
|
18
18
|
.ff-machine-icon-text-wrapper,
|
19
19
|
.ff-machine-icon-text-wrapper-reverse {
|
@@ -23,8 +23,21 @@
|
|
23
23
|
.ff-machine-icon {
|
24
24
|
margin-left: 4px;
|
25
25
|
}
|
26
|
+
|
27
|
+
.ff-machine-text-reverse,
|
28
|
+
.ff-machine-text {
|
29
|
+
overflow: hidden;
|
30
|
+
white-space: nowrap;
|
31
|
+
text-overflow: ellipsis;
|
32
|
+
min-width: 30px;
|
33
|
+
max-width: 70px;
|
34
|
+
}
|
35
|
+
|
36
|
+
.ff-machine-text-reverse {
|
37
|
+
direction: ltr;
|
38
|
+
}
|
26
39
|
}
|
27
|
-
|
40
|
+
|
28
41
|
.ff-machine-icon-text-wrapper-reverse {
|
29
42
|
flex-direction: row-reverse;
|
30
43
|
}
|
@@ -18,10 +18,19 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
|
18
18
|
ref
|
19
19
|
) => {
|
20
20
|
const getIcon: Record<MachineType['type'], string> = {
|
21
|
-
Local: '
|
21
|
+
Local: 'local',
|
22
|
+
Browserstack: 'browserstack_icon',
|
23
|
+
SauceLabs: 'sause_lab',
|
24
|
+
LambdaTest: 'lambda_icon',
|
22
25
|
mac: 'mac_icon',
|
23
26
|
android: 'android_icon',
|
27
|
+
linux: 'linux',
|
24
28
|
'Google Chrome': 'chrome_icon',
|
29
|
+
'Mozilla Firefox': 'fire_fox',
|
30
|
+
'Microsoft Edge': 'edge',
|
31
|
+
'Internet Explorer': 'internet_explorer',
|
32
|
+
Safari: 'safari_icon',
|
33
|
+
Opera: 'opera',
|
25
34
|
};
|
26
35
|
|
27
36
|
return (
|
@@ -53,9 +62,14 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
|
|
53
62
|
'ff-machine-icon-text-wrapper-reverse': contentReverse,
|
54
63
|
})}
|
55
64
|
>
|
56
|
-
<Icon
|
65
|
+
<Icon
|
66
|
+
name={getIcon[type] || 'local'}
|
67
|
+
className="ff-machine-icon"
|
68
|
+
/>
|
57
69
|
<Typography
|
58
|
-
className=
|
70
|
+
className={classNames('ff-machine-text', {
|
71
|
+
'ff-machine-text-reverse': contentReverse,
|
72
|
+
})}
|
59
73
|
color="var(--ff-machine-input-field-text-color)"
|
60
74
|
>
|
61
75
|
{label}
|
@@ -91,15 +91,19 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
91
91
|
role="option"
|
92
92
|
className={`dropdown-option-container`}
|
93
93
|
key={getLabel(info, labelAccessor)}
|
94
|
-
onClick={() =>
|
95
|
-
|
94
|
+
onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
|
95
|
+
const target = e.target as HTMLInputElement;
|
96
|
+
if(target.type==='checkbox'){
|
97
|
+
return
|
98
|
+
}
|
99
|
+
!info?.isDisabled && handleOptionChange(info, !info.isChecked);
|
100
|
+
}
|
96
101
|
}
|
97
102
|
>
|
98
103
|
<Checkbox
|
99
104
|
checked={info.isChecked}
|
100
105
|
disabled={info?.isDisabled}
|
101
106
|
/>
|
102
|
-
|
103
107
|
<Tooltip
|
104
108
|
zIndex={zIndex + 1}
|
105
109
|
title={
|
@@ -87,7 +87,7 @@ export const Default3: Story = {
|
|
87
87
|
};
|
88
88
|
export const EmailGroup: Story = {
|
89
89
|
render: () => {
|
90
|
-
const [options] = useState([
|
90
|
+
const [options,setOptions] = useState([
|
91
91
|
{
|
92
92
|
label: 'Sample1@gmail.com',
|
93
93
|
value: 'sample1@gmail.com',
|
@@ -109,6 +109,10 @@ export const EmailGroup: Story = {
|
|
109
109
|
) => {
|
110
110
|
setSelectedOptions(options);
|
111
111
|
};
|
112
|
+
const onEnter=(newOption:string)=>{
|
113
|
+
setOptions(prev=>[...prev,{label:newOption,value:newOption}])
|
114
|
+
setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
|
115
|
+
}
|
112
116
|
return (
|
113
117
|
<MultiSelect
|
114
118
|
label={'Enter Email'}
|
@@ -120,6 +124,7 @@ export const EmailGroup: Story = {
|
|
120
124
|
acceptNewOption={true}
|
121
125
|
displayCount={true}
|
122
126
|
labelAccessor="label"
|
127
|
+
onEnter={onEnter}
|
123
128
|
/>
|
124
129
|
);
|
125
130
|
},
|
@@ -76,8 +76,9 @@ const MultiSelect = ({
|
|
76
76
|
highlightedMachine = '',
|
77
77
|
onSelectButtonClick = () => {},
|
78
78
|
labelAccessor = '',
|
79
|
-
valueAccessor =
|
79
|
+
valueAccessor = labelAccessor,
|
80
80
|
withSelectButton = variant === 'machines' ? true : false,
|
81
|
+
onEnter=()=>{}
|
81
82
|
}: MultiSelectProps) => {
|
82
83
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
83
84
|
const [allOptions, setAllOptions] = useState(options);
|
@@ -168,25 +169,8 @@ const MultiSelect = ({
|
|
168
169
|
return;
|
169
170
|
}
|
170
171
|
}
|
171
|
-
|
172
|
-
const newOption = {
|
173
|
-
[labelAccessor]: searchedKeyword,
|
174
|
-
[valueAccessor]: searchedKeyword.toLowerCase(),
|
175
|
-
isChecked: true,
|
176
|
-
};
|
177
|
-
const filteredOptions = [...allOptions].filter(
|
178
|
-
(option) => option.isChecked === true
|
179
|
-
);
|
180
|
-
|
181
|
-
setAllOptions([...allOptions, newOption]);
|
172
|
+
onEnter?.(searchedKeyword)
|
182
173
|
setSearchedKeyword('');
|
183
|
-
onChange?.([
|
184
|
-
...filteredOptions,
|
185
|
-
{
|
186
|
-
[labelAccessor]: searchedKeyword,
|
187
|
-
[valueAccessor]: searchedKeyword.toLocaleLowerCase(),
|
188
|
-
},
|
189
|
-
]);
|
190
174
|
setIsOpen(false);
|
191
175
|
}
|
192
176
|
};
|
@@ -447,7 +431,7 @@ const MultiSelect = ({
|
|
447
431
|
className="error-text"
|
448
432
|
/>
|
449
433
|
)}
|
450
|
-
{displayIcon && (
|
434
|
+
{displayIcon && variant==='labels' && (
|
451
435
|
<Typography
|
452
436
|
onClick={onManageLabelsClick}
|
453
437
|
fontSize={8}
|