[DataTable]: disable column focus and hover if isReadonly provided in…

… rowOptions
epam · Jul 29, 2024 · 88d6cdd · 88d6cdd
1 parent e31790c
commit 88d6cdd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/uui-components/src/table/DataTableCell.tsx b/uui-components/src/table/DataTableCell.tsx
@@ -21,6 +21,7 @@ export function DataTableCell<TItem, TId, TCellValue>(props: DataTableCellProps<
     const ref = React.useRef<HTMLDivElement>();
     const editorRef = React.useRef<HTMLElement>();
     const isEditable = !!props.onValueChange;
+    const isReadonly = props.isReadonly ?? props.rowProps.isReadonly;
 
     const tableFocusContext = useContext<DataTableFocusContextState<TId>>(DataTableFocusContext);
 
@@ -67,6 +68,7 @@ export function DataTableCell<TItem, TId, TCellValue>(props: DataTableCellProps<
         content = props.renderUnknown(props);
     } else if (isEditable) {
         const onFocus = () => {
+            if (isReadonly) return;
             props.rowProps.onSelect?.(props.rowProps);
             setState((currentState) => ({ ...currentState, inFocus: true }));
             tableFocusContext?.dataTableFocusManager
@@ -80,7 +82,7 @@ export function DataTableCell<TItem, TId, TCellValue>(props: DataTableCellProps<
             onValueChange: props.onValueChange,
             isDisabled: props.isDisabled ?? props.rowProps.isDisabled,
             isInvalid: props.isInvalid ?? props.rowProps.isInvalid,
-            isReadonly: props.isReadonly ?? props.rowProps.isReadonly,
+            isReadonly: isReadonly,
             isRequired: props.isRequired ?? props.rowProps.isRequired,
             validationMessage: props.validationMessage ?? props.rowProps.validationMessage,
             onFocus,
@@ -99,6 +101,7 @@ export function DataTableCell<TItem, TId, TCellValue>(props: DataTableCellProps<
                     rowIndex={ row.index }
                     columnIndex={ props.index }
                     isInvalid={ props.isInvalid ?? props.rowProps.isInvalid }
+                    isReadonly={ isReadonly }
                     validationMessage={ props.validationMessage ?? props.rowProps.validationMessage }
                 />
             </div>

diff --git a/uui-components/src/table/DataTableCellOverlay.module.scss b/uui-components/src/table/DataTableCellOverlay.module.scss
@@ -60,10 +60,12 @@
     }
 
     :global(.uui-table-cell):hover & {
-        &:not(:global(.uui-table-cell-selection-in-progress)):not(:global(.uui-focus)) {
-            z-index: 1;
-            visibility: visible;
-            border-color: var(--uui-dt-cell-border-hover);
+        &:not(&:global(.uui-readonly)) {
+            &:not(:global(.uui-table-cell-selection-in-progress)):not(:global(.uui-focus)) {
+                z-index: 1;
+                visibility: visible;
+                border-color: var(--uui-dt-cell-border-hover);
+            }
         }
     }
 

diff --git a/uui-components/src/table/DataTableCellOverlay.tsx b/uui-components/src/table/DataTableCellOverlay.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import {
-    blurFocusedElement, cx, ICanBeInvalid, IHasCX, TooltipCoreProps, uuiMod, IHasValidationMessage,
+    blurFocusedElement, cx, ICanBeInvalid, IHasCX, TooltipCoreProps, uuiMod, IHasValidationMessage, ICanBeReadonly,
 } from '@epam/uui-core';
 import css from './DataTableCellOverlay.module.scss';
 import { DataTableSelectionContext } from './tableCellsSelection';
 import { PointerEventHandler, useContext } from 'react';
 
-export interface DataTableCellOverlayProps extends IHasCX, ICanBeInvalid, IHasValidationMessage {
+export interface DataTableCellOverlayProps extends IHasCX, ICanBeInvalid, IHasValidationMessage, ICanBeReadonly {
     inFocus: boolean;
     columnIndex: number;
     rowIndex: number;
@@ -81,6 +81,7 @@ export function DataTableCellOverlay(props: DataTableCellOverlayProps) {
                 borderClassNames,
                 props.inFocus && uuiMod.focus,
                 props.isInvalid && uuiMod.invalid,
+                props.isReadonly && uuiMod.readonly,
             ) }
         >
             {showMarker && (