@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha42

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

@@ -1,43 +1,43 @@
-import { getTransition } from '@true-engineering/true-react-platform-helpers';
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
-
-export const useStyles = createThemedStyles('FlexibleTableCell', {
-  root: {
-    position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  sticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    left: 0,
-    ...getTransition(['box-shadow']),
-
-    '[data-scrolled] &': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
-  second: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  loading: {},
-
-  skeleton: {
-    height: 21,
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-});
-
-export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;
+import { getTransition } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
+
+export const useStyles = createThemedStyles('FlexibleTableCell', {
+  root: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  sticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    left: 0,
+    ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+  },
+
+  second: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  loading: {},
+
+  skeleton: {
+    height: 21,
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+});
+
+export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,113 +1,116 @@
-import clsx from 'clsx';
-import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { ICommonProps } from '../../../../types';
-import { Skeleton } from '../../../Skeleton';
-import { TableRenders } from '../../constants';
-import { formatCellContent } from '../../helpers';
-import {
-  ITableRow,
-  IValueComponentProps,
-  IFlexibleTableConfigType,
-  IFlexibleTableRenderMode,
-  IHeaderContent,
-} from '../../types';
-import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
-
-export interface IFlexibleTableCellProps<
-  Row extends ITableRow,
-  HeaderContent extends IHeaderContent<Row>,
-> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
-    Pick<
-      IValueComponentProps<Row, unknown>,
-      | 'isFocusedRow'
-      | 'isActiveRow'
-      | 'isNestedComponentExpanded'
-      | 'isRowNestedComponentExpanded'
-      | 'onSetNestedComponent'
-    > {
-  row: Row;
-  columnName: keyof Row;
-  config: IFlexibleTableConfigType<Row, HeaderContent>;
-  renderMode: IFlexibleTableRenderMode;
-  isSecond?: boolean;
-  isSticky?: boolean;
-  isLoading?: boolean;
-}
-
-export function FlexibleTableCell<
-  Row extends ITableRow,
-  HeaderContent extends IHeaderContent<Row>,
->({
-  row,
-  columnName,
-  config,
-  renderMode,
-  isSecond,
-  isSticky: isOldSticky,
-  isLoading,
-  tweakStyles,
-  ...valueComponentProps
-}: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const value = row[columnName];
-
-  const {
-    component = formatCellContent(value, config[columnName]),
-    width,
-    maxWidth,
-    minWidth,
-    left,
-    right,
-    position,
-    cellAlign,
-    cellVerticalAlign,
-    shouldRenderDataId,
-    shouldRenderComponent = isNotEmpty,
-    onCellClick,
-  } = config[columnName] ?? {};
-
-  const isSticky = isOldSticky || position === 'sticky';
-  const isClickable = !isLoading && isNotEmpty(onCellClick);
-
-  const cellComponentProps: IValueComponentProps<Row, Row[keyof Row]> = {
-    ...valueComponentProps,
-    value,
-    row,
-  };
-
-  const Table = TableRenders[renderMode];
-
-  return (
-    <Table.Cell
-      className={clsx(classes.root, {
-        [classes.sticky]: isSticky,
-        [classes.second]: isSecond,
-        [classes.loading]: isLoading,
-        [classes.clickable]: isClickable,
-      })}
-      style={{
-        textAlign: cellAlign,
-        position: isSticky ? 'sticky' : position,
-        width,
-        maxWidth,
-        minWidth,
-        right,
-        left,
-        verticalAlign: cellVerticalAlign,
-      }}
-      onClick={isClickable ? (event) => onCellClick?.(event, cellComponentProps) : undefined}
-      {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}
-    >
-      {isLoading ? (
-        <div className={classes.skeleton}>
-          <Skeleton />
-        </div>
-      ) : (
-        applyAction(shouldRenderComponent, value, row, columnName) &&
-        applyAction(component, cellComponentProps)
-      )}
-    </Table.Cell>
-  );
-}
+import { ReactNode, useCallback } from 'react';
+import clsx from 'clsx';
+import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { ICommonProps } from '../../../../types';
+import { Skeleton } from '../../../Skeleton';
+import { TableRenders } from '../../constants';
+import { formatCellContent } from '../../helpers';
+import {
+  ITableRow,
+  IValueComponentProps,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+  IHeaderContent,
+} from '../../types';
+import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
+
+export interface IFlexibleTableCellProps<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+    Pick<
+      IValueComponentProps<Row, unknown>,
+      'isFocusedRow' | 'isActiveRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded'
+    > {
+  row: Row;
+  columnName: keyof Row;
+  updateNestedComponent: (component: ReactNode, cellKey: keyof Row) => void;
+  config: IFlexibleTableConfigType<Row, HeaderContent>;
+  renderMode: IFlexibleTableRenderMode;
+  isSecond?: boolean;
+  isSticky?: boolean;
+  isLoading?: boolean;
+}
+
+export function FlexibleTableCell<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+>({
+  row,
+  columnName,
+  config,
+  renderMode,
+  isSecond,
+  isSticky: isOldSticky,
+  isLoading,
+  updateNestedComponent,
+  tweakStyles,
+  ...valueComponentProps
+}: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const value = row[columnName];
+
+  const {
+    component = formatCellContent(value, config[columnName]),
+    width,
+    maxWidth,
+    minWidth,
+    left,
+    right,
+    position,
+    cellAlign,
+    cellVerticalAlign,
+    shouldRenderDataId,
+    shouldRenderComponent = isNotEmpty,
+    onCellClick,
+  } = config[columnName] ?? {};
+
+  const isSticky = isOldSticky || position === 'sticky';
+  const isClickable = !isLoading && isNotEmpty(onCellClick);
+
+  const cellComponentProps: IValueComponentProps<Row, Row[keyof Row]> = {
+    ...valueComponentProps,
+    onSetNestedComponent: useCallback(
+      (node) => updateNestedComponent(node, columnName),
+      [columnName, updateNestedComponent],
+    ),
+    value,
+    row,
+  };
+
+  const Table = TableRenders[renderMode];
+
+  return (
+    <Table.Cell
+      className={clsx(classes.root, {
+        [classes.sticky]: isSticky,
+        [classes.second]: isSecond,
+        [classes.loading]: isLoading,
+        [classes.clickable]: isClickable,
+      })}
+      style={{
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        width,
+        maxWidth,
+        minWidth,
+        right,
+        left,
+        verticalAlign: cellVerticalAlign,
+      }}
+      onClick={isClickable ? (event) => onCellClick?.(event, cellComponentProps) : undefined}
+      {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}
+    >
+      {isLoading ? (
+        <div className={classes.skeleton}>
+          <Skeleton />
+        </div>
+      ) : (
+        applyAction(shouldRenderComponent, value, row, columnName) &&
+        applyAction(component, cellComponentProps)
+      )}
+    </Table.Cell>
+  );
+}

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

@@ -1,2 +1,2 @@
-export * from './FlexibleTableCell';
-export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
+export * from './FlexibleTableCell';
+export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';

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

@@ -1,25 +1,25 @@
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
-
-export const useStyles = createThemedStyles('FlexibleTableRow', {
-  root: {
-    position: 'relative',
-  },
-
-  active: {},
-
-  editable: {
-    cursor: 'pointer',
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-
-  nestedComponent: {},
-});
-
-export type IFlexibleTableRowStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakTableCell: IFlexibleTableCellStyles }
->;
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
+
+export const useStyles = createThemedStyles('FlexibleTableRow', {
+  root: {
+    position: 'relative',
+  },
+
+  active: {},
+
+  editable: {
+    cursor: 'pointer',
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+
+  nestedComponent: {},
+});
+
+export type IFlexibleTableRowStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableCell: IFlexibleTableCellStyles }
+>;