index.tsx — GiveWP – Donation Plugin and Fundraising Platform 2.22.3

give / src / Views / Components / ListTable / index.tsx

give / src / Views / Components / ListTable Last commit date

index.tsx

235 lines

1	import {createContext, useRef, useState} from "react";
2	import {__} from "@wordpress/i18n";
3	import {A11yDialog} from "react-a11y-dialog";
4	import A11yDialogInstance from "a11y-dialog";
5
6	import {GiveIcon} from '@givewp/components';
7
8	import {ListTable, ListTableColumn} from './ListTable';
9	import Pagination from "./Pagination";
10	import {Filter, getInitialFilterState} from './Filters';
11	import useDebounce from "./hooks/useDebounce";
12	import {useResetPage} from "./hooks/useResetPage";
13	import ListTableApi from "./api";
14	import styles from './ListTablePage.module.scss';
15	import cx from "classnames";
16	import {BulkActionSelect} from "@givewp/components/ListTable/BulkActionSelect";
17
18	export interface ListTablePageProps {
19	//required
20	title: string;
21	columns: Array<ListTableColumn>;
22	apiSettings: {apiRoot, apiNonce};
23
24	//optional
25	bulkActions?: Array<BulkActionsConfig>\|null;
26	pluralName?: string;
27	singleName?: string;
28	children?: JSX.Element\|JSX.Element[]\|null;
29	rowActions?: JSX.Element\|JSX.Element[]\|Function\|null;
30	filterSettings?;
31	align?: 'start'\|'center'\|'end';
32	}
33
34	export interface FilterConfig {
35	// required
36	name: string;
37	type: 'select'\|'formselect'\|'search';
38
39	// optional
40	ariaLabel?: string;
41	inlineSize?: string;
42	text?: string;
43	options?: Array<{text:string, value:string}>
44	}
45
46	export interface BulkActionsConfig {
47	//required
48	label: string;
49	value: string\|number;
50	action: (selected: Array<string\|number>) => Promise<{errors: string\|number, successes: string\|number}>;
51	confirm: (selected: Array<string\|number>, names?: Array<string>) => JSX.Element\|JSX.Element[]\|string;
52
53	//optional
54	isVisible?: (data, parameters) => Boolean;
55	type?: 'normal'\|'warning'\|'danger';
56	}
57
58	export const ShowConfirmModalContext = createContext((label, confirm, action, type=null) => {});
59	export const CheckboxContext = createContext(null);
60
61	export default function ListTablePage({
62	title,
63	columns,
64	apiSettings,
65	bulkActions = null,
66	filterSettings = [],
67	singleName = __('item', 'give'),
68	pluralName = __('items', 'give'),
69	rowActions = null,
70	children = null,
71	align = 'start',
72	}: ListTablePageProps) {
73	const [page, setPage] = useState<number>(1);
74	const [perPage, setPerPage] = useState<number>(30);
75	const [filters, setFilters] = useState(getInitialFilterState(filterSettings));
76	const [modalContent, setModalContent] = useState<{confirm, action, label, type?: 'normal'\|'warning'\|'danger'}>({
77	confirm: (selected)=>{},
78	action: (selected)=>{},
79	label: ''
80	});
81	const [selectedIds, setSelectedIds] = useState([]);
82	const [selectedNames, setSelectedNames] = useState([]);
83	const dialog = useRef() as {current: A11yDialogInstance};
84	const checkboxRefs = useRef([]);
85
86	const parameters = {
87	page,
88	perPage,
89	...filters
90	};
91
92	const archiveApi = useRef(new ListTableApi(apiSettings)).current;
93
94	const {data, error, isValidating, mutate} = archiveApi.useListTable(parameters)
95
96	useResetPage(data, page, setPage, filters);
97
98	const handleFilterChange = (name, value) => {
99	setFilters(prevState => ({...prevState, [name]: value}));
100	}
101
102	const handleDebouncedFilterChange = useDebounce(handleFilterChange);
103
104	const showConfirmActionModal = (label, confirm, action, type:'normal'\|'warning'\|'danger'\|null = null) => {
105	setModalContent({confirm, action, label, type});
106	dialog.current.show();
107	}
108
109	const openBulkActionModal = (event) => {
110	event.preventDefault();
111	const formData = new FormData(event.target);
112	const action = formData.get('giveListTableBulkActions');
113	const actionIndex = bulkActions.findIndex((config) => action == config.value);
114	if(actionIndex < 0) return;
115	const selected = [];
116	const names = [];
117	checkboxRefs.current.forEach((checkbox) => {
118	if(checkbox.checked){
119	selected.push(checkbox.dataset.id);
120	names.push(checkbox.dataset.name);
121	}
122	});
123	setSelectedIds(selected);
124	setSelectedNames(names);
125	if(selected.length){
126	setModalContent({...bulkActions[actionIndex]});
127	dialog.current.show();
128	}
129	}
130
131	const showPagination = () => (
132	<Pagination
133	currentPage={page}
134	totalPages={data ? data.totalPages : 1}
135	disabled={!data}
136	totalItems={data ? parseInt(data.totalItems) : -1}
137	setPage={setPage}
138	singleName={singleName}
139	pluralName={pluralName}
140	/>
141	)
142
143	const PageActions = () => (
144	<div className={cx(styles.pageActions,
145	{ [styles.alignEnd]: !bulkActions }
146	)}>
147	<BulkActionSelect parameters={parameters} data={data} bulkActions={bulkActions} showModal={openBulkActionModal}/>
148	{page && setPage && showPagination()}
149	</div>
150	);
151
152	return (
153	<>
154	<article className={styles.page}>
155	<header className={styles.pageHeader}>
156	<div className={styles.flexRow}>
157	<GiveIcon size={'1.875rem'}/>
158	<h1 className={styles.pageTitle}>{title}</h1>
159	</div>
160	{children &&
161	<div className={styles.flexRow}>
162	{children}
163	</div>
164	}
165	</header>
166	<section role='search' id={styles.searchContainer}>
167	{filterSettings.map(filter =>
168	<Filter
169	key={filter.name}
170	value={filters[filter.name]}
171	filter={filter}
172	onChange={handleFilterChange}
173	debouncedOnChange={handleDebouncedFilterChange}
174	/>
175	)}
176	</section>
177	<div className={cx('wp-header-end', 'hidden')}/>
178	<div className={styles.pageContent}>
179	<PageActions/>
180	<CheckboxContext.Provider value={checkboxRefs}>
181	<ShowConfirmModalContext.Provider value={showConfirmActionModal}>
182	<ListTable
183	columns={columns}
184	singleName={singleName}
185	pluralName={pluralName}
186	title={title}
187	rowActions={rowActions}
188	parameters={parameters}
189	data={data}
190	error={error}
191	isLoading={isValidating}
192	align={align}
193	/>
194	</ShowConfirmModalContext.Provider>
195	</CheckboxContext.Provider>
196	<PageActions/>
197	</div>
198	</article>
199	<A11yDialog
200	id='giveListTableModal'
201	dialogRef={instance => (dialog.current = instance)}
202	title={modalContent.label}
203	titleId={styles.modalTitle}
204	classNames={{
205	container: styles.container,
206	overlay: styles.overlay,
207	dialog: cx(styles.dialog, {
208	[styles.warning]: modalContent?.type === 'warning',
209	[styles.danger]: modalContent?.type === 'danger',
210	}),
211	closeButton: 'hidden',
212	}}
213	>
214	<div className={styles.modalContent}>
215	{modalContent?.confirm(selectedIds, selectedNames) \|\| null}
216	</div>
217	<div className={styles.gutter}>
218	<button id={styles.cancel} onClick={(event) => dialog.current?.hide()}>
219	{__('Cancel', 'give')}
220	</button>
221	<button id={styles.confirm}
222	onClick={async (event) => {
223	dialog.current?.hide();
224	await modalContent.action(selectedIds);
225	await mutate();
226	}}
227	>
228	{__('Confirm', 'give')}
229	</button>
230	</div>
231	</A11yDialog>
232	</>
233	);
234	}
235