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

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,278 +1,280 @@
-import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  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 { Skeleton } from '../Skeleton';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { FlexibleTableRow } from './components';
-import { hasHorizontalScrollBar } from './helpers';
-import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
-import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableProps<Values extends Record<string, any>>
-  extends ICommonProps<IFlexibleTableStyles> {
-  content: Values[];
-  headerContent?: Partial<Record<keyof Values, any>>;
-  enabledColumns?: Array<keyof Values>;
-  activeRows?: number[];
-  config: IFlexibleTableConfigType<Values>;
-  isHorizontallyScrollable?: boolean;
-  isFirstColumnSticky?: boolean;
-  infinityScrollConfig?: IInfinityScrollConfig;
-  /**
-   * @default Индекс строки
-   */
-  uniqueField?: keyof Values;
-  onHeadClick?: (column: keyof Values) => void;
-  isLoading?: boolean;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowClick?: (id: string) => void;
-  onRowHover?: (id?: string) => void;
-  rowAttributes?: Array<keyof Values>;
-  refForScroll?: RefObject<HTMLDivElement>;
-  nothingFoundContent?: ReactNode;
-  renderMode?: 'table' | 'divs';
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
-}
-
-export function FlexibleTable<Values extends Record<string, any>>({
-  data,
-  tweakStyles,
-  content,
-  headerContent,
-  config,
-  activeRows,
-  enabledColumns,
-  isHorizontallyScrollable,
-  isFirstColumnSticky,
-  infinityScrollConfig,
-  uniqueField,
-  isLoading,
-  renderMode,
-  onHeadClick,
-  onRowHover,
-  onRowClick,
-  refForScroll,
-  rowAttributes,
-  nothingFoundContent,
-  testId,
-  expandableRowComponent,
-}: IFlexibleTableProps<Values>): 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 showedColumns = useMemo(
-    () => enabledColumns ?? Object.keys(config),
-    [enabledColumns, config],
-  );
-
-  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 = useCallback(
-    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
-    [getDataScrollAttributeSetter],
-  );
-
-  // Когда таблица проскроллена - добавляем аттрибут scrolled
-  const setIsScrolledAttribute = useCallback(
-    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) => {
-      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,
-    ],
-  );
-
-  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, 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}>
-            {showedColumns.map((key, i) => {
-              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 (
-                <TableHeader
-                  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',
-                  }}
-                  key={key as string}
-                  onClick={() => onHeadClick?.(key)}
-                >
-                  {titleContent}
-                </TableHeader>
-              );
-            })}
-          </TableRow>
-        </TableHead>
-        <TableBody className={classes.body}>
-          {isLoading ? (
-            indexMap(6, (i) => (
-              <TableRow className={classes.skeletonRow} key={i}>
-                {showedColumns.map((_, j) => (
-                  <TableCell className={classes.skeleton} key={j}>
-                    <Skeleton />
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <>
-              {shouldShowNothingFound && (
-                <TableRow className={classes.nothingFoundRow}>
-                  <TableCell className={classes.nothingFound} colSpan={showedColumns.length}>
-                    {nothingFoundContent}
-                  </TableCell>
-                </TableRow>
-              )}
-
-              {content.map((item, i) => (
-                <FlexibleTableRow
-                  item={item}
-                  uniqueField={uniqueField}
-                  isActive={activeRows?.includes(i) ?? false}
-                  isFirstColumnSticky={isFirstColumnSticky}
-                  onRowClick={onRowClick}
-                  onRowHover={onRowHover}
-                  enabledColumns={enabledColumns}
-                  config={config}
-                  key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  rowAttributes={rowAttributes}
-                  renderMode={renderMode}
-                  tweakStyles={tweakTableRowStyles}
-                  expandableRowComponent={expandableRowComponent}
-                />
-              ))}
-
-              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
-                <TableRow className={classes.loaderRow}>
-                  <TableCell className={classes.loaderCell} colSpan={showedColumns.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,
+  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 { Skeleton } from '../Skeleton';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { FlexibleTableRow } from './components';
+import { hasHorizontalScrollBar } from './helpers';
+import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
+import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export interface IFlexibleTableProps<Values extends Record<string, any>>
+  extends ICommonProps<IFlexibleTableStyles> {
+  content: Values[];
+  headerContent?: Partial<Record<keyof Values, any>>;
+  enabledColumns?: Array<keyof Values>;
+  activeRows?: number[];
+  config: IFlexibleTableConfigType<Values>;
+  /** @default false */
+  isHorizontallyScrollable?: boolean;
+  /** @default false */
+  isFirstColumnSticky?: boolean;
+  infinityScrollConfig?: IInfinityScrollConfig;
+  /** @default Индекс строки */
+  uniqueField?: keyof Values;
+  onHeadClick?: (column: keyof Values) => void;
+  /** @default false */
+  isLoading?: boolean;
+  // TODO: Заменить string на Generic Values[uniqueField]
+  onRowClick?: (id: string) => void;
+  onRowHover?: (id?: string) => void;
+  rowAttributes?: Array<keyof Values>;
+  refForScroll?: RefObject<HTMLDivElement>;
+  nothingFoundContent?: ReactNode;
+  /** @default 'table' */
+  renderMode?: 'table' | 'divs';
+  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
+}
+
+export function FlexibleTable<Values extends Record<string, any>>({
+  data,
+  tweakStyles,
+  content,
+  headerContent,
+  config,
+  activeRows,
+  enabledColumns,
+  isHorizontallyScrollable = false,
+  isFirstColumnSticky = false,
+  infinityScrollConfig,
+  uniqueField,
+  isLoading = false,
+  renderMode = 'table',
+  onHeadClick,
+  onRowHover,
+  onRowClick,
+  refForScroll,
+  rowAttributes,
+  nothingFoundContent,
+  testId,
+  expandableRowComponent,
+}: IFlexibleTableProps<Values>): 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 showedColumns = useMemo(
+    () => enabledColumns ?? Object.keys(config),
+    [enabledColumns, config],
+  );
+
+  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 = useCallback(
+    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+    [getDataScrollAttributeSetter],
+  );
+
+  // Когда таблица проскроллена - добавляем аттрибут scrolled
+  const setIsScrolledAttribute = useCallback(
+    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) => {
+      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,
+    ],
+  );
+
+  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, 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}>
+            {showedColumns.map((key, i) => {
+              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 (
+                <TableHeader
+                  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',
+                  }}
+                  key={key as string}
+                  onClick={() => onHeadClick?.(key)}
+                >
+                  {titleContent}
+                </TableHeader>
+              );
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody className={classes.body}>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <TableRow className={classes.skeletonRow} key={i}>
+                {showedColumns.map((_, j) => (
+                  <TableCell className={classes.skeleton} key={j}>
+                    <Skeleton />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <>
+              {shouldShowNothingFound && (
+                <TableRow className={classes.nothingFoundRow}>
+                  <TableCell className={classes.nothingFound} colSpan={showedColumns.length}>
+                    {nothingFoundContent}
+                  </TableCell>
+                </TableRow>
+              )}
+
+              {content.map((item, i) => (
+                <FlexibleTableRow
+                  item={item}
+                  uniqueField={uniqueField}
+                  isActive={activeRows?.includes(i) ?? false}
+                  isFirstColumnSticky={isFirstColumnSticky}
+                  onRowClick={onRowClick}
+                  onRowHover={onRowHover}
+                  enabledColumns={enabledColumns}
+                  config={config}
+                  key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
+                  rowAttributes={rowAttributes}
+                  renderMode={renderMode}
+                  tweakStyles={tweakTableRowStyles}
+                  expandableRowComponent={expandableRowComponent}
+                />
+              ))}
+
+              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+                <TableRow className={classes.loaderRow}>
+                  <TableCell className={classes.loaderCell} colSpan={showedColumns.length}>
+                    <div ref={initIntersectionObserver} className={classes.loader}>
+                      <ThemedPreloader type="dots" />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

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

@@ -1,32 +1,32 @@
-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,
-  },
-});
-
-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,
+  },
+});
+
+export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;