Skip to content

Commit 8818def

Browse files
fhlavacfhlavac
committed
feat(loading): Clean the code
1 parent b51caaa commit 8818def

File tree

4 files changed

+48
-50
lines changed

4 files changed

+48
-50
lines changed

‎packages/module/src/DataView/DataView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface DataViewProps {
1818
/** Selection context configuration */
1919
selection?: DataViewSelection;
2020
/** Currently active state */
21-
activeState?: DataViewState;
21+
activeState?: DataViewState | string;
2222
}
2323

2424
export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;

‎packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
1717
/** Current page rows */
1818
rows: DataViewTr[];
1919
/** Table head states to be displayed when active */
20-
headStates?: Partial<Record<DataViewState, React.ReactNode>>
20+
headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
2121
/** Table body states to be displayed when active */
22-
bodyStates?: Partial<Record<DataViewState, React.ReactNode>>
22+
bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
2323
/** Custom OUIA ID */
2424
ouiaId?: string;
2525
}
@@ -28,55 +28,53 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
2828
columns,
2929
rows,
3030
ouiaId = 'DataViewTableBasic',
31-
headStates = {},
32-
bodyStates = {},
31+
headStates,
32+
bodyStates,
3333
...props
3434
}: DataViewTableBasicProps) => {
3535
const { selection, activeState, isSelectable } = useInternalContext();
3636
const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
3737

38-
const activeHeadState = useMemo(() => activeState ? headStates[activeState] : undefined, [ activeState, headStates ]);
39-
const activeBodyState = useMemo(() => activeState ? bodyStates[activeState] : undefined, [ activeState, bodyStates ]);
38+
const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
39+
const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
40+
41+
const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
42+
const rowIsObject = isDataViewTrObject(row);
43+
return (
44+
<Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
45+
{isSelectable && (
46+
<Td
47+
key={`select-${rowIndex}`}
48+
select={{
49+
rowIndex,
50+
onSelect: (_event, isSelecting) => {
51+
onSelect?.(isSelecting, rowIsObject ? row : [ row ]);
52+
},
53+
isSelected: isSelected?.(row) || false,
54+
isDisabled: isSelectDisabled?.(row) || false,
55+
}}
56+
/>
57+
)}
58+
{(rowIsObject ? row.row : row).map((cell, colIndex) => {
59+
const cellIsObject = isDataViewTdObject(cell);
60+
return (
61+
<Td
62+
key={colIndex}
63+
{...(cellIsObject && (cell?.props ?? {}))}
64+
data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
65+
>
66+
{cellIsObject ? cell.cell : cell}
67+
</Td>
68+
);
69+
})}
70+
</Tr>
71+
);
72+
}), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId ]);
4073

4174
return (
4275
<Table aria-label="Data table" ouiaId={ouiaId} {...props}>
4376
{ activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
44-
{ activeBodyState || (
45-
<Tbody>
46-
{rows.map((row, rowIndex) => {
47-
const rowIsObject = isDataViewTrObject(row);
48-
return (
49-
<Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
50-
{isSelectable && (
51-
<Td
52-
key={`select-${rowIndex}`}
53-
select={{
54-
rowIndex,
55-
onSelect: (_event, isSelecting) => {
56-
onSelect?.(isSelecting, rowIsObject ? row : [ row ]);
57-
},
58-
isSelected: isSelected?.(row) || false,
59-
isDisabled: isSelectDisabled?.(row) || false,
60-
}}
61-
/>
62-
)}
63-
{(rowIsObject ? row.row : row).map((cell, colIndex) => {
64-
const cellIsObject = isDataViewTdObject(cell);
65-
return (
66-
<Td
67-
key={colIndex}
68-
{...(cellIsObject && (cell?.props ?? {}))}
69-
data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
70-
>
71-
{cellIsObject ? cell.cell : cell}
72-
</Td>
73-
);
74-
})}
75-
</Tr>
76-
);
77-
})}
78-
</Tbody>
79-
)}
77+
{ activeBodyState || <Tbody>{renderedRows}</Tbody> }
8078
</Table>
8179
);
8280
};

‎packages/module/src/DataViewTableTree/DataViewTableTree.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
3636
/** Current page rows */
3737
rows: DataViewTrTree[];
3838
/** Table head states to be displayed when active */
39-
headStates?: Partial<Record<DataViewState, React.ReactNode>>
39+
headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
4040
/** Table body states to be displayed when active */
41-
bodyStates?: Partial<Record<DataViewState, React.ReactNode>>
41+
bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
4242
/** Optional icon for the leaf rows */
4343
leafIcon?: React.ReactNode;
4444
/** Optional icon for the expanded parent rows */
@@ -52,8 +52,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
5252
export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
5353
columns,
5454
rows,
55-
headStates = {},
56-
bodyStates = {},
55+
headStates,
56+
bodyStates,
5757
leafIcon = null,
5858
expandedIcon = null,
5959
collapsedIcon = null,
@@ -65,8 +65,8 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
6565
const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
6666
const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
6767

68-
const activeHeadState = useMemo(() => activeState ? headStates[activeState] : undefined, [ activeState, headStates ]);
69-
const activeBodyState = useMemo(() => activeState ? bodyStates[activeState] : undefined, [ activeState, bodyStates ]);
68+
const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
69+
const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
7070

7171
const nodes = useMemo(() => {
7272

‎packages/module/src/InternalContext/InternalContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface InternalContextProps {
1414
/** Data selection props */
1515
selection?: DataViewSelection;
1616
/** Currently active state */
17-
activeState?: DataViewState;
17+
activeState?: DataViewState | string;
1818
}
1919

2020
export interface InternalContextValue extends InternalContextProps {

0 commit comments

Comments
 (0)