@true-engineering/true-react-common-ui-kit 2.0.1 → 2.1.1

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,243 +1,205 @@
-import React, {
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import clsx from 'clsx';
-
-import { ThemedPreloader } from '../ThemedPreloader';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import {
-  FlexibleTableConfigType,
-  IInfinityScrollConfig,
-  ITitleComponent,
-} from './types';
-import TableRow from './TableRow';
-
-import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableProps<Values extends Record<string, any>>
-  extends ICommonProps {
-  tweakStyles?: FlexibleTableStyles;
-  content: Values[];
-  headerContent?: Partial<Record<keyof Values, any>>;
-  enabledColumns?: Array<keyof Values>;
-  activeRows?: number[];
-  config?: FlexibleTableConfigType<Values>;
-  isHorizontallyScrollable?: boolean;
-  isFirstColumnSticky?: boolean;
-  infinityScrollConfig?: IInfinityScrollConfig;
-  uniqueField?: keyof Values;
-  onHeadClick?: (column: keyof Values) => void;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowClick?: (id: string) => void;
-  onRowHover?: (id?: string) => void;
-  rowAttributes?: Array<keyof Values>;
-  refForScroll?: RefObject<HTMLDivElement>;
-  nothingFoundContent?: React.ReactNode;
-  expandableRowComponent?: (
-    item: Values,
-    isOpen: boolean,
-    close: () => void,
-  ) => React.ReactNode;
-  testId?: string;
-}
-
-export function FlexibleTable<Values extends Record<string, any>>({
-  data,
-  tweakStyles,
-  content,
-  headerContent,
-  config,
-  activeRows,
-  enabledColumns,
-  isHorizontallyScrollable,
-  isFirstColumnSticky,
-  infinityScrollConfig,
-  uniqueField,
-  onHeadClick,
-  onRowHover,
-  onRowClick,
-  refForScroll,
-  rowAttributes,
-  nothingFoundContent,
-  testId,
-  expandableRowComponent,
-}: IFlexibleTableProps<Values>): JSX.Element {
-  const { classes } = useTheme('FlexibleTable', styles, tweakStyles);
-
-  const observer = useRef<IntersectionObserver>();
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
-
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement) => {
-      if (infinityScrollConfig) {
-        if (
-          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);
-        }
-      }
-    },
-    [
-      infinityScrollConfig?.activePage,
-      infinityScrollConfig?.totalPages,
-      infinityScrollConfig?.onInfinityScroll,
-    ],
-  );
-
-  const tableRowClasses = useMemo(
-    () => ({
-      root: classes.row,
-      active: classes.activeRow,
-      editable: classes.editableRow,
-      cell: {
-        root: classes.cell,
-        sticky: classes.cellSticky,
-        second: classes.cellSecond,
-      },
-    }),
-    [tweakStyles],
-  );
-
-  useEffect(() => {
-    const scrollContainer = (refForScroll ?? scrollRef).current;
-    if (
-      scrollContainer === null ||
-      !isHorizontallyScrollable ||
-      !isFirstColumnSticky
-    ) {
-      return;
-    }
-    const scrollHandler = (e: Event) => {
-      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
-    };
-    scrollContainer.addEventListener('scroll', scrollHandler);
-    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
-  }, [scrollRef]);
-
-  return (
-    <div
-      ref={refForScroll ?? scrollRef}
-      className={clsx(
-        isHorizontallyScrollable && classes.scroll,
-        isHorizontallyScrolled && classes.horizontallyScrolled,
-      )}
-    >
-      <table
-        className={classes.root}
-        data-testid={testId}
-        {...addDataAttributes(data)}
-      >
-        <thead>
-          <tr className={clsx(classes.row, classes.headerRow)}>
-            {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
-              const itemConfig = config?.[key];
-
-              let titleContent = itemConfig?.title ?? '';
-
-              if (itemConfig?.titleComponent !== undefined) {
-                const TitleComponent =
-                  itemConfig?.titleComponent as ITitleComponent<any>;
-                titleContent = <TitleComponent value={headerContent?.[key]} />;
-              }
-
-              return (
-                <th
-                  className={clsx(
-                    classes.header,
-                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
-                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
-                  )}
-                  style={{
-                    minWidth: itemConfig?.minWidth,
-                    width: itemConfig?.width,
-                    maxWidth: itemConfig?.maxWidth,
-                    textAlign: itemConfig?.titleAlign ?? 'left',
-                  }}
-                  key={key as string}
-                  onClick={() => (onHeadClick ? onHeadClick(key) : undefined)}
-                >
-                  {titleContent}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {content.length === 0 &&
-            nothingFoundContent !== undefined &&
-            !infinityScrollConfig?.isLoading &&
-            (infinityScrollConfig?.isLastPage === undefined ||
-              infinityScrollConfig.isLastPage) && (
-              <tr>
-                <td
-                  colSpan={(enabledColumns || Object.keys(content[0])).length}
-                >
-                  {nothingFoundContent}
-                </td>
-              </tr>
-            )}
-
-          {content.map((item, idx) => (
-            <TableRow
-              item={item}
-              uniqueField={uniqueField}
-              isActive={activeRows?.includes(idx) ?? false}
-              isFirstColumnSticky={isFirstColumnSticky}
-              onRowClick={onRowClick}
-              onRowHover={onRowHover}
-              enabledColumns={enabledColumns}
-              config={config}
-              classes={tableRowClasses}
-              key={uniqueField ? item[uniqueField] : idx}
-              rowAttributes={rowAttributes}
-              expandableRowComponent={expandableRowComponent}
-            />
-          ))}
-
-          {infinityScrollConfig !== undefined &&
-            !infinityScrollConfig.isLastPage && (
-              <tr>
-                <td
-                  colSpan={(enabledColumns || Object.keys(content[0])).length}
-                >
-                  <div
-                    ref={initIntersectionObserver}
-                    className={classes.loader}
-                  >
-                    <ThemedPreloader type="dots" />
-                  </div>
-                </td>
-              </tr>
-            )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
+import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
+import TableRow from './TableRow';
+import { FlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export interface IFlexibleTableProps<Values extends Record<string, any>> extends ICommonProps {
+  tweakStyles?: FlexibleTableStyles;
+  content: Values[];
+  headerContent?: Partial<Record<keyof Values, any>>;
+  enabledColumns?: Array<keyof Values>;
+  activeRows?: number[];
+  config?: FlexibleTableConfigType<Values>;
+  isHorizontallyScrollable?: boolean;
+  isFirstColumnSticky?: boolean;
+  infinityScrollConfig?: IInfinityScrollConfig;
+  uniqueField?: keyof Values;
+  onHeadClick?: (column: keyof Values) => void;
+  // TODO: Заменить string на Generic Values[uniqueField]
+  onRowClick?: (id: string) => void;
+  onRowHover?: (id?: string) => void;
+  rowAttributes?: Array<keyof Values>;
+  refForScroll?: RefObject<HTMLDivElement>;
+  nothingFoundContent?: React.ReactNode;
+  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => React.ReactNode;
+  testId?: string;
+}
+
+export function FlexibleTable<Values extends Record<string, any>>({
+  data,
+  tweakStyles,
+  content,
+  headerContent,
+  config,
+  activeRows,
+  enabledColumns,
+  isHorizontallyScrollable,
+  isFirstColumnSticky,
+  infinityScrollConfig,
+  uniqueField,
+  onHeadClick,
+  onRowHover,
+  onRowClick,
+  refForScroll,
+  rowAttributes,
+  nothingFoundContent,
+  testId,
+  expandableRowComponent,
+}: IFlexibleTableProps<Values>): JSX.Element {
+  const { classes } = useTheme('FlexibleTable', styles, tweakStyles);
+
+  const observer = useRef<IntersectionObserver>();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (infinityScrollConfig) {
+        if (
+          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);
+        }
+      }
+    },
+    [
+      infinityScrollConfig?.activePage,
+      infinityScrollConfig?.totalPages,
+      infinityScrollConfig?.onInfinityScroll,
+    ],
+  );
+
+  const tableRowClasses = useMemo(
+    () => ({
+      root: classes.row,
+      active: classes.activeRow,
+      editable: classes.editableRow,
+      cell: {
+        root: classes.cell,
+        sticky: classes.cellSticky,
+        second: classes.cellSecond,
+      },
+    }),
+    [tweakStyles],
+  );
+
+  useEffect(() => {
+    const scrollContainer = (refForScroll ?? scrollRef).current;
+    if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
+      return;
+    }
+    const scrollHandler = (e: Event) => {
+      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
+    };
+    scrollContainer.addEventListener('scroll', scrollHandler);
+    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
+  }, [scrollRef]);
+
+  return (
+    <div
+      ref={refForScroll ?? scrollRef}
+      className={clsx(
+        isHorizontallyScrollable && classes.scroll,
+        isHorizontallyScrolled && classes.horizontallyScrolled,
+      )}
+    >
+      <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
+        <thead>
+          <tr className={clsx(classes.row, classes.headerRow)}>
+            {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
+              const itemConfig = config?.[key];
+
+              let titleContent = itemConfig?.title ?? '';
+
+              if (itemConfig?.titleComponent !== undefined) {
+                const TitleComponent = itemConfig?.titleComponent as ITitleComponent<any>;
+                titleContent = <TitleComponent value={headerContent?.[key]} />;
+              }
+
+              return (
+                <th
+                  className={clsx(
+                    classes.header,
+                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
+                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
+                  )}
+                  style={{
+                    minWidth: itemConfig?.minWidth,
+                    width: itemConfig?.width,
+                    maxWidth: itemConfig?.maxWidth,
+                    textAlign: itemConfig?.titleAlign ?? 'left',
+                  }}
+                  key={key as string}
+                  onClick={() => (onHeadClick ? onHeadClick(key) : undefined)}
+                >
+                  {titleContent}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {content.length === 0 &&
+            nothingFoundContent !== undefined &&
+            !infinityScrollConfig?.isLoading &&
+            (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage) && (
+              <tr>
+                <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
+                  {nothingFoundContent}
+                </td>
+              </tr>
+            )}
+
+          {content.map((item, idx) => (
+            <TableRow
+              item={item}
+              uniqueField={uniqueField}
+              isActive={activeRows?.includes(idx) ?? false}
+              isFirstColumnSticky={isFirstColumnSticky}
+              onRowClick={onRowClick}
+              onRowHover={onRowHover}
+              enabledColumns={enabledColumns}
+              config={config}
+              classes={tableRowClasses}
+              key={uniqueField ? item[uniqueField] : idx}
+              rowAttributes={rowAttributes}
+              expandableRowComponent={expandableRowComponent}
+            />
+          ))}
+
+          {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+            <tr>
+              <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
+                <div ref={initIntersectionObserver} className={classes.loader}>
+                  <ThemedPreloader type="dots" />
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}