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