@true-engineering/true-react-common-ui-kit 3.33.0 → 3.33.2

package/package.json

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

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
 import { IFlexibleTableConfigType, IValueComponentProps } from './types';
@@ -12,6 +13,8 @@ interface ITableContent {
   contractCode: string;
   validFrom: Date;
   validTo: Date;
+  validTo1?: Date;
+  validTo2?: Date;
   title: string;
   signDate: Date;
   partner: string;
@@ -19,6 +22,8 @@ interface ITableContent {
   parentContract: string;
   currency: string;
   status: string;
+  note?: string;
+  publicNote?: string;
 }
 
 const Temp: FC<IValueComponentProps<ITableContent, string>> = ({ value }) => <>{value}</>;
@@ -26,11 +31,16 @@ const Temp: FC<IValueComponentProps<ITableContent, string>> = ({ value }) => <>{
 const config: IFlexibleTableConfigType<ITableContent> = {
   contractCode: {
     title: 'Contract Code',
+    minWidth: 150,
+    maxWidth: 150,
+    position: 'sticky',
   },
   title: {
-    component: Temp,
+    component: (props) => <Temp {...props} />,
     title: 'Title',
-    minWidth: 320,
+    minWidth: 100,
+    position: 'sticky',
+    left: 186,
   },
   validFrom: {
     title: 'Valid From',
@@ -39,11 +49,28 @@ const config: IFlexibleTableConfigType<ITableContent> = {
   validTo: {
     title: 'Valid From',
   },
+  validTo1: {
+    title: 'Valid To1',
+  },
+  validTo2: {
+    title: 'Valid To2',
+  },
+  note: {
+    title: 'Notes',
+    minWidth: 110,
+    shouldRenderComponent: (_, { note, publicNote }) => isNotEmpty(note) || isNotEmpty(publicNote),
+    component: ({ row }) => (
+      <>
+        <div>{row.note ?? '-'}</div>
+        <div>{row.publicNote ?? '-'}</div>
+      </>
+    ),
+  },
   signDate: {
     title: 'Sign Date',
   },
   partner: {
-    component: Temp,
+    component: (props) => <Temp {...props} />,
     title: 'Partner',
   },
 };
@@ -60,6 +87,8 @@ const content: ITableContent[] = [
     parentContract: '',
     currency: 'RUR',
     status: 'Active',
+    note: 'Note',
+    publicNote: 'Public Note',
   },
   {
     contractCode: 'SOME_CODE',
@@ -72,6 +101,7 @@ const content: ITableContent[] = [
     parentContract: '',
     currency: 'RUR',
     status: 'Active',
+    note: 'Only Note',
   },
   {
     contractCode: 'SOME_CODE',
@@ -84,6 +114,7 @@ const content: ITableContent[] = [
     parentContract: '',
     currency: 'U00',
     status: 'Active',
+    publicNote: 'Only Public Note',
   },
   {
     contractCode: 'SOME_CODE_1',
@@ -220,7 +251,7 @@ const content: ITableContent[] = [
 ];
 
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
-  <div style={{ width: 500, overflow: 'auto' }}>
+  <div style={{ width: 700, overflow: 'auto' }}>
     <FlexibleTable<ITableContent>
       {...args}
       config={config}

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -222,27 +222,39 @@ export function FlexibleTable<
         <Table.Head className={classes.head}>
           <Table.Row className={classes.headerRow}>
             {columns.map((key, i) => {
-              const itemConfig = config?.[key];
+              const {
+                position,
+                minWidth,
+                width,
+                maxWidth,
+                titleAlign = 'left',
+                right,
+                left,
+                title = '',
+                shouldRenderDataId,
+              } = config?.[key] ?? {};
+              const isSticky = position === 'sticky' || (isFirstColumnSticky && i === 0);
 
               return (
                 <Table.Header
                   key={key}
                   className={clsx(classes.header, {
-                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSticky]: isSticky,
                     [classes.headerSecond]: isFirstColumnSticky && i === 1,
                   })}
                   style={{
-                    minWidth: itemConfig?.minWidth,
-                    width: itemConfig?.width,
-                    maxWidth: itemConfig?.maxWidth,
-                    textAlign: itemConfig?.titleAlign ?? 'left',
+                    minWidth,
+                    width,
+                    maxWidth,
+                    textAlign: titleAlign,
+                    position: isSticky ? 'sticky' : position,
+                    right,
+                    left,
                   }}
                   onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
-                  {...addDataAttributes({ id: itemConfig?.shouldRenderDataId ? key : undefined })}
+                  {...addDataAttributes({ id: shouldRenderDataId ? key : undefined })}
                 >
-                  {applyAction(itemConfig?.title ?? '', {
-                    value: headerContent?.[key] as HeaderContent[string],
-                  })}
+                  {applyAction(title, { value: headerContent?.[key] as HeaderContent[string] })}
                 </Table.Header>
               );
             })}

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -17,6 +17,7 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     zIndex: 19,
     paddingLeft: 24,
     paddingRight: 12,
+    left: 0,
     ...getTransition(['box-shadow']),
 
     '[data-scrolled] &': {

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

@@ -44,7 +44,7 @@ export function FlexibleTableCell<
   config,
   renderMode,
   isSecond,
-  isSticky,
+  isSticky: isOldSticky,
   isLoading,
   tweakStyles,
   ...valueComponentProps
@@ -61,8 +61,11 @@ export function FlexibleTableCell<
     cellAlign,
     cellVerticalAlign,
     shouldRenderDataId,
+    shouldRenderComponent = isNotEmpty,
   } = config[columnName] ?? {};
 
+  const isSticky = isOldSticky || position === 'sticky';
+
   const Table = TableRenders[renderMode];
 
   return (
@@ -76,7 +79,7 @@ export function FlexibleTableCell<
         textAlign: cellAlign,
         position: isSticky ? 'sticky' : position,
         right,
-        left: isSticky ? 0 : left,
+        left,
         verticalAlign: cellVerticalAlign,
       }}
       {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}
@@ -86,7 +89,8 @@ export function FlexibleTableCell<
           <Skeleton />
         </div>
       ) : (
-        isNotEmpty(value) && applyAction(component, { ...valueComponentProps, value, row })
+        applyAction(shouldRenderComponent, value, row, columnName) &&
+        applyAction(component, { ...valueComponentProps, value, row })
       )}
     </Table.Cell>
   );

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

@@ -28,7 +28,8 @@ export interface IFlexibleTableRowProps<
   isActive?: boolean;
   /** @default false */
   isFocusable?: boolean;
-  /** @default false */
+  /** @deprecated Use {@position}
+   * @default false */
   isFirstColumnSticky?: boolean;
   /** @default false */
   isLoading?: boolean;

package/src/components/FlexibleTable/types.ts

@@ -46,6 +46,12 @@ export interface IFlexibleTableRowConfig<
   right?: number;
   left?: number;
   shouldRenderDataId?: boolean;
+  /**
+   * Проверка, нужно ли отрисовать component
+   * @description **Не влияет на типизацию `component`, лучше использовать `row`**
+   * @default isNotEmpty
+   */
+  shouldRenderComponent?: boolean | ((value: Values[Key], values: Values, key: Key) => boolean);
 }
 
 export type IFlexibleTableConfigType<