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
@@ -1,36 +1,96 @@
|
|
1
|
-
.excel-
|
2
|
-
|
1
|
+
.ff-excel-toolbar {
|
2
|
+
display: flex;
|
3
|
+
height: 32px;
|
3
4
|
align-items: center;
|
4
5
|
|
5
|
-
.excel-toolbar {
|
6
|
+
.ff-excel-toolbar-divider {
|
7
|
+
width: 1px;
|
8
|
+
height: 24px;
|
9
|
+
background-color: var(--excel-toolbar-divider);
|
10
|
+
margin: 0 24px;
|
11
|
+
border-radius: 1px;
|
12
|
+
z-index: 1000;
|
13
|
+
}
|
14
|
+
|
15
|
+
.ff-excel-toolbar-font {
|
6
16
|
display: flex;
|
7
|
-
|
8
|
-
justify-content:
|
9
|
-
|
10
|
-
|
17
|
+
gap: 8px;
|
18
|
+
justify-content: space-between;
|
19
|
+
.ff-excel-toolbar-font-family {
|
20
|
+
width: 120px;
|
21
|
+
}
|
22
|
+
.ff-excel-toolbar-font-size {
|
23
|
+
width: 56px;
|
24
|
+
}
|
11
25
|
}
|
12
26
|
|
13
|
-
.excel-toolbar-
|
27
|
+
.ff-excel-toolbar-text {
|
28
|
+
width: 100px;
|
29
|
+
height: 24px;
|
14
30
|
display: flex;
|
15
|
-
|
16
|
-
justify-content: space-
|
17
|
-
|
18
|
-
|
19
|
-
.menu-option {
|
31
|
+
gap: 8px;
|
32
|
+
justify-content: space-between;
|
33
|
+
|
34
|
+
.ff-excel-toolbar-icon-underline {
|
20
35
|
display: flex;
|
21
|
-
flex-direction: column;
|
22
36
|
align-items: center;
|
23
|
-
justify-content: center;
|
24
|
-
cursor: pointer;
|
25
37
|
}
|
26
38
|
}
|
27
39
|
|
28
|
-
.excel-toolbar-
|
40
|
+
.ff-excel-toolbar-icon {
|
41
|
+
width: 88px;
|
42
|
+
height: 24px;
|
29
43
|
display: flex;
|
30
|
-
|
44
|
+
gap: 8px;
|
45
|
+
justify-content: space-between;
|
46
|
+
|
47
|
+
.ff-excel-toolbar-icon-color {
|
48
|
+
width: 24px;
|
49
|
+
height: 24px;
|
50
|
+
border-radius: 4px;
|
51
|
+
position: relative;
|
52
|
+
display: flex;
|
53
|
+
flex-direction: column;
|
54
|
+
align-items: center;
|
55
|
+
&:hover {
|
56
|
+
border-radius: 4px;
|
57
|
+
background-color: var(--icon-hover-color);
|
58
|
+
}
|
59
|
+
.ff-icon-dark & {
|
60
|
+
background-color: var(--brand-color);
|
61
|
+
|
62
|
+
&.ff-icon-click:hover {
|
63
|
+
background-color: var(--primary-button-text-color);
|
64
|
+
svg path {
|
65
|
+
fill: var(--brand-color);
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
&:hover {
|
70
|
+
border-radius: 4px;
|
71
|
+
background-color: var(--icon-hover-color);
|
72
|
+
}
|
73
|
+
.ff-icon-dark & {
|
74
|
+
background-color: var(--brand-color);
|
75
|
+
|
76
|
+
&.ff-icon-click:hover {
|
77
|
+
background-color: var(--primary-button-text-color);
|
78
|
+
svg path {
|
79
|
+
fill: var(--brand-color);
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
}
|
31
84
|
}
|
32
85
|
|
33
|
-
.excel-toolbar-
|
34
|
-
display:
|
86
|
+
.ff-excel-toolbar-menu {
|
87
|
+
display: flex;
|
88
|
+
align-items: center;
|
89
|
+
width: 36px;
|
90
|
+
height: 24px;
|
91
|
+
.ff-excel-toolbar-menu-option {
|
92
|
+
display: flex;
|
93
|
+
align-items: center;
|
94
|
+
}
|
35
95
|
}
|
36
96
|
}
|
@@ -6,7 +6,6 @@ import Icon from '../../Icon';
|
|
6
6
|
import Select from '../../Select';
|
7
7
|
import { CellBase } from '../ExcelFile/ExcelFileComponents';
|
8
8
|
import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
|
9
|
-
import { Col, Row } from '../../GridLayout/GridLayout';
|
10
9
|
import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
|
11
10
|
|
12
11
|
interface ExcelToolBarProps {
|
@@ -46,17 +45,21 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
46
45
|
setBorderType,
|
47
46
|
setFormatePainter,
|
48
47
|
}) => {
|
49
|
-
const [border, setBorder] = useState<string>('border-
|
48
|
+
const [border, setBorder] = useState<string>('border-none');
|
50
49
|
const [underLine, setUnderLine] = useState<string>('underline');
|
50
|
+
const [selectedFontFamily, setSelectedFontFamily] = useState<{
|
51
|
+
label: string;
|
52
|
+
value: string;
|
53
|
+
}>({
|
54
|
+
label: 'Times New Roman',
|
55
|
+
value: '"Times New Roman"',
|
56
|
+
});
|
51
57
|
const [colorContainer, setColorPicker] = useState<ColorContainer>({
|
52
58
|
color: 'var(--error-light)',
|
53
59
|
backgroundColor: 'var(--error-light)',
|
54
60
|
borderColor: 'var(--text-color)',
|
55
61
|
});
|
56
62
|
|
57
|
-
const [formatePainterState, setFormatePainterState] =
|
58
|
-
useState<boolean>(false);
|
59
|
-
|
60
63
|
const borderTypeIcon = [
|
61
64
|
{ value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
|
62
65
|
{ value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
|
@@ -148,194 +151,203 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
148
151
|
};
|
149
152
|
}, [colorContainer.backgroundColor]);
|
150
153
|
|
154
|
+
let getUnderlineIcon = () => {
|
155
|
+
const selectedIcon = underlineTypeIcon.find((e) => e.value === underLine);
|
156
|
+
return selectedIcon ? selectedIcon.icon : '';
|
157
|
+
};
|
158
|
+
|
159
|
+
let getBorderIcon = () => {
|
160
|
+
const selectedIcon = borderTypeIcon.find((e) => e.value === border);
|
161
|
+
return selectedIcon ? selectedIcon.icon : '';
|
162
|
+
};
|
163
|
+
|
151
164
|
return (
|
152
|
-
<
|
153
|
-
<
|
154
|
-
<
|
155
|
-
<
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
165
|
+
<div className="ff-excel-toolbar">
|
166
|
+
<div className="ff-excel-toolbar-font ">
|
167
|
+
<Tooltip placement="top" title={'Font Family'}>
|
168
|
+
<div className="ff-excel-toolbar-font-family">
|
169
|
+
<Select
|
170
|
+
onChange={(e) => {
|
171
|
+
setSelectedFontFamily({ label: e.label, value: e.value });
|
172
|
+
setFontFamily(data, e.label);
|
173
|
+
}}
|
174
|
+
required={false}
|
175
|
+
optionsList={fontFamily}
|
176
|
+
label=""
|
177
|
+
selectedOption={selectedFontFamily}
|
178
|
+
/>
|
179
|
+
</div>
|
180
|
+
</Tooltip>
|
181
|
+
<Tooltip placement="top" title={'Font Size'}>
|
182
|
+
<div className="ff-excel-toolbar-font-size">
|
183
|
+
<Select
|
184
|
+
required={false}
|
185
|
+
label=""
|
186
|
+
onChange={(e) => setFontSize(data, e.value)}
|
187
|
+
optionsList={fontSize}
|
188
|
+
selectedOption={{
|
189
|
+
label: '11',
|
190
|
+
value: '11',
|
191
|
+
}}
|
192
|
+
/>
|
193
|
+
</div>
|
194
|
+
</Tooltip>
|
195
|
+
</div>
|
196
|
+
<div className="ff-excel-toolbar-divider"></div>
|
197
|
+
<div className="ff-excel-toolbar-icon">
|
198
|
+
<Tooltip placement="top" title={'Text Left'}>
|
177
199
|
<Icon
|
178
200
|
hoverEffect
|
179
201
|
disabled={toolbar === 'disable'}
|
180
|
-
onClick={() =>
|
181
|
-
setTextAlign(data, 'left');
|
182
|
-
}}
|
202
|
+
onClick={() => setTextAlign(data, 'left')}
|
183
203
|
name="text_align_left"
|
184
204
|
/>
|
205
|
+
</Tooltip>
|
206
|
+
<Tooltip placement="top" title={'Text Center'}>
|
185
207
|
<Icon
|
186
208
|
hoverEffect
|
187
209
|
disabled={toolbar === 'disable'}
|
188
|
-
onClick={() =>
|
189
|
-
setTextAlign(data, 'center');
|
190
|
-
}}
|
210
|
+
onClick={() => setTextAlign(data, 'center')}
|
191
211
|
name="text_align_center"
|
192
212
|
/>
|
213
|
+
</Tooltip>
|
214
|
+
|
215
|
+
<Tooltip placement="top" title={'Text Right'}>
|
193
216
|
<Icon
|
194
217
|
hoverEffect
|
195
218
|
disabled={toolbar === 'disable'}
|
196
|
-
onClick={() =>
|
197
|
-
setTextAlign(data, 'right');
|
198
|
-
}}
|
219
|
+
onClick={() => setTextAlign(data, 'right')}
|
199
220
|
name="text_align_right"
|
200
221
|
/>
|
201
|
-
</
|
202
|
-
</
|
203
|
-
<
|
204
|
-
|
205
|
-
|
222
|
+
</Tooltip>
|
223
|
+
</div>
|
224
|
+
<div className="ff-excel-toolbar-divider"></div>
|
225
|
+
<div className="ff-excel-toolbar-text">
|
226
|
+
<Tooltip placement="top" title={'Bold'}>
|
227
|
+
<Icon
|
228
|
+
hoverEffect
|
229
|
+
disabled={toolbar === 'disable'}
|
230
|
+
onClick={() => onBold(data)}
|
231
|
+
name="bold"
|
232
|
+
/>
|
233
|
+
</Tooltip>
|
234
|
+
<Tooltip placement="top" title={'Italic'}>
|
235
|
+
<Icon
|
236
|
+
hoverEffect
|
237
|
+
disabled={toolbar === 'disable'}
|
238
|
+
onClick={() => onItalic(data)}
|
239
|
+
name="italic"
|
240
|
+
/>
|
241
|
+
</Tooltip>
|
242
|
+
<Tooltip placement="top" title={'Underline Type'}>
|
243
|
+
<div className="ff-excel-toolbar-icon-underline">
|
206
244
|
<Icon
|
207
245
|
hoverEffect
|
208
246
|
disabled={toolbar === 'disable'}
|
209
|
-
onClick={() =>
|
210
|
-
|
247
|
+
onClick={() => setUnderlineType(data, underLine, true)}
|
248
|
+
name={getUnderlineIcon()}
|
249
|
+
/>
|
250
|
+
<MenuOption
|
251
|
+
iconName="arrow_down"
|
252
|
+
iconSize={12}
|
253
|
+
options={underlineTypeIcon}
|
254
|
+
tooltipPlacement="top"
|
255
|
+
variant="light"
|
256
|
+
onOptionClick={(e) => {
|
257
|
+
let selectedValue = e.value as string;
|
258
|
+
setUnderlineType(data, selectedValue, true);
|
259
|
+
setUnderLine(selectedValue);
|
211
260
|
}}
|
212
|
-
name="bold"
|
213
261
|
/>
|
214
|
-
</
|
215
|
-
|
262
|
+
</div>
|
263
|
+
</Tooltip>
|
264
|
+
</div>
|
265
|
+
<div className="ff-excel-toolbar-divider"></div>
|
266
|
+
<div className="ff-excel-toolbar-icon">
|
267
|
+
<Tooltip placement="top" title={'Format Painter'}>
|
268
|
+
<Icon
|
269
|
+
hoverEffect
|
270
|
+
disabled={toolbar === 'disable'}
|
271
|
+
onClick={() => {
|
272
|
+
setFormatePainter(data);
|
273
|
+
}}
|
274
|
+
name="formate_painter"
|
275
|
+
/>
|
276
|
+
</Tooltip>
|
277
|
+
<Tooltip placement="top" title={'Text Color'}>
|
278
|
+
<div className="ff-excel-toolbar-icon-color">
|
216
279
|
<Icon
|
217
280
|
hoverEffect
|
281
|
+
width={12}
|
282
|
+
height={12}
|
218
283
|
disabled={toolbar === 'disable'}
|
219
284
|
onClick={() => {
|
220
|
-
|
285
|
+
setColor(data, colorContainer.color);
|
221
286
|
}}
|
222
|
-
name="
|
287
|
+
name="text_color"
|
288
|
+
/>
|
289
|
+
<ColorBarSelector
|
290
|
+
disabled={toolbar === 'disable'}
|
291
|
+
getColorValue={getTextColor}
|
223
292
|
/>
|
224
|
-
</Tooltip>
|
225
|
-
<Tooltip placement="top" title={'Underline'}>
|
226
|
-
<div className="excel-toolbar-menu">
|
227
|
-
<Tooltip placement="top" title={'Formate Painter'}>
|
228
|
-
<div
|
229
|
-
className={
|
230
|
-
formatePainterState ? 'formate-painter-active' : ''
|
231
|
-
}
|
232
|
-
>
|
233
|
-
<Icon
|
234
|
-
hoverEffect
|
235
|
-
disabled={toolbar === 'disable'}
|
236
|
-
onClick={() => {
|
237
|
-
setUnderlineType(data, underLine, true);
|
238
|
-
}}
|
239
|
-
name="underline"
|
240
|
-
/>
|
241
|
-
</div>
|
242
|
-
</Tooltip>
|
243
|
-
<MenuOption
|
244
|
-
iconName="arrow_down"
|
245
|
-
options={underlineTypeIcon}
|
246
|
-
tooltipTitle="Border Type"
|
247
|
-
tooltipPlacement="top"
|
248
|
-
variant="light"
|
249
|
-
onOptionClick={(e) => {
|
250
|
-
setUnderlineType(data, e.value as string, true);
|
251
|
-
setUnderLine(e.value as string);
|
252
|
-
}}
|
253
|
-
/>
|
254
|
-
</div>
|
255
|
-
</Tooltip>
|
256
|
-
</div>
|
257
|
-
</Col>
|
258
|
-
<Col size={2}>
|
259
|
-
<div className="excel-toolbar-center">
|
260
|
-
<Tooltip placement="top" title={'Formate Painter'}>
|
261
|
-
<div
|
262
|
-
className={formatePainterState ? 'formate-painter-active' : ''}
|
263
|
-
>
|
264
|
-
<Icon
|
265
|
-
hoverEffect
|
266
|
-
disabled={toolbar === 'disable'}
|
267
|
-
onClick={() => {
|
268
|
-
setFormatePainter(data);
|
269
|
-
setFormatePainterState((prev) => !prev);
|
270
|
-
}}
|
271
|
-
name="formate_painter"
|
272
|
-
/>
|
273
|
-
</div>
|
274
|
-
</Tooltip>
|
275
|
-
<div className="menu-option">
|
276
|
-
<Tooltip placement="top" title={'Text Color'}>
|
277
|
-
<Icon
|
278
|
-
hoverEffect
|
279
|
-
disabled={toolbar === 'disable'}
|
280
|
-
onClick={() => {
|
281
|
-
setColor(data, colorContainer.color);
|
282
|
-
}}
|
283
|
-
name="text_color"
|
284
|
-
/>
|
285
|
-
<ColorBarSelector
|
286
|
-
disabled={toolbar === 'disable'}
|
287
|
-
getColorValue={getTextColor}
|
288
|
-
/>
|
289
|
-
</Tooltip>
|
290
293
|
</div>
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
294
|
+
</Tooltip>
|
295
|
+
<Tooltip placement="top" title={'Background Color'}>
|
296
|
+
<div className="ff-excel-toolbar-icon-color">
|
297
|
+
<Icon
|
298
|
+
hoverEffect
|
299
|
+
width={12}
|
300
|
+
height={12}
|
301
|
+
disabled={toolbar === 'disable'}
|
302
|
+
onClick={() =>
|
303
|
+
setBackgroundColor(data, colorContainer.backgroundColor)
|
304
|
+
}
|
305
|
+
name="fill_color"
|
306
|
+
/>
|
302
307
|
<ColorBarSelector
|
303
308
|
disabled={toolbar === 'disable'}
|
304
309
|
getColorValue={getBackgroundColor}
|
305
310
|
/>
|
306
311
|
</div>
|
307
|
-
</
|
308
|
-
</
|
309
|
-
<
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
312
|
+
</Tooltip>
|
313
|
+
</div>
|
314
|
+
<div className="ff-excel-toolbar-divider"></div>
|
315
|
+
<div className="ff-excel-toolbar-menu">
|
316
|
+
<Tooltip placement="top" title={'Border Type'}>
|
317
|
+
<div className="ff-excel-toolbar-menu-option">
|
318
|
+
<Icon
|
319
|
+
hoverEffect
|
320
|
+
disabled={toolbar === 'disable'}
|
321
|
+
onClick={() => setBorderType(data, border, 'black')}
|
322
|
+
name={getBorderIcon()}
|
323
|
+
/>
|
324
|
+
<MenuOption
|
325
|
+
iconName="arrow_down"
|
326
|
+
iconSize={12}
|
327
|
+
options={borderTypeIcon}
|
328
|
+
tooltipPlacement="top"
|
329
|
+
variant="light"
|
330
|
+
onOptionClick={(e) => {
|
331
|
+
let selectedValue = e.value as string;
|
332
|
+
setBorderType(data, selectedValue, 'black');
|
333
|
+
setBorder(selectedValue);
|
334
|
+
}}
|
335
|
+
/>
|
336
|
+
</div>
|
337
|
+
</Tooltip>
|
338
|
+
</div>
|
339
|
+
<div className="ff-excel-toolbar-divider"></div>
|
340
|
+
<div className="ff-excel-toolbar-menu">
|
341
|
+
<Tooltip placement="top" title={'Formula'}>
|
342
|
+
<Icon
|
343
|
+
hoverEffect
|
344
|
+
disabled={toolbar === 'disable'}
|
345
|
+
onClick={() => setBorderType(data, border, 'black')}
|
346
|
+
name="formula_icon"
|
335
347
|
/>
|
336
|
-
</
|
337
|
-
</
|
338
|
-
</
|
348
|
+
</Tooltip>
|
349
|
+
</div>
|
350
|
+
</div>
|
339
351
|
);
|
340
352
|
};
|
341
353
|
|
@@ -13,6 +13,7 @@ const Dropzone: FC<DroppableProps> = ({
|
|
13
13
|
getRootProps,
|
14
14
|
getInputProps,
|
15
15
|
isDragActive = false,
|
16
|
+
height = 188,
|
16
17
|
}) => {
|
17
18
|
return (
|
18
19
|
<div
|
@@ -20,6 +21,7 @@ const Dropzone: FC<DroppableProps> = ({
|
|
20
21
|
className={classNames('ff-file-dropzone', {
|
21
22
|
'ff-file-dropzone--active': isDragActive,
|
22
23
|
})}
|
24
|
+
style={{height: height}}
|
23
25
|
>
|
24
26
|
<div className="ff-file-dropzone-content__icon">{icon}</div>
|
25
27
|
<div className="ff-file-dropzone-content__labels">
|
@@ -2,6 +2,7 @@ import { StoryObj, Meta } from '@storybook/react';
|
|
2
2
|
import FileDropzone from './FileDropzone';
|
3
3
|
import Toaster from '../Toast';
|
4
4
|
import { useState } from 'react';
|
5
|
+
import React from 'react';
|
5
6
|
|
6
7
|
const meta: Meta<typeof FileDropzone> = {
|
7
8
|
title: 'Components/FileDropzone',
|
@@ -22,6 +23,8 @@ const defaultArgs = {
|
|
22
23
|
maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
|
23
24
|
invalidFileMessage: 'Invalid file format',
|
24
25
|
fileExistMessage: 'File already exist with same name and type',
|
26
|
+
width: 700,
|
27
|
+
height: 350,
|
25
28
|
};
|
26
29
|
|
27
30
|
export const Primary: Story = {
|
@@ -8,7 +8,9 @@ import Dropzone from './Dropzone';
|
|
8
8
|
import FilePreview from './FilePreview';
|
9
9
|
|
10
10
|
const FileDropzone: React.FC<FileDropzoneProps> = ({
|
11
|
-
icon =
|
11
|
+
icon = (
|
12
|
+
<Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />
|
13
|
+
),
|
12
14
|
primaryLabel = 'Drag & drop your file to upload',
|
13
15
|
secondaryLabel = 'Or',
|
14
16
|
buttonLabel = 'Choose File to upload',
|
@@ -21,6 +23,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
21
23
|
invalidFileMessage = '',
|
22
24
|
fileExistMessage = '',
|
23
25
|
validateMIMEType = false,
|
26
|
+
width = 640,
|
27
|
+
height = 188,
|
24
28
|
}) => {
|
25
29
|
const {
|
26
30
|
getRootProps,
|
@@ -71,7 +75,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
71
75
|
);
|
72
76
|
|
73
77
|
return (
|
74
|
-
<div className="ff-file-dropzone-wrapper">
|
78
|
+
<div className="ff-file-dropzone-wrapper" style={{ width: `${width}px` }}>
|
75
79
|
<Dropzone
|
76
80
|
icon={icon}
|
77
81
|
primaryLabel={primaryLabel}
|
@@ -80,9 +84,13 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
80
84
|
getRootProps={getRootProps}
|
81
85
|
getInputProps={getInputProps}
|
82
86
|
isDragActive={isDragActive}
|
87
|
+
height={`${height}px`}
|
83
88
|
/>
|
84
89
|
|
85
|
-
<div
|
90
|
+
<div
|
91
|
+
className={'ff-file-details-wrapper'}
|
92
|
+
style={{ width: `${width}px` }}
|
93
|
+
>
|
86
94
|
{!checkEmpty(acceptedFiles) && (
|
87
95
|
<div className="ff-file-details">{acceptedFilesList}</div>
|
88
96
|
)}
|
@@ -53,6 +53,10 @@ export interface FileDropzoneProps {
|
|
53
53
|
* To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
|
54
54
|
**/
|
55
55
|
validateMIMEType?: boolean;
|
56
|
+
|
57
|
+
width?: number | string;
|
58
|
+
|
59
|
+
height?: number | string;
|
56
60
|
}
|
57
61
|
export interface FileState {
|
58
62
|
accepted: File[];
|
@@ -103,6 +107,7 @@ export interface DroppableProps {
|
|
103
107
|
getRootProps: () => any;
|
104
108
|
getInputProps: () => any;
|
105
109
|
isDragActive: boolean;
|
110
|
+
height: number | string;
|
106
111
|
}
|
107
112
|
|
108
113
|
export interface FilePreviewProps {
|
@@ -45,11 +45,14 @@ export const DarkVariantIcons: Story = {
|
|
45
45
|
name: 'hamburger_menu',
|
46
46
|
color: 'var(--ff-icon-color-dark-variant)',
|
47
47
|
variant: 'dark',
|
48
|
-
hoverEffect: true,
|
48
|
+
hoverEffect: true,
|
49
49
|
},
|
50
50
|
render: (args) => {
|
51
51
|
const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
|
52
|
-
const iconColor =
|
52
|
+
const iconColor =
|
53
|
+
args.variant === 'dark'
|
54
|
+
? 'var(--ff-icon-color-dark-variant)'
|
55
|
+
: 'var(--brand-color)';
|
53
56
|
|
54
57
|
return (
|
55
58
|
<div style={{ backgroundColor, padding: '20px' }}>
|
@@ -59,6 +62,4 @@ export const DarkVariantIcons: Story = {
|
|
59
62
|
},
|
60
63
|
};
|
61
64
|
|
62
|
-
|
63
|
-
|
64
65
|
export default meta;
|
@@ -219,6 +219,8 @@ import NoData from '../../assets/icons/no_data.svg?react';
|
|
219
219
|
import AddUser from '../../assets/icons/add_user.svg?react';
|
220
220
|
import RemoveUser from '../../assets/icons/remove_user.svg?react';
|
221
221
|
import AddToArchive from '../../assets/icons/add_archive.svg?react';
|
222
|
+
import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
|
223
|
+
import InfoUser from '../../assets/icons/info_user.svg?react';
|
222
224
|
|
223
225
|
Components['success'] = ToastSuccessIcon;
|
224
226
|
Components['alert'] = Alert;
|
@@ -434,5 +436,7 @@ Components['no_data'] = NoData;
|
|
434
436
|
Components['add_user'] = AddUser;
|
435
437
|
Components['add_to_archive'] = AddToArchive;
|
436
438
|
Components['remove_user'] = RemoveUser;
|
439
|
+
Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
|
440
|
+
Components['info_user'] = InfoUser;
|
437
441
|
|
438
442
|
export default Components;
|