@true-engineering/true-react-common-ui-kit 3.47.0 → 3.49.0

package/package.json

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

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -29,7 +29,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <></>;
   }
 
-  if (filter.getSelectedValueView !== undefined) {
+  if (isNotEmpty(filter.getSelectedValueView)) {
     return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
   }
 
@@ -94,7 +94,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
     const intervalValueFrom = intervalValue[0];
     const intervalValueTo = intervalValue[1];
 
-    const intervals = [];
+    const intervals: string[] = [];
     if (intervalValueFrom !== undefined) {
       intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
     }
@@ -105,19 +105,6 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <span className={classes.text}>{intervals.join(' ')}</span>;
   }
 
-  if (isMultiple) {
-    return (
-      <>
-        {Array.isArray(value) && value.length > 0 && (
-          <>
-            <span className={classes.text}>{displayValue(value[0])}</span>
-            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
-          </>
-        )}
-      </>
-    );
-  }
-
   if (isDate) {
     const { from, to, periodType, label } = value as unknown as IPeriod;
     const hasFrom = from !== undefined && from !== null;
@@ -127,7 +114,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
       return <span className={classes.text}>{displayValue(label)}</span>;
     }
 
-    const range = [];
+    const range: string[] = [];
     if (hasFrom) {
       if (!hasTo) {
         range.push(translates.from.toLowerCase());
@@ -146,12 +133,27 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <span className={classes.text}>{range.join(' ')}</span>;
   }
 
+  if (isMultiple) {
+    const convertValue = filter.getSelectedValue ?? displayValue;
+
+    return (
+      <>
+        {Array.isArray(value) && value.length > 0 && (
+          <>
+            <span className={classes.text}>{convertValue(value[0])}</span>
+            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
+          </>
+        )}
+      </>
+    );
+  }
+
   if (isRange && Array.isArray(value)) {
     const rangeValue = value as unknown as number[];
     const rangeValueFrom = rangeValue[0];
     const rangeValueTo = rangeValue[1];
 
-    const range = [];
+    const range: string[] = [];
     if (rangeValueFrom !== undefined) {
       range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
     }

package/src/components/FiltersPane/types.ts

@@ -84,22 +84,40 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export type CustomComponent<Value> = FC<{
+export interface ICustomComponentProps<Value> {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;
   filter: ICustomConfigItem<Value>;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-}>;
+}
+
+export type CustomComponent<Value> = FC<ICustomComponentProps<Value>>;
+
+export type ICustomValue<V> = V extends Array<infer T> ? T : never;
+
+export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [key: string & {}]: any;
+  type: 'custom';
+  component: CustomComponent<Value>;
+  valueViewType?: 'range';
+}
 
-export interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  [key: string]: any;
+export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
-  valueViewType?: 'range' | 'multiple';
+  valueViewType?: 'multiple';
+  getSelectedValue?: (v: ICustomValue<Value>) => ReactNode;
 }
 
+export type ICustomConfigItem<Value> =
+  | ICustomRangeConfigItem<Value>
+  | ICustomMultipleConfigItem<Value>;
+
 export type ConfigItem<Value> =
   | ISelectConfigItem<Value>
   | IMultiSelectConfigItem<Value>

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -38,6 +38,7 @@ export interface IFlexibleTableProps<
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
+      | 'rowRef'
     > {
   content: Row[];
   /** @default 'table' */

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

@@ -1,9 +1,9 @@
-import { ReactNode, useState, memo, MouseEvent } from 'react';
+import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
 import clsx from 'clsx';
 import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
+import { IDataAttributes, ITweakStylesProps } from '../../../../types';
 import { TableRenders } from '../../constants';
 import {
   ITableRow,
@@ -19,7 +19,7 @@ export interface IFlexibleTableRowProps<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
   UniqueField extends keyof Row,
-> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+> extends ITweakStylesProps<IFlexibleTableRowStyles> {
   item: Row;
   index: number;
   uniqueField?: UniqueField;
@@ -38,6 +38,7 @@ export interface IFlexibleTableRowProps<
   rowAttributes?: Array<keyof Row>;
   /** @default false */
   isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  rowRef?: RefCallback<HTMLTableRowElement>;
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
   onRowHover?: (id?: Row[UniqueField]) => void;
@@ -61,6 +62,7 @@ function FlexibleTableRowInner<
   isLoading = false,
   rowAttributes,
   isExpandableRowComponentInitiallyOpen = false,
+  rowRef,
   tweakStyles,
   expandableRowComponent,
   onRowHover,
@@ -139,6 +141,7 @@ function FlexibleTableRowInner<
   return (
     <>
       <Table.Row
+        ref={rowRef}
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,

package/src/components/FlexibleTable/constants.ts

@@ -1,8 +1,11 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
+import { IFlexibleTableRenderElement, IFlexibleTableRenderMode } from './types';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender> = {
+export const TableRenders = {
   table: { Root: 'table', Head: 'thead', Body: 'tbody', Row: 'tr', Header: 'th', Cell: 'td' },
   divs: { Root: 'div', Head: 'div', Body: 'div', Row: 'div', Header: 'div', Cell: 'div' },
-};
+} satisfies Record<
+  IFlexibleTableRenderMode,
+  Record<IFlexibleTableRenderElement, keyof JSX.IntrinsicElements>
+>;

package/src/components/FlexibleTable/types.ts

@@ -2,11 +2,7 @@ import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { IRenderNode } from '../../types';
 
 export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-export type IFlexibleTableRender = Record<
-  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
-  keyof JSX.IntrinsicElements
->;
+export type IFlexibleTableRenderElement = 'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
 export type ITableRow = Record<string, any>;