pixel-react 1.6.5 → 1.6.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/lib/1fb4472b34e4fe07.css +1 -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.d.ts +1 -1
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/Accordion/types.d.ts +12 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -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/Checkbox/types.d.ts +4 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/Comment/Comments.d.ts +4 -0
- package/lib/components/Comment/comment/Comment.d.ts +11 -0
- package/lib/components/Comment/comment/useNode.d.ts +7 -0
- package/lib/components/Comment/index.d.ts +1 -0
- package/lib/components/Comment/type.d.ts +25 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- 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 +12 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Editor/constants.d.ts +1 -1
- package/lib/components/Editor/types.d.ts +10 -2
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -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 +8 -0
- package/lib/components/IconButton/IconButton.d.ts +1 -2
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconButton/types.d.ts +1 -1
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.d.ts +1 -1
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/PhoneInput/PhoneInput.d.ts +6 -0
- package/lib/components/PhoneInput/index.d.ts +1 -0
- package/lib/components/PhoneInput/types.d.ts +10 -0
- package/lib/components/PopUpModal/types.d.ts +1 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +14 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/TableWithAccordion/TableWithAccordion.d.ts +5 -0
- package/lib/components/TableWithAccordion/data.d.ts +8 -0
- package/lib/components/TableWithAccordion/index.d.ts +1 -0
- package/lib/components/TableWithAccordion/types.d.ts +67 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.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/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +186 -12
- package/lib/index.esm.js +2842 -385
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +2846 -384
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
- 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/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +2 -1
- package/src/assets/Themes/BaseTheme.scss +9 -0
- package/src/assets/Themes/DarkTheme.scss +62 -41
- package/src/assets/icons/add_file.svg +4 -17
- package/src/assets/icons/add_variable.svg +11 -0
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/authorization.svg +4 -0
- package/src/assets/icons/capture_icon.svg +2 -5
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/depends_on_script.svg +7 -0
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/email_group.svg +3 -0
- package/src/assets/icons/executions_icon.svg +3 -0
- package/src/assets/icons/labels.svg +8 -0
- package/src/assets/icons/machine_disable_icon.svg +18 -0
- package/src/assets/icons/machine_enable_icon.svg +10 -0
- package/src/assets/icons/parameters.svg +3 -0
- package/src/assets/icons/pre_post_condition.svg +8 -0
- package/src/assets/icons/program_element.svg +8 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/suites_icon.svg +3 -0
- package/src/assets/icons/tap_icon.svg +3 -3
- package/src/assets/icons/test_data.svg +5 -0
- package/src/assets/icons/test_data_set.svg +7 -0
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/variable_set.svg +5 -0
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Accordion/Accordion.stories.tsx +4 -0
- package/src/components/Accordion/Accordion.tsx +7 -1
- package/src/components/Accordion/types.ts +12 -0
- package/src/components/AddVariables/AddVariables.scss +14 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
- package/src/components/AddVariables/AddVariables.tsx +113 -0
- package/src/components/AddVariables/index.ts +1 -0
- package/src/components/AddVariables/types.ts +36 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/AppHeader/AppHeader.scss +7 -1
- package/src/components/AppHeader/types.ts +8 -9
- package/src/components/Checkbox/Checkbox.scss +57 -0
- package/src/components/Checkbox/Checkbox.stories.tsx +91 -15
- package/src/components/Checkbox/Checkbox.tsx +4 -1
- package/src/components/Checkbox/types.ts +4 -0
- package/src/components/Comment/Comments.scss +166 -0
- package/src/components/Comment/Comments.stories.tsx +212 -0
- package/src/components/Comment/Comments.tsx +51 -0
- package/src/components/Comment/comment/Comment.tsx +206 -0
- package/src/components/Comment/comment/useNode.ts +51 -0
- package/src/components/Comment/index.ts +1 -0
- package/src/components/Comment/type.ts +36 -0
- package/src/components/Drawer/Drawer.scss +2 -1
- package/src/components/Editor/Editor.stories.tsx +2 -2
- package/src/components/Editor/Editor.tsx +4 -2
- package/src/components/Editor/VariableDropdown.scss +8 -2
- package/src/components/Editor/VariableDropdown.tsx +15 -7
- package/src/components/Editor/constants.ts +1 -1
- package/src/components/Editor/types.ts +12 -2
- package/src/components/FieldSet/FieldSet.scss +2 -1
- package/src/components/FieldSet/FieldSet.stories.tsx +2 -1
- package/src/components/Icon/iconList.ts +29 -2
- package/src/components/IconButton/IconButton.stories.tsx +1 -0
- package/src/components/IconButton/IconButton.tsx +5 -8
- package/src/components/IconButton/types.ts +2 -2
- package/src/components/IconRadioGroup/IconRadioGroup.scss +2 -1
- package/src/components/Input/Input.tsx +99 -88
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +1 -1
- package/src/components/Modal/Modal.stories.tsx +2 -1
- package/src/components/MultiSelect/MultiSelect.scss +29 -0
- package/src/components/MultiSelect/MultiSelect.stories.tsx +19 -5
- package/src/components/MultiSelect/MultiSelect.tsx +29 -19
- package/src/components/PhoneInput/PhoneInput.d.ts +3 -0
- package/src/components/PhoneInput/PhoneInput.stories.tsx +95 -0
- package/src/components/PhoneInput/PhoneInput.tsx +90 -0
- package/src/components/PhoneInput/index.ts +1 -0
- package/src/components/PhoneInput/phoneInput.scss +3 -0
- package/src/components/PhoneInput/types.ts +10 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +14 -13
- package/src/components/PopUpModal/PopUpModal.tsx +2 -1
- package/src/components/PopUpModal/types.ts +14 -13
- package/src/components/Select/Select.stories.tsx +2 -2
- package/src/components/TableWithAccordion/TableWithAccordion.scss +54 -0
- package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx +94 -0
- package/src/components/TableWithAccordion/TableWithAccordion.tsx +174 -0
- package/src/components/TableWithAccordion/data.ts +37 -0
- package/src/components/TableWithAccordion/index.ts +1 -0
- package/src/components/TableWithAccordion/types.ts +70 -0
- package/src/components/Tabs/Tabs.scss +0 -1
- package/src/index.ts +12 -1
- package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
- package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
- package/lib/components/TableTree/TableTree copy.d.ts +0 -25
@@ -0,0 +1,174 @@
|
|
1
|
+
import { useState } from 'react';
|
2
|
+
import classNames from 'classnames';
|
3
|
+
import Accordion from '../Accordion';
|
4
|
+
import './TableWithAccordion.scss';
|
5
|
+
import Icon from '../Icon';
|
6
|
+
import Tooltip from '../Tooltip';
|
7
|
+
import '../../../index.scss';
|
8
|
+
import Typography from '../Typography';
|
9
|
+
import { ColumnProps, TableProps } from './types';
|
10
|
+
|
11
|
+
const TableWithAccordion = ({
|
12
|
+
tableMeta = [],
|
13
|
+
tableData = [],
|
14
|
+
accordionType = 'row',
|
15
|
+
noDataContent,
|
16
|
+
height = '100%',
|
17
|
+
withFixedHeader = false,
|
18
|
+
headerType,
|
19
|
+
TableAccordionStateIconWidth = 4,
|
20
|
+
TableAccordionStateIconHeight = 8,
|
21
|
+
}: TableProps) => {
|
22
|
+
const [expandedRowIndex, setExpandedRowIndex] = useState(-1);
|
23
|
+
const onAccordionClick = (index: number) => {
|
24
|
+
setExpandedRowIndex(index === expandedRowIndex ? -1 : index);
|
25
|
+
};
|
26
|
+
const getAccordionTableCellContent = (
|
27
|
+
dataObj: any,
|
28
|
+
columnObj: ColumnProps
|
29
|
+
) => {
|
30
|
+
let cellData = dataObj[columnObj.accessor];
|
31
|
+
if (columnObj.cell) {
|
32
|
+
return columnObj.cell({
|
33
|
+
value: cellData,
|
34
|
+
row: dataObj,
|
35
|
+
column: columnObj.accessor,
|
36
|
+
});
|
37
|
+
} else if (columnObj.accessor) {
|
38
|
+
return cellData;
|
39
|
+
} else if (cellData && typeof cellData !== 'object') {
|
40
|
+
return cellData;
|
41
|
+
} else {
|
42
|
+
return '--';
|
43
|
+
}
|
44
|
+
};
|
45
|
+
const getAccordionTableContent = (dataArray: any) => {
|
46
|
+
const accordionSubTable = dataArray.map((rowData: any, index: number) => {
|
47
|
+
return (
|
48
|
+
<table className="ff-accordion-table" cellSpacing={0}>
|
49
|
+
<tbody className="ff-table-body">
|
50
|
+
<tr className="ff-table-row" key={rowData.id || index}>
|
51
|
+
{tableMeta.map((column, i) => {
|
52
|
+
return (
|
53
|
+
<td
|
54
|
+
className="ff-table-cell"
|
55
|
+
key={column.accessor + i}
|
56
|
+
style={{ width: column.width }}
|
57
|
+
>
|
58
|
+
{accordionType === 'column' && i === 0 ? (
|
59
|
+
''
|
60
|
+
) : (
|
61
|
+
<Typography>
|
62
|
+
{getAccordionTableCellContent(rowData, column)}
|
63
|
+
</Typography>
|
64
|
+
)}
|
65
|
+
</td>
|
66
|
+
);
|
67
|
+
})}
|
68
|
+
</tr>
|
69
|
+
</tbody>
|
70
|
+
</table>
|
71
|
+
);
|
72
|
+
});
|
73
|
+
return accordionSubTable;
|
74
|
+
};
|
75
|
+
return (
|
76
|
+
<div
|
77
|
+
style={{ height: height }}
|
78
|
+
className={classNames('ff-accordion-table-container', {
|
79
|
+
'ff-accordion-fixed-header-table': withFixedHeader,
|
80
|
+
})}
|
81
|
+
>
|
82
|
+
<table
|
83
|
+
cellSpacing={0}
|
84
|
+
className={classNames('ff-accordion-table', {
|
85
|
+
'ff-accordion-fixed-header': withFixedHeader,
|
86
|
+
})}
|
87
|
+
>
|
88
|
+
<thead>
|
89
|
+
<tr className="ff-table-row">
|
90
|
+
{tableMeta.map((column) => (
|
91
|
+
<th
|
92
|
+
key={column.header}
|
93
|
+
style={{ width: column.width }}
|
94
|
+
className={classNames(
|
95
|
+
'ff-table-header',
|
96
|
+
headerType && `ff-accordion-table--${headerType}-bg`
|
97
|
+
)}
|
98
|
+
>
|
99
|
+
<div>
|
100
|
+
<Typography fontWeight="medium" fontSize={12}>
|
101
|
+
{column.header}
|
102
|
+
</Typography>
|
103
|
+
</div>
|
104
|
+
</th>
|
105
|
+
))}
|
106
|
+
</tr>
|
107
|
+
</thead>
|
108
|
+
</table>
|
109
|
+
{accordionType === 'row' &&
|
110
|
+
tableData.map((row: any) => (
|
111
|
+
<Accordion
|
112
|
+
headerTitle={row.title}
|
113
|
+
color="var(--text-color)"
|
114
|
+
accordionContent={getAccordionTableContent(row.data)}
|
115
|
+
disable={row.disable}
|
116
|
+
disableInfoMessage={row.disableInfoMessage}
|
117
|
+
accordionStateIconName="arrows_down_icon"
|
118
|
+
AccordionStateIconWidth={TableAccordionStateIconWidth}
|
119
|
+
AccordionStateIconHeight={TableAccordionStateIconHeight}
|
120
|
+
/>
|
121
|
+
))}
|
122
|
+
{accordionType === 'column' &&
|
123
|
+
tableData.map((row: any, index: number) => (
|
124
|
+
<div className="column-table-accordion">
|
125
|
+
<div className="ff-display-flex">
|
126
|
+
<Tooltip title={row?.disableInfoMessage}>
|
127
|
+
<div
|
128
|
+
className={`accordion-header ${row.disable && 'ff-disabled'}`}
|
129
|
+
>
|
130
|
+
<div className="header-title">
|
131
|
+
<span>
|
132
|
+
<Typography fontWeight="regular">{row.title}</Typography>
|
133
|
+
</span>
|
134
|
+
</div>
|
135
|
+
|
136
|
+
<div
|
137
|
+
className="accordion-arrow"
|
138
|
+
onClick={() => {
|
139
|
+
!row.disable && onAccordionClick(index);
|
140
|
+
}}
|
141
|
+
>
|
142
|
+
<Icon
|
143
|
+
name={
|
144
|
+
expandedRowIndex === index
|
145
|
+
? 'arrows_down_icon'
|
146
|
+
: 'arrows_right_icon'
|
147
|
+
}
|
148
|
+
color="var(--table-with-accordion-icon-color)"
|
149
|
+
width={TableAccordionStateIconWidth}
|
150
|
+
height={TableAccordionStateIconHeight}
|
151
|
+
hoverEffect={false}
|
152
|
+
/>
|
153
|
+
</div>
|
154
|
+
</div>
|
155
|
+
</Tooltip>
|
156
|
+
</div>
|
157
|
+
{expandedRowIndex === index && (
|
158
|
+
<div>{getAccordionTableContent(row.data)}</div>
|
159
|
+
)}
|
160
|
+
</div>
|
161
|
+
))}
|
162
|
+
{tableData.length <= 0 && (
|
163
|
+
<div
|
164
|
+
className="no-data-content"
|
165
|
+
style={{ height: `calc(${height} - 50px)` }}
|
166
|
+
>
|
167
|
+
{noDataContent}
|
168
|
+
</div>
|
169
|
+
)}
|
170
|
+
</div>
|
171
|
+
);
|
172
|
+
};
|
173
|
+
|
174
|
+
export default TableWithAccordion;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
export const sampleData = [
|
2
|
+
{
|
3
|
+
title: 'Pre conditions',
|
4
|
+
data: [
|
5
|
+
{
|
6
|
+
desc: 'Open Browser',
|
7
|
+
modifiedBy: 'Ram',
|
8
|
+
suiteName: 'test',
|
9
|
+
},
|
10
|
+
],
|
11
|
+
},
|
12
|
+
{
|
13
|
+
title: 'Steps',
|
14
|
+
data: [
|
15
|
+
{
|
16
|
+
desc: '1. SG1',
|
17
|
+
modifiedBy: 'Ram',
|
18
|
+
suiteName: 'suite1',
|
19
|
+
},
|
20
|
+
{
|
21
|
+
desc: '2. SG2',
|
22
|
+
modifiedBy: 'Laxman',
|
23
|
+
suiteName: 'suite 2',
|
24
|
+
},
|
25
|
+
],
|
26
|
+
},
|
27
|
+
{
|
28
|
+
title: 'Post conditions',
|
29
|
+
data: [
|
30
|
+
{
|
31
|
+
desc: 'close browser',
|
32
|
+
modifiedBy: 'Krishna',
|
33
|
+
suiteName: 'test 2',
|
34
|
+
},
|
35
|
+
],
|
36
|
+
},
|
37
|
+
];
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './TableWithAccordion';
|
@@ -0,0 +1,70 @@
|
|
1
|
+
import { ReactNode } from "react";
|
2
|
+
|
3
|
+
export interface ColumnProps {
|
4
|
+
/**
|
5
|
+
* column name
|
6
|
+
*/
|
7
|
+
header: string;
|
8
|
+
/**
|
9
|
+
* data key for particular column
|
10
|
+
*/
|
11
|
+
accessor: string;
|
12
|
+
/**
|
13
|
+
* className for a column
|
14
|
+
*/
|
15
|
+
className?: string;
|
16
|
+
/**
|
17
|
+
* width of a column
|
18
|
+
*/
|
19
|
+
width?: number;
|
20
|
+
/**
|
21
|
+
* data for the column
|
22
|
+
*/
|
23
|
+
cell?: (e: any) => JSX.Element | string | ReactNode;
|
24
|
+
}
|
25
|
+
|
26
|
+
export interface DataProps {
|
27
|
+
/**
|
28
|
+
* data for each row
|
29
|
+
*/
|
30
|
+
[key: string]: any;
|
31
|
+
}
|
32
|
+
|
33
|
+
export interface TableProps {
|
34
|
+
/**
|
35
|
+
* Column details for table
|
36
|
+
*/
|
37
|
+
tableMeta: Array<ColumnProps>;
|
38
|
+
/**
|
39
|
+
* Data for table
|
40
|
+
*/
|
41
|
+
tableData: Array<DataProps>;
|
42
|
+
/**
|
43
|
+
* Table type
|
44
|
+
*/
|
45
|
+
accordionType: 'row' | 'column';
|
46
|
+
/**
|
47
|
+
* Specific sentence to be displayed data not found
|
48
|
+
*/
|
49
|
+
noDataContent?: string | ReactNode;
|
50
|
+
/**
|
51
|
+
* withFixedHeader prop to have non-scrollable fixed accordion table header
|
52
|
+
*/
|
53
|
+
withFixedHeader?: boolean;
|
54
|
+
/**
|
55
|
+
* Height of the table in string
|
56
|
+
*/
|
57
|
+
height?: string;
|
58
|
+
/**
|
59
|
+
* Header type to have different background color
|
60
|
+
*/
|
61
|
+
headerType: 'default' | 'primary' | 'secondary';
|
62
|
+
/**
|
63
|
+
* Accordion collapse and expand Icon width
|
64
|
+
*/
|
65
|
+
TableAccordionStateIconWidth:number,
|
66
|
+
/**
|
67
|
+
* Accordion collapse and expand Icon height
|
68
|
+
*/
|
69
|
+
TableAccordionStateIconHeight:number,
|
70
|
+
}
|
package/src/index.ts
CHANGED
@@ -54,7 +54,7 @@ import SequentialConnectingBranch from './components/SequentialConnectingBranch'
|
|
54
54
|
import AttachmentButton from './components/AttachmentButton';
|
55
55
|
import { Toastify, toast } from './components/Toastify/Toastify';
|
56
56
|
import ToggleSwitch from './components/ToggleSwitch/ToggleSwitch';
|
57
|
-
import Avatar from './components/Avatar
|
57
|
+
import Avatar from './components/Avatar';
|
58
58
|
|
59
59
|
import LabelEditTextField from './components/LabelEditTextField';
|
60
60
|
import EditTextField from './components/EditTextField';
|
@@ -69,6 +69,8 @@ import LineChart from './components/Charts/LineChart';
|
|
69
69
|
import DownloadClient from './components/DownloadClient/DownloadClient';
|
70
70
|
import FieldSet from './components/FieldSet';
|
71
71
|
import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
|
72
|
+
import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
|
73
|
+
|
72
74
|
// Utils imports
|
73
75
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
74
76
|
import {
|
@@ -89,8 +91,12 @@ import Editor from './components/Editor/Editor';
|
|
89
91
|
import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
|
90
92
|
import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
|
91
93
|
import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
|
94
|
+
import Comments from './components/Comment/Comments';
|
92
95
|
import useFileDropzone from './hooks/useFileDropzone';
|
93
96
|
import PopUpModal from './components/PopUpModal/PopUpModal';
|
97
|
+
import AddVariables from './components/AddVariables/AddVariables';
|
98
|
+
import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
|
99
|
+
import PhoneInputField from './components/PhoneInput';
|
94
100
|
|
95
101
|
export {
|
96
102
|
Button,
|
@@ -168,9 +174,13 @@ export {
|
|
168
174
|
VariableDropdown,
|
169
175
|
DownloadClient,
|
170
176
|
FieldSet,
|
177
|
+
Comments,
|
171
178
|
PopUpModal,
|
172
179
|
CreateVariableSlider,
|
180
|
+
AddVariables,
|
181
|
+
PhoneInputField,
|
173
182
|
|
183
|
+
TableWithAccordion,
|
174
184
|
// utils exports
|
175
185
|
checkEmpty,
|
176
186
|
getExtension,
|
@@ -186,4 +196,5 @@ export {
|
|
186
196
|
getSequentialPayload,
|
187
197
|
saveFileFromBlob,
|
188
198
|
useFileDropzone,
|
199
|
+
hasDuplicateFile,
|
189
200
|
};
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Meta, StoryObj } from '@storybook/react';
|
3
|
+
import { hasDuplicateFile } from './checkDuplicates';
|
4
|
+
|
5
|
+
export default {
|
6
|
+
title: 'Utils/HasDuplicateFile',
|
7
|
+
argTypes: {
|
8
|
+
array: {
|
9
|
+
control: 'object',
|
10
|
+
description: 'Array of objects to check for duplicates.',
|
11
|
+
},
|
12
|
+
property: {
|
13
|
+
control: 'text',
|
14
|
+
description: 'Optional property to check for duplicates.',
|
15
|
+
},
|
16
|
+
},
|
17
|
+
} satisfies Meta;
|
18
|
+
|
19
|
+
export const Default: StoryObj = {
|
20
|
+
args: {
|
21
|
+
array: [
|
22
|
+
{ id: 1, name: 'file1' },
|
23
|
+
{ id: 2, name: 'file2' },
|
24
|
+
{ id: 1, name: 'file1' },
|
25
|
+
],
|
26
|
+
property: 'id',
|
27
|
+
},
|
28
|
+
render: (args) => {
|
29
|
+
const result = hasDuplicateFile(args.array, args.property);
|
30
|
+
return (
|
31
|
+
<div>
|
32
|
+
<h3>
|
33
|
+
Duplicate Check Result:{' '}
|
34
|
+
{result ? 'Duplicates Found' : 'No Duplicates'}
|
35
|
+
</h3>
|
36
|
+
<pre>{JSON.stringify(args.array, null, 2)}</pre>
|
37
|
+
</div>
|
38
|
+
);
|
39
|
+
},
|
40
|
+
};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// Will be used to find duplicate key-value pair in an array of objects.
|
2
|
+
|
3
|
+
export const hasDuplicateFile = (array: any[], property: string): boolean => {
|
4
|
+
const seen = new Set();
|
5
|
+
for (const obj of array) {
|
6
|
+
const key = property ? obj[property] : JSON.stringify(obj);
|
7
|
+
if (seen.has(key)) {
|
8
|
+
return true;
|
9
|
+
}
|
10
|
+
seen.add(key);
|
11
|
+
}
|
12
|
+
return false;
|
13
|
+
};
|
@@ -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;
|