Skip to content

Commit 84eb5fd

Browse files
jughostajughosta
committed
Simplify return type of renderCustomToolbar 
1 parent b7d012a commit 84eb5fd

6 files changed

Lines changed: 117 additions & 138 deletions

File tree

‎src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import {
1010
EuiDataGridToolbarProps,
1111
EuiFormRow,
1212
EuiRange,
13+
EuiFlexGroup,
14+
EuiFlexItem,
1315
} from '../../../../../src';
1416

1517
const raw_data: Array<{ [key: string]: string }> = [];
@@ -117,18 +119,28 @@ export default () => {
117119
fullScreenControl,
118120
keyboardShortcutsControl,
119121
}) => {
120-
return {
121-
left: hasRoomForGridControls ? 'Custom left side' : null,
122-
right: (
123-
<>
124-
{columnControl}
125-
{columnSortingControl}
126-
{keyboardShortcutsControl}
127-
{displayControl}
128-
{fullScreenControl}
129-
</>
130-
),
131-
};
122+
return (
123+
<EuiFlexGroup
124+
responsive={false}
125+
gutterSize="s"
126+
justifyContent="spaceBetween"
127+
alignItems="center"
128+
>
129+
<EuiFlexItem grow={false}>
130+
{hasRoomForGridControls && `Custom left side`}
131+
</EuiFlexItem>
132+
133+
<EuiFlexItem grow={false}>
134+
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
135+
<EuiFlexItem grow={false}>{columnControl}</EuiFlexItem>
136+
<EuiFlexItem grow={false}>{columnSortingControl}</EuiFlexItem>
137+
<EuiFlexItem grow={false}>{keyboardShortcutsControl}</EuiFlexItem>
138+
<EuiFlexItem grow={false}>{displayControl}</EuiFlexItem>
139+
<EuiFlexItem grow={false}>{fullScreenControl}</EuiFlexItem>
140+
</EuiFlexGroup>
141+
</EuiFlexItem>
142+
</EuiFlexGroup>
143+
);
132144
};
133145

134146
return (

‎src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -201,14 +201,12 @@ export const DataGridToolbarExample = {
201201
text: (
202202
<>
203203
<p>
204-
For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>{' '}
204+
For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>
205205
prop for <EuiCode>EuiDataGrid</EuiCode> may be used to take complete
206-
control over the placement of the toolbar controls (by returning{' '}
207-
<EuiCode>left</EuiCode> and <EuiCode>right</EuiCode>) or the whole
208-
toolbar element (by returning a react element). This may be useful
209-
where custom layout (e.g., all buttons on the right side) are
210-
required. The default individual controls will be available as
211-
function parameters.
206+
control over the whole toolbar element (by returning a react
207+
element). This may be useful where a custom layout (e.g., all
208+
buttons on the right side) is required. The default individual
209+
controls will be available as function parameters.
212210
</p>
213211
</>
214212
),

‎src/components/datagrid/controls/data_grid_toolbar.test.tsx‎

Lines changed: 71 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -32,31 +32,34 @@ describe('EuiDataGridToolbar', () => {
3232
const component = shallow(<EuiDataGridToolbar {...requiredProps} />);
3333

3434
expect(component).toMatchInlineSnapshot(`
35-
<EuiDataGridToolbarContainer
36-
left={
37-
<React.Fragment>
38-
<div>
39-
mock column selector
40-
</div>
41-
<div>
42-
mock column sorting
43-
</div>
44-
</React.Fragment>
45-
}
46-
right={
47-
<React.Fragment>
48-
<div>
49-
mock keyboard shortcuts
50-
</div>
51-
<div>
52-
mock style selector
53-
</div>
54-
<div>
55-
mock fullscreen selector
56-
</div>
57-
</React.Fragment>
58-
}
59-
/>
35+
<div
36+
className="euiDataGrid__controls"
37+
data-test-subj="dataGridControls"
38+
>
39+
<div
40+
className="euiDataGrid__leftControls"
41+
>
42+
<div>
43+
mock column selector
44+
</div>
45+
<div>
46+
mock column sorting
47+
</div>
48+
</div>
49+
<div
50+
className="euiDataGrid__rightControls"
51+
>
52+
<div>
53+
mock keyboard shortcuts
54+
</div>
55+
<div>
56+
mock style selector
57+
</div>
58+
<div>
59+
mock fullscreen selector
60+
</div>
61+
</div>
62+
</div>
6063
`);
6164
});
6265

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

6871
expect(component).toMatchInlineSnapshot(`
69-
<EuiDataGridToolbarContainer
70-
left={<React.Fragment />}
71-
right={
72-
<React.Fragment>
73-
<EuiScreenReaderOnly
74-
showOnFocus={true}
75-
>
76-
<span>
77-
<div>
78-
mock keyboard shortcuts
79-
</div>
80-
</span>
81-
</EuiScreenReaderOnly>
82-
</React.Fragment>
83-
}
84-
/>
72+
<div
73+
className="euiDataGrid__controls"
74+
data-test-subj="dataGridControls"
75+
>
76+
<div
77+
className="euiDataGrid__leftControls"
78+
/>
79+
<div
80+
className="euiDataGrid__rightControls"
81+
>
82+
<EuiScreenReaderOnly
83+
showOnFocus={true}
84+
>
85+
<span>
86+
<div>
87+
mock keyboard shortcuts
88+
</div>
89+
</span>
90+
</EuiScreenReaderOnly>
91+
</div>
92+
</div>
8593
`);
8694
});
8795

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

105113
expect(component).toMatchInlineSnapshot(`
106-
<EuiDataGridToolbarContainer
107-
left={
108-
<React.Fragment>
109-
<div>
110-
hello
111-
</div>
112-
</React.Fragment>
113-
}
114-
right={
115-
<React.Fragment>
116-
<div>
117-
world
118-
</div>
119-
<div>
120-
mock keyboard shortcuts
121-
</div>
122-
</React.Fragment>
123-
}
124-
/>
114+
<div
115+
className="euiDataGrid__controls"
116+
data-test-subj="dataGridControls"
117+
>
118+
<div
119+
className="euiDataGrid__leftControls"
120+
>
121+
<div>
122+
hello
123+
</div>
124+
</div>
125+
<div
126+
className="euiDataGrid__rightControls"
127+
>
128+
<div>
129+
world
130+
</div>
131+
<div>
132+
mock keyboard shortcuts
133+
</div>
134+
</div>
135+
</div>
125136
`);
126137
});
127138
});

‎src/components/datagrid/controls/data_grid_toolbar.tsx‎

Lines changed: 15 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -73,68 +73,32 @@ export const EuiDataGridToolbar = ({
7373
: null;
7474

7575
if (renderCustomToolbar) {
76-
const customToolbar = renderCustomToolbar({
76+
return renderCustomToolbar({
7777
hasRoomForGridControls,
7878
columnControl,
7979
columnSortingControl,
8080
keyboardShortcutsControl,
8181
displayControl,
8282
fullScreenControl,
8383
});
84-
85-
if (isValidElement(customToolbar)) {
86-
return customToolbar;
87-
}
88-
89-
return (
90-
<EuiDataGridToolbarContainer
91-
left={customToolbar.left}
92-
right={customToolbar.right}
93-
/>
94-
);
9584
}
9685

97-
return (
98-
<EuiDataGridToolbarContainer
99-
left={
100-
hasRoomForGridControls ? (
101-
<>
102-
{renderAdditionalControls(toolbarVisibility, 'left.prepend')}
103-
{columnControl}
104-
{columnSortingControl}
105-
{renderAdditionalControls(toolbarVisibility, 'left.append')}
106-
</>
107-
) : null
108-
}
109-
right={
110-
<>
111-
{renderAdditionalControls(toolbarVisibility, 'right')}
112-
{keyboardShortcutsControl}
113-
{displayControl}
114-
{fullScreenControl}
115-
</>
116-
}
117-
/>
118-
);
119-
};
120-
121-
/**
122-
* Toolbar container component
123-
* @param left
124-
* @param right
125-
* @constructor
126-
*/
127-
const EuiDataGridToolbarContainer = ({
128-
left,
129-
right,
130-
}: {
131-
left?: ReactNode;
132-
right?: ReactNode;
133-
}) => {
13486
return (
13587
<div className="euiDataGrid__controls" data-test-subj="dataGridControls">
136-
{left && <div className="euiDataGrid__leftControls">{left}</div>}
137-
{right && <div className="euiDataGrid__rightControls">{right}</div>}
88+
{hasRoomForGridControls && (
89+
<div className="euiDataGrid__leftControls">
90+
{renderAdditionalControls(toolbarVisibility, 'left.prepend')}
91+
{columnControl}
92+
{columnSortingControl}
93+
{renderAdditionalControls(toolbarVisibility, 'left.append')}
94+
</div>
95+
)}
96+
<div className="euiDataGrid__rightControls">
97+
{renderAdditionalControls(toolbarVisibility, 'right')}
98+
{keyboardShortcutsControl}
99+
{displayControl}
100+
{fullScreenControl}
101+
</div>
138102
</div>
139103
);
140104
};

‎src/components/datagrid/data_grid_types.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,7 @@ export interface EuiDataGridToolbarProps {
4747
displaySelector: ReactNode;
4848
columnSelector: ReactNode;
4949
columnSorting: ReactNode;
50-
renderCustomToolbar?: (props: EuiDataGridCustomToolbarProps) =>
51-
| {
52-
// to replace only controls inside the toolbar, use `left` and `right`
53-
left?: ReactNode;
54-
right?: ReactNode;
55-
}
56-
| ReactElement; // to replace the whole toolbar
50+
renderCustomToolbar?: (props: EuiDataGridCustomToolbarProps) => ReactElement;
5751
}
5852

5953
/**

‎upcoming_changelogs/7190.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar or a custom placement of the default toolbar controls.
1+
- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar.
22
- Added a new `allowResetButton` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows to hide "Reset to default" button from the display settings popover.
33
- Added a new `additionalDisplaySettings` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows to render extra settings inside the display settings popover.
44
- Replaced the display setting popover icon in `EuiDataGrid` toolbar from `tableDensityCompact`/`tableDensityExpanded`/`tableDensityNormal` with `controlsHorizontal`.

0 commit comments

Comments
 (0)