@true-engineering/true-react-common-ui-kit 1.2.0 → 1.3.1

package/src/components/FlexibleTable/TableRow.tsx

@@ -1,164 +1,171 @@
-import React, { ReactNode, useState } from 'react';
-import clsx from 'clsx';
-
-import { FlexibleTableConfigType, INestedComponent } from './types';
-import { ICommonProps, IDataAttributes } from '../../types';
-import TableValue from './TableValue';
-import { addDataAttributes } from '../../helpers';
-
-interface ITableRowProps<Values extends Record<string, any>>
-  extends ICommonProps {
-  item: Values;
-  uniqueField?: keyof Values;
-  isFirstColumnSticky?: boolean;
-  isActive: boolean;
-  config?: FlexibleTableConfigType<Values>;
-  enabledColumns?: Array<keyof Values>;
-  rowAttributes?: Array<keyof Values>;
-  expandableRowComponent?: (
-    item: Values,
-    isOpen: boolean,
-    close: () => void,
-  ) => React.ReactNode;
-  onRowHover?: (id?: string) => void;
-  onRowClick?: (id: string) => void;
-  // чтобы не перерендеривать стили для каждой строчки / ячейки
-  // TODO: Можно лучше через Classes
-  classes: {
-    root: string;
-    active: string;
-    editable: string;
-    cell: {
-      root: string;
-      sticky: string;
-      second: string;
-    };
-  };
-}
-
-function TableRow<Values extends Record<string, any>>({
-  item,
-  uniqueField,
-  isFirstColumnSticky,
-  isActive,
-  config,
-  enabledColumns,
-  onRowHover,
-  onRowClick,
-  rowAttributes,
-  expandableRowComponent,
-  classes,
-}: ITableRowProps<Values>): JSX.Element {
-  const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
-    isOpen: false,
-  });
-
-  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
-  // например: rowAttributes={['id']} => <tr data-id="x" />
-  const rowData = rowAttributes?.reduce((acc: IDataAttributes, cur) => {
-    const val = item[cur];
-    if (val !== undefined) {
-      acc[cur as string] = String(item[cur]);
-    }
-    return acc;
-  }, {});
-
-  const handleMouseLeave = () => {
-    if (onRowHover) {
-      onRowHover(undefined);
-    }
-    setFocused(false);
-  };
-
-  const updateNestedComponent = (component?: ReactNode, cellKey?: string) => {
-    setNestedComponent(
-      component === undefined
-        ? { isOpen: false }
-        : { isOpen: true, component, cellKey },
-    );
-  };
-
-  const closeNestedComponent = () => {
-    setNestedComponent({ isOpen: false });
-  };
-
-  const handleRowClick = () => {
-    if (uniqueField !== undefined) {
-      onRowClick?.(item[uniqueField]);
-    }
-
-    if (expandableRowComponent !== undefined) {
-      const newNestedComponent = expandableRowComponent(
-        item,
-        true,
-        closeNestedComponent,
-      );
-
-      if (!nestedComponent.isOpen && newNestedComponent !== null) {
-        updateNestedComponent(newNestedComponent);
-        return;
-      }
-
-      if (nestedComponent.isOpen && nestedComponent.cellKey === undefined) {
-        closeNestedComponent();
-        return;
-      }
-    }
-  };
-
-  const items = enabledColumns ?? Object.keys(item);
-
-  return (
-    <>
-      <tr
-        className={clsx(
-          classes.root,
-          isActive && classes.active,
-          (onRowClick !== undefined || onRowHover !== undefined) &&
-            classes.editable,
-        )}
-        onMouseEnter={(e) => {
-          if (uniqueField !== undefined && onRowHover !== undefined) {
-            e.stopPropagation();
-            onRowHover(item[uniqueField]);
-            setFocused(true);
-          }
-        }}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleRowClick}
-        {...addDataAttributes(rowData)}
-      >
-        {items.map((key, idx) => (
-          <TableValue
-            columnName={key as string}
-            isSticky={isFirstColumnSticky && idx === 0}
-            isSecond={isFirstColumnSticky && idx === 1}
-            key={key as string}
-            item={item}
-            config={config}
-            classes={classes.cell}
-            isFocusedRow={isFocused}
-            isNestedComponentExpanded={
-              nestedComponent.isOpen && nestedComponent.cellKey === key
-            }
-            isRowNestedComponentExpanded={
-              nestedComponent.isOpen && nestedComponent.cellKey === undefined
-            }
-            onSetNestedComponent={(component) =>
-              updateNestedComponent(component, key as string)
-            }
-          />
-        ))}
-      </tr>
-
-      {nestedComponent.isOpen && (
-        <tr className={classes.root}>
-          <td colSpan={items.length}>{nestedComponent.component}</td>
-        </tr>
-      )}
-    </>
-  );
-}
-
-export default React.memo(TableRow) as typeof TableRow;
+import React, { ReactNode, useState } from 'react';
+import clsx from 'clsx';
+
+import { FlexibleTableConfigType, INestedComponent } from './types';
+import { ICommonProps, IDataAttributes } from '../../types';
+import TableValue from './TableValue';
+import { addDataAttributes } from '../../helpers';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+interface ITableRowProps<Values extends Record<string, any>>
+  extends ICommonProps {
+  item: Values;
+  uniqueField?: keyof Values;
+  isFirstColumnSticky?: boolean;
+  isActive: boolean;
+  config?: FlexibleTableConfigType<Values>;
+  enabledColumns?: Array<keyof Values>;
+  rowAttributes?: Array<keyof Values>;
+  expandableRowComponent?: (
+    item: Values,
+    isOpen: boolean,
+    close: () => void,
+  ) => React.ReactNode;
+  // TODO: Заменить string на Generic Values[uniqueField]
+  onRowHover?: (id?: string) => void;
+  onRowClick?: (id: string) => void;
+  // чтобы не перерендеривать стили для каждой строчки / ячейки
+  // TODO: Можно лучше через Classes
+  classes: {
+    root: string;
+    active: string;
+    editable: string;
+    cell: {
+      root: string;
+      sticky: string;
+      second: string;
+    };
+  };
+}
+
+function TableRow<Values extends Record<string, any>>({
+  item,
+  uniqueField,
+  isFirstColumnSticky,
+  isActive,
+  config,
+  enabledColumns,
+  onRowHover,
+  onRowClick,
+  rowAttributes,
+  expandableRowComponent,
+  classes,
+}: ITableRowProps<Values>): JSX.Element {
+  const [isFocused, setFocused] = useState(false);
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
+    isOpen: false,
+  });
+
+  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
+  // например: rowAttributes={['id']} => <tr data-id="x" />
+  const rowData = rowAttributes?.reduce((acc: IDataAttributes, cur) => {
+    const val = item[cur];
+    if (val !== undefined) {
+      acc[cur as string] = String(item[cur]);
+    }
+    return acc;
+  }, {});
+
+  const handleMouseLeave = () => {
+    if (onRowHover) {
+      onRowHover(undefined);
+    }
+    setFocused(false);
+  };
+
+  const updateNestedComponent = (component?: ReactNode, cellKey?: string) => {
+    setNestedComponent(
+      component === undefined
+        ? { isOpen: false }
+        : { isOpen: true, component, cellKey },
+    );
+  };
+
+  const closeNestedComponent = () => {
+    setNestedComponent({ isOpen: false });
+  };
+
+  const handleRowClick = () => {
+    if (uniqueField !== undefined) {
+      onRowClick?.(item[uniqueField]);
+    }
+
+    if (expandableRowComponent !== undefined) {
+      const newNestedComponent = expandableRowComponent(
+        item,
+        true,
+        closeNestedComponent,
+      );
+
+      if (!nestedComponent.isOpen && newNestedComponent !== null) {
+        updateNestedComponent(newNestedComponent);
+        return;
+      }
+
+      if (nestedComponent.isOpen && nestedComponent.cellKey === undefined) {
+        closeNestedComponent();
+        return;
+      }
+    }
+  };
+
+  const items = enabledColumns ?? Object.keys(item);
+
+  return (
+    <>
+      <tr
+        className={clsx(
+          classes.root,
+          isActive && classes.active,
+          (onRowClick !== undefined || onRowHover !== undefined) &&
+            classes.editable,
+        )}
+        onMouseEnter={(e) => {
+          if (uniqueField !== undefined && onRowHover !== undefined) {
+            e.stopPropagation();
+            onRowHover(item[uniqueField]);
+            setFocused(true);
+          }
+        }}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleRowClick}
+        {...addDataAttributes({
+          ...rowData,
+          isExpandableComponentActive: nestedComponent.isOpen
+            ? true
+            : undefined,
+        })}
+      >
+        {items.map((key, idx) => (
+          <TableValue
+            columnName={key}
+            isSticky={isFirstColumnSticky && idx === 0}
+            isSecond={isFirstColumnSticky && idx === 1}
+            key={key as string}
+            item={item}
+            config={config}
+            classes={classes.cell}
+            isFocusedRow={isFocused}
+            isNestedComponentExpanded={
+              nestedComponent.isOpen && nestedComponent.cellKey === key
+            }
+            isRowNestedComponentExpanded={
+              nestedComponent.isOpen && nestedComponent.cellKey === undefined
+            }
+            onSetNestedComponent={(component) =>
+              updateNestedComponent(component, key as string)
+            }
+          />
+        ))}
+      </tr>
+
+      {nestedComponent.isOpen && (
+        <tr className={classes.root}>
+          <td colSpan={items.length}>{nestedComponent.component}</td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+export default React.memo(TableRow) as typeof TableRow;

package/src/components/FlexibleTable/TableValue.tsx

@@ -1,86 +1,83 @@
-import clsx from 'clsx';
-import { ReactNode } from 'react';
-import { format } from 'date-fns';
-
-import type { ICommonProps } from '../../types';
-import type { FlexibleTableConfigType, IValueComponent } from './types';
-
-interface ITableValueProps<Values extends Record<string, any>>
-  extends ICommonProps {
-  item: Values;
-  columnName: keyof Values;
-  config?: FlexibleTableConfigType<Values>;
-  classes: {
-    root: string;
-    sticky: string;
-    second: string;
-  };
-  isFocusedRow?: boolean;
-  isSecond?: boolean;
-  isSticky?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
-}
-
-const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-function TableValue<Values extends Record<string, any>>({
-  item,
-  columnName,
-  config,
-  classes,
-  isFocusedRow,
-  isSecond,
-  isSticky,
-  isNestedComponentExpanded,
-  isRowNestedComponentExpanded,
-  onSetNestedComponent,
-}: ITableValueProps<Values>): JSX.Element {
-  const itemConfig = config?.[columnName];
-  const value = item[columnName];
-  let content = null;
-
-  if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component as IValueComponent<
-      Values,
-      typeof columnName
-    >;
-    content = (
-      <ValueComponent
-        value={value}
-        row={item}
-        isFocusedRow={isFocusedRow}
-        isNestedComponentExpanded={isNestedComponentExpanded}
-        isRowNestedComponentExpanded={isRowNestedComponentExpanded}
-        onSetNestedComponent={onSetNestedComponent}
-      />
-    );
-  } else if (typeof value === 'string' || typeof value === 'number') {
-    content = value;
-  } else if ((value as any) instanceof Date) {
-    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
-  }
-
-  return (
-    <td
-      key={columnName as string}
-      className={clsx(
-        classes.root,
-        isSticky && classes.sticky,
-        isSecond && classes.second,
-      )}
-      style={{
-        textAlign: itemConfig?.cellAlign,
-        position: isSticky ? 'sticky' : itemConfig?.position,
-        right: itemConfig?.right,
-        left: isSticky ? 0 : itemConfig?.left,
-        verticalAlign: itemConfig?.cellVerticalAlign,
-      }}
-    >
-      {content}
-    </td>
-  );
-}
-
-export default TableValue;
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { format } from 'date-fns';
+
+import type { ICommonProps } from '../../types';
+import type { FlexibleTableConfigType } from './types';
+
+interface ITableValueProps<Values extends Record<string, any>>
+  extends ICommonProps {
+  item: Values;
+  columnName: keyof Values;
+  config?: FlexibleTableConfigType<Values>;
+  classes: {
+    root: string;
+    sticky: string;
+    second: string;
+  };
+  isFocusedRow?: boolean;
+  isSecond?: boolean;
+  isSticky?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}
+
+const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+function TableValue<Values extends Record<string, any>>({
+  item,
+  columnName,
+  config,
+  classes,
+  isFocusedRow,
+  isSecond,
+  isSticky,
+  isNestedComponentExpanded,
+  isRowNestedComponentExpanded,
+  onSetNestedComponent,
+}: ITableValueProps<Values>): JSX.Element {
+  const itemConfig = config?.[columnName];
+  const value = item[columnName];
+  let content = null;
+
+  if (itemConfig?.component) {
+    const ValueComponent = itemConfig?.component;
+    content = (
+      <ValueComponent
+        value={value}
+        row={item}
+        isFocusedRow={isFocusedRow}
+        isNestedComponentExpanded={isNestedComponentExpanded}
+        isRowNestedComponentExpanded={isRowNestedComponentExpanded}
+        onSetNestedComponent={onSetNestedComponent}
+      />
+    );
+  } else if (typeof value === 'string' || typeof value === 'number') {
+    content = value;
+  } else if ((value as any) instanceof Date) {
+    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
+  }
+
+  return (
+    <td
+      key={columnName as string}
+      className={clsx(
+        classes.root,
+        isSticky && classes.sticky,
+        isSecond && classes.second,
+      )}
+      style={{
+        textAlign: itemConfig?.cellAlign,
+        position: isSticky ? 'sticky' : itemConfig?.position,
+        right: itemConfig?.right,
+        left: isSticky ? 0 : itemConfig?.left,
+        verticalAlign: itemConfig?.cellVerticalAlign,
+      }}
+    >
+      {content}
+    </td>
+  );
+}
+
+export default TableValue;