diff --git a/src/components/Grid/Cell.tsx b/src/components/Grid/Cell.tsx index 72d463ef..53a7ac71 100644 --- a/src/components/Grid/Cell.tsx +++ b/src/components/Grid/Cell.tsx @@ -21,6 +21,7 @@ export const Cell = memo( rowStart, rowAutoHeight, updateRowHeight, + readOnly = false, } = data; const currentRowIndex = rowIndex + rowStart; @@ -96,6 +97,7 @@ export const Cell = memo( $height={rowHeight} data-grid-row={currentRowIndex} data-grid-column={columnIndex} + $readOnly={readOnly} $showBorder $rowAutoHeight={rowAutoHeight} {...props} diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx index af78ee61..3977d7ff 100644 --- a/src/components/Grid/Grid.stories.tsx +++ b/src/components/Grid/Grid.stories.tsx @@ -28,6 +28,7 @@ interface Props { column: number; }; rowAutoHeight?: boolean; + readOnly?: boolean; } const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => { const [focus, setFocus] = useState(focusProp); @@ -79,6 +80,7 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => { }); }} getMenuOptions={getMenuOptions} + readOnly={props.readOnly} rowAutoHeight={props.rowAutoHeight} {...props} /> @@ -97,6 +99,7 @@ export const Playground = { rowCount: 120, columnCount: 200, rowStart: 0, + readOnly: false, }, parameters: { docs: { diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index c6b4c539..77b41332 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -149,6 +149,7 @@ export const Grid = forwardRef( onContextMenu: onContextMenuProp, forwardedGridRef, onItemsRendered: onItemsRenderedProp, + readOnly = false, rowAutoHeight, ...props }, @@ -439,6 +440,7 @@ export const Grid = forwardRef( rowAutoHeight, updateRowHeight, getRowHeight, + readOnly, }; const InnerElementType = forwardRef( diff --git a/src/components/Grid/StyledCell.tsx b/src/components/Grid/StyledCell.tsx index 975cfdee..9ad5b377 100644 --- a/src/components/Grid/StyledCell.tsx +++ b/src/components/Grid/StyledCell.tsx @@ -13,6 +13,7 @@ export const StyledCell = styled.div<{ $height: number; $type?: "body" | "header"; $showBorder: boolean; + $readOnly?: boolean; $rowAutoHeight?: boolean; }>` display: block; @@ -35,6 +36,7 @@ export const StyledCell = styled.div<{ $height, $type = "body", $showBorder, + $readOnly, $rowAutoHeight, }) => ` height: ${$rowAutoHeight ? "100%" : `${$height}px`}; @@ -64,7 +66,7 @@ export const StyledCell = styled.div<{ : "" } ${ - $isFocused + $isFocused && !$readOnly ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : "" } @@ -84,7 +86,7 @@ export const StyledCell = styled.div<{ ? ` border-right-color: ${ theme.click.grid[$type].cell.color.stroke[ - $isFocused ? "selectDirect" : $selectionType + $isFocused && !$readOnly ? "selectDirect" : $selectionType ] }; ` diff --git a/src/components/Grid/types.ts b/src/components/Grid/types.ts index 35d6b228..a4631fb6 100644 --- a/src/components/Grid/types.ts +++ b/src/components/Grid/types.ts @@ -160,6 +160,7 @@ export interface ItemDataType { rowAutoHeight?: boolean; updateRowHeight: (rowIndex: number, height: number) => void; getRowHeight: (index: number) => number; + readOnly?: boolean; } export interface GridContextMenuItemProps extends Omit { @@ -207,6 +208,7 @@ export interface GridProps onCopyCallback?: (copied: boolean) => void; onContextMenu?: MouseEventHandler; forwardedGridRef?: MutableRefObject; + readOnly?: boolean; rowAutoHeight?: boolean; }