@true-engineering/true-react-common-ui-kit 2.7.0 → 2.7.1

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

@@ -1,131 +1,131 @@
-import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const STICKY_SHADOW_PADDING = 12;
-
-export const styles = {
-  root: {
-    position: 'relative',
-    width: '100%',
-    borderCollapse: 'separate',
-    borderSpacing: 0,
-  },
-
-  row: {
-    position: 'relative',
-  },
-
-  scroll: {
-    overflow: 'auto',
-    /*
-      Чтобы сделать таблицу на всю высоту проставьте
-      height у родителя таблицы у себя в проекте.
-      Например: height: calc(100vh -{высота шапки}px)
-    */
-    maxHeight: '100%',
-  },
-
-  horizontallyScrolled: {
-    '& $cellSticky': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-
-    '& $headerSticky::before': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
-  loader: {
-    position: 'sticky',
-    left: 0,
-    maxWidth: '100vw',
-    height: 48,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  headerRow: {
-    verticalAlign: 'bottom',
-  },
-
-  activeRow: {},
-
-  cell: {
-    position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7, 14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  cellSticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    transition: ['box-shadow', '0.25s', 'ease-in-out'],
-  },
-
-  cellSecond: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  header: {
-    position: 'sticky',
-    boxSizing: 'content-box',
-    top: 0,
-    zIndex: 10,
-    fontSize: 12,
-    fontWeight: 'normal',
-    padding: [0, 7, 16, 7],
-  },
-
-  headerSticky: {
-    zIndex: 20,
-    left: 0,
-    paddingLeft: 24,
-    paddingRight: 12,
-
-    '&::before': {
-      content: '""',
-      display: 'block',
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      background: 'transparent',
-      pointerEvents: 'none',
-      zIndex: 1,
-      transition: ['box-shadow', '0.25s', 'ease-in-out'],
-    },
-
-    '&::after': {
-      content: '""',
-      display: 'block',
-      width: STICKY_SHADOW_PADDING,
-      height: '100%',
-      position: 'absolute',
-      left: '100%',
-      top: 0,
-      background: `linear-gradient(90deg, ${colors.CLASSIC_WHITE}, ${rgba(
-        colors.CLASSIC_WHITE,
-        0,
-      )})`,
-      zIndex: 0,
-    },
-  },
-
-  headerSecond: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  editableRow: {
-    cursor: 'pointer',
-  },
-};
-
-export type FlexibleTableStyles = ComponentStyles<typeof styles>;
+import { rgba } from '../../helpers';
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+const STICKY_SHADOW_PADDING = 12;
+
+export const styles = {
+  root: {
+    position: 'relative',
+    width: '100%',
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+  },
+
+  row: {
+    position: 'relative',
+  },
+
+  scroll: {
+    overflow: 'auto',
+    /*
+      Чтобы сделать таблицу на всю высоту проставьте
+      height у родителя таблицы у себя в проекте.
+      Например: height: calc(100vh -{высота шапки}px)
+    */
+    maxHeight: '100%',
+  },
+
+  horizontallyScrolled: {
+    '& $cellSticky': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+
+    '& $headerSticky::before': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+  },
+
+  loader: {
+    position: 'sticky',
+    left: 0,
+    maxWidth: '100vw',
+    height: 48,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  headerRow: {
+    verticalAlign: 'bottom',
+  },
+
+  activeRow: {},
+
+  cell: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7, 14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  cellSticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    transition: ['box-shadow', '0.25s', 'ease-in-out'],
+  },
+
+  cellSecond: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  header: {
+    position: 'sticky',
+    boxSizing: 'content-box',
+    top: 0,
+    zIndex: 10,
+    fontSize: 12,
+    fontWeight: 'normal',
+    padding: [0, 7, 16, 7],
+  },
+
+  headerSticky: {
+    zIndex: 20,
+    left: 0,
+    paddingLeft: 24,
+    paddingRight: 12,
+
+    '&::before': {
+      content: '""',
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      background: 'transparent',
+      pointerEvents: 'none',
+      zIndex: 1,
+      transition: ['box-shadow', '0.25s', 'ease-in-out'],
+    },
+
+    '&::after': {
+      content: '""',
+      display: 'block',
+      width: STICKY_SHADOW_PADDING,
+      height: '100%',
+      position: 'absolute',
+      left: '100%',
+      top: 0,
+      background: `linear-gradient(90deg, ${colors.CLASSIC_WHITE}, ${rgba(
+        colors.CLASSIC_WHITE,
+        0,
+      )})`,
+      zIndex: 0,
+    },
+  },
+
+  headerSecond: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  editableRow: {
+    cursor: 'pointer',
+  },
+};
+
+export type FlexibleTableStyles = ComponentStyles<typeof styles>;

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,205 +1,205 @@
-import { ReactNode, 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 { TableRow } from './components';
-import { FlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
-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?: ReactNode;
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => 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 { ReactNode, 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 { TableRow } from './components';
+import { FlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
+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?: ReactNode;
+  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => 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>
+  );
+}