pixel-react 1.7.5 → 1.7.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/.yarn/install-state.gz +0 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/Button/Button.stories.d.ts +12 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConditionalDropdown/types.d.ts +1 -1
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +7 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/FileDropzone/types.d.ts +12 -4
- package/lib/components/Form/Form.stories.d.ts +6 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +7 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +6 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +15 -0
- package/lib/components/MenuOption/types.d.ts +1 -1
- package/lib/components/MiniModal/MiniModal.stories.d.ts +9 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +9 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +8 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +13 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +15 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/Table/Table.stories.d.ts +11 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +8 -0
- package/lib/components/ThemeProvider/types.d.ts +1 -1
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/hooks/useCustomThemeProvider.d.ts +11 -0
- package/lib/index.d.ts +70 -64
- package/lib/index.esm.js +204 -272
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +204 -272
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/Themes/BlueTheme.scss +279 -0
- package/src/assets/Themes/Theme.scss +5 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -1
- package/src/components/ConditionalDropdown/types.ts +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
- package/src/components/FileDropzone/Dropzone.tsx +3 -0
- package/src/components/FileDropzone/FileDropzone.scss +18 -0
- package/src/components/FileDropzone/FileDropzone.stories.tsx +75 -7
- package/src/components/FileDropzone/FileDropzone.tsx +2 -0
- package/src/components/FileDropzone/RadioFilePreview.tsx +7 -3
- package/src/components/FileDropzone/types.ts +13 -4
- package/src/components/Icon/iconList.ts +2 -2
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
- package/src/components/MenuOption/MenuOption.tsx +27 -29
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/PopUpModal/types.ts +4 -3
- package/src/components/Search/Search.stories.tsx +1 -2
- package/src/components/ThemeProvider/types.ts +1 -1
- 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/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/NLPInput/type.d.ts +0 -70
- package/lib/components/TableTree/TableTree copy.d.ts +0 -25
- /package/src/assets/icons/{impactList.svg → impact_list.svg} +0 -0
@@ -1,4 +1,4 @@
|
|
1
|
-
import { useEffect, useState } from 'react';
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
2
2
|
import './ExcelToolBar.scss';
|
3
3
|
import MenuOption from '../../MenuOption';
|
4
4
|
import Tooltip from '../../Tooltip';
|
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
69
69
|
};
|
70
70
|
|
71
71
|
const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
|
72
|
+
const underLineMenuRef = useRef<HTMLSpanElement>(null);
|
73
|
+
const borderMenuRef = useRef<HTMLSpanElement>(null);
|
72
74
|
|
73
75
|
useEffect(() => {
|
74
76
|
setCellStyle(cell?.style || basicStyle);
|
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
315
317
|
onClick={() => setUnderlineType(data, underLine, true)}
|
316
318
|
name={getUnderlineIcon()}
|
317
319
|
/>
|
318
|
-
<
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
320
|
+
<span ref={underLineMenuRef}>
|
321
|
+
<MenuOption
|
322
|
+
targetRef={underLineMenuRef}
|
323
|
+
iconName="arrow_down"
|
324
|
+
zIndex={1000}
|
325
|
+
iconSize={12}
|
326
|
+
options={underlineTypeIcon}
|
327
|
+
tooltipPlacement="top"
|
328
|
+
variant="light"
|
329
|
+
onOptionClick={(e) => {
|
330
|
+
let selectedValue = e.value as string;
|
331
|
+
setUnderlineType(data, selectedValue, true);
|
332
|
+
setUnderLine(selectedValue);
|
333
|
+
}}
|
334
|
+
/>
|
335
|
+
</span>
|
331
336
|
</div>
|
332
337
|
</Tooltip>
|
333
338
|
</div>
|
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
391
396
|
onClick={() => setBorderType(data, border, 'black')}
|
392
397
|
name={getBorderIcon()}
|
393
398
|
/>
|
394
|
-
<
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
399
|
+
<span ref={borderMenuRef}>
|
400
|
+
<MenuOption
|
401
|
+
iconName="arrow_down"
|
402
|
+
targetRef={borderMenuRef}
|
403
|
+
iconSize={12}
|
404
|
+
zIndex={1000}
|
405
|
+
options={borderTypeIcon}
|
406
|
+
tooltipPlacement="top"
|
407
|
+
variant="light"
|
408
|
+
onOptionClick={(e) => {
|
409
|
+
let selectedValue = e.value as string;
|
410
|
+
setBorderType(data, selectedValue, 'black');
|
411
|
+
setBorder(selectedValue);
|
412
|
+
}}
|
413
|
+
/>
|
414
|
+
</span>
|
407
415
|
</div>
|
408
416
|
</Tooltip>
|
409
417
|
</div>
|
@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
|
|
24
24
|
setSelectedFile,
|
25
25
|
handleRemoveFile,
|
26
26
|
isDisable,
|
27
|
+
setShowDrawer,
|
27
28
|
}) => {
|
28
29
|
const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
|
29
30
|
return (
|
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
|
|
42
43
|
onFileRemoveClick={handleRemoveFile}
|
43
44
|
onFileReplaceClick={setSelectedFile}
|
44
45
|
setSelectedFile={setSelectedFile}
|
46
|
+
selectedRadioOption={selectedRadioOption}
|
47
|
+
setShowDrawer={setShowDrawer}
|
45
48
|
/>
|
46
49
|
) : (
|
47
50
|
<>
|
@@ -4,6 +4,12 @@
|
|
4
4
|
gap: $gap;
|
5
5
|
}
|
6
6
|
|
7
|
+
@mixin flex-center {
|
8
|
+
display: flex;
|
9
|
+
align-items: center;
|
10
|
+
justify-content: center;
|
11
|
+
}
|
12
|
+
|
7
13
|
@mixin center {
|
8
14
|
display: grid;
|
9
15
|
place-items: center;
|
@@ -160,4 +166,16 @@
|
|
160
166
|
.ff-disable-file-dropzone-wrapper {
|
161
167
|
opacity: 0.5;
|
162
168
|
cursor: not-allowed;
|
169
|
+
}
|
170
|
+
.footer_basic_button {
|
171
|
+
width: 100%;
|
172
|
+
position: absolute;
|
173
|
+
bottom: 0;
|
174
|
+
right: 0;
|
175
|
+
@include flex-center;
|
176
|
+
justify-content: flex-end;
|
177
|
+
gap: 16px;
|
178
|
+
border-top: 1px solid var(--border-color);
|
179
|
+
padding: 4px 8px;
|
180
|
+
background-color: var(--primary-icon-color);
|
163
181
|
}
|
@@ -5,8 +5,10 @@ import Toaster from '../Toast';
|
|
5
5
|
import { useState } from 'react';
|
6
6
|
import { RadioOption } from './types';
|
7
7
|
import Drawer from '../Drawer/Drawer';
|
8
|
-
import
|
8
|
+
import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
|
9
9
|
import './FileDropzone.scss';
|
10
|
+
import { DynamicObj } from '../CreateVariable/types';
|
11
|
+
import Button from '../Button';
|
10
12
|
|
11
13
|
const meta: Meta<typeof FileDropzone> = {
|
12
14
|
title: 'Components/FileDropzone',
|
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
|
|
107
109
|
|
108
110
|
const [selectedRadioOption, setSelectedRadioOption] =
|
109
111
|
useState<RadioOption>();
|
110
|
-
const [selectedFile, setSelectedFile] = useState<File | null>(
|
111
|
-
|
112
|
+
const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
|
113
|
+
null
|
114
|
+
);
|
115
|
+
const [testDataSelectedFile, setTestDataSelectedFile] = useState<
|
116
|
+
DynamicObj | File | null
|
117
|
+
>(null);
|
112
118
|
|
113
119
|
const drawerArgs = {
|
114
120
|
primaryButtonProps: {
|
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
|
|
156
162
|
}, 2000);
|
157
163
|
};
|
158
164
|
|
165
|
+
const testData = [
|
166
|
+
{
|
167
|
+
_id: '1',
|
168
|
+
name: 'File1.txt',
|
169
|
+
actualPath: '/documents/File1.txt',
|
170
|
+
searchKey: 'file1',
|
171
|
+
parentId: 'root',
|
172
|
+
},
|
173
|
+
{
|
174
|
+
_id: '2',
|
175
|
+
name: 'File2.doc',
|
176
|
+
actualPath: '/documents/File2.doc',
|
177
|
+
searchKey: 'file2',
|
178
|
+
parentId: 'root',
|
179
|
+
},
|
180
|
+
{
|
181
|
+
_id: '3',
|
182
|
+
name: 'Image1.png',
|
183
|
+
actualPath: '/images/Image1.png',
|
184
|
+
searchKey: 'image1',
|
185
|
+
parentId: 'folder1',
|
186
|
+
},
|
187
|
+
{
|
188
|
+
_id: '4',
|
189
|
+
name: 'Presentation.ppt',
|
190
|
+
actualPath: '/presentations/Presentation.ppt',
|
191
|
+
searchKey: 'presentation',
|
192
|
+
parentId: 'folder2',
|
193
|
+
},
|
194
|
+
];
|
195
|
+
|
196
|
+
const handleSaveButton = () => {
|
197
|
+
setSelectedFile(testDataSelectedFile);
|
198
|
+
setShowModal(false);
|
199
|
+
};
|
200
|
+
|
159
201
|
return (
|
160
202
|
<>
|
161
203
|
<FileDropzone
|
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
|
|
176
218
|
selectedFile={selectedFile}
|
177
219
|
handleFileChange={handleFileChange}
|
178
220
|
handleRemoveFile={handleRemoveFile}
|
221
|
+
setShowDrawer={setShowModal}
|
179
222
|
/>
|
180
223
|
{showToaster && (
|
181
224
|
<Toaster
|
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
|
|
185
228
|
toastMessage={'Max 5 files can be uploaded'}
|
186
229
|
/>
|
187
230
|
)}
|
188
|
-
{selectedRadioOption?.value === '
|
231
|
+
{selectedRadioOption?.value === 'Test Data' && (
|
189
232
|
<Drawer
|
190
233
|
{...drawerArgs}
|
191
234
|
isOpen={showModal}
|
192
235
|
onClose={() => setShowModal(false)}
|
193
|
-
isFooterRequired={
|
236
|
+
isFooterRequired={false}
|
194
237
|
_isExpanded={false}
|
195
238
|
size="small"
|
239
|
+
|
196
240
|
>
|
197
|
-
<
|
241
|
+
<ConditionalDropdown
|
242
|
+
label="Select Path Using #"
|
243
|
+
placeholder="Enter # to search files"
|
244
|
+
isHash
|
245
|
+
dataFiles={testData}
|
246
|
+
dropdownWidth="auto"
|
247
|
+
setHashInputValue={setTestDataSelectedFile}
|
248
|
+
/>
|
249
|
+
<div className="footer_basic_button">
|
250
|
+
<Button
|
251
|
+
type="button"
|
252
|
+
variant="secondary"
|
253
|
+
size="small"
|
254
|
+
onClick={() => setShowModal(false)}
|
255
|
+
label={'Cancel'}
|
256
|
+
/>
|
257
|
+
|
258
|
+
<Button
|
259
|
+
type={'button'}
|
260
|
+
variant="primary"
|
261
|
+
size="small"
|
262
|
+
label={'Save'}
|
263
|
+
onClick={handleSaveButton}
|
264
|
+
/>
|
265
|
+
</div>
|
198
266
|
</Drawer>
|
199
|
-
}
|
267
|
+
)}
|
200
268
|
</>
|
201
269
|
);
|
202
270
|
},
|
@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
38
38
|
handleRemoveFile,
|
39
39
|
isApiResponseError = false,
|
40
40
|
isDisable = false,
|
41
|
+
setShowDrawer,
|
41
42
|
}) => {
|
42
43
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
43
44
|
const {
|
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
131
132
|
handleRemoveFile={handleRemoveFile}
|
132
133
|
setSelectedFile={setSelectedFile}
|
133
134
|
isDisable={isDisable}
|
135
|
+
setShowDrawer={setShowDrawer}
|
134
136
|
/>
|
135
137
|
|
136
138
|
{isWebServiceFileDropZone && (
|
@@ -8,14 +8,18 @@ import { useRef } from 'react';
|
|
8
8
|
const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
|
9
9
|
selectedFile,
|
10
10
|
onFileRemoveClick,
|
11
|
-
onFileReplaceClick
|
11
|
+
onFileReplaceClick,
|
12
|
+
selectedRadioOption,
|
13
|
+
setShowDrawer,
|
12
14
|
}) => {
|
13
15
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
14
16
|
|
15
17
|
const handleReplaceClick = () => {
|
16
|
-
if (
|
17
|
-
|
18
|
+
if (selectedRadioOption?.value === 'Test Data') {
|
19
|
+
setShowDrawer?.(true);
|
20
|
+
return;
|
18
21
|
}
|
22
|
+
fileInputRef.current?.click();
|
19
23
|
};
|
20
24
|
|
21
25
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
import { DynamicObj } from '../CreateVariable/types';
|
2
3
|
export interface RadioOption {
|
3
4
|
label: string;
|
4
5
|
value: string;
|
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
|
|
93
94
|
/**
|
94
95
|
* Its the File Name of File Selected from Local File.
|
95
96
|
**/
|
96
|
-
setSelectedFile?: (file: File | null) => void;
|
97
|
+
setSelectedFile?: (file: File | DynamicObj | null) => void;
|
97
98
|
|
98
99
|
/**
|
99
100
|
* Its the File Name of File Selected from Local File.
|
100
101
|
**/
|
101
|
-
selectedFile?: File | null;
|
102
|
+
selectedFile?: File | DynamicObj | null;
|
102
103
|
|
103
104
|
/**
|
104
105
|
* Its the function which updates the Selected file from Local Directory.
|
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
|
|
120
121
|
**/
|
121
122
|
isDisable?: boolean;
|
122
123
|
|
124
|
+
/**
|
125
|
+
* Its the boolean value setted when the replace is clicked for TestData radio option .
|
126
|
+
**/
|
127
|
+
setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
|
128
|
+
|
123
129
|
}
|
124
130
|
export interface FileState {
|
125
131
|
accepted: File[];
|
@@ -176,11 +182,12 @@ export interface DroppableProps {
|
|
176
182
|
selectedRadioOption?: Option,
|
177
183
|
radioOptions?: RadioOption[],
|
178
184
|
handleOptionChange?: (option: RadioOption)=> void,
|
179
|
-
selectedFile?: File | null,
|
180
|
-
setSelectedFile?: (file: File | null) => void;
|
185
|
+
selectedFile?: File | DynamicObj | null,
|
186
|
+
setSelectedFile?: (file: File | DynamicObj | null) => void;
|
181
187
|
handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
182
188
|
handleRemoveFile?: () => void;
|
183
189
|
isDisable?: boolean;
|
190
|
+
setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
|
184
191
|
}
|
185
192
|
|
186
193
|
export interface FilePreviewProps {
|
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
|
|
196
203
|
onFileRemoveClick?: () => void;
|
197
204
|
onFileReplaceClick?: (file: File | null) => void;
|
198
205
|
setSelectedFile?: (file: File | null) => void;
|
206
|
+
selectedRadioOption?: Option,
|
207
|
+
setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
|
199
208
|
}
|
@@ -45,7 +45,7 @@ import ManualLocator from '../../assets/icons/manual_locator.svg?react';
|
|
45
45
|
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
|
-
import ImpactListIcon from '../../assets/icons/
|
48
|
+
import ImpactListIcon from '../../assets/icons/impact_list.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';
|
@@ -295,7 +295,7 @@ Components['run_icon'] = RunIcon;
|
|
295
295
|
Components['license'] = LicenseIcon;
|
296
296
|
Components['delete'] = DeleteIcon;
|
297
297
|
Components['details'] = DetailsIcon;
|
298
|
-
Components['
|
298
|
+
Components['impact_list'] = ImpactListIcon;
|
299
299
|
Components['beautify_icon'] = BeautifyIcon;
|
300
300
|
Components['add_variable_icon'] = AddVariable;
|
301
301
|
Components['replace_file'] = ReplaceFile;
|
@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
|
|
135
135
|
dropdownPlacement: 'down',
|
136
136
|
},
|
137
137
|
render: (args) => {
|
138
|
-
const moreRef = useRef<HTMLDivElement>(null);
|
139
138
|
return (
|
140
|
-
<div
|
139
|
+
<div id="more">
|
141
140
|
<MenuOption
|
142
141
|
{...args}
|
143
142
|
options={options}
|
144
|
-
targetRef={
|
143
|
+
targetRef={'more'}
|
145
144
|
onOptionClick={handleOptionClick}
|
146
145
|
/>
|
147
146
|
</div>
|
@@ -57,9 +57,9 @@ const OptionCard = ({
|
|
57
57
|
|
58
58
|
useEffect(() => {
|
59
59
|
if (optionCardRef?.current) {
|
60
|
-
const rect = optionCardRef
|
61
|
-
setOptionsHeight(rect
|
62
|
-
setOptionsWidth(rect
|
60
|
+
const rect = optionCardRef?.current?.getBoundingClientRect();
|
61
|
+
setOptionsHeight(rect?.height);
|
62
|
+
setOptionsWidth(rect?.width);
|
63
63
|
}
|
64
64
|
}, []);
|
65
65
|
|
@@ -74,7 +74,7 @@ const OptionCard = ({
|
|
74
74
|
};
|
75
75
|
case 'down':
|
76
76
|
return {
|
77
|
-
top: menuPosition.top +
|
77
|
+
top: menuPosition.top + 20,
|
78
78
|
left: menuPosition.left - 4,
|
79
79
|
};
|
80
80
|
case 'left':
|
@@ -85,22 +85,16 @@ const OptionCard = ({
|
|
85
85
|
case 'right':
|
86
86
|
return {
|
87
87
|
top: menuPosition.top - 4,
|
88
|
-
left: menuPosition.left +
|
88
|
+
left: menuPosition.left + 20,
|
89
89
|
};
|
90
90
|
default:
|
91
91
|
return {
|
92
|
-
top: menuPosition.
|
93
|
-
left: menuPosition.
|
92
|
+
top: menuPosition.bottom,
|
93
|
+
left: menuPosition.rightSpaceAvailable + 12,
|
94
94
|
};
|
95
95
|
}
|
96
96
|
})();
|
97
97
|
|
98
|
-
const adjustedStyle = {
|
99
|
-
top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
|
100
|
-
left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
|
101
|
-
zIndex,
|
102
|
-
};
|
103
|
-
|
104
98
|
return createPortal(
|
105
99
|
<div
|
106
100
|
className={classNames(
|
@@ -108,7 +102,7 @@ const OptionCard = ({
|
|
108
102
|
[{ 'ff-option-card--primary': variant === 'primary' }],
|
109
103
|
currentTheme
|
110
104
|
)}
|
111
|
-
style={
|
105
|
+
style={{ ...style, zIndex }}
|
112
106
|
ref={optionCardRef}
|
113
107
|
>
|
114
108
|
{options.map((opt) => (
|
@@ -147,21 +141,6 @@ const MenuOption = ({
|
|
147
141
|
|
148
142
|
const closeDropDown = () => setIsClicked(false);
|
149
143
|
|
150
|
-
const calculateDims = () => {
|
151
|
-
if (targetRef?.current) {
|
152
|
-
const rect = targetRef.current.getBoundingClientRect();
|
153
|
-
const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
|
154
|
-
const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
|
155
|
-
|
156
|
-
setMenuPosition({
|
157
|
-
top: rect.top + window.scrollY - containerScrollTop,
|
158
|
-
left: rect.left + window.scrollX - containerScrollLeft,
|
159
|
-
height: rect.height,
|
160
|
-
right: rect.right,
|
161
|
-
});
|
162
|
-
}
|
163
|
-
};
|
164
|
-
|
165
144
|
const onIconClickHandler = () => {
|
166
145
|
onClick();
|
167
146
|
calculateDims();
|
@@ -173,6 +152,25 @@ const MenuOption = ({
|
|
173
152
|
closeDropDown();
|
174
153
|
};
|
175
154
|
|
155
|
+
const calculateDims = () => {
|
156
|
+
let targetElement: HTMLElement | null = null;
|
157
|
+
if (typeof targetRef === 'string') {
|
158
|
+
targetElement = document.getElementById(targetRef);
|
159
|
+
} else if (targetRef && targetRef.current) {
|
160
|
+
targetElement = targetRef.current;
|
161
|
+
}
|
162
|
+
|
163
|
+
if (targetElement) {
|
164
|
+
const rect = targetElement.getBoundingClientRect();
|
165
|
+
setMenuPosition({
|
166
|
+
top: rect.top + window.scrollY,
|
167
|
+
left: rect.left + window.scrollX,
|
168
|
+
height: rect.height,
|
169
|
+
right: rect.right,
|
170
|
+
});
|
171
|
+
}
|
172
|
+
};
|
173
|
+
|
176
174
|
return (
|
177
175
|
<div className="ff-menu-option-container" ref={menuRef}>
|
178
176
|
<Tooltip title={tooltipTitle} placement={tooltipPlacement}>
|
@@ -5,12 +5,13 @@ export interface PopUpModalProps {
|
|
5
5
|
titleMessage: string;
|
6
6
|
subTitleMessage?: string;
|
7
7
|
iconName: string;
|
8
|
-
modalMessage: string;
|
8
|
+
modalMessage: string | React.ReactNode;
|
9
|
+
secondaryMessage?: string | React.ReactNode;
|
9
10
|
firstButtonLabel?: string;
|
10
11
|
secondButtonLabel: string;
|
11
12
|
buttonVariant: any;
|
12
13
|
border: string;
|
13
|
-
|
14
|
+
popupWidth?: string;
|
14
15
|
colorForTitleMessage?: string;
|
15
|
-
footerContent?:React.ReactNode;
|
16
|
+
footerContent?: React.ReactNode;
|
16
17
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import Search from './Search';
|
3
|
-
import React,{ useState } from 'react';
|
3
|
+
import React, { useState } from 'react';
|
4
4
|
const meta: Meta<typeof Search> = {
|
5
5
|
title: 'Components/Search',
|
6
6
|
component: Search,
|
@@ -17,7 +17,6 @@ export const Default: Story = {
|
|
17
17
|
const [searchValue, setSearchValue] = useState('');
|
18
18
|
|
19
19
|
const handleSearch = (value: string) => {
|
20
|
-
alert(`Searching for: ${value}`);
|
21
20
|
setSearchValue(value);
|
22
21
|
};
|
23
22
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { ReactNode } from "react";
|
2
2
|
|
3
|
-
export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
|
3
|
+
export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
|
4
4
|
|
5
5
|
export interface ThemeContextType {
|
6
6
|
currentTheme: Theme;
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1,70 +0,0 @@
|
|
1
|
-
import { ReactNode } from 'react';
|
2
|
-
export interface SelectProps {
|
3
|
-
label?: string;
|
4
|
-
showLabel?: boolean;
|
5
|
-
optionsList: any[];
|
6
|
-
selectedOption?: Option;
|
7
|
-
onChange: (option: Option) => void;
|
8
|
-
errorMsg?: string;
|
9
|
-
className?: string;
|
10
|
-
optionZIndex?: number;
|
11
|
-
disabled?: boolean;
|
12
|
-
borderRadius?: boolean;
|
13
|
-
showBorder?: boolean;
|
14
|
-
required?: boolean;
|
15
|
-
}
|
16
|
-
export interface DrowdownPosition {
|
17
|
-
positionX: number;
|
18
|
-
positionY: number;
|
19
|
-
width: number;
|
20
|
-
fromBottom: number;
|
21
|
-
}
|
22
|
-
export interface SelectState {
|
23
|
-
isInputFocused: boolean;
|
24
|
-
iconColor: string;
|
25
|
-
isIconClick: boolean;
|
26
|
-
showOptions: boolean;
|
27
|
-
options: any[];
|
28
|
-
option: string;
|
29
|
-
dropdownPosition: DrowdownPosition;
|
30
|
-
}
|
31
|
-
export type SelectAction = {
|
32
|
-
type: 'FOCUS_INPUT';
|
33
|
-
} | {
|
34
|
-
type: 'BLUR_INPUT';
|
35
|
-
payload: {
|
36
|
-
optionsList: Option[];
|
37
|
-
option: Option['projectId'];
|
38
|
-
};
|
39
|
-
} | {
|
40
|
-
type: 'MOUSE_ENTER';
|
41
|
-
} | {
|
42
|
-
type: 'MOUSE_LEAVE';
|
43
|
-
} | {
|
44
|
-
type: 'UPDATE_DROPDOWN_POSITION';
|
45
|
-
payload: {
|
46
|
-
positionX: number;
|
47
|
-
positionY: number;
|
48
|
-
width: number;
|
49
|
-
fromBottom: number;
|
50
|
-
};
|
51
|
-
} | {
|
52
|
-
type: 'UPDATE_OPTION';
|
53
|
-
payload: string;
|
54
|
-
} | {
|
55
|
-
type: 'UPDATE_OPTION_LIST';
|
56
|
-
payload: any[];
|
57
|
-
} | {
|
58
|
-
type: 'SHOW_ERROR';
|
59
|
-
payload: {
|
60
|
-
optionsList: any[];
|
61
|
-
option: Option['projectId'];
|
62
|
-
};
|
63
|
-
};
|
64
|
-
export interface Option {
|
65
|
-
displayName: string | ReactNode;
|
66
|
-
projectId: string;
|
67
|
-
nlpType: string;
|
68
|
-
platform: string;
|
69
|
-
disabled?: boolean;
|
70
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import React, { ReactNode } from 'react';
|
2
|
-
import './TableTree.scss';
|
3
|
-
interface ColumnDataProps {
|
4
|
-
name: string;
|
5
|
-
accessor: string;
|
6
|
-
width: string;
|
7
|
-
isClickable?: boolean;
|
8
|
-
minWidth?: string;
|
9
|
-
cell?: (e: any) => JSX.Element | string | ReactNode;
|
10
|
-
actions?: (e: any) => JSX.Element | string | ReactNode;
|
11
|
-
}
|
12
|
-
interface ObjectProps {
|
13
|
-
[key: string]: any;
|
14
|
-
}
|
15
|
-
interface TableTreeProps {
|
16
|
-
select: 'checkbox' | 'radio' | 'none';
|
17
|
-
columnsData: Array<ColumnDataProps>;
|
18
|
-
treeData: Array<ObjectProps>;
|
19
|
-
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
|
20
|
-
onChange?: (e: any, node: any) => void;
|
21
|
-
selected: Array<string>;
|
22
|
-
onPagination?: (node: ObjectProps) => void;
|
23
|
-
}
|
24
|
-
declare const TableTree: ({ columnsData, treeData, select, onClick, onChange, selected, onPagination, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
|
25
|
-
export default TableTree;
|
File without changes
|