@true-engineering/true-react-common-ui-kit 3.20.1 → 3.21.0

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

@@ -1,196 +1,196 @@
-import { ReactNode, useState, memo, MouseEvent } from 'react';
-import clsx from 'clsx';
-import {
-  isEmpty,
-  isFunction,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
-import {
-  ITableRow,
-  IFlexibleTableConfigType,
-  IFlexibleTableRenderMode,
-  INestedComponent,
-} from '../../types';
-import { FlexibleTableCell } from '../FlexibleTableCell';
-import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
-
-export interface IFlexibleTableRowProps<Row extends ITableRow>
-  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
-  item: Row;
-  index: number;
-  uniqueField?: keyof Row;
-  renderMode: IFlexibleTableRenderMode;
-  /** Индексы строк, на которые навешивается класс `active` */
-  activeRows?: number[];
-  /** @default false */
-  isFirstColumnSticky?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-  config: IFlexibleTableConfigType<Row>;
-  columns: Array<keyof Row & string>;
-  rowAttributes?: Array<keyof Row>;
-  /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
-  /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
-  expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowHover?: (id?: string) => void;
-  onRowClick?: (id: string) => void;
-}
-
-function FlexibleTableRowInner<Row extends ITableRow>({
-  item,
-  index,
-  config,
-  columns,
-  uniqueField,
-  renderMode,
-  activeRows,
-  isFirstColumnSticky,
-  isLoading = false,
-  rowAttributes,
-  isExpandableRowComponentInitiallyOpen = false,
-  tweakStyles,
-  expandableRowComponent,
-  onRowHover,
-  onRowClick,
-}: IFlexibleTableRowProps<Row>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakTableCellStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakTableCell',
-    currentComponentName: 'FlexibleTableRow',
-  });
-
-  const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => {
-    const isOpen = isFunction(isExpandableRowComponentInitiallyOpen)
-      ? isExpandableRowComponentInitiallyOpen(item, index)
-      : isExpandableRowComponentInitiallyOpen;
-
-    const component = isOpen
-      ? expandableRowComponent?.(item, true, () => {
-          setNestedComponent({ isOpen: false });
-        })
-      : undefined;
-
-    return isReactNodeNotEmpty(component) ? { isOpen: true, component } : { isOpen: false };
-  });
-
-  const isActive = activeRows?.includes(index) ?? false;
-  const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
-  const isClickable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent));
-
-  const { isOpen: isNestedComponentExpanded, cellKey: nestedComponentCellKey } = nestedComponent;
-
-  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
-  // например: rowAttributes={['id']} => <tr data-id="x" />
-  const rowData = rowAttributes?.reduce<IDataAttributes>(
-    (acc, cur) => ({ ...acc, [cur]: item[cur] }),
-    {},
-  );
-
-  const handleMouseEnter = (event: MouseEvent) => {
-    if (isNotEmpty(uniqueField) && isNotEmpty(onRowHover)) {
-      event.stopPropagation();
-      onRowHover(item[uniqueField]);
-      setFocused(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    onRowHover?.(undefined);
-    setFocused(false);
-  };
-
-  const updateNestedComponent = (component?: ReactNode, cellKey?: string) => {
-    setNestedComponent(
-      component === undefined ? { isOpen: false } : { isOpen: true, component, cellKey },
-    );
-  };
-
-  const closeNestedComponent = () => {
-    setNestedComponent({ isOpen: false });
-  };
-
-  const handleRowClick = () => {
-    if (isNotEmpty(uniqueField)) {
-      onRowClick?.(item[uniqueField]);
-    }
-
-    if (isNotEmpty(expandableRowComponent)) {
-      const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
-
-      if (!isNestedComponentExpanded && newNestedComponent !== null) {
-        updateNestedComponent(newNestedComponent);
-        return;
-      }
-
-      if (isNestedComponentExpanded && isEmpty(nestedComponentCellKey)) {
-        closeNestedComponent();
-        return;
-      }
-    }
-  };
-
-  const TableRow = renderMode === 'divs' ? 'div' : 'tr';
-  const TableCell = renderMode === 'divs' ? 'div' : 'td';
-
-  return (
-    <>
-      <TableRow
-        className={clsx(classes.root, {
-          [classes.active]: isActive,
-          [classes.editable]: isEditable,
-          [classes.clickable]: isClickable,
-        })}
-        {...(!isLoading && {
-          onClick: handleRowClick,
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-        })}
-        {...addDataAttributes({
-          ...rowData,
-          active: isActive ? true : undefined,
-          editable: isEditable ? true : undefined,
-          isExpandableComponentActive: isNestedComponentExpanded ? true : undefined,
-        })}
-      >
-        {columns.map((key, i) => (
-          <FlexibleTableCell
-            key={key}
-            isSticky={isFirstColumnSticky && i === 0}
-            isSecond={isFirstColumnSticky && i === 1}
-            isLoading={isLoading}
-            row={item}
-            config={config}
-            columnName={key}
-            tweakStyles={tweakTableCellStyles}
-            renderMode={renderMode}
-            isFocusedRow={isFocused}
-            isNestedComponentExpanded={isNestedComponentExpanded && nestedComponentCellKey === key}
-            isRowNestedComponentExpanded={
-              isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
-            }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
-          />
-        ))}
-      </TableRow>
-
-      {isNestedComponentExpanded && (
-        <TableRow className={classes.root}>
-          <TableCell className={classes.nestedComponent} colSpan={columns.length}>
-            {nestedComponent.component}
-          </TableCell>
-        </TableRow>
-      )}
-    </>
-  );
-}
-
-export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;
+import { ReactNode, useState, memo, MouseEvent } from 'react';
+import clsx from 'clsx';
+import {
+  isEmpty,
+  isFunction,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps, IDataAttributes } from '../../../../types';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+  INestedComponent,
+} from '../../types';
+import { FlexibleTableCell } from '../FlexibleTableCell';
+import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
+
+export interface IFlexibleTableRowProps<Row extends ITableRow>
+  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+  item: Row;
+  index: number;
+  uniqueField?: keyof Row;
+  renderMode: IFlexibleTableRenderMode;
+  /** Индексы строк, на которые навешивается класс `active` */
+  activeRows?: number[];
+  /** @default false */
+  isFirstColumnSticky?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  config: IFlexibleTableConfigType<Row>;
+  columns: Array<keyof Row & string>;
+  rowAttributes?: Array<keyof Row>;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
+  expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
+  // TODO: Заменить string на Generic Values[uniqueField]
+  onRowHover?: (id?: string) => void;
+  onRowClick?: (id: string) => void;
+}
+
+function FlexibleTableRowInner<Row extends ITableRow>({
+  item,
+  index,
+  config,
+  columns,
+  uniqueField,
+  renderMode,
+  activeRows,
+  isFirstColumnSticky,
+  isLoading = false,
+  rowAttributes,
+  isExpandableRowComponentInitiallyOpen = false,
+  tweakStyles,
+  expandableRowComponent,
+  onRowHover,
+  onRowClick,
+}: IFlexibleTableRowProps<Row>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakTableCellStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableCell',
+    currentComponentName: 'FlexibleTableRow',
+  });
+
+  const [isFocused, setFocused] = useState(false);
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => {
+    const isOpen = isFunction(isExpandableRowComponentInitiallyOpen)
+      ? isExpandableRowComponentInitiallyOpen(item, index)
+      : isExpandableRowComponentInitiallyOpen;
+
+    const component = isOpen
+      ? expandableRowComponent?.(item, true, () => {
+          setNestedComponent({ isOpen: false });
+        })
+      : undefined;
+
+    return isReactNodeNotEmpty(component) ? { isOpen: true, component } : { isOpen: false };
+  });
+
+  const isActive = activeRows?.includes(index) ?? false;
+  const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
+  const isClickable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent));
+
+  const { isOpen: isNestedComponentExpanded, cellKey: nestedComponentCellKey } = nestedComponent;
+
+  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
+  // например: rowAttributes={['id']} => <tr data-id="x" />
+  const rowData = rowAttributes?.reduce<IDataAttributes>(
+    (acc, cur) => ({ ...acc, [cur]: item[cur] }),
+    {},
+  );
+
+  const handleMouseEnter = (event: MouseEvent) => {
+    if (isNotEmpty(uniqueField) && isNotEmpty(onRowHover)) {
+      event.stopPropagation();
+      onRowHover(item[uniqueField]);
+      setFocused(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    onRowHover?.(undefined);
+    setFocused(false);
+  };
+
+  const updateNestedComponent = (component?: ReactNode, cellKey?: string) => {
+    setNestedComponent(
+      component === undefined ? { isOpen: false } : { isOpen: true, component, cellKey },
+    );
+  };
+
+  const closeNestedComponent = () => {
+    setNestedComponent({ isOpen: false });
+  };
+
+  const handleRowClick = () => {
+    if (isNotEmpty(uniqueField)) {
+      onRowClick?.(item[uniqueField]);
+    }
+
+    if (isNotEmpty(expandableRowComponent)) {
+      const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
+
+      if (!isNestedComponentExpanded && newNestedComponent !== null) {
+        updateNestedComponent(newNestedComponent);
+        return;
+      }
+
+      if (isNestedComponentExpanded && isEmpty(nestedComponentCellKey)) {
+        closeNestedComponent();
+        return;
+      }
+    }
+  };
+
+  const TableRow = renderMode === 'divs' ? 'div' : 'tr';
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
+  return (
+    <>
+      <TableRow
+        className={clsx(classes.root, {
+          [classes.active]: isActive,
+          [classes.editable]: isEditable,
+          [classes.clickable]: isClickable,
+        })}
+        {...(!isLoading && {
+          onClick: handleRowClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+        })}
+        {...addDataAttributes({
+          ...rowData,
+          active: isActive ? true : undefined,
+          editable: isEditable ? true : undefined,
+          isExpandableComponentActive: isNestedComponentExpanded ? true : undefined,
+        })}
+      >
+        {columns.map((key, i) => (
+          <FlexibleTableCell
+            key={key}
+            isSticky={isFirstColumnSticky && i === 0}
+            isSecond={isFirstColumnSticky && i === 1}
+            isLoading={isLoading}
+            row={item}
+            config={config}
+            columnName={key}
+            tweakStyles={tweakTableCellStyles}
+            renderMode={renderMode}
+            isFocusedRow={isFocused}
+            isNestedComponentExpanded={isNestedComponentExpanded && nestedComponentCellKey === key}
+            isRowNestedComponentExpanded={
+              isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
+            }
+            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
+          />
+        ))}
+      </TableRow>
+
+      {isNestedComponentExpanded && (
+        <TableRow className={classes.root}>
+          <TableCell className={classes.nestedComponent} colSpan={columns.length}>
+            {nestedComponent.component}
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}
+
+export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;

package/src/components/FlexibleTable/helpers.ts

@@ -1,13 +1,13 @@
-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, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);
+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, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);

package/src/components/Icon/Icon.stories.tsx

@@ -1,86 +1,86 @@
-import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
-import { IIconType } from './types';
-
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Data Display/Icon',
-};
-
-export const Default = () => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
-      display: 'flex',
-      // width: number('Container width', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-      // height: number('Container height', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-    }}
-  >
-    {/* <Icon type={select('type', types, types[0])} /> */}
-  </div>
-);
-
-export const Gallery = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      width: '80vw',
-    }}
-  >
-    {types.map((type) => (
-      <div
-        key={type}
-        style={{
-          width: 100,
-          height: 100,
-          margin: 1,
-          background: '#f7f7f7',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        <div
-          style={{
-            width: 32,
-            height: 32,
-            margin: '10px 0',
-            display: 'flex',
-            alignItems: 'center',
-            color: '#888',
-          }}
-        >
-          <Icon type={type} />
-        </div>
-        <div
-          style={{
-            fontFamily: 'Arial',
-            fontSize: 13,
-            color: '#747679',
-            overflow: 'hidden',
-            padding: '0 5px',
-          }}
-        >
-          {type}
-        </div>
-      </div>
-    ))}
-  </div>
-);
+import { Icon } from './Icon';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+import { IIconType } from './types';
+
+const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Data Display/Icon',
+};
+
+export const Default = () => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      // color: color('Container color', colors.GREEN_FOCUS),
+      display: 'flex',
+      // width: number('Container width', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+      // height: number('Container height', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+    }}
+  >
+    {/* <Icon type={select('type', types, types[0])} /> */}
+  </div>
+);
+
+export const Gallery = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      width: '80vw',
+    }}
+  >
+    {types.map((type) => (
+      <div
+        key={type}
+        style={{
+          width: 100,
+          height: 100,
+          margin: 1,
+          background: '#f7f7f7',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <div
+          style={{
+            width: 32,
+            height: 32,
+            margin: '10px 0',
+            display: 'flex',
+            alignItems: 'center',
+            color: '#888',
+          }}
+        >
+          <Icon type={type} />
+        </div>
+        <div
+          style={{
+            fontFamily: 'Arial',
+            fontSize: 13,
+            color: '#747679',
+            overflow: 'hidden',
+            padding: '0 5px',
+          }}
+        >
+          {type}
+        </div>
+      </div>
+    ))}
+  </div>
+);

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

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