Skip to content

Commit ea279f5

Browse files
joshblackkodiakhq[bot]
joshblack
and
kodiakhq[bot]
authored
docs(data-table): update batch action story to hide content (#10235)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 02e4246 commit ea279f5

File tree

1 file changed

+80
-75
lines changed

1 file changed

+80
-75
lines changed

‎packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js‎

Lines changed: 80 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -76,82 +76,87 @@ export const Usage = () => (
7676
selectedRows,
7777
getTableProps,
7878
getTableContainerProps,
79-
}) => (
80-
<TableContainer
81-
title="DataTable"
82-
description="With batch actions"
83-
{...getTableContainerProps()}>
84-
<TableToolbar {...getToolbarProps()}>
85-
<TableBatchActions {...getBatchActionProps()}>
86-
<TableBatchAction
87-
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
88-
renderIcon={Delete}
89-
onClick={batchActionClick(selectedRows)}>
90-
Delete
91-
</TableBatchAction>
92-
<TableBatchAction
93-
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
94-
renderIcon={Save}
95-
onClick={batchActionClick(selectedRows)}>
96-
Save
97-
</TableBatchAction>
98-
<TableBatchAction
99-
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
100-
renderIcon={Download}
101-
onClick={batchActionClick(selectedRows)}>
102-
Download
103-
</TableBatchAction>
104-
</TableBatchActions>
105-
<TableToolbarContent>
106-
<TableToolbarSearch
107-
persistent="true"
108-
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
109-
onChange={onInputChange}
110-
/>
111-
<TableToolbarMenu
112-
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
113-
<TableToolbarAction onClick={() => alert('Alert 1')}>
114-
Action 1
115-
</TableToolbarAction>
116-
<TableToolbarAction onClick={() => alert('Alert 2')}>
117-
Action 2
118-
</TableToolbarAction>
119-
<TableToolbarAction onClick={() => alert('Alert 3')}>
120-
Action 3
121-
</TableToolbarAction>
122-
</TableToolbarMenu>
123-
<Button
124-
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
125-
onClick={action('Add new row')}
126-
size="small"
127-
kind="primary">
128-
Add new
129-
</Button>
130-
</TableToolbarContent>
131-
</TableToolbar>
132-
<Table {...getTableProps()}>
133-
<TableHead>
134-
<TableRow>
135-
<TableSelectAll {...getSelectionProps()} />
136-
{headers.map((header, i) => (
137-
<TableHeader key={i} {...getHeaderProps({ header })}>
138-
{header.header}
139-
</TableHeader>
140-
))}
141-
</TableRow>
142-
</TableHead>
143-
<TableBody>
144-
{rows.map((row, i) => (
145-
<TableRow key={i} {...getRowProps({ row })}>
146-
<TableSelectRow {...getSelectionProps({ row })} />
147-
{row.cells.map((cell) => (
148-
<TableCell key={cell.id}>{cell.value}</TableCell>
79+
}) => {
80+
const batchActionProps = getBatchActionProps();
81+
82+
return (
83+
<TableContainer
84+
title="DataTable"
85+
description="With batch actions"
86+
{...getTableContainerProps()}>
87+
<TableToolbar {...getToolbarProps()}>
88+
<TableBatchActions {...batchActionProps}>
89+
<TableBatchAction
90+
tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
91+
renderIcon={Delete}
92+
onClick={batchActionClick(selectedRows)}>
93+
Delete
94+
</TableBatchAction>
95+
<TableBatchAction
96+
tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
97+
renderIcon={Save}
98+
onClick={batchActionClick(selectedRows)}>
99+
Save
100+
</TableBatchAction>
101+
<TableBatchAction
102+
tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
103+
renderIcon={Download}
104+
onClick={batchActionClick(selectedRows)}>
105+
Download
106+
</TableBatchAction>
107+
</TableBatchActions>
108+
<TableToolbarContent
109+
aria-hidden={batchActionProps.shouldShowBatchActions}>
110+
<TableToolbarSearch
111+
persistent="true"
112+
tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
113+
onChange={onInputChange}
114+
/>
115+
<TableToolbarMenu
116+
tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}>
117+
<TableToolbarAction onClick={() => alert('Alert 1')}>
118+
Action 1
119+
</TableToolbarAction>
120+
<TableToolbarAction onClick={() => alert('Alert 2')}>
121+
Action 2
122+
</TableToolbarAction>
123+
<TableToolbarAction onClick={() => alert('Alert 3')}>
124+
Action 3
125+
</TableToolbarAction>
126+
</TableToolbarMenu>
127+
<Button
128+
tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
129+
onClick={action('Add new row')}
130+
size="small"
131+
kind="primary">
132+
Add new
133+
</Button>
134+
</TableToolbarContent>
135+
</TableToolbar>
136+
<Table {...getTableProps()}>
137+
<TableHead>
138+
<TableRow>
139+
<TableSelectAll {...getSelectionProps()} />
140+
{headers.map((header, i) => (
141+
<TableHeader key={i} {...getHeaderProps({ header })}>
142+
{header.header}
143+
</TableHeader>
149144
))}
150145
</TableRow>
151-
))}
152-
</TableBody>
153-
</Table>
154-
</TableContainer>
155-
)}
146+
</TableHead>
147+
<TableBody>
148+
{rows.map((row, i) => (
149+
<TableRow key={i} {...getRowProps({ row })}>
150+
<TableSelectRow {...getSelectionProps({ row })} />
151+
{row.cells.map((cell) => (
152+
<TableCell key={cell.id}>{cell.value}</TableCell>
153+
))}
154+
</TableRow>
155+
))}
156+
</TableBody>
157+
</Table>
158+
</TableContainer>
159+
);
160+
}}
156161
</DataTable>
157162
);

0 commit comments

Comments
 (0)