feat(loading): Clean the code

Author: fhlavac

packages/module/src/DataView/DataView.tsx

@@ -18,7 +18,7 @@ export interface DataViewProps {
   /** Selection context configuration */
   selection?: DataViewSelection;
   /** Currently active state */
-  activeState?: DataViewState;
+  activeState?: DataViewState | string;
 }
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;

packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -17,9 +17,9 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   /** Current page rows */
   rows: DataViewTr[];
   /** Table head states to be displayed when active */
-  headStates?: Partial<Record<DataViewState, React.ReactNode>>
+  headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Table body states to be displayed when active */
-  bodyStates?: Partial<Record<DataViewState, React.ReactNode>>
+  bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -28,55 +28,53 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',
-  headStates = {},
-  bodyStates = {},
+  headStates,
+  bodyStates,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection, activeState, isSelectable } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
 
-  const activeHeadState = useMemo(() => activeState ? headStates[activeState] : undefined, [ activeState, headStates ]);
-  const activeBodyState = useMemo(() => activeState ? bodyStates[activeState] : undefined, [ activeState, bodyStates ]);
+  const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
+  const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
+
+  const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
+    const rowIsObject = isDataViewTrObject(row);
+    return (
+      <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
+        {isSelectable && (
+          <Td
+            key={`select-${rowIndex}`}
+            select={{
+              rowIndex,
+              onSelect: (_event, isSelecting) => {
+                onSelect?.(isSelecting, rowIsObject ? row : [ row ]);
+              },
+              isSelected: isSelected?.(row) || false,
+              isDisabled: isSelectDisabled?.(row) || false,
+            }}
+          />
+        )}
+        {(rowIsObject ? row.row : row).map((cell, colIndex) => {
+          const cellIsObject = isDataViewTdObject(cell);
+          return (
+            <Td
+              key={colIndex}
+              {...(cellIsObject && (cell?.props ?? {}))}
+              data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+            >
+              {cellIsObject ? cell.cell : cell}
+            </Td>
+          );
+        })}
+      </Tr>
+    );
+  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId ]);
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
       { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} /> }
-      { activeBodyState || (
-        <Tbody>
-          {rows.map((row, rowIndex) => {
-            const rowIsObject = isDataViewTrObject(row);
-            return (
-              <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
-                {isSelectable && (
-                  <Td
-                    key={`select-${rowIndex}`}
-                    select={{
-                      rowIndex,
-                      onSelect: (_event, isSelecting) => {
-                        onSelect?.(isSelecting, rowIsObject ? row : [ row ]);
-                      },
-                      isSelected: isSelected?.(row) || false,
-                      isDisabled: isSelectDisabled?.(row) || false,
-                    }}
-                  />
-                )}
-                {(rowIsObject ? row.row : row).map((cell, colIndex) => {
-                  const cellIsObject = isDataViewTdObject(cell);
-                  return (
-                    <Td
-                      key={colIndex}
-                      {...(cellIsObject && (cell?.props ?? {}))}
-                      data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
-                    >
-                      {cellIsObject ? cell.cell : cell}
-                    </Td>
-                  );
-                })}
-              </Tr>
-            );
-          })}
-        </Tbody>
-      )}
+      { activeBodyState || <Tbody>{renderedRows}</Tbody> }
     </Table>
   );
 };

packages/module/src/DataViewTableTree/DataViewTableTree.tsx

@@ -36,9 +36,9 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   /** Current page rows */
   rows: DataViewTrTree[];
   /** Table head states to be displayed when active */
-  headStates?: Partial<Record<DataViewState, React.ReactNode>>
+  headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Table body states to be displayed when active */
-  bodyStates?: Partial<Record<DataViewState, React.ReactNode>>
+  bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Optional icon for the leaf rows */
   leafIcon?: React.ReactNode;
   /** Optional icon for the expanded parent rows */
@@ -52,8 +52,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
 export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   columns,
   rows,
-  headStates = {},
-  bodyStates = {},
+  headStates,
+  bodyStates,
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
@@ -65,8 +65,8 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
   const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
 
-  const activeHeadState = useMemo(() => activeState ? headStates[activeState] : undefined, [ activeState, headStates ]);
-  const activeBodyState = useMemo(() => activeState ? bodyStates[activeState] : undefined, [ activeState, bodyStates ]);
+  const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
+  const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
 
   const nodes = useMemo(() => {
 

packages/module/src/InternalContext/InternalContext.tsx

@@ -14,7 +14,7 @@ export interface InternalContextProps {
   /** Data selection props */
   selection?: DataViewSelection;
   /** Currently active state */
-  activeState?: DataViewState;
+  activeState?: DataViewState | string;
 }
 
 export interface InternalContextValue extends InternalContextProps {