1import React from 'react';
2import doc from './rowMGMT.mdx';
3import differenceBy from 'lodash/differenceBy';
4import Button from '../../shared/Button';
5import tableDataItems from '../../constants/sampleMovieData';
6import DataTable from '../../../src/index';
7
8const columns = [
9	{
10		name: 'Title',
11		selector: row => row.title,
12		sortable: true,
13	},
14	{
15		name: 'Director',
16		selector: row => row.director,
17		sortable: true,
18	},
19	{
20		name: 'Year',
21		selector: row => row.year,
22		sortable: true,
23	},
24];
25
26export const ManageSelections = () => {
27	const [selectedRows, setSelectedRows] = React.useState([]);
28	const [toggleCleared, setToggleCleared] = React.useState(false);
29	const [data, setData] = React.useState(tableDataItems);
30
31	const handleRowSelected = React.useCallback(state => {
32		setSelectedRows(state.selectedRows);
33	}, []);
34
35	const contextActions = React.useMemo(() => {
36		const handleDelete = () => {
37			
38			if (window.confirm(`Are you sure you want to delete:\r ${selectedRows.map(r => r.title)}?`)) {
39				setToggleCleared(!toggleCleared);
40				setData(differenceBy(data, selectedRows, 'title'));
41			}
42		};
43
44		return (
45			<Button key="delete" onClick={handleDelete} style={{ backgroundColor: 'red' }} icon>
46				Delete
47			</Button>
48		);
49	}, [data, selectedRows, toggleCleared]);
50
51	return (
52		<DataTable
53			title="Desserts"
54			columns={columns}
55			data={data}
56			selectableRows
57			contextActions={contextActions}
58			onSelectedRowsChange={handleRowSelected}
59			clearSelectedRows={toggleCleared}
60			pagination
61		/>
62	);
63};
64
65export default {
66	title: 'Selectable/Manage Selections',
67	component: ManageSelections,
68	parameters: {
69		docs: {
70			page: doc,
71		},
72	},
73};