Skip to content

Commit

Permalink
Fix upstream merge, tests, and types
Browse files Browse the repository at this point in the history
  • Loading branch information
@kqualters-elastic
kqualters-elastic committed Feb 7, 2024
1 parent 509412f commit 9ed36d9
Show file tree
Hide file tree
Showing 11 changed files with 502 additions and 570 deletions.
254 changes: 124 additions & 130 deletions src/components/datagrid/body/cell/data_grid_cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,123 @@ import {
import { DefaultCellPopover } from './data_grid_cell_popover';
import { HandleInteractiveChildren } from './focus_utils';

const Cell: React.FunctionComponent<{
const EuiDataGridCellContent: FunctionComponent<
EuiDataGridCellValueProps & {
setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
isExpanded: boolean;
isControlColumn: boolean;
isFocused: boolean;
ariaRowIndex: number;
rowHeight?: EuiDataGridRowHeightOption;
cellActions?: ReactNode;
}
> = memo(
({
renderCellValue,
renderCellContext,
column,
setCellContentsRef,
rowIndex,
colIndex,
ariaRowIndex,
rowHeight,
rowHeightUtils,
isControlColumn,
isFocused,
cellActions,
...rest
}) => {
// React is more permissible than the TS types indicate
const CellElement =
renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;

const cellHeightType =
rowHeightUtils?.getHeightType(rowHeight) || 'default';

const classes = classNames(
'euiDataGridRowCell__content',
`euiDataGridRowCell__content--${cellHeightType}Height`,
!isControlColumn && {
'eui-textBreakWord': cellHeightType !== 'default',
'eui-textTruncate': cellHeightType === 'default',
}
);

const mergedProps = useMemo(() => {
if (renderCellContext) {
return {
...renderCellContext(),
...rest,
};
} else {
return rest;
}
}, [rest, renderCellContext]);

let cellContent = (
<div
ref={setCellContentsRef}
data-datagrid-cellcontent
className={classes}
>
<CellElement
isDetails={false}
data-test-subj="cell-content"
rowIndex={rowIndex}
colIndex={colIndex}
schema={column?.schema || rest.columnType}
{...mergedProps}
/>
</div>
);
if (cellHeightType === 'lineCount' && !isControlColumn) {
const lines = rowHeightUtils!.getLineCount(rowHeight)!;
cellContent = (
<EuiTextBlockTruncate lines={lines} cloneElement>
{cellContent}
</EuiTextBlockTruncate>
);
}

const screenReaderText = (
<EuiScreenReaderOnly>
<p hidden={!isFocused}>
{'- '}
<EuiI18n
token="euiDataGridCell.position"
default="{columnId}, column {col}, row {row}"
values={{
columnId: column?.displayAsText || rest.columnId,
col: colIndex + 1,
row: ariaRowIndex,
}}
/>
{cellActions && (
<>
{'. '}
<EuiI18n
token="euiDataGridCell.expansionEnterPrompt"
default="Press the Enter key to expand this cell."
/>
</>
)}
</p>
</EuiScreenReaderOnly>
);

return (
<>
{cellContent}
{screenReaderText}
{cellActions}
</>
);
}
);
EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';

export const Cell: React.FunctionComponent<{
ariaRowIndex: number;
isFocused: boolean;
cellRef: React.MutableRefObject<HTMLDivElement | null>;
Expand Down Expand Up @@ -143,132 +259,7 @@ const Cell: React.FunctionComponent<{
);
}
);

const EuiDataGridCellContent: FunctionComponent<
EuiDataGridCellValueProps & {
setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
isExpanded: boolean;
isControlColumn: boolean;
isFocused: boolean;
ariaRowIndex: number;
rowHeight?: EuiDataGridRowHeightOption;
cellActions?: ReactNode;
}
> = memo(
({
renderCellValue,
renderCellContext,
column,
setCellContentsRef,
rowIndex,
colIndex,
ariaRowIndex,
rowHeight,
rowHeightUtils,
isControlColumn,
isFocused,
cellActions,
...rest
}) => {
// React is more permissible than the TS types indicate
const CellElement =
renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;

const cellHeightType =
rowHeightUtils?.getHeightType(rowHeight) || 'default';

const classes = classNames(
'euiDataGridRowCell__content',
`euiDataGridRowCell__content--${cellHeightType}Height`,
!isControlColumn && {
'eui-textBreakWord': cellHeightType !== 'default',
'eui-textTruncate': cellHeightType === 'default',
}
);

const mergedProps = useMemo(() => {
if (renderCellContext) {
return {
...rest,
...renderCellContext(),
};
} else {
return {
...rest,
};
}
}, [rest, renderCellContext]);

const cellContent = useMemo(() => {
return (
<div
ref={setCellContentsRef}
data-datagrid-cellcontent
className={classes}
>
<CellElement
isDetails={false}
data-test-subj="cell-content"
rowIndex={rowIndex}
colIndex={colIndex}
schema={column?.schema || rest.columnType}
{...mergedProps}
/>
</div>
);
}, [
CellElement,
classes,
column,
colIndex,
mergedProps,
rowIndex,
setCellContentsRef,
rest.columnType,
]);

const truncatedCellContent = useMemo(() => {
if (cellHeightType === 'lineCount' && !isControlColumn) {
const lines = rowHeightUtils!.getLineCount(rowHeight)!;
return (
<EuiTextBlockTruncate lines={lines} cloneElement>
{cellContent}
</EuiTextBlockTruncate>
);
} else {
return cellContent;
}
}, [
cellContent,
cellHeightType,
isControlColumn,
rowHeightUtils,
rowHeight,
]);

return (
<>
{truncatedCellContent}
<EuiScreenReaderOnly>
<p hidden={!isFocused}>
{'- '}
<EuiI18n
token="euiDataGridCell.position"
default="{columnId}, column {col}, row {row}"
values={{
columnId: column?.displayAsText || rest.columnId,
col: colIndex + 1,
row: ariaRowIndex,
}}
/>
</p>
</EuiScreenReaderOnly>
</>
);
}
);
EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
Cell.displayName = 'Cell';

export class EuiDataGridCell extends Component<
EuiDataGridCellProps,
Expand Down Expand Up @@ -647,7 +638,6 @@ export class EuiDataGridCell extends Component<
};

handleCellExpansionClick = () => {
console.log('fire');
const {
popoverContext: { openCellPopover, closeCellPopover },
visibleRowIndex,
Expand All @@ -661,8 +651,12 @@ export class EuiDataGridCell extends Component<
}
};

onMouseEnter = () => this.setState({ isHovered: true });
onMouseLeave = () => this.setState({ isHovered: false });
onMouseEnter = () => {
this.setState({ isHovered: true });
};
onMouseLeave = () => {
this.setState({ isHovered: false });
};

render() {
const {
Expand Down
24 changes: 15 additions & 9 deletions src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,17 @@ describe('EuiDataGridCellActions', () => {
<div
className="euiDataGridRowCell__actions"
>
<ExpandButton
onExpandClick={[MockFunction]}
/>
<EuiI18n
default="Click or hit enter to interact with cell content"
key="expand"
token="euiDataGridCellActions.expandButtonTitle"
>
<Component />
</EuiI18n>
</div>
`);

const button: Function = component
.find('ExpandButton')
.renderProp('children');
const button: Function = component.find('EuiI18n').renderProp('children');
expect(button('expandButtonTitle')).toMatchInlineSnapshot(`
<EuiButtonIcon
aria-hidden={true}
Expand Down Expand Up @@ -100,9 +102,13 @@ describe('EuiDataGridCellActions', () => {
key="0"
rowIndex={0}
/>
<ExpandButton
onExpandClick={[MockFunction]}
/>
<EuiI18n
default="Click or hit enter to interact with cell content"
key="expand"
token="euiDataGridCellActions.expandButtonTitle"
>
<Component />
</EuiI18n>
</div>
`);
});
Expand Down
Loading

0 comments on commit 9ed36d9

Please sign in to comment.