ListTableRows.tsx — GiveWP – Donation Plugin and Fundraising Platform 2.23.2

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

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

ListTableRows.tsx

149 lines

1	import styles from './ListTableRows.module.scss';
2	import {__} from '@wordpress/i18n';
3	import cx from 'classnames';
4	import {useEffect, useState} from 'react';
5	import TableCell, {IdBadge, StatusBadge} from "./TableCell";
6	import TestLabel from "@givewp/components/ListTable/TestLabel";
7	import {BulkActionCheckbox} from "@givewp/components/ListTable/BulkActionCheckbox";
8
9	const postStatusMap = {
10	publish: __('published', 'give'),
11	future: __('future', 'give'),
12	draft: __('draft', 'give'),
13	pending: __('pending', 'give'),
14	trash: __('trash', 'give'),
15	inherit: __('inherit', 'give'),
16	private: __('private', 'give'),
17	}
18
19	const donationStatusMap = {
20	publish: __('complete', 'give'),
21	pending: __('pending', 'give'),
22	refunded: __('refunded', 'give'),
23	failed: __('failed', 'give'),
24	cancelled: __('cancelled', 'give'),
25	abandoned: __('abandoned', 'give'),
26	preapproval: __('pre-approved', 'give'),
27	processing: __('processing', 'give'),
28	revoked: __('revoked', 'give'),
29	give_subscription: __('renewal', 'give'),
30	}
31
32	const RenderRow = ({ column, item }) => {
33	let value = item?.[column.name];
34	if(value === undefined){
35	value = null;
36	}
37	switch(column?.preset){
38	case 'idBadge':
39	return (
40	<IdBadge key={column.name} id={value}/>
41	);
42	case 'statusBadge':
43	return (
44	<StatusBadge key={column.name} className={styles[value]}
45	text={value}
46	/>
47	);
48	case 'postStatus':
49	return (
50	<StatusBadge key={column.name} className={styles[value]}
51	text={postStatusMap[value]}
52	/>
53	);
54	case 'donationStatus':
55	return (
56	<div className={styles.donationStatus}>
57	<StatusBadge key={column.name} className={styles[value]}
58	text={donationStatusMap[value]}
59	/>
60	{(item.paymentMode === 'test') && <TestLabel/>}
61	</div>
62	);
63	case 'monetary':
64	return (
65	<strong className={styles.monetary}>{value}</strong>
66	);
67	default:
68	if(column?.render instanceof Function) return column.render(item);
69	if(value === '' \|\| value === null) return '-';
70	return value;
71	}
72	}
73
74	export default function ListTableRows({columns, data, isLoading, rowActions, setUpdateErrors, parameters, singleName, align}) {
75	const [removed, setRemoved] = useState([]);
76	const [added, setAdded] = useState([]);
77
78	useEffect(() => {
79	if (added.length && !isLoading) {
80	const timeouts = [];
81	timeouts[0] = setTimeout(() => {
82	const addedItem = document.getElementsByClassName(styles.duplicated);
83	if (addedItem.length == 1) {
84	addedItem[0].scrollIntoView({behavior: 'smooth', block: 'center'});
85	}
86	}, 100);
87	timeouts[1] = setTimeout(() => {
88	setAdded([]);
89	}, 600);
90	return () => {
91	timeouts.forEach((timeout) => clearTimeout(timeout));
92	};
93	}
94	}, [added, isLoading]);
95
96	function removeRow(removeCallback) {
97	return async (event) => {
98	const id = event.target.dataset.actionid;
99	setRemoved([id]);
100	await removeCallback(id);
101	setRemoved([]);
102	}
103	}
104
105	function addRow(addCallback) {
106	return async (event) => {
107	const id = event.target.dataset.actionid;
108	const addedItem = await addCallback(id);
109	setAdded([...addedItem.successes]);
110	}
111	}
112
113	if(!data?.items) {
114	return null;
115	}
116
117	return data.items.map((item) => (
118	<tr
119	key={item.id}
120	className={cx(styles.tableRow, {
121	[styles.deleted]: removed.indexOf(item.id) > -1,
122	[styles.duplicated]: added.indexOf(parseInt(item.id)) > -1,
123	})}
124	>
125	<TableCell>
126	<BulkActionCheckbox id={item.id} name={item?.name} singleName={singleName}/>
127	</TableCell>
128	<>
129	{columns.map((column) => (
130	<TableCell key={column.name} className={cx(column?.addClass,
131	{
132	[styles[align]]: !(column?.alignColumn),
133	[styles.center]: column?.alignColumn === 'center',
134	[styles.start]: column?.alignColumn === 'start',
135	}
136	)} heading={column?.heading}>
137	<RenderRow column={column} item={item}/>
138	{!isLoading && rowActions &&
139	<div role="group" aria-label={__('Actions', 'give')} className={styles.tableRowActions}>
140	{column?.heading && rowActions({data, item, removeRow, addRow, setUpdateErrors, parameters})}
141	</div>
142	}
143	</TableCell>
144	))}
145	</>
146	</tr>
147	));
148	}
149