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

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,308 +1,309 @@
-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;
-  /** @default true */
-  shouldRenderHeader?: boolean;
-}
-
-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,
-  shouldRenderHeader = true,
-  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 })}
-      >
-        {shouldRenderHeader && (
-          <Table.Head className={classes.head}>
-            <Table.Row className={classes.headerRow}>
-              {columns.map((key, i) => {
-                const {
-                  position,
-                  minWidth,
-                  width,
-                  maxWidth,
-                  titleAlign = 'left',
-                  right,
-                  left,
-                  title = '',
-                  shouldRenderDataId,
-                } = config?.[key] ?? {};
-                const isSticky = position === 'sticky' || (isFirstColumnSticky && i === 0);
-
-                return (
-                  <Table.Header
-                    key={key}
-                    className={clsx(classes.header, {
-                      [classes.headerSticky]: isSticky,
-                      [classes.headerSecond]: isFirstColumnSticky && i === 1,
-                    })}
-                    style={{
-                      minWidth,
-                      width,
-                      maxWidth,
-                      textAlign: titleAlign,
-                      position: isSticky ? 'sticky' : position,
-                      right,
-                      left,
-                    }}
-                    onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
-                    {...addDataAttributes({ id: shouldRenderDataId ? key : undefined })}
-                  >
-                    {applyAction(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>
-  );
-}
+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'
+      | 'rowRef'
+    > {
+  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;
+  /** @default true */
+  shouldRenderHeader?: boolean;
+}
+
+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,
+  shouldRenderHeader = true,
+  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 })}
+      >
+        {shouldRenderHeader && (
+          <Table.Head className={classes.head}>
+            <Table.Row className={classes.headerRow}>
+              {columns.map((key, i) => {
+                const {
+                  position,
+                  minWidth,
+                  width,
+                  maxWidth,
+                  titleAlign = 'left',
+                  right,
+                  left,
+                  title = '',
+                  shouldRenderDataId,
+                } = config?.[key] ?? {};
+                const isSticky = position === 'sticky' || (isFirstColumnSticky && i === 0);
+
+                return (
+                  <Table.Header
+                    key={key}
+                    className={clsx(classes.header, {
+                      [classes.headerSticky]: isSticky,
+                      [classes.headerSecond]: isFirstColumnSticky && i === 1,
+                    })}
+                    style={{
+                      minWidth,
+                      width,
+                      maxWidth,
+                      textAlign: titleAlign,
+                      position: isSticky ? 'sticky' : position,
+                      right,
+                      left,
+                    }}
+                    onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
+                    {...addDataAttributes({ id: shouldRenderDataId ? key : undefined })}
+                  >
+                    {applyAction(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>
+  );
+}