@true-engineering/true-react-common-ui-kit 3.1.1 → 3.2.0

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,69 +1,73 @@
-import { ReactNode } from 'react';
-import clsx from 'clsx';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import type { ICommonProps } from '../../../../types';
-import { formatCellContent } from '../../helpers';
-import type { IFlexibleTableConfigType } from '../../types';
-import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
-
-export interface IFlexibleTableCellProps<Values extends Record<string, any>>
-  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
-  item: Values;
-  columnName: keyof Values;
-  config: IFlexibleTableConfigType<Values>;
-  isFocusedRow?: boolean;
-  isSecond?: boolean;
-  isSticky?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent(component?: ReactNode): void;
-}
-
-export function FlexibleTableCell<Values extends Record<string, any>>({
-  item,
-  columnName,
-  config,
-  isFocusedRow,
-  isSecond,
-  isSticky,
-  isNestedComponentExpanded,
-  isRowNestedComponentExpanded,
-  tweakStyles,
-  onSetNestedComponent,
-}: IFlexibleTableCellProps<Values>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const { component, cellAlign, position, right, left, cellVerticalAlign } =
-    config[columnName] ?? {};
-
-  const value = item[columnName];
-
-  return (
-    <td
-      key={columnName as string}
-      className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
-      style={{
-        textAlign: cellAlign,
-        position: isSticky ? 'sticky' : position,
-        right,
-        left: isSticky ? 0 : left,
-        verticalAlign: cellVerticalAlign,
-      }}
-    >
-      {isNotEmpty(value) && (
-        <>
-          {isNotEmpty(component)
-            ? component({
-                value,
-                row: item,
-                isFocusedRow,
-                isNestedComponentExpanded,
-                isRowNestedComponentExpanded,
-                onSetNestedComponent,
-              })
-            : formatCellContent(value, config[columnName])}
-        </>
-      )}
-    </td>
-  );
-}
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import type { ICommonProps } from '../../../../types';
+import { formatCellContent } from '../../helpers';
+import type { IFlexibleTableConfigType } from '../../types';
+import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
+
+export interface IFlexibleTableCellProps<Values extends Record<string, any>>
+  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
+  item: Values;
+  columnName: keyof Values;
+  config: IFlexibleTableConfigType<Values>;
+  renderMode?: 'table' | 'divs';
+  isFocusedRow?: boolean;
+  isSecond?: boolean;
+  isSticky?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent(component?: ReactNode): void;
+}
+
+export function FlexibleTableCell<Values extends Record<string, any>>({
+  item,
+  columnName,
+  config,
+  renderMode,
+  isFocusedRow,
+  isSecond,
+  isSticky,
+  isNestedComponentExpanded,
+  isRowNestedComponentExpanded,
+  tweakStyles,
+  onSetNestedComponent,
+}: IFlexibleTableCellProps<Values>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+    config[columnName] ?? {};
+
+  const value = item[columnName];
+
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
+  return (
+    <TableCell
+      key={columnName as string}
+      className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
+      style={{
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        right,
+        left: isSticky ? 0 : left,
+        verticalAlign: cellVerticalAlign,
+      }}
+    >
+      {isNotEmpty(value) && (
+        <>
+          {isNotEmpty(component)
+            ? component({
+                value,
+                row: item,
+                isFocusedRow,
+                isNestedComponentExpanded,
+                isRowNestedComponentExpanded,
+                onSetNestedComponent,
+              })
+            : formatCellContent(value, config[columnName])}
+        </>
+      )}
+    </TableCell>
+  );
+}

package/src/components/FlexibleTable/components/FlexibleTableCell/index.ts

@@ -1,2 +1,2 @@
-export * from './FlexibleTableCell';
-export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
+export * from './FlexibleTableCell';
+export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts

@@ -1,23 +1,25 @@
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
-
-export const useStyles = createThemedStyles('FlexibleTableRow', {
-  root: {
-    position: 'relative',
-  },
-
-  active: {},
-
-  editable: {
-    cursor: 'pointer',
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-});
-
-export type IFlexibleTableRowStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakTableCell: IFlexibleTableCellStyles }
->;
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
+
+export const useStyles = createThemedStyles('FlexibleTableRow', {
+  root: {
+    position: 'relative',
+  },
+
+  active: {},
+
+  editable: {
+    cursor: 'pointer',
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+
+  nestedComponent: {},
+});
+
+export type IFlexibleTableRowStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableCell: IFlexibleTableCellStyles }
+>;

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,155 +1,163 @@
-import { ReactNode, useState, memo } from 'react';
-import clsx from 'clsx';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
-import { IFlexibleTableConfigType, INestedComponent } from '../../types';
-import { FlexibleTableCell } from '../FlexibleTableCell';
-import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableRowProps<Values extends Record<string, any>>
-  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
-  item: Values;
-  uniqueField?: keyof Values;
-  isFirstColumnSticky?: boolean;
-  isActive: boolean;
-  config: IFlexibleTableConfigType<Values>;
-  enabledColumns?: Array<keyof Values>;
-  rowAttributes?: Array<keyof Values>;
-  expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowHover?(id?: string): void;
-  onRowClick?(id: string): void;
-}
-
-function FlexibleTableRowInner<Values extends Record<string, any>>({
-  item,
-  uniqueField,
-  isFirstColumnSticky,
-  isActive,
-  config,
-  enabledColumns,
-  rowAttributes,
-  tweakStyles,
-  expandableRowComponent,
-  onRowHover,
-  onRowClick,
-}: IFlexibleTableRowProps<Values>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakTableCellStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakTableCell',
-    currentComponentName: 'FlexibleTableRow',
-  });
-
-  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 (isNotEmpty(expandableRowComponent)) {
-      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(config);
-  const isEditable = isNotEmpty(onRowClick) || isNotEmpty(onRowHover);
-
-  return (
-    <>
-      <tr
-        className={clsx(classes.root, {
-          [classes.active]: isActive,
-          [classes.editable]: isEditable,
-          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
-        })}
-        onMouseEnter={(e) => {
-          if (uniqueField !== undefined && onRowHover !== undefined) {
-            e.stopPropagation();
-            onRowHover(item[uniqueField]);
-            setFocused(true);
-          }
-        }}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleRowClick}
-        {...addDataAttributes({
-          ...rowData,
-          active: isActive ? true : undefined,
-          editable: isEditable ? true : undefined,
-          isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
-        })}
-      >
-        {items.map((key, i) => (
-          <FlexibleTableCell
-            columnName={key}
-            isSticky={isFirstColumnSticky && i === 0}
-            isSecond={isFirstColumnSticky && i === 1}
-            key={key as string}
-            item={item}
-            config={config}
-            tweakStyles={tweakTableCellStyles}
-            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 const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;
+import { ReactNode, useState, memo } from 'react';
+import clsx from 'clsx';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps, IDataAttributes } from '../../../../types';
+import { IFlexibleTableConfigType, INestedComponent } from '../../types';
+import { FlexibleTableCell } from '../FlexibleTableCell';
+import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export interface IFlexibleTableRowProps<Values extends Record<string, any>>
+  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+  item: Values;
+  uniqueField?: keyof Values;
+  isFirstColumnSticky?: boolean;
+  isActive: boolean;
+  config: IFlexibleTableConfigType<Values>;
+  enabledColumns?: Array<keyof Values>;
+  rowAttributes?: Array<keyof Values>;
+  renderMode?: 'table' | 'divs';
+  expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
+  // TODO: Заменить string на Generic Values[uniqueField]
+  onRowHover?(id?: string): void;
+  onRowClick?(id: string): void;
+}
+
+function FlexibleTableRowInner<Values extends Record<string, any>>({
+  item,
+  uniqueField,
+  isFirstColumnSticky,
+  isActive,
+  config,
+  enabledColumns,
+  rowAttributes,
+  renderMode,
+  tweakStyles,
+  expandableRowComponent,
+  onRowHover,
+  onRowClick,
+}: IFlexibleTableRowProps<Values>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakTableCellStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableCell',
+    currentComponentName: 'FlexibleTableRow',
+  });
+
+  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 (isNotEmpty(expandableRowComponent)) {
+      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(config);
+  const isEditable = isNotEmpty(onRowClick) || isNotEmpty(onRowHover);
+
+  const TableRow = renderMode === 'divs' ? 'div' : 'tr';
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
+  return (
+    <>
+      <TableRow
+        className={clsx(classes.root, {
+          [classes.active]: isActive,
+          [classes.editable]: isEditable,
+          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
+        })}
+        onMouseEnter={(e) => {
+          if (uniqueField !== undefined && onRowHover !== undefined) {
+            e.stopPropagation();
+            onRowHover(item[uniqueField]);
+            setFocused(true);
+          }
+        }}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleRowClick}
+        {...addDataAttributes({
+          ...rowData,
+          active: isActive ? true : undefined,
+          editable: isEditable ? true : undefined,
+          isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
+        })}
+      >
+        {items.map((key, i) => (
+          <FlexibleTableCell
+            columnName={key}
+            isSticky={isFirstColumnSticky && i === 0}
+            isSecond={isFirstColumnSticky && i === 1}
+            key={key as string}
+            item={item}
+            config={config}
+            tweakStyles={tweakTableCellStyles}
+            renderMode={renderMode}
+            isFocusedRow={isFocused}
+            isNestedComponentExpanded={nestedComponent.isOpen && nestedComponent.cellKey === key}
+            isRowNestedComponentExpanded={
+              nestedComponent.isOpen && nestedComponent.cellKey === undefined
+            }
+            onSetNestedComponent={(component) => updateNestedComponent(component, key as string)}
+          />
+        ))}
+      </TableRow>
+
+      {nestedComponent.isOpen && (
+        <TableRow className={classes.root}>
+          <TableCell className={classes.nestedComponent} colSpan={items.length}>
+            {nestedComponent.component}
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}
+
+export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;

package/src/components/FlexibleTable/components/FlexibleTableRow/index.ts

@@ -1,2 +1,2 @@
-export * from './FlexibleTableRow';
-export type { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
+export * from './FlexibleTableRow';
+export type { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';

package/src/components/FlexibleTable/components/index.ts

@@ -1,2 +1,2 @@
-export * from './FlexibleTableRow';
-export * from './FlexibleTableCell';
+export * from './FlexibleTableRow';
+export * from './FlexibleTableCell';

package/src/components/FlexibleTable/constants.ts

@@ -1 +1 @@
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';

package/src/components/FlexibleTable/helpers.ts

@@ -1,15 +1,15 @@
-import { format } from 'date-fns';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { DEFAULT_DATE_FORMAT } from './constants';
-import { IFlexibleTableConfigType } from './types';
-
-export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
-  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
-
-export const formatCellContent = <Values>(
-  value: unknown,
-  config?: IFlexibleTableConfigType<Values>[keyof Values],
-): string =>
-  value instanceof Date
-    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
-    : String(value);
+import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { DEFAULT_DATE_FORMAT } from './constants';
+import { IFlexibleTableConfigType } from './types';
+
+export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
+  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
+
+export const formatCellContent = <Values>(
+  value: unknown,
+  config?: IFlexibleTableConfigType<Values>[keyof Values],
+): string =>
+  value instanceof Date
+    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
+    : String(value);

package/src/components/FlexibleTable/index.ts

@@ -1,4 +1,4 @@
-export * from './FlexibleTable';
-export * from './types';
-export type { IFlexibleTableStyles } from './FlexibleTable.styles';
-export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';
+export * from './FlexibleTable';
+export * from './types';
+export type { IFlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';