@true-engineering/true-react-common-ui-kit 3.0.0-alpha.15 → 3.0.0-alpha.16

package/package.json

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

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -17,7 +17,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
   activeRows?: number[];
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isHorizontallyScrollable?: boolean;
   isFirstColumnSticky?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { ICommonProps } from '../../../../types';
-import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { formatCellContent } from '../../helpers';
 import type { IFlexibleTableConfigType } from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
@@ -10,7 +10,7 @@ export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
@@ -33,39 +33,37 @@ function FlexibleTableCell<Values extends Record<string, any>>({
 }: IFlexibleTableCellProps<Values>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const itemConfig = config?.[columnName];
-  const value = item[columnName];
-  let content = null;
+  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+    config[columnName] ?? {};
 
-  if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component;
-    content = ValueComponent({
-      value,
-      row: item,
-      isFocusedRow,
-      isNestedComponentExpanded,
-      isRowNestedComponentExpanded,
-      onSetNestedComponent,
-    });
-  } else if (typeof value === 'string' || typeof value === 'number') {
-    content = value;
-  } else if ((value as any) instanceof Date) {
-    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
-  }
+  const value = item[columnName];
 
   return (
     <td
       key={columnName as string}
       className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
-        textAlign: itemConfig?.cellAlign,
-        position: isSticky ? 'sticky' : itemConfig?.position,
-        right: itemConfig?.right,
-        left: isSticky ? 0 : itemConfig?.left,
-        verticalAlign: itemConfig?.cellVerticalAlign,
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        right,
+        left: isSticky ? 0 : left,
+        verticalAlign: cellVerticalAlign,
       }}
     >
-      {content}
+      {isNotEmpty(value) && (
+        <>
+          {isNotEmpty(component)
+            ? component({
+                value,
+                row: item,
+                isFocusedRow,
+                isNestedComponentExpanded,
+                isRowNestedComponentExpanded,
+                onSetNestedComponent,
+              })
+            : formatCellContent(value, config[columnName])}
+        </>
+      )}
     </td>
   );
 }

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

@@ -15,7 +15,7 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>>
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
   isActive: boolean;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
   expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;

package/src/components/FlexibleTable/helpers.ts

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

package/src/components/FlexibleTable/types.ts

@@ -23,7 +23,7 @@ export type IFlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
     titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<Values, Values[Key]>;
+    component?: IValueComponent<NonNullable<Values>, Values[Key]>;
     dateFormat?: string;
     minWidth?: string | number;
     width?: string | number;