Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eui data grid schema #4752

Closed
wants to merge 2 commits into from
Closed

Eui data grid schema #4752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45038ec
Added textTransform property under schemaDetectors prop
hetanthakkar Apr 23, 2021
37a7cb6
Fixed merge conflict
hetanthakkar Apr 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 50 additions & 37 deletions src-docs/src/views/datagrid/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,43 +148,56 @@ const DataGridSchema = () => {
[pagination, setPagination]
);

const handleVisibleColumns = (visibleColumns) =>
setVisibleColumns(visibleColumns);

return (
<EuiDataGrid
aria-label="Top EUI contributors"
columns={columns}
columnVisibility={{
visibleColumns: visibleColumns,
setVisibleColumns: handleVisibleColumns,
}}
rowCount={data.length}
inMemory={{ level: 'sorting' }}
renderCellValue={({ rowIndex, columnId, isDetails }) => {
const value = data[rowIndex][columnId];

if (columnId === 'custom' && isDetails) {
return <Franchise name={value} />;
}

return value;
}}
sorting={{ columns: sortingColumns, onSort: setSorting }}
pagination={{
...pagination,
pageSizeOptions: [5, 10, 25],
onChangeItemsPerPage: setPageSize,
onChangePage: setPageIndex,
}}
schemaDetectors={[
{
type: 'favoriteFranchise',
detector(value) {
return value.toLowerCase() === 'star wars' ||
value.toLowerCase() === 'star trek'
? 1
: 0;
render() {
const { data, pagination, sortingColumns } = this.state;

return (
<EuiDataGrid
aria-label="Top EUI contributors"
columns={columns}
columnVisibility={{
visibleColumns: this.state.visibleColumns,
setVisibleColumns: this.setVisibleColumns,
}}
rowCount={data.length}
inMemory={{ level: 'sorting' }}
renderCellValue={({ rowIndex, columnId, isDetails }) => {
const value = data[rowIndex][columnId];

if (columnId === 'custom' && isDetails) {
return <Franchise name={value} />;
}

return value;
}}
sorting={{ columns: sortingColumns, onSort: this.setSorting }}
pagination={{
...pagination,
pageSizeOptions: [5, 10, 25],
onChangeItemsPerPage: this.setPageSize,
onChangePage: this.setPageIndex,
}}
schemaDetectors={[
{
type: 'favoriteFranchise',
textTransform: 'uppercase',
detector(value) {
return value.toLowerCase() === 'star wars' ||
value.toLowerCase() === 'star trek'
? 1
: 0;
},
comparator(a, b, direction) {
const aValue = a.toLowerCase() === 'star wars';
const bValue = b.toLowerCase() === 'star wars';
if (aValue < bValue) return direction === 'asc' ? 1 : -1;
if (aValue > bValue) return direction === 'asc' ? -1 : 1;
return 0;
},
sortTextAsc: 'Star wars-Star trek',
sortTextDesc: 'Star trek-Star wars',
icon: 'starFilled',
color: '#800080',
},
comparator(a, b, direction) {
const aValue = a.toLowerCase() === 'star wars';
Expand Down
12 changes: 6 additions & 6 deletions src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -560,7 +560,7 @@ exports[`EuiContextMenuPanel props transitionDirection previous with transitionT

exports[`EuiContextMenuPanel updating items and content updates to items should not re-render if any items's watchedItemProps did not change 1`] = `
"<EuiContextMenuPanel items={{...}} hasFocus={true}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={0} onAnimationEnd={[Function]}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function (anonymous)]} tabIndex={0} onAnimationEnd={[Function (anonymous)]}>
<div>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Expand Down Expand Up @@ -591,7 +591,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should

exports[`EuiContextMenuPanel updating items and content updates to items should not re-render if any items's watchedItemProps did not change 2`] = `
"<EuiContextMenuPanel items={{...}} hasFocus={true}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={0} onAnimationEnd={[Function]}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function (anonymous)]} tabIndex={0} onAnimationEnd={[Function (anonymous)]}>
<div>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Expand Down Expand Up @@ -622,7 +622,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should

exports[`EuiContextMenuPanel updating items and content updates to items should re-render at all times when children exists 1`] = `
"<EuiContextMenuPanel hasFocus={true} items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={0} onAnimationEnd={[Function]}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function (anonymous)]} tabIndex={0} onAnimationEnd={[Function (anonymous)]}>
<div>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Expand All @@ -636,7 +636,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should

exports[`EuiContextMenuPanel updating items and content updates to items should re-render at all times when children exists 2`] = `
"<EuiContextMenuPanel hasFocus={true} items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={0} onAnimationEnd={[Function]}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function (anonymous)]} tabIndex={0} onAnimationEnd={[Function (anonymous)]}>
<div>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Expand All @@ -650,7 +650,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should

exports[`EuiContextMenuPanel updating items and content updates to items should re-render if any items's watchedItemProps did change 1`] = `
"<EuiContextMenuPanel watchedItemProps={{...}} items={{...}} hasFocus={true}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={0} onAnimationEnd={[Function]}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function (anonymous)]} tabIndex={0} onAnimationEnd={[Function (anonymous)]}>
<div>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Expand Down Expand Up @@ -681,7 +681,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should

exports[`EuiContextMenuPanel updating items and content updates to items should re-render if any items's watchedItemProps did change 2`] = `
"<EuiContextMenuPanel watchedItemProps={{...}} items={{...}} hasFocus={true}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={0} onAnimationEnd={[Function]}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function (anonymous)]} tabIndex={0} onAnimationEnd={[Function (anonymous)]}>
<div>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Expand Down
11 changes: 11 additions & 0 deletions src/components/datagrid/_data_grid_data_row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,17 @@
text-align: right;
}

&.euiDataGridRowCell--uppercase {
text-transform: uppercase;
}

&.euiDataGridRowCell--lowercase {
text-transform: lowercase;
}

&.euiDataGridRowCell--capital {
text-transform: capitalize;
}

&.euiDataGridRowCell--boolean {
text-transform: capitalize;
Expand Down
12 changes: 9 additions & 3 deletions src/components/datagrid/data_grid.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,11 @@ function extractGridData(datagrid: ReactWrapper<EuiDataGridProps>) {
}

function extractColumnWidths(datagrid: ReactWrapper) {
return (findTestSubject(datagrid, 'dataGridHeaderCell', '|=') as ReactWrapper<
any
>).reduce((widths: { [key: string]: number }, cell) => {
return (findTestSubject(
datagrid,
'dataGridHeaderCell',
'|='
) as ReactWrapper<any>).reduce((widths: { [key: string]: number }, cell) => {
const [, columnId] = cell
.props()
['data-test-subj'].match(/dataGridHeaderCell-(.*)/);
Expand Down Expand Up @@ -538,6 +540,7 @@ describe('EuiDataGrid', () => {
"height": 34,
"left": 0,
"position": "absolute",
"right": undefined,
"top": "100px",
"width": 100,
},
Expand All @@ -556,6 +559,7 @@ describe('EuiDataGrid', () => {
"height": 34,
"left": 100,
"position": "absolute",
"right": undefined,
"top": "100px",
"width": 100,
},
Expand All @@ -574,6 +578,7 @@ describe('EuiDataGrid', () => {
"height": 34,
"left": 0,
"position": "absolute",
"right": undefined,
"top": "134px",
"width": 100,
},
Expand All @@ -592,6 +597,7 @@ describe('EuiDataGrid', () => {
"height": 34,
"left": 100,
"position": "absolute",
"right": undefined,
"top": "134px",
"width": 100,
},
Expand Down
5 changes: 5 additions & 0 deletions src/components/datagrid/data_grid_body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
renderCellValue,
interactiveCellId,
setRowHeight,
schemaDetectors,
} = data;

const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
Expand Down Expand Up @@ -183,6 +184,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({

cellContent = (
<EuiDataGridCell
schema={schemaDetectors}
rowIndex={rowIndex}
visibleRowIndex={visibleRowIndex}
colIndex={columnIndex}
Expand Down Expand Up @@ -218,6 +220,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
interactiveCellId={interactiveCellId}
isExpandable={false}
className={classes}
schema={schemaDetectors}
style={{
...style,
top: `${parseFloat(style.top as string) + headerRowHeight}px`,
Expand Down Expand Up @@ -255,6 +258,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
interactiveCellId={interactiveCellId}
isExpandable={isExpandable}
className={classes}
schema={schemaDetectors}
style={{
...style,
top: `${parseFloat(style.top as string) + headerRowHeight}px`,
Expand Down Expand Up @@ -609,6 +613,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
trailingControlColumns,
columns,
schema,
schemaDetectors,
popoverContents: mergedPopoverContents,
columnWidths,
defaultColumnWidth,
Expand Down
21 changes: 18 additions & 3 deletions src/components/datagrid/data_grid_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import { EuiFocusTrap } from '../focus_trap';
import { keys } from '../../services';
import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
import { EuiDataGridCellPopover } from './data_grid_cell_popover';
import { EuiDataGridSchemaDetector } from './data_grid_schema';

export interface EuiDataGridCellValueElementProps {
/**
Expand Down Expand Up @@ -92,6 +93,7 @@ export interface EuiDataGridCellProps {
| ((props: EuiDataGridCellValueElementProps) => ReactNode);
setRowHeight?: (height: number) => void;
style?: React.CSSProperties;
schema?: EuiDataGridSchemaDetector[];
}

interface EuiDataGridCellState {
Expand All @@ -117,9 +119,7 @@ const EuiDataGridCellContent: FunctionComponent<
const { renderCellValue, ...rest } = props;

// React is more permissible than the TS types indicate
const CellElement = renderCellValue as JSXElementConstructor<
EuiDataGridCellValueElementProps
>;
const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;

return (
<CellElement isDetails={false} data-test-subj="cell-content" {...rest} />
Expand Down Expand Up @@ -345,11 +345,26 @@ export class EuiDataGridCell extends Component<
this.state.enableInteractions ||
this.state.popoverIsOpen;

const transformClass = this.props.schema?.filter((v: any) =>
this.props.column?.schema
? this.props.column?.schema === v.type
: this.props.columnId === v.type
)[0];

const cellClasses = classNames(
'euiDataGridRowCell',
{
[`euiDataGridRowCell--${columnType}`]: columnType,
['euiDataGridRowCell--open']: this.state.popoverIsOpen,
['euiDataGridRowCell--uppercase']:
transformClass !== undefined &&
transformClass.textTransform === 'uppercase',
['euiDataGridRowCell--lowercase']:
transformClass !== undefined &&
transformClass.textTransform === 'lowercase',
['euiDataGridRowCell--capital']:
transformClass !== undefined &&
transformClass.textTransform === 'capital',
},
className
);
Expand Down
4 changes: 4 additions & 0 deletions src/components/datagrid/data_grid_schema.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ export interface EuiDataGridSchemaDetector {
/**
* Default sort direction of the column
*/
textTransform?: string;
/**
* This property controls the capitalization of text
*/
defaultSortDirection?: 'asc' | 'desc';
}

Expand Down