@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha6

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

@@ -1,193 +1,196 @@
-import { ReactNode, useState, memo, MouseEvent } from 'react';
-import clsx from 'clsx';
-import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
-import { TableRenders } from '../../constants';
-import {
-  ITableRow,
-  IFlexibleTableConfigType,
-  IFlexibleTableRenderMode,
-  INestedComponent,
-  IHeaderContent,
-} from '../../types';
-import { FlexibleTableCell } from '../FlexibleTableCell';
-import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
-
-export interface IFlexibleTableRowProps<
-  Row extends ITableRow,
-  HeaderContent extends IHeaderContent<Row>,
-  UniqueField extends keyof Row,
-> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
-  item: Row;
-  index: number;
-  uniqueField?: UniqueField;
-  renderMode: IFlexibleTableRenderMode;
-  /** @default false */
-  isActive?: boolean;
-  /** @default false */
-  isFocusable?: boolean;
-  /** @deprecated Use {@position}
-   * @default false */
-  isFirstColumnSticky?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-  config: IFlexibleTableConfigType<Row, HeaderContent>;
-  columns: Array<keyof Row & string>;
-  rowAttributes?: Array<keyof Row>;
-  /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
-  /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
-  expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
-  onRowHover?: (id?: Row[UniqueField]) => void;
-  onRowClick?: (id: Row[UniqueField]) => void;
-}
-
-function FlexibleTableRowInner<
-  Row extends ITableRow,
-  HeaderContent extends IHeaderContent<Row>,
-  UniqueField extends keyof Row,
->({
-  item,
-  index,
-  config,
-  columns,
-  uniqueField,
-  renderMode,
-  isActive = false,
-  isFocusable = false,
-  isFirstColumnSticky = false,
-  isLoading = false,
-  rowAttributes,
-  isExpandableRowComponentInitiallyOpen = false,
-  tweakStyles,
-  expandableRowComponent,
-  onRowHover,
-  onRowClick,
-}: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): 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: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
-  }));
-
-  const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
-  const isClickable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent));
-
-  const { isOpen: isNestedComponentExpanded, cellKey: nestedComponentCellKey } = nestedComponent;
-
-  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
-  // например: rowAttributes={['id']} => <tr data-id="x" />
-  const rowData: IDataAttributes = Object.fromEntries(
-    rowAttributes?.map((attribute) => [attribute, item[attribute]]) ?? [],
-  );
-
-  const handleMouseEnter = (event: MouseEvent) => {
-    if (isNotEmpty(uniqueField) && isNotEmpty(onRowHover)) {
-      event.stopPropagation();
-      onRowHover(item[uniqueField]);
-    }
-    if (isFocusable) {
-      setFocused(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    onRowHover?.(undefined);
-    if (isFocusable) {
-      setFocused(false);
-    }
-  };
-
-  const closeNestedComponent = () => {
-    setNestedComponent({ isOpen: false });
-  };
-
-  const updateNestedComponent = (component: ReactNode, cellKey: string) => {
-    if (isEmpty(component)) {
-      closeNestedComponent();
-    } else {
-      setNestedComponent({ isOpen: true, component, cellKey });
-    }
-  };
-
-  const handleRowClick = () => {
-    if (isNotEmpty(uniqueField)) {
-      onRowClick?.(item[uniqueField]);
-    }
-    if (isEmpty(expandableRowComponent)) {
-      return;
-    }
-
-    if (!isNestedComponentExpanded) {
-      setNestedComponent({ isOpen: true });
-    } else if (isEmpty(nestedComponentCellKey)) {
-      closeNestedComponent();
-    }
-  };
-
-  const Table = TableRenders[renderMode];
-
-  return (
-    <>
-      <Table.Row
-        className={clsx(classes.root, {
-          [classes.active]: isActive,
-          [classes.editable]: isEditable,
-          [classes.clickable]: isClickable,
-        })}
-        {...(!isLoading && {
-          onClick: handleRowClick,
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-        })}
-        {...addDataAttributes({
-          ...rowData,
-          active: isActive ? true : undefined,
-          editable: isEditable ? true : undefined,
-          isExpandableComponentActive: isNestedComponentExpanded ? true : undefined,
-        })}
-      >
-        {columns.map((key, i) => (
-          <FlexibleTableCell
-            key={key}
-            isSticky={isFirstColumnSticky && i === 0}
-            isSecond={isFirstColumnSticky && i === 1}
-            isLoading={isLoading}
-            row={item}
-            config={config}
-            columnName={key}
-            tweakStyles={tweakTableCellStyles}
-            renderMode={renderMode}
-            isFocusedRow={isFocused}
-            isActiveRow={isActive}
-            isNestedComponentExpanded={isNestedComponentExpanded && nestedComponentCellKey === key}
-            isRowNestedComponentExpanded={
-              isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
-            }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
-          />
-        ))}
-      </Table.Row>
-
-      {isNestedComponentExpanded && (
-        <Table.Row className={classes.root}>
-          <Table.Cell className={classes.nestedComponent} colSpan={columns.length}>
-            {nestedComponent.component ??
-              expandableRowComponent?.(item, true, closeNestedComponent)}
-          </Table.Cell>
-        </Table.Row>
-      )}
-    </>
-  );
-}
-
-export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;
+import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
+import clsx from 'clsx';
+import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { IDataAttributes, ITweakStylesProps } from '../../../../types';
+import { TableRenders } from '../../constants';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+  INestedComponent,
+  IHeaderContent,
+} from '../../types';
+import { FlexibleTableCell } from '../FlexibleTableCell';
+import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
+
+export interface IFlexibleTableRowProps<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+  UniqueField extends keyof Row,
+> extends ITweakStylesProps<IFlexibleTableRowStyles> {
+  item: Row;
+  index: number;
+  uniqueField?: UniqueField;
+  renderMode: IFlexibleTableRenderMode;
+  /** @default false */
+  isActive?: boolean;
+  /** @default false */
+  isFocusable?: boolean;
+  /** @deprecated Use {@position}
+   * @default false */
+  isFirstColumnSticky?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  config: IFlexibleTableConfigType<Row, HeaderContent>;
+  columns: Array<keyof Row & string>;
+  rowAttributes?: Array<keyof Row>;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  rowRef?: RefCallback<HTMLTableRowElement>;
+  /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
+  expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
+  onRowHover?: (id?: Row[UniqueField]) => void;
+  onRowClick?: (id: Row[UniqueField]) => void;
+}
+
+function FlexibleTableRowInner<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+  UniqueField extends keyof Row,
+>({
+  item,
+  index,
+  config,
+  columns,
+  uniqueField,
+  renderMode,
+  isActive = false,
+  isFocusable = false,
+  isFirstColumnSticky = false,
+  isLoading = false,
+  rowAttributes,
+  isExpandableRowComponentInitiallyOpen = false,
+  rowRef,
+  tweakStyles,
+  expandableRowComponent,
+  onRowHover,
+  onRowClick,
+}: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): 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: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+  }));
+
+  const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
+  const isClickable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent));
+
+  const { isOpen: isNestedComponentExpanded, cellKey: nestedComponentCellKey } = nestedComponent;
+
+  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
+  // например: rowAttributes={['id']} => <tr data-id="x" />
+  const rowData: IDataAttributes = Object.fromEntries(
+    rowAttributes?.map((attribute) => [attribute, item[attribute]]) ?? [],
+  );
+
+  const handleMouseEnter = (event: MouseEvent) => {
+    if (isNotEmpty(uniqueField) && isNotEmpty(onRowHover)) {
+      event.stopPropagation();
+      onRowHover(item[uniqueField]);
+    }
+    if (isFocusable) {
+      setFocused(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    onRowHover?.(undefined);
+    if (isFocusable) {
+      setFocused(false);
+    }
+  };
+
+  const closeNestedComponent = () => {
+    setNestedComponent({ isOpen: false });
+  };
+
+  const updateNestedComponent = (component: ReactNode, cellKey: string) => {
+    if (isEmpty(component)) {
+      closeNestedComponent();
+    } else {
+      setNestedComponent({ isOpen: true, component, cellKey });
+    }
+  };
+
+  const handleRowClick = () => {
+    if (isNotEmpty(uniqueField)) {
+      onRowClick?.(item[uniqueField]);
+    }
+    if (isEmpty(expandableRowComponent)) {
+      return;
+    }
+
+    if (!isNestedComponentExpanded) {
+      setNestedComponent({ isOpen: true });
+    } else if (isEmpty(nestedComponentCellKey)) {
+      closeNestedComponent();
+    }
+  };
+
+  const Table = TableRenders[renderMode];
+
+  return (
+    <>
+      <Table.Row
+        ref={rowRef}
+        className={clsx(classes.root, {
+          [classes.active]: isActive,
+          [classes.editable]: isEditable,
+          [classes.clickable]: isClickable,
+        })}
+        {...(!isLoading && {
+          onClick: handleRowClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+        })}
+        {...addDataAttributes({
+          ...rowData,
+          active: isActive ? true : undefined,
+          editable: isEditable ? true : undefined,
+          isExpandableComponentActive: isNestedComponentExpanded ? true : undefined,
+        })}
+      >
+        {columns.map((key, i) => (
+          <FlexibleTableCell
+            key={key}
+            isSticky={isFirstColumnSticky && i === 0}
+            isSecond={isFirstColumnSticky && i === 1}
+            isLoading={isLoading}
+            row={item}
+            config={config}
+            columnName={key}
+            tweakStyles={tweakTableCellStyles}
+            renderMode={renderMode}
+            isFocusedRow={isFocused}
+            isActiveRow={isActive}
+            isNestedComponentExpanded={isNestedComponentExpanded && nestedComponentCellKey === key}
+            isRowNestedComponentExpanded={
+              isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
+            }
+            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
+          />
+        ))}
+      </Table.Row>
+
+      {isNestedComponentExpanded && (
+        <Table.Row className={classes.root}>
+          <Table.Cell className={classes.nestedComponent} colSpan={columns.length}>
+            {nestedComponent.component ??
+              expandableRowComponent?.(item, true, closeNestedComponent)}
+          </Table.Cell>
+        </Table.Row>
+      )}
+    </>
+  );
+}
+
+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,8 +1,11 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
-
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-export const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender> = {
-  table: { Root: 'table', Head: 'thead', Body: 'tbody', Row: 'tr', Header: 'th', Cell: 'td' },
-  divs: { Root: 'div', Head: 'div', Body: 'div', Row: 'div', Header: 'div', Cell: 'div' },
-};
+import { IFlexibleTableRenderElement, IFlexibleTableRenderMode } from './types';
+
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+export const TableRenders = {
+  table: { Root: 'table', Head: 'thead', Body: 'tbody', Row: 'tr', Header: 'th', Cell: 'td' },
+  divs: { Root: 'div', Head: 'div', Body: 'div', Row: 'div', Header: 'div', Cell: 'div' },
+} satisfies Record<
+  IFlexibleTableRenderMode,
+  Record<IFlexibleTableRenderElement, keyof JSX.IntrinsicElements>
+>;

package/src/components/FlexibleTable/helpers.ts

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

package/src/components/FlexibleTable/types.ts

@@ -1,82 +1,78 @@
-import { CSSProperties, MouseEvent, ReactNode } from 'react';
-import { IRenderNode } from '../../types';
-
-export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-export type IFlexibleTableRender = Record<
-  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
-  keyof JSX.IntrinsicElements
->;
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export type ITableRow = Record<string, any>;
-
-export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
-
-export interface ITitleComponentProps<Value> {
-  value?: Value;
-}
-
-export interface IValueComponentProps<Values, Value> {
-  value: Value;
-  row: Values;
-  isFocusedRow?: boolean;
-  isActiveRow?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
-}
-
-export type ICellClickHandler<Values, Value> = (
-  event: MouseEvent,
-  cellComponentProps: IValueComponentProps<Values, Value>,
-) => void;
-
-export interface IFlexibleTableRowConfig<
-  Values extends ITableRow,
-  Key extends keyof Values,
-  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
-> {
-  title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
-  component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
-  dateFormat?: string;
-  minWidth?: string | number;
-  width?: string | number;
-  maxWidth?: string | number;
-  /** @default 'left' */
-  titleAlign?: CSSProperties['textAlign'];
-  cellAlign?: CSSProperties['textAlign'];
-  cellVerticalAlign?: CSSProperties['verticalAlign'];
-  position?: CSSProperties['position'];
-  right?: number;
-  left?: number;
-  shouldRenderDataId?: boolean;
-  /**
-   * Проверка, нужно ли отрисовать component
-   * @description **Не влияет на типизацию `component`, лучше использовать `row`**
-   * @default isNotEmpty
-   */
-  shouldRenderComponent?: boolean | ((value: Values[Key], values: Values, key: Key) => boolean);
-  onCellClick?: ICellClickHandler<Values, Values[Key]>;
-}
-
-export type IFlexibleTableConfigType<
-  Values extends ITableRow,
-  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
-> = {
-  [Key in keyof Values]?: IFlexibleTableRowConfig<Values, Key, HeaderContent>;
-};
-
-export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
-  isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
-}
-
-export interface INestedComponent {
-  isOpen: boolean;
-  component?: ReactNode;
-  cellKey?: string;
-}
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { IRenderNode } from '../../types';
+
+export type IFlexibleTableRenderMode = 'table' | 'divs';
+export type IFlexibleTableRenderElement = 'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
+
+export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
+
+export interface ITitleComponentProps<Value> {
+  value?: Value;
+}
+
+export interface IValueComponentProps<Values, Value> {
+  value: Value;
+  row: Values;
+  isFocusedRow?: boolean;
+  isActiveRow?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}
+
+export type ICellClickHandler<Values, Value> = (
+  event: MouseEvent,
+  cellComponentProps: IValueComponentProps<Values, Value>,
+) => void;
+
+export interface IFlexibleTableRowConfig<
+  Values extends ITableRow,
+  Key extends keyof Values,
+  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
+> {
+  title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
+  component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
+  dateFormat?: string;
+  minWidth?: string | number;
+  width?: string | number;
+  maxWidth?: string | number;
+  /** @default 'left' */
+  titleAlign?: CSSProperties['textAlign'];
+  cellAlign?: CSSProperties['textAlign'];
+  cellVerticalAlign?: CSSProperties['verticalAlign'];
+  position?: CSSProperties['position'];
+  right?: number;
+  left?: number;
+  shouldRenderDataId?: boolean;
+  /**
+   * Проверка, нужно ли отрисовать component
+   * @description **Не влияет на типизацию `component`, лучше использовать `row`**
+   * @default isNotEmpty
+   */
+  shouldRenderComponent?: boolean | ((value: Values[Key], values: Values, key: Key) => boolean);
+  onCellClick?: ICellClickHandler<Values, Values[Key]>;
+}
+
+export type IFlexibleTableConfigType<
+  Values extends ITableRow,
+  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
+> = {
+  [Key in keyof Values]?: IFlexibleTableRowConfig<Values, Key, HeaderContent>;
+};
+
+export interface IInfinityScrollConfig {
+  activePage: number;
+  totalPages: number;
+  isLoading: boolean;
+  isLastPage: boolean;
+  onInfinityScroll: (skip: number) => void;
+}
+
+export interface INestedComponent {
+  isOpen: boolean;
+  component?: ReactNode;
+  cellKey?: string;
+}