@true-engineering/true-react-common-ui-kit 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,10 +1,19 @@
-import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
+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 { useTweakStyles } from '../../hooks';
+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';
 
@@ -15,12 +24,16 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
   activeRows?: number[];
-  config?: IFlexibleTableConfigType<Values>;
+  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;
@@ -42,6 +55,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
   isFirstColumnSticky,
   infinityScrollConfig,
   uniqueField,
+  isLoading,
   onHeadClick,
   onRowHover,
   onRowClick,
@@ -59,11 +73,44 @@ export function FlexibleTable<Values extends Record<string, any>>({
     currentComponentName: 'FlexibleTable',
   });
 
-  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
-
   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) {
@@ -97,29 +144,34 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   useEffect(() => {
-    const scrollContainer = (refForScroll ?? scrollRef).current;
-    if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
+    const scrollContainer = scrollRef.current;
+    if (isEmpty(scrollContainer) || !isHorizontallyScrollable) {
       return;
     }
-    const scrollHandler = (e: Event) => {
-      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
+
+    const scrollHandler = () => {
+      setIsScrolledAttribute(scrollContainer);
+    };
+
+    const resizeHandler = () => {
+      setHasScrollBarAttribute(scrollContainer);
     };
+
     scrollContainer.addEventListener('scroll', scrollHandler);
-    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
-  }, [scrollRef]);
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
   return (
-    <div
-      ref={refForScroll ?? scrollRef}
-      className={clsx(
-        isHorizontallyScrollable && classes.scroll,
-        isHorizontallyScrolled && classes.horizontallyScrolled,
-      )}
-    >
-      <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
+    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
+      <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <thead>
           <tr className={classes.headerRow}>
-            {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
+            {showedColumns.map((key, i) => {
               const itemConfig = config?.[key];
 
               let titleContent = itemConfig?.title ?? '';
@@ -131,11 +183,10 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
               return (
                 <th
-                  className={clsx(
-                    classes.header,
-                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
-                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
-                  )}
+                  className={clsx(classes.header, {
+                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && i === 1,
+                  })}
                   style={{
                     minWidth: itemConfig?.minWidth,
                     width: itemConfig?.width,
@@ -152,42 +203,55 @@ export function FlexibleTable<Values extends Record<string, any>>({
           </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>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <tr key={i}>
+                {showedColumns.map((_, j) => (
+                  <td key={j} className={classes.skeleton}>
+                    <Skeleton />
+                  </td>
+                ))}
               </tr>
-            )}
-
-          {content.map((item, idx) => (
-            <FlexibleTableRow
-              item={item}
-              uniqueField={uniqueField}
-              isActive={activeRows?.includes(idx) ?? false}
-              isFirstColumnSticky={isFirstColumnSticky}
-              onRowClick={onRowClick}
-              onRowHover={onRowHover}
-              enabledColumns={enabledColumns}
-              config={config}
-              key={uniqueField ? item[uniqueField] : idx}
-              rowAttributes={rowAttributes}
-              tweakStyles={tweakTableRowStyles}
-              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>
+            ))
+          ) : (
+            <>
+              {!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>

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

@@ -18,6 +18,10 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     paddingLeft: 24,
     paddingRight: 12,
     ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
   },
 
   second: {

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { ICommonProps } from '../../../../types';
-import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { formatCellContent } from '../../helpers';
 import type { IFlexibleTableConfigType } from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
@@ -10,7 +10,7 @@ export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
@@ -33,39 +33,37 @@ function FlexibleTableCell<Values extends Record<string, any>>({
 }: IFlexibleTableCellProps<Values>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const itemConfig = config?.[columnName];
-  const value = item[columnName];
-  let content = null;
+  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+    config[columnName] ?? {};
 
-  if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component;
-    content = ValueComponent({
-      value,
-      row: item,
-      isFocusedRow,
-      isNestedComponentExpanded,
-      isRowNestedComponentExpanded,
-      onSetNestedComponent,
-    });
-  } else if (typeof value === 'string' || typeof value === 'number') {
-    content = value;
-  } else if ((value as any) instanceof Date) {
-    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
-  }
+  const value = item[columnName];
 
   return (
     <td
       key={columnName as string}
       className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
-        textAlign: itemConfig?.cellAlign,
-        position: isSticky ? 'sticky' : itemConfig?.position,
-        right: itemConfig?.right,
-        left: isSticky ? 0 : itemConfig?.left,
-        verticalAlign: itemConfig?.cellVerticalAlign,
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        right,
+        left: isSticky ? 0 : left,
+        verticalAlign: cellVerticalAlign,
       }}
     >
-      {content}
+      {isNotEmpty(value) && (
+        <>
+          {isNotEmpty(component)
+            ? component({
+                value,
+                row: item,
+                isFocusedRow,
+                isNestedComponentExpanded,
+                isRowNestedComponentExpanded,
+                onSetNestedComponent,
+              })
+            : formatCellContent(value, config[columnName])}
+        </>
+      )}
     </td>
   );
 }

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

@@ -11,6 +11,10 @@ export const useStyles = createThemedStyles('FlexibleTableRow', {
   editable: {
     cursor: 'pointer',
   },
+
+  clickable: {
+    cursor: 'pointer',
+  },
 });
 
 export type IFlexibleTableRowStyles = ITweakStyles<

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useState, memo } from 'react';
 import clsx from 'clsx';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
@@ -14,7 +15,7 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>>
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
   isActive: boolean;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
   expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
@@ -81,7 +82,7 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
       onRowClick?.(item[uniqueField]);
     }
 
-    if (expandableRowComponent !== undefined) {
+    if (isNotEmpty(expandableRowComponent)) {
       const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
 
       if (!nestedComponent.isOpen && newNestedComponent !== null) {
@@ -96,16 +97,16 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
     }
   };
 
-  const items = enabledColumns ?? Object.keys(item);
+  const items = enabledColumns ?? Object.keys(config);
 
   return (
     <>
       <tr
-        className={clsx(
-          classes.root,
-          isActive && classes.active,
-          (onRowClick !== undefined || onRowHover !== undefined) && classes.editable,
-        )}
+        className={clsx(classes.root, {
+          [classes.active]: isActive,
+          [classes.editable]: isNotEmpty(onRowClick) || isNotEmpty(onRowHover),
+          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
+        })}
         onMouseEnter={(e) => {
           if (uniqueField !== undefined && onRowHover !== undefined) {
             e.stopPropagation();
@@ -120,11 +121,11 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
           isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
         })}
       >
-        {items.map((key, idx) => (
+        {items.map((key, i) => (
           <FlexibleTableCell
             columnName={key}
-            isSticky={isFirstColumnSticky && idx === 0}
-            isSecond={isFirstColumnSticky && idx === 1}
+            isSticky={isFirstColumnSticky && i === 0}
+            isSecond={isFirstColumnSticky && i === 1}
             key={key as string}
             item={item}
             config={config}

package/src/components/FlexibleTable/helpers.ts

@@ -0,0 +1,15 @@
+import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { DEFAULT_DATE_FORMAT } from './constants';
+import { IFlexibleTableConfigType } from './types';
+
+export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
+  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
+
+export const formatCellContent = <Values>(
+  value: unknown,
+  config?: IFlexibleTableConfigType<Values>[keyof Values],
+): string =>
+  value instanceof Date
+    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
+    : String(value);

package/src/components/FlexibleTable/types.ts

@@ -23,7 +23,7 @@ export type IFlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
     titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<Values, Values[Key]>;
+    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
     dateFormat?: string;
     minWidth?: string | number;
     width?: string | number;

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/complexIcons/index.ts

@@ -1 +1 @@
-export * from './icons';
+export * from './icons';

package/src/components/List/List.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment } from 'react';
+import { FC, Fragment, MouseEvent } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -13,15 +13,15 @@ import { useStyles, IListStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
-  onClick?(): void;
+  onClick?(event: MouseEvent): void;
 }
 
 export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const handleItemClick = (item: IListItem) => {
-    item.onClick();
-    onClick?.();
+  const handleItemClick = (event: MouseEvent, item: IListItem) => {
+    item.onClick(event);
+    onClick?.(event);
   };
 
   return (
@@ -34,7 +34,7 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
               [classes.disabledItem]: item.disabled,
               [classes.withIconGap]: item.withIconGap,
             })}
-            onClick={item.disabled ? undefined : () => handleItemClick(item)}
+            onClick={item.disabled ? undefined : (event) => handleItemClick(event, item)}
             {...addDataTestId(item.testId ?? getTestId(testId, `item-${idx}`))}
             {...(item.disabled && addDataAttributes({ disabled: item.disabled }))}
           >

package/src/components/List/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import { IIcon } from '../../types';
 
 export interface IListItem {
@@ -9,5 +9,5 @@ export interface IListItem {
   shouldDrawSpacerBelow?: boolean;
   withIconGap?: boolean;
   testId?: string;
-  onClick(): void;
+  onClick(event: MouseEvent): void;
 }