@true-engineering/true-react-common-ui-kit 3.50.1 → 3.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.50.1",
+  "version": "3.51.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -34,7 +34,6 @@ export interface IFlexibleTableProps<
       | 'uniqueField'
       | 'rowAttributes'
       | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
@@ -63,6 +62,8 @@ export interface IFlexibleTableProps<
   nothingFoundContent?: ReactNode;
   /** @default true */
   shouldRenderHeader?: boolean;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
 
 export function FlexibleTable<
@@ -89,6 +90,7 @@ export function FlexibleTable<
   tweakStyles,
   shouldRenderHeader = true,
   onHeadClick,
+  isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
@@ -106,11 +108,12 @@ export function FlexibleTable<
 
   const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
 
-  const tableRowProps: Omit<
-    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-    'item' | 'index'
-  > = {
+  const getTableRowProps = (
+    item: Row,
+    index: number,
+  ): IFlexibleTableRowProps<Row, HeaderContent, UniqueField> => ({
     ...restProps,
+    item,
     renderMode,
     config,
     columns,
@@ -119,7 +122,8 @@ export function FlexibleTable<
     isFirstColumnSticky,
     isFocusable: isRowFocusable,
     tweakStyles: tweakTableRowStyles,
-  };
+    isExpandableRowComponentInitiallyOpen: applyAction(isRowInitiallyOpen, item, index),
+  });
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -268,9 +272,7 @@ export function FlexibleTable<
         )}
         <Table.Body className={classes.body}>
           {isLoading ? (
-            indexMap(6, (i) => (
-              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
-            ))
+            indexMap(6, (i) => <FlexibleTableRow {...getTableRowProps({} as Row, i)} key={i} />)
           ) : (
             <>
               {shouldShowNothingFound && (
@@ -283,11 +285,9 @@ export function FlexibleTable<
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  {...tableRowProps}
+                  {...getTableRowProps(item, i)}
                   isActive={activeRowsSet.has(i)}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  item={item}
-                  index={i}
                 />
               ))}
 

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

@@ -1,6 +1,6 @@
 import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { IDataAttributes, ITweakStylesProps } from '../../../../types';
@@ -21,7 +21,6 @@ export interface IFlexibleTableRowProps<
   UniqueField extends keyof Row,
 > extends ITweakStylesProps<IFlexibleTableRowStyles> {
   item: Row;
-  index: number;
   uniqueField?: UniqueField;
   renderMode: IFlexibleTableRenderMode;
   /** @default false */
@@ -37,7 +36,7 @@ export interface IFlexibleTableRowProps<
   columns: Array<keyof Row & string>;
   rowAttributes?: Array<keyof Row>;
   /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  isExpandableRowComponentInitiallyOpen?: boolean;
   rowRef?: RefCallback<HTMLTableRowElement>;
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
@@ -51,7 +50,6 @@ function FlexibleTableRowInner<
   UniqueField extends keyof Row,
 >({
   item,
-  index,
   config,
   columns,
   uniqueField,
@@ -78,7 +76,7 @@ function FlexibleTableRowInner<
 
   const [isFocused, setFocused] = useState(false);
   const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
-    isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+    isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
   const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));