@true-engineering/true-react-common-ui-kit 4.0.0-alpha17 → 4.0.0-alpha19

package/package.json

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

package/src/components/FiltersPane/FiltersPane.tsx

@@ -4,7 +4,7 @@ import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
 import { getLocale } from './helpers';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
@@ -25,6 +25,8 @@ export interface IFiltersPaneProps<Values extends Record<string, unknown>, Conte
   hasClearButton?: boolean;
   /** @default false */
   shouldRenderDataId?: boolean;
+  /** @default 'filter' */
+  settingsIcon?: IIcon;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -42,6 +44,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   isDisabled = false,
   hasClearButton = true,
   shouldRenderDataId = false,
+  settingsIcon = 'filter',
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -107,9 +110,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
           {...addDataTestId(testId, 'settings-button')}
           onClick={!isDisabled ? onSettingsButtonClick : undefined}
         >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
+          <div className={classes.settingsIcon}>{renderIcon(settingsIcon)}</div>
         </div>
       )}
       {/* Search */}

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

@@ -1,3 +1,4 @@
+import { ReactNode, useCallback } from 'react';
 import clsx from 'clsx';
 import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
@@ -20,14 +21,11 @@ export interface IFlexibleTableCellProps<
 > extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
     Pick<
       IValueComponentProps<Row, unknown>,
-      | 'isFocusedRow'
-      | 'isActiveRow'
-      | 'isNestedComponentExpanded'
-      | 'isRowNestedComponentExpanded'
-      | 'onSetNestedComponent'
+      'isFocusedRow' | 'isActiveRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded'
     > {
   row: Row;
   columnName: keyof Row;
+  updateNestedComponent: (component: ReactNode, cellKey: keyof Row) => void;
   config: IFlexibleTableConfigType<Row, HeaderContent>;
   renderMode: IFlexibleTableRenderMode;
   isSecond?: boolean;
@@ -46,6 +44,7 @@ export function FlexibleTableCell<
   isSecond,
   isSticky: isOldSticky,
   isLoading,
+  updateNestedComponent,
   tweakStyles,
   ...valueComponentProps
 }: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
@@ -73,6 +72,10 @@ export function FlexibleTableCell<
 
   const cellComponentProps: IValueComponentProps<Row, Row[keyof Row]> = {
     ...valueComponentProps,
+    onSetNestedComponent: useCallback(
+      (node) => updateNestedComponent(node, columnName),
+      [columnName, updateNestedComponent],
+    ),
     value,
     row,
   };

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

@@ -1,4 +1,4 @@
-import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
+import { ReactNode, useState, memo, MouseEvent, RefCallback, useCallback } from 'react';
 import clsx from 'clsx';
 import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
@@ -75,7 +75,7 @@ function FlexibleTableRowInner<
   });
 
   const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent<keyof Row>>(() => ({
     isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
@@ -111,13 +111,13 @@ function FlexibleTableRowInner<
     setNestedComponent({ isOpen: false });
   };
 
-  const updateNestedComponent = (component: ReactNode, cellKey: string) => {
+  const updateNestedComponent = useCallback((component: ReactNode, cellKey: keyof Row) => {
     if (isEmpty(component)) {
       closeNestedComponent();
     } else {
       setNestedComponent({ isOpen: true, component, cellKey });
     }
-  };
+  }, []);
 
   const handleRowClick = () => {
     if (isNotEmpty(uniqueField)) {
@@ -174,7 +174,7 @@ function FlexibleTableRowInner<
             isRowNestedComponentExpanded={
               isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
             }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
+            updateNestedComponent={updateNestedComponent}
           />
         ))}
       </Table.Row>

package/src/components/FlexibleTable/types.ts

@@ -36,16 +36,16 @@ export interface IFlexibleTableRowConfig<
   title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
   component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
   dateFormat?: string;
-  minWidth?: string | number;
-  width?: string | number;
-  maxWidth?: string | number;
+  minWidth?: CSSProperties['minWidth'];
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
   /** @default 'left' */
   titleAlign?: CSSProperties['textAlign'];
   cellAlign?: CSSProperties['textAlign'];
   cellVerticalAlign?: CSSProperties['verticalAlign'];
   position?: CSSProperties['position'];
-  right?: number;
-  left?: number;
+  right?: CSSProperties['right'];
+  left?: CSSProperties['left'];
   shouldRenderDataId?: boolean;
   /**
    * Проверка, нужно ли отрисовать component
@@ -71,8 +71,8 @@ export interface IInfinityScrollConfig {
   onInfinityScroll: (skip: number) => void;
 }
 
-export interface INestedComponent {
+export interface INestedComponent<T extends PropertyKey = string> {
   isOpen: boolean;
   component?: ReactNode;
-  cellKey?: string;
+  cellKey?: T;
 }