@true-engineering/true-react-common-ui-kit 3.38.0 → 3.39.0

package/package.json

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

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

@@ -34,6 +34,10 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
   skeleton: {
     height: 21,
   },
+
+  clickable: {
+    cursor: 'pointer',
+  },
 });
 
 export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;

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

@@ -65,9 +65,17 @@ export function FlexibleTableCell<
     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];
 
@@ -77,6 +85,7 @@ export function FlexibleTableCell<
         [classes.sticky]: isSticky,
         [classes.second]: isSecond,
         [classes.loading]: isLoading,
+        [classes.clickable]: isClickable,
       })}
       style={{
         textAlign: cellAlign,
@@ -88,6 +97,7 @@ export function FlexibleTableCell<
         left,
         verticalAlign: cellVerticalAlign,
       }}
+      onClick={isClickable ? (event) => onCellClick?.(event, cellComponentProps) : undefined}
       {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}
     >
       {isLoading ? (
@@ -96,7 +106,7 @@ export function FlexibleTableCell<
         </div>
       ) : (
         applyAction(shouldRenderComponent, value, row, columnName) &&
-        applyAction(component, { ...valueComponentProps, value, row })
+        applyAction(component, cellComponentProps)
       )}
     </Table.Cell>
   );

package/src/components/FlexibleTable/types.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { IRenderNode } from '../../types';
 
 export type IFlexibleTableRenderMode = 'table' | 'divs';
@@ -27,6 +27,11 @@ export interface IValueComponentProps<Values, Value> {
   onSetNestedComponent: (component?: ReactNode) => void;
 }
 
+export type ICellClickHandler<Values, Value> = (
+  event: MouseEvent,
+  cellComponentProps: IValueComponentProps<Values, Value>,
+) => void;
+
 export interface IFlexibleTableRowConfig<
   Values extends ITableRow,
   Key extends keyof Values,
@@ -52,6 +57,7 @@ export interface IFlexibleTableRowConfig<
    * @default isNotEmpty
    */
   shouldRenderComponent?: boolean | ((value: Values[Key], values: Values, key: Key) => boolean);
+  onCellClick?: ICellClickHandler<Values, Values[Key]>;
 }
 
 export type IFlexibleTableConfigType<