WP Ultimate Post Grid / 4.0.1

WP Ultimate Post Grid v4.0.1

wp-ultimate-post-grid / assets / js / admin-modal / grid / section / Shared / CustomFieldOptions.js

CustomFieldOptions.js in WP Ultimate Post Grid 4.0.1, at assets/js/admin-modal/grid/section/Shared/CustomFieldOptions.js

145 lines 7.0 KB

Raw Download Zip

1	import React, { Fragment } from 'react';
2
3	import Field from 'Modal/field';
4	import { __wpupg } from 'Shared/Translations';
5	import Icon from 'Shared/Icon';
6
7	const CustomFieldOptions = (props) => {
8	const { options } = props;
9
10	return (
11	<Fragment>
12	<Field
13	type="custom"
14	label=""
15	>
16	<p>
17	{ __wpupg( 'Manually set the values you want to show in this filter, in the order you want.' ) }
18	<br/>{ __wpupg( 'For numeric fields you can also use ranges!' ) } <a href="https://help.bootstrapped.ventures/article/265-custom-field-filters" target="_blank">{ __wpupg( 'Learn More' ) }</a>.
19	</p>
20	</Field>
21	{
22	options.custom_field_options.map( ( custom_field_option, index ) => {
23	const allowDown = index < options.custom_field_options.length - 1;
24	const allowUp = 0 < index;
25
26	return (
27	<Field
28	type="custom"
29	label={ `${ __wpupg( 'Option' ) } #${index + 1}` }
30	>
31	<div className="wpupg-admin-modal-field-filter">
32	<input
33	className="wpupg-admin-modal-field-filter-label"
34	type="text"
35	value={ custom_field_option.value }
36	placeholder={ __wpupg( 'Value' ) }
37	onChange={(e) => {
38	let newOptions = JSON.parse( JSON.stringify( options.custom_field_options ) );
39
40	newOptions[ index ].value = e.target.value;
41
42	props.onChange({
43	custom_field_options: newOptions,
44	});
45	}}
46	/>
47	<input
48	className="wpupg-admin-modal-field-filter-label"
49	type="text"
50	value={ custom_field_option.label }
51	placeholder={ __wpupg( 'Label' ) }
52	onChange={(e) => {
53	let newOptions = JSON.parse( JSON.stringify( options.custom_field_options ) );
54
55	newOptions[ index ].label = e.target.value;
56
57	props.onChange({
58	custom_field_options: newOptions,
59	});
60	}}
61	/>
62	<div className="wpupg-admin-modal-field-filter-order">
63	<Icon
64	type="up"
65	className={ ! allowUp ? 'wpupg-admin-modal-field-filter-order-disabled' : '' }
66	onClick={
67	allowUp
68	?
69	() => {
70	let newOptions = JSON.parse( JSON.stringify( options.custom_field_options ) );
71	newOptions.splice( index - 1, 0, newOptions.splice( index, 1 )[0] );
72
73	props.onChange({
74	custom_field_options: newOptions,
75	});
76	}
77	:
78	null
79	}
80	/>
81	<Icon
82	type="down"
83	className={ ! allowDown ? 'wpupg-admin-modal-field-filter-order-disabled' : '' }
84	onClick={
85	allowDown
86	?
87	() => {
88	let newOptions = JSON.parse( JSON.stringify( options.custom_field_options ) );
89	newOptions.splice( index + 1, 0, newOptions.splice( index, 1 )[0] );
90
91	props.onChange({
92	custom_field_options: newOptions,
93	});
94	}
95	:
96	null
97	}
98	/>
99	</div>
100	<div className="wpupg-admin-modal-field-filter-remove">
101	<Icon
102	type="delete"
103	onClick={() => {
104	if ( confirm( __wpupg( 'Are you sure you want to remove this option?' ) ) ) {
105	let newOptions = JSON.parse( JSON.stringify( options.custom_field_options ) );
106	newOptions.splice( index, 1 );
107
108	props.onChange({
109	custom_field_options: newOptions,
110	});
111	}
112	}}
113	/>
114	</div>
115	</div>
116	</Field>
117	);
118	})
119	}
120	<Field
121	type="custom"
122	label=""
123	>
124	<a
125	href="#"
126	role="button"
127	onClick={(e) => {
128	e.preventDefault();
129	let newOptions = JSON.parse( JSON.stringify( options.custom_field_options ) );
130	newOptions.push({
131	value: '',
132	label: '',
133	});
134
135	props.onChange({
136	custom_field_options: newOptions,
137	});
138	}}
139	>{ __wpupg( 'Add Option' ) }</a>
140	</Field>
141	</Fragment>
142	);
143	}
144	export default CustomFieldOptions;
145