@true-engineering/true-react-common-ui-kit 3.0.3 → 3.0.4

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,260 +1,260 @@
-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;
-  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,
-  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 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]);
-
-  return (
-    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
-      <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-        <thead>
-          <tr 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 (
-                <th
-                  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}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {isLoading ? (
-            indexMap(6, (i) => (
-              <tr key={i}>
-                {showedColumns.map((_, j) => (
-                  <td key={j} className={classes.skeleton}>
-                    <Skeleton />
-                  </td>
-                ))}
-              </tr>
-            ))
-          ) : (
-            <>
-              {!isArrayNotEmpty(content) &&
-                nothingFoundContent !== undefined &&
-                !infinityScrollConfig?.isLoading &&
-                (infinityScrollConfig?.isLastPage === undefined ||
-                  infinityScrollConfig.isLastPage) && (
-                  <tr>
-                    <td colSpan={showedColumns.length}>{nothingFoundContent}</td>
-                  </tr>
-                )}
-
-              {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}
-                  tweakStyles={tweakTableRowStyles}
-                  expandableRowComponent={expandableRowComponent}
-                />
-              ))}
-
-              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
-                <tr>
-                  <td colSpan={showedColumns.length}>
-                    <div ref={initIntersectionObserver} className={classes.loader}>
-                      <ThemedPreloader type="dots" />
-                    </div>
-                  </td>
-                </tr>
-              )}
-            </>
-          )}
-        </tbody>
-      </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>;
+  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;
+  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,
+  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 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]);
+
+  return (
+    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
+      <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+        <thead>
+          <tr 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 (
+                <th
+                  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}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <tr key={i}>
+                {showedColumns.map((_, j) => (
+                  <td key={j} className={classes.skeleton}>
+                    <Skeleton />
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <>
+              {!isArrayNotEmpty(content) &&
+                nothingFoundContent !== undefined &&
+                !infinityScrollConfig?.isLoading &&
+                (infinityScrollConfig?.isLastPage === undefined ||
+                  infinityScrollConfig.isLastPage) && (
+                  <tr>
+                    <td colSpan={showedColumns.length}>{nothingFoundContent}</td>
+                  </tr>
+                )}
+
+              {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}
+                  tweakStyles={tweakTableRowStyles}
+                  expandableRowComponent={expandableRowComponent}
+                />
+              ))}
+
+              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+                <tr>
+                  <td colSpan={showedColumns.length}>
+                    <div ref={initIntersectionObserver} className={classes.loader}>
+                      <ThemedPreloader type="dots" />
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </>
+          )}
+        </tbody>
+      </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>;