@true-engineering/true-react-common-ui-kit 3.28.4 → 3.29.0

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,280 +1,291 @@
-import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  applyAction,
-  indexMap,
-  isArrayNotEmpty,
-  isEmpty,
-  isNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useMergedRefs, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
-import { hasHorizontalScrollBar } from './helpers';
-import {
-  ITableRow,
-  IFlexibleTableConfigType,
-  IInfinityScrollConfig,
-  IFlexibleTableRenderMode,
-  IHeaderContent,
-} from './types';
-import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
-
-export interface IFlexibleTableProps<
-  Row extends ITableRow,
-  HeaderContent extends IHeaderContent<Row>,
-  UniqueField extends keyof Row,
-> extends ICommonProps<IFlexibleTableStyles>,
-    Pick<
-      IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-      | 'uniqueField'
-      | 'activeRows'
-      | 'rowAttributes'
-      | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
-      | 'expandableRowComponent'
-      | 'onRowClick'
-      | 'onRowHover'
-    > {
-  content: Row[];
-  /** @default 'table' */
-  renderMode?: IFlexibleTableRenderMode;
-  headerContent?: HeaderContent;
-  config: IFlexibleTableConfigType<Row, HeaderContent>;
-  enabledColumns?: Array<keyof Row & string>;
-  /** @default false */
-  isLoading?: boolean;
-  /** @default false */
-  isHorizontallyScrollable?: boolean;
-  infinityScrollConfig?: IInfinityScrollConfig;
-  onHeadClick?: (column: keyof Row) => void;
-  refForScroll?: RefObject<HTMLDivElement>;
-  nothingFoundContent?: ReactNode;
-}
-
-export function FlexibleTable<
-  Row extends ITableRow,
-  HeaderContent extends IHeaderContent<Row> = IHeaderContent<Row>,
-  UniqueField extends keyof Row = keyof Row,
->({
-  content,
-  headerContent,
-  config,
-  enabledColumns,
-  isLoading = false,
-  isHorizontallyScrollable = false,
-  infinityScrollConfig,
-  renderMode = 'table',
-  refForScroll,
-  nothingFoundContent,
-  data,
-  testId,
-  tweakStyles,
-  onHeadClick,
-  ...restProps
-}: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakTableRowStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakTableRow',
-    currentComponentName: 'FlexibleTable',
-  });
-
-  const observer = useRef<IntersectionObserver>();
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
-
-  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
-  const { uniqueField, isFirstColumnSticky = false } = restProps;
-
-  const tableRowProps: Omit<
-    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-    'item' | 'index'
-  > = {
-    ...restProps,
-    renderMode,
-    config,
-    columns,
-    isLoading,
-    tweakStyles: tweakTableRowStyles,
-  };
-
-  const getDataScrollAttributeSetter = useCallback(
-    (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
-      if (isHorizontallyScrollable && isNotEmpty(el) && setter(el)) {
-        el.dataset[key] = 'true';
-      } else {
-        el?.removeAttribute(`data-${key}`);
-      }
-    },
-    [isHorizontallyScrollable],
-  );
-
-  // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
-  const setHasScrollBarAttribute = useMemo(
-    () => getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
-    [getDataScrollAttributeSetter],
-  );
-
-  // Когда таблица проскроллена - добавляем аттрибут scrolled
-  const setIsScrolledAttribute = useMemo(
-    () => getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
-    [getDataScrollAttributeSetter],
-  );
-
-  const shouldShowNothingFound =
-    !isArrayNotEmpty(content) &&
-    nothingFoundContent !== undefined &&
-    !infinityScrollConfig?.isLoading &&
-    (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage);
-
-  const ref = useMergedRefs([
-    refForScroll,
-    scrollRef,
-    setHasScrollBarAttribute,
-    setIsScrolledAttribute,
-  ]);
-
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (
-        !hasInfiniteScroll ||
-        infinityScrollConfig.isLoading ||
-        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
-      ) {
-        return;
-      }
-
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
-        }
-      });
-
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [
-      hasInfiniteScroll,
-      infinityScrollConfig?.activePage,
-      infinityScrollConfig?.totalPages,
-      infinityScrollConfig?.onInfinityScroll,
-    ],
-  );
-
-  useEffect(() => {
-    const scrollContainer = scrollRef.current;
-    if (isEmpty(scrollContainer) || !isHorizontallyScrollable) {
-      return;
-    }
-
-    const scrollHandler = () => {
-      setIsScrolledAttribute(scrollContainer);
-    };
-
-    const resizeHandler = () => {
-      setHasScrollBarAttribute(scrollContainer);
-    };
-
-    scrollContainer.addEventListener('scroll', scrollHandler);
-    window.addEventListener('resize', resizeHandler);
-
-    return () => {
-      scrollContainer.removeEventListener('scroll', scrollHandler);
-      window.removeEventListener('resize', resizeHandler);
-    };
-  }, [scrollRef, isHorizontallyScrollable, setIsScrolledAttribute, setHasScrollBarAttribute]);
-
-  const Table = renderMode === 'divs' ? 'div' : 'table';
-  const TableHead = renderMode === 'divs' ? 'div' : 'thead';
-  const TableBody = renderMode === 'divs' ? 'div' : 'tbody';
-  const TableRow = renderMode === 'divs' ? 'div' : 'tr';
-  const TableHeader = renderMode === 'divs' ? 'div' : 'th';
-  const TableCell = renderMode === 'divs' ? 'div' : 'td';
-
-  return (
-    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
-      <Table
-        className={classes.root}
-        {...addDataTestId(testId)}
-        {...addDataAttributes({ ...data, isLoading })}
-      >
-        <TableHead className={classes.head}>
-          <TableRow className={classes.headerRow}>
-            {columns.map((key, i) => {
-              const itemConfig = config?.[key];
-
-              return (
-                <TableHeader
-                  key={key}
-                  className={clsx(classes.header, {
-                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
-                    [classes.headerSecond]: isFirstColumnSticky && i === 1,
-                  })}
-                  style={{
-                    minWidth: itemConfig?.minWidth,
-                    width: itemConfig?.width,
-                    maxWidth: itemConfig?.maxWidth,
-                    textAlign: itemConfig?.titleAlign ?? 'left',
-                  }}
-                  onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
-                  {...addDataAttributes({ id: itemConfig?.shouldRenderDataId ? key : undefined })}
-                >
-                  {applyAction(itemConfig?.title ?? '', {
-                    value: headerContent?.[key] as HeaderContent[string],
-                  })}
-                </TableHeader>
-              );
-            })}
-          </TableRow>
-        </TableHead>
-        <TableBody className={classes.body}>
-          {isLoading ? (
-            indexMap(6, (i) => (
-              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
-            ))
-          ) : (
-            <>
-              {shouldShowNothingFound && (
-                <TableRow className={classes.nothingFoundRow}>
-                  <TableCell className={classes.nothingFound} colSpan={columns.length}>
-                    {nothingFoundContent}
-                  </TableCell>
-                </TableRow>
-              )}
-
-              {content.map((item, i) => (
-                <FlexibleTableRow
-                  {...tableRowProps}
-                  key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  item={item}
-                  index={i}
-                />
-              ))}
-
-              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
-                <TableRow className={classes.loaderRow}>
-                  <TableCell className={classes.loaderCell} colSpan={columns.length}>
-                    <div ref={initIntersectionObserver} className={classes.loader}>
-                      <ThemedPreloader type="dots" />
-                    </div>
-                  </TableCell>
-                </TableRow>
-              )}
-            </>
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}
+import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  applyAction,
+  indexMap,
+  isArrayNotEmpty,
+  isEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useMergedRefs, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
+import { TableRenders } from './constants';
+import { hasHorizontalScrollBar } from './helpers';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IInfinityScrollConfig,
+  IFlexibleTableRenderMode,
+  IHeaderContent,
+} from './types';
+import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
+
+export interface IFlexibleTableProps<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+  UniqueField extends keyof Row,
+> extends ICommonProps<IFlexibleTableStyles>,
+    Pick<
+      IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
+      | 'uniqueField'
+      | 'rowAttributes'
+      | 'isFirstColumnSticky'
+      | 'isExpandableRowComponentInitiallyOpen'
+      | 'expandableRowComponent'
+      | 'onRowClick'
+      | 'onRowHover'
+    > {
+  content: Row[];
+  /** @default 'table' */
+  renderMode?: IFlexibleTableRenderMode;
+  headerContent?: HeaderContent;
+  config: IFlexibleTableConfigType<Row, HeaderContent>;
+  enabledColumns?: Array<keyof Row & string>;
+  /** Индексы строк, на которые навешивается класс `active` */
+  activeRows?: number[];
+  /** @default false */
+  isLoading?: boolean;
+  /** @default false */
+  isHorizontallyScrollable?: boolean;
+  /**
+   * Добавляет строкам состояние `isFocused`, вызывает ререндер при наведении
+   * @default false
+   */
+  isRowFocusable?: boolean;
+  infinityScrollConfig?: IInfinityScrollConfig;
+  onHeadClick?: (column: keyof Row) => void;
+  refForScroll?: RefObject<HTMLDivElement>;
+  nothingFoundContent?: ReactNode;
+}
+
+export function FlexibleTable<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row> = IHeaderContent<Row>,
+  UniqueField extends keyof Row = keyof Row,
+>({
+  content,
+  headerContent,
+  config,
+  enabledColumns,
+  activeRows,
+  uniqueField,
+  isLoading = false,
+  isFirstColumnSticky = false,
+  isHorizontallyScrollable = false,
+  isRowFocusable = false,
+  infinityScrollConfig,
+  renderMode = 'table',
+  refForScroll,
+  nothingFoundContent,
+  data,
+  testId,
+  tweakStyles,
+  onHeadClick,
+  ...restProps
+}: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakTableRowStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableRow',
+    currentComponentName: 'FlexibleTable',
+  });
+
+  const observer = useRef<IntersectionObserver>();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
+
+  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
+
+  const tableRowProps: Omit<
+    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
+    'item' | 'index'
+  > = {
+    ...restProps,
+    renderMode,
+    config,
+    columns,
+    uniqueField,
+    isLoading,
+    isFirstColumnSticky,
+    isFocusable: isRowFocusable,
+    tweakStyles: tweakTableRowStyles,
+  };
+
+  const getDataScrollAttributeSetter = useCallback(
+    (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
+      if (isHorizontallyScrollable && isNotEmpty(el) && setter(el)) {
+        el.dataset[key] = 'true';
+      } else {
+        el?.removeAttribute(`data-${key}`);
+      }
+    },
+    [isHorizontallyScrollable],
+  );
+
+  // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
+  const setHasScrollBarAttribute = useMemo(
+    () => getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+    [getDataScrollAttributeSetter],
+  );
+
+  // Когда таблица проскроллена - добавляем аттрибут scrolled
+  const setIsScrolledAttribute = useMemo(
+    () => getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
+    [getDataScrollAttributeSetter],
+  );
+
+  const shouldShowNothingFound =
+    !isArrayNotEmpty(content) &&
+    nothingFoundContent !== undefined &&
+    !infinityScrollConfig?.isLoading &&
+    (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage);
+
+  const ref = useMergedRefs([
+    refForScroll,
+    scrollRef,
+    setHasScrollBarAttribute,
+    setIsScrolledAttribute,
+  ]);
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (
+        !hasInfiniteScroll ||
+        infinityScrollConfig.isLoading ||
+        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
+      ) {
+        return;
+      }
+
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
+        }
+      });
+
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [
+      hasInfiniteScroll,
+      infinityScrollConfig?.activePage,
+      infinityScrollConfig?.totalPages,
+      infinityScrollConfig?.onInfinityScroll,
+    ],
+  );
+
+  useEffect(() => {
+    const scrollContainer = scrollRef.current;
+    if (isEmpty(scrollContainer) || !isHorizontallyScrollable) {
+      return;
+    }
+
+    const scrollHandler = () => {
+      setIsScrolledAttribute(scrollContainer);
+    };
+
+    const resizeHandler = () => {
+      setHasScrollBarAttribute(scrollContainer);
+    };
+
+    scrollContainer.addEventListener('scroll', scrollHandler);
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, [scrollRef, isHorizontallyScrollable, setIsScrolledAttribute, setHasScrollBarAttribute]);
+
+  const activeRowsSet = useMemo(() => new Set(activeRows), [activeRows]);
+
+  const Table = TableRenders[renderMode];
+
+  return (
+    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
+      <Table.Root
+        className={classes.root}
+        {...addDataTestId(testId)}
+        {...addDataAttributes({ ...data, isLoading })}
+      >
+        <Table.Head className={classes.head}>
+          <Table.Row className={classes.headerRow}>
+            {columns.map((key, i) => {
+              const itemConfig = config?.[key];
+
+              return (
+                <Table.Header
+                  key={key}
+                  className={clsx(classes.header, {
+                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && i === 1,
+                  })}
+                  style={{
+                    minWidth: itemConfig?.minWidth,
+                    width: itemConfig?.width,
+                    maxWidth: itemConfig?.maxWidth,
+                    textAlign: itemConfig?.titleAlign ?? 'left',
+                  }}
+                  onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
+                  {...addDataAttributes({ id: itemConfig?.shouldRenderDataId ? key : undefined })}
+                >
+                  {applyAction(itemConfig?.title ?? '', {
+                    value: headerContent?.[key] as HeaderContent[string],
+                  })}
+                </Table.Header>
+              );
+            })}
+          </Table.Row>
+        </Table.Head>
+        <Table.Body className={classes.body}>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
+            ))
+          ) : (
+            <>
+              {shouldShowNothingFound && (
+                <Table.Row className={classes.nothingFoundRow}>
+                  <Table.Cell className={classes.nothingFound} colSpan={columns.length}>
+                    {nothingFoundContent}
+                  </Table.Cell>
+                </Table.Row>
+              )}
+
+              {content.map((item, i) => (
+                <FlexibleTableRow
+                  {...tableRowProps}
+                  isActive={activeRowsSet.has(i)}
+                  key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
+                  item={item}
+                  index={i}
+                />
+              ))}
+
+              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
+                <Table.Row className={classes.loaderRow}>
+                  <Table.Cell className={classes.loaderCell} colSpan={columns.length}>
+                    <div ref={initIntersectionObserver} className={classes.loader}>
+                      <ThemedPreloader type="dots" />
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              )}
+            </>
+          )}
+        </Table.Body>
+      </Table.Root>
+    </div>
+  );
+}

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

@@ -1,38 +1,38 @@
-import { getTransition } from '@true-engineering/true-react-platform-helpers';
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
-
-export const useStyles = createThemedStyles('FlexibleTableCell', {
-  root: {
-    position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  sticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    ...getTransition(['box-shadow']),
-
-    '[data-scrolled] &': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
-  second: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  loading: {},
-
-  skeleton: {
-    height: 21,
-  },
-});
-
-export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;
+import { getTransition } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
+
+export const useStyles = createThemedStyles('FlexibleTableCell', {
+  root: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  sticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+  },
+
+  second: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  loading: {},
+
+  skeleton: {
+    height: 21,
+  },
+});
+
+export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;