Skip to content

Commit

Permalink
Simplify return type of renderCustomToolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jughosta
jughosta committed Sep 19, 2023
1 parent b7d012a commit 84eb5fd
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 138 deletions.
36 changes: 24 additions & 12 deletions src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
EuiDataGridToolbarProps,
EuiFormRow,
EuiRange,
EuiFlexGroup,
EuiFlexItem,
} from '../../../../../src';

const raw_data: Array<{ [key: string]: string }> = [];
Expand Down Expand Up @@ -117,18 +119,28 @@ export default () => {
fullScreenControl,
keyboardShortcutsControl,
}) => {
return {
left: hasRoomForGridControls ? 'Custom left side' : null,
right: (
<>
{columnControl}
{columnSortingControl}
{keyboardShortcutsControl}
{displayControl}
{fullScreenControl}
</>
),
};
return (
<EuiFlexGroup
responsive={false}
gutterSize="s"
justifyContent="spaceBetween"
alignItems="center"
>
<EuiFlexItem grow={false}>
{hasRoomForGridControls && `Custom left side`}
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>{columnControl}</EuiFlexItem>
<EuiFlexItem grow={false}>{columnSortingControl}</EuiFlexItem>
<EuiFlexItem grow={false}>{keyboardShortcutsControl}</EuiFlexItem>
<EuiFlexItem grow={false}>{displayControl}</EuiFlexItem>
<EuiFlexItem grow={false}>{fullScreenControl}</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
};

return (
Expand Down
12 changes: 5 additions & 7 deletions src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,14 +201,12 @@ export const DataGridToolbarExample = {
text: (
<>
<p>
For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>{' '}
For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>
prop for <EuiCode>EuiDataGrid</EuiCode> may be used to take complete
control over the placement of the toolbar controls (by returning{' '}
<EuiCode>left</EuiCode> and <EuiCode>right</EuiCode>) or the whole
toolbar element (by returning a react element). This may be useful
where custom layout (e.g., all buttons on the right side) are
required. The default individual controls will be available as
function parameters.
control over the whole toolbar element (by returning a react
element). This may be useful where a custom layout (e.g., all
buttons on the right side) is required. The default individual
controls will be available as function parameters.
</p>
</>
),
Expand Down
131 changes: 71 additions & 60 deletions src/components/datagrid/controls/data_grid_toolbar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,31 +32,34 @@ describe('EuiDataGridToolbar', () => {
const component = shallow(<EuiDataGridToolbar {...requiredProps} />);

expect(component).toMatchInlineSnapshot(`
<EuiDataGridToolbarContainer
left={
<React.Fragment>
<div>
mock column selector
</div>
<div>
mock column sorting
</div>
</React.Fragment>
}
right={
<React.Fragment>
<div>
mock keyboard shortcuts
</div>
<div>
mock style selector
</div>
<div>
mock fullscreen selector
</div>
</React.Fragment>
}
/>
<div
className="euiDataGrid__controls"
data-test-subj="dataGridControls"
>
<div
className="euiDataGrid__leftControls"
>
<div>
mock column selector
</div>
<div>
mock column sorting
</div>
</div>
<div
className="euiDataGrid__rightControls"
>
<div>
mock keyboard shortcuts
</div>
<div>
mock style selector
</div>
<div>
mock fullscreen selector
</div>
</div>
</div>
`);
});

Expand All @@ -66,22 +69,27 @@ describe('EuiDataGridToolbar', () => {
);

expect(component).toMatchInlineSnapshot(`
<EuiDataGridToolbarContainer
left={<React.Fragment />}
right={
<React.Fragment>
<EuiScreenReaderOnly
showOnFocus={true}
>
<span>
<div>
mock keyboard shortcuts
</div>
</span>
</EuiScreenReaderOnly>
</React.Fragment>
}
/>
<div
className="euiDataGrid__controls"
data-test-subj="dataGridControls"
>
<div
className="euiDataGrid__leftControls"
/>
<div
className="euiDataGrid__rightControls"
>
<EuiScreenReaderOnly
showOnFocus={true}
>
<span>
<div>
mock keyboard shortcuts
</div>
</span>
</EuiScreenReaderOnly>
</div>
</div>
`);
});

Expand All @@ -103,25 +111,28 @@ describe('EuiDataGridToolbar', () => {
);

expect(component).toMatchInlineSnapshot(`
<EuiDataGridToolbarContainer
left={
<React.Fragment>
<div>
hello
</div>
</React.Fragment>
}
right={
<React.Fragment>
<div>
world
</div>
<div>
mock keyboard shortcuts
</div>
</React.Fragment>
}
/>
<div
className="euiDataGrid__controls"
data-test-subj="dataGridControls"
>
<div
className="euiDataGrid__leftControls"
>
<div>
hello
</div>
</div>
<div
className="euiDataGrid__rightControls"
>
<div>
world
</div>
<div>
mock keyboard shortcuts
</div>
</div>
</div>
`);
});
});
Expand Down
66 changes: 15 additions & 51 deletions src/components/datagrid/controls/data_grid_toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,68 +73,32 @@ export const EuiDataGridToolbar = ({
: null;

if (renderCustomToolbar) {
const customToolbar = renderCustomToolbar({
return renderCustomToolbar({
hasRoomForGridControls,
columnControl,
columnSortingControl,
keyboardShortcutsControl,
displayControl,
fullScreenControl,
});

if (isValidElement(customToolbar)) {
return customToolbar;
}

return (
<EuiDataGridToolbarContainer
left={customToolbar.left}
right={customToolbar.right}
/>
);
}

return (
<EuiDataGridToolbarContainer
left={
hasRoomForGridControls ? (
<>
{renderAdditionalControls(toolbarVisibility, 'left.prepend')}
{columnControl}
{columnSortingControl}
{renderAdditionalControls(toolbarVisibility, 'left.append')}
</>
) : null
}
right={
<>
{renderAdditionalControls(toolbarVisibility, 'right')}
{keyboardShortcutsControl}
{displayControl}
{fullScreenControl}
</>
}
/>
);
};

/**
* Toolbar container component
* @param left
* @param right
* @constructor
*/
const EuiDataGridToolbarContainer = ({
left,
right,
}: {
left?: ReactNode;
right?: ReactNode;
}) => {
return (
<div className="euiDataGrid__controls" data-test-subj="dataGridControls">
{left && <div className="euiDataGrid__leftControls">{left}</div>}
{right && <div className="euiDataGrid__rightControls">{right}</div>}
{hasRoomForGridControls && (
<div className="euiDataGrid__leftControls">
{renderAdditionalControls(toolbarVisibility, 'left.prepend')}
{columnControl}
{columnSortingControl}
{renderAdditionalControls(toolbarVisibility, 'left.append')}
</div>
)}
<div className="euiDataGrid__rightControls">
{renderAdditionalControls(toolbarVisibility, 'right')}
{keyboardShortcutsControl}
{displayControl}
{fullScreenControl}
</div>
</div>
);
};
Expand Down
8 changes: 1 addition & 7 deletions src/components/datagrid/data_grid_types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,7 @@ export interface EuiDataGridToolbarProps {
displaySelector: ReactNode;
columnSelector: ReactNode;
columnSorting: ReactNode;
renderCustomToolbar?: (props: EuiDataGridCustomToolbarProps) =>
| {
// to replace only controls inside the toolbar, use `left` and `right`
left?: ReactNode;
right?: ReactNode;
}
| ReactElement; // to replace the whole toolbar
renderCustomToolbar?: (props: EuiDataGridCustomToolbarProps) => ReactElement;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion upcoming_changelogs/7190.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar or a custom placement of the default toolbar controls.
- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar.
- Added a new `allowResetButton` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows to hide "Reset to default" button from the display settings popover.
- Added a new `additionalDisplaySettings` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows to render extra settings inside the display settings popover.
- Replaced the display setting popover icon in `EuiDataGrid` toolbar from `tableDensityCompact`/`tableDensityExpanded`/`tableDensityNormal` with `controlsHorizontal`.

0 comments on commit 84eb5fd

Please sign in to comment.