1import React from 'react';
2import Icon1 from '@material-ui/icons/ReplyAll';
3import Icon2 from '@material-ui/icons/Markunread';
4import Icon3 from '@material-ui/icons/CloudDownload';
5import TextField from '@material-ui/core/TextField';
6import data from '../constants/sampleMovieData';
7import DataTable, { Alignment, Direction } from '../../src/index';
8
9const subHeaderComponent = (
10	<div style={{ display: 'flex', alignItems: 'center' }}>
11		<TextField id="outlined-basic" label="Search" variant="outlined" size="small" style={{ margin: '5px' }} />
12		<Icon1 style={{ margin: '5px' }} color="action" />
13		<Icon2 style={{ margin: '5px' }} color="action" />
14		<Icon3 style={{ margin: '5px' }} color="action" />
15	</div>
16);
17
18const columns = [
19	{
20		name: 'Title',
21		selector: row => row.title,
22		sortable: true,
23		reorder: true,
24	},
25	{
26		name: 'Director',
27		selector: row => row.director,
28		sortable: true,
29		reorder: true,
30	},
31	{
32		name: 'Year',
33		selector: row => row.year,
34		sortable: true,
35		reorder: true,
36	},
37];
38
39const KitchenSinkStory = ({
40	selectableRows,
41	selectableRowsNoSelectAll,
42	selectableRowsVisibleOnly,
43	selectableRowsHighlight,
44	selectableRowsSingle,
45	expandableRows,
46	expandOnRowClicked,
47	expandOnRowDoubleClicked,
48	expandableRowsHideExpander,
49	pagination,
50	highlightOnHover,
51	striped,
52	pointerOnHover,
53	dense,
54	persistTableHead,
55	noHeader,
56	fixedHeader,
57	fixedHeaderScrollHeight,
58	progressPending,
59	selectableRowsRadio,
60	noTableHead,
61	noContextMenu,
62	direction,
63	subHeader,
64	subHeaderAlign,
65	subHeaderWrap,
66	responsive,
67	disabled,
68}) => {
69	const selectableRowsComponentProps = React.useMemo(
70		() => ({
71			type: selectableRowsRadio ? 'radio' : 'checkbox',
72		}),
73		[selectableRowsRadio],
74	);
75
76	return (
77		<DataTable
78			title="Movie List"
79			columns={columns}
80			data={data}
81			defaultSortFieldId={1}
82			selectableRows={selectableRows}
83			selectableRowsComponentProps={selectableRowsComponentProps}
84			selectableRowsNoSelectAll={selectableRowsNoSelectAll}
85			selectableRowsHighlight={selectableRowsHighlight}
86			selectableRowsSingle={selectableRowsSingle}
87			selectableRowsVisibleOnly={selectableRowsVisibleOnly}
88			expandableRows={expandableRows}
89			expandOnRowClicked={expandOnRowClicked}
90			expandOnRowDoubleClicked={expandOnRowDoubleClicked}
91			expandableRowsHideExpander={expandableRowsHideExpander}
92			pagination={pagination}
93			highlightOnHover={highlightOnHover}
94			striped={striped}
95			pointerOnHover={pointerOnHover}
96			dense={dense}
97			noTableHead={noTableHead}
98			persistTableHead={persistTableHead}
99			progressPending={progressPending}
100			noHeader={noHeader}
101			subHeader={subHeader}
102			subHeaderComponent={subHeaderComponent}
103			subHeaderAlign={subHeaderAlign}
104			subHeaderWrap={subHeaderWrap}
105			noContextMenu={noContextMenu}
106			fixedHeader={fixedHeader}
107			fixedHeaderScrollHeight={fixedHeaderScrollHeight}
108			direction={direction}
109			responsive={responsive}
110			disabled={disabled}
111		/>
112	);
113};
114
115const Template = args => <KitchenSinkStory {...args} />;
116
117export const KitchenSink = Template.bind({});
118
119// KitchenSink.parameters = { controls: { include: ['foo', 'bar'] } };
120
121KitchenSink.args = {
122	selectableRows: false,
123	selectableRowsNoSelectAll: false,
124	selectableRowsVisibleOnly: false,
125	selectableRowsHighlight: false,
126	selectableRowsSingle: false,
127	expandableRows: false,
128	expandOnRowClicked: false,
129	expandOnRowDoubleClicked: false,
130	expandableRowsHideExpander: false,
131	pagination: true,
132	highlightOnHover: false,
133	striped: false,
134	pointerOnHover: false,
135	dense: false,
136	persistTableHead: false,
137	noHeader: false,
138	fixedHeader: false,
139	fixedHeaderScrollHeight: '300px',
140	progressPending: false,
141	noTableHead: false,
142	noContextMenu: false,
143	direction: Direction.AUTO,
144	subHeader: false,
145	subHeaderAlign: Alignment.RIGHT,
146	subHeaderWrap: true,
147	responsive: true,
148	disabled: false,
149};
150
151export default {
152	title: 'Getting Started/Kitchen Sink',
153	component: KitchenSink,
154	parameters: {
155		controls: {
156			sort: 'requiredFirst',
157			// docs: {
158			// 	page: KitchenSinkMDX,
159			// },
160		},
161	},
162	argTypes: {
163		selectableRows: {
164			table: {
165				category: 'Selectable Rows',
166			},
167		},
168		selectableRowsNoSelectAll: {
169			table: {
170				category: 'Selectable Rows',
171			},
172		},
173		selectableRowsVisibleOnly: {
174			table: {
175				category: 'Selectable Rows',
176			},
177		},
178		selectableRowsHighlight: {
179			table: {
180				category: 'Selectable Rows',
181			},
182		},
183		selectableRowsSingle: {
184			table: {
185				category: 'Selectable Rows',
186			},
187		},
188		expandableRows: {
189			table: {
190				category: 'Expandable Rows',
191			},
192		},
193		expandOnRowClicked: {
194			table: {
195				category: 'Expandable Rows',
196			},
197		},
198		expandOnRowDoubleClicked: {
199			table: {
200				category: 'Expandable Rows',
201			},
202		},
203		expandableRowsHideExpander: {
204			table: {
205				category: 'Expandable Rows',
206			},
207		},
208		subHeaderAlign: {
209			options: [Alignment.RIGHT, Alignment.CENTER, Alignment.LEFT],
210			control: { type: 'select' },
211		},
212		direction: {
213			options: [Direction.AUTO, Direction.LTR, Direction.RTL],
214			control: { type: 'select' },
215		},
216		selectableRowsRadio: {
217			options: ['radio', 'checkbox'],
218			control: { type: 'select' },
219			table: {
220				category: 'Selectable Rows',
221			},
222		},
223	},
224};