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

package/README.md

@@ -11,6 +11,20 @@
 
 # Release Notes
 
+## 3.49.0
+
+### Changes
+
+- **FiltersPane**: Добавлен `getSelectedValue` для удобного рендера значения в `custom`-фильтре с `valueViewType: 'multiple'`
+- **FiltersPane**: Добавлен экспорт `ICustomComponentProps` для `CustomComponent` в `ICustomConfigItem`
+- **FiltersPane**: Кастомный фильтр разделён на два типа `ICustomRangeConfigItem` и `ICustomMultipleConfigItem`
+
+## 3.48.0
+
+### Changes
+
+- **FlexibleTable**: Добавлен rowRef
+
 ## 3.47.0
 
 ### Changes

package/dist/components/FiltersPane/types.d.ts

@@ -54,20 +54,30 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
     type: 'dateRange';
     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 interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-    [key: string]: any;
+}
+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> {
+    [key: string & {}]: any;
+    type: 'custom';
+    component: CustomComponent<Value>;
+    valueViewType?: 'range';
+}
+export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
+    [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> | ICustomConfigItem<Value> | IDateRangeWithoutPeriodConfigItem<Value> | IDateRangeConfigItem<Value> | IIntervalConfigItem<Value> | IBooleanConfigItem<Value>;
 export type ConfigType<Values> = {
     [K in keyof Values]: ConfigItem<Values[K]>;

package/dist/components/FlexibleTable/FlexibleTable.d.ts

@@ -3,7 +3,7 @@ import { ICommonProps } from '../../types';
 import { IFlexibleTableRowProps } from './components';
 import { ITableRow, IFlexibleTableConfigType, IInfinityScrollConfig, IFlexibleTableRenderMode, IHeaderContent } from './types';
 import { IFlexibleTableStyles } from './FlexibleTable.styles';
-export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover'> {
+export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover' | 'rowRef'> {
     content: Row[];
     /** @default 'table' */
     renderMode?: IFlexibleTableRenderMode;

package/dist/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { ICommonProps } from '../../../../types';
+import { ReactNode, RefCallback } from 'react';
+import { ITweakStylesProps } from '../../../../types';
 import { ITableRow, IFlexibleTableConfigType, IFlexibleTableRenderMode, IHeaderContent } from '../../types';
 import { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
-export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ITweakStylesProps<IFlexibleTableRowStyles> {
     item: Row;
     index: number;
     uniqueField?: UniqueField;
@@ -21,11 +21,12 @@ export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent ext
     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;
     onRowClick?: (id: Row[UniqueField]) => void;
 }
-declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, index, config, columns, uniqueField, renderMode, isActive, isFocusable, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
+declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, index, config, columns, uniqueField, renderMode, isActive, isFocusable, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, rowRef, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
 export declare const FlexibleTableRow: typeof FlexibleTableRowInner;
 export {};

package/dist/components/FlexibleTable/constants.d.ts

@@ -1,3 +1,19 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
 export declare const DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
-export declare const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender>;
+export declare 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";
+    };
+};

package/dist/components/FlexibleTable/types.d.ts

@@ -1,7 +1,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';
 export type ITableRow = Record<string, any>;
 export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
 export interface ITitleComponentProps<Value> {

package/dist/true-react-common-ui-kit.js

@@ -19060,7 +19060,7 @@ function FilterValueView(param) {
   if (isEmpty(value)) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  if (filter.getSelectedValueView !== void 0) {
+  if (isNotEmpty(filter.getSelectedValueView)) {
     return /* @__PURE__ */ jsx("span", {
       className: classes.text,
       children: filter.getSelectedValueView(value)
@@ -19129,22 +19129,6 @@ function FilterValueView(param) {
       children: intervals.join(" ")
     });
   }
-  if (isMultiple) {
-    return /* @__PURE__ */ jsx(Fragment, {
-      children: Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx("span", {
-            className: classes.text,
-            children: displayValue(value[0])
-          }),
-          /* @__PURE__ */ jsx("span", {
-            className: classes.count,
-            children: value.length > 1 && " (+".concat(value.length - 1, ")")
-          })
-        ]
-      })
-    });
-  }
   if (isDate) {
     var from = value.from, to = value.to, periodType = value.periodType, label = value.label;
     var hasFrom = from !== void 0 && from !== null;
@@ -19175,6 +19159,24 @@ function FilterValueView(param) {
       children: range.join(" ")
     });
   }
+  if (isMultiple) {
+    var _filter_getSelectedValue;
+    var convertValue = (_filter_getSelectedValue = filter.getSelectedValue) !== null && _filter_getSelectedValue !== void 0 ? _filter_getSelectedValue : displayValue;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: classes.text,
+            children: convertValue(value[0])
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: classes.count,
+            children: value.length > 1 && " (+".concat(value.length - 1, ")")
+          })
+        ]
+      })
+    });
+  }
   if (isRange && Array.isArray(value)) {
     var rangeValue = value;
     var rangeValueFrom = rangeValue[0];
@@ -26296,7 +26298,7 @@ function _unsupported_iterable_to_array$7(o, minLen) {
     return _array_like_to_array$7(o, minLen);
 }
 function FlexibleTableRowInner(param) {
-  var item = param.item, index = param.index, config = param.config, columns = param.columns, uniqueField = param.uniqueField, renderMode = param.renderMode, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isFocusable = param.isFocusable, isFocusable = _param_isFocusable === void 0 ? false : _param_isFocusable, _param_isFirstColumnSticky = param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, rowAttributes = param.rowAttributes, _param_isExpandableRowComponentInitiallyOpen = param.isExpandableRowComponentInitiallyOpen, isExpandableRowComponentInitiallyOpen = _param_isExpandableRowComponentInitiallyOpen === void 0 ? false : _param_isExpandableRowComponentInitiallyOpen, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
+  var item = param.item, index = param.index, config = param.config, columns = param.columns, uniqueField = param.uniqueField, renderMode = param.renderMode, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isFocusable = param.isFocusable, isFocusable = _param_isFocusable === void 0 ? false : _param_isFocusable, _param_isFirstColumnSticky = param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, rowAttributes = param.rowAttributes, _param_isExpandableRowComponentInitiallyOpen = param.isExpandableRowComponentInitiallyOpen, isExpandableRowComponentInitiallyOpen = _param_isExpandableRowComponentInitiallyOpen === void 0 ? false : _param_isExpandableRowComponentInitiallyOpen, rowRef = param.rowRef, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
   var classes = useStyles$h({
     theme: tweakStyles
   });
@@ -26373,6 +26375,7 @@ function FlexibleTableRowInner(param) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx(Table.Row, _object_spread_props$k(_object_spread$l({
+        ref: rowRef,
         className: clsx(classes.root, (_obj2 = {}, _define_property$m(_obj2, classes.active, isActive), _define_property$m(_obj2, classes.editable, isEditable), _define_property$m(_obj2, classes.clickable, isClickable), _obj2))
       }, !isLoading && {
         onClick: handleRowClick,