WP Ultimate Post Grid / 4.1.1

WP Ultimate Post Grid v4.1.1

wp-ultimate-post-grid / vendor / bv-settings / assets / js / admin / settings / setting / ObjectTable.js

ObjectTable.js in WP Ultimate Post Grid 4.1.1, at vendor/bv-settings/assets/js/admin/settings/setting/ObjectTable.js

97 lines 3.2 KB

Raw Download Zip

1	import React from 'react';
2	import PropTypes from 'prop-types';
3
4	const SettingObjectTable = (props) => {
5	const rows = props.value && 'object' === typeof props.value ? props.value : {};
6	const columns = props.setting.hasOwnProperty('columns') && Array.isArray(props.setting.columns) ? props.setting.columns : [];
7	const rowLabelKey = props.setting.rowLabelKey ? props.setting.rowLabelKey : 'label';
8	const rowHeader = props.setting.rowHeader ? props.setting.rowHeader : '';
9
10	const onChange = (rowKey, columnKey, value) => {
11	let newRows = {};
12
13	for (let existingRowKey in rows) {
14	newRows[existingRowKey] = {
15	...rows[existingRowKey],
16	};
17	}
18
19	newRows[rowKey] = {
20	...(newRows[rowKey] ? newRows[rowKey] : {}),
21	[columnKey]: value,
22	};
23
24	props.onValueChange(newRows);
25	};
26
27	const renderInput = (rowKey, column) => {
28	const row = rows[rowKey] ? rows[rowKey] : {};
29	const value = row.hasOwnProperty(column.key) ? row[column.key] : '';
30	const inputClassName = `bvs-setting-object-table-input${column.className ? ` ${column.className}` : ''}`;
31
32	if ('textarea' === column.type) {
33	return (
34	<textarea
35	className={inputClassName}
36	value={value}
37	rows={column.rows ? column.rows : 3}
38	onChange={(e) => onChange(rowKey, column.key, e.target.value)}
39	/>
40	);
41	}
42
43	return (
44	<input
45	className={inputClassName}
46	type={column.type ? column.type : 'text'}
47	value={value}
48	onChange={(e) => onChange(rowKey, column.key, e.target.value)}
49	/>
50	);
51	};
52
53	return (
54	<table className="bvs-setting-object-table">
55	<thead>
56	<tr>
57	<th>{rowHeader}</th>
58	{
59	columns.map((column) => (
60	<th key={column.key}>{column.label ? column.label : column.key}</th>
61	))
62	}
63	</tr>
64	</thead>
65	<tbody>
66	{
67	Object.keys(rows).map((rowKey) => {
68	const row = rows[rowKey] ? rows[rowKey] : {};
69	const rowLabel = row.hasOwnProperty(rowLabelKey) ? row[rowLabelKey] : rowKey;
70
71	return (
72	<tr key={rowKey}>
73	<th scope="row">{rowLabel}</th>
74	{
75	columns.map((column) => (
76	<td key={column.key}>
77	{renderInput(rowKey, column)}
78	</td>
79	))
80	}
81	</tr>
82	);
83	})
84	}
85	</tbody>
86	</table>
87	);
88	}
89
90	SettingObjectTable.propTypes = {
91	setting: PropTypes.object.isRequired,
92	value: PropTypes.any,
93	onValueChange: PropTypes.func.isRequired,
94	}
95
96	export default SettingObjectTable;
97