WP Ultimate Post Grid / 3.3.0

WP Ultimate Post Grid v3.3.0

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

SectionLayout.js in WP Ultimate Post Grid 3.3.0, at assets/js/admin-modal/grid/section/SectionLayout.js

185 lines 6.5 KB

Raw Download Zip

1	import React, { Fragment } from 'react';
2
3	import EditMode from 'Modal/general/EditMode';
4	import Field from 'Modal/field';
5	import { __wpupg } from 'Shared/Translations';
6
7	const sizingFields = ( props, device ) => {
8	return (
9	<Fragment>
10	<Field
11	value={ props.grid[ `layout_${ device }_sizing` ] }
12	onChange={ ( value ) => {
13	props.onGridChange({
14	[ `layout_${ device }_sizing` ]: value,
15	});
16	}}
17	type="dropdown"
18	label={ __wpupg( 'Item Sizing' ) }
19	options={[
20	{
21	value: 'fixed',
22	label: __wpupg( 'Fixed Item Width' ),
23	},
24	{
25	value: 'columns',
26	label: __wpupg( 'Set number of Columns' ),
27	},
28	{
29	value: 'ignore',
30	label: __wpupg( 'Let item template control sizing' ),
31	},
32	]}
33	/>
34	{
35	'fixed' === props.grid[ `layout_${ device }_sizing` ]
36	&&
37	<Field
38	value={ props.grid[ `layout_${ device }_sizing_fixed` ] }
39	onChange={ ( value ) => {
40	props.onGridChange({
41	[ `layout_${ device }_sizing_fixed` ]: value,
42	});
43	}}
44	type="number"
45	min="1"
46	label={ __wpupg( 'Item Width' ) }
47	suffix="px"
48	/>
49	}
50	{
51	'columns' === props.grid[ `layout_${ device }_sizing` ]
52	&&
53	<Field
54	value={ props.grid[ `layout_${ device }_sizing_columns` ] }
55	onChange={ ( value ) => {
56	props.onGridChange({
57	[ `layout_${ device }_sizing_columns` ]: value,
58	});
59	}}
60	type="number"
61	min="1"
62	label={ __wpupg( 'Number of Columns' ) }
63	/>
64	}
65	{
66	'ignore' !== props.grid[ `layout_${ device }_sizing` ]
67	&&
68	<Field
69	value={ props.grid[ `layout_${ device }_sizing_margin` ] }
70	onChange={ ( value ) => {
71	props.onGridChange({
72	[ `layout_${ device }_sizing_margin` ]: value,
73	});
74	}}
75	type="number"
76	min="0"
77	label={ __wpupg( 'Item Margin' ) }
78	suffix="px"
79	/>
80	}
81	</Fragment>
82	);
83	}
84
85	const SectionLayout = (props) => {
86	const modes = {
87	desktop: {
88	label: __wpupg( 'Default/Desktop' ),
89	block: (
90	<Fragment>
91	<Field
92	value={ props.grid.layout_mode }
93	onChange={ ( value ) => {
94	props.onGridChange({
95	layout_mode: value,
96	});
97	}}
98	type="dropdown"
99	label={ __wpupg( 'Layout Style' ) }
100	options={[
101	{
102	value: 'masonry',
103	label: __wpupg( 'Masonry (Pinterest like)' ),
104	},
105	{
106	value: 'fitRows',
107	label: __wpupg( 'Items in rows' ),
108	}
109	]}
110	/>
111	{
112	'masonry' === props.grid.layout_mode
113	&& ! props.grid.layout_tablet_different
114	&& ! props.grid.layout_mobile_different
115	&&
116	<Field
117	value={ props.grid.centered }
118	onChange={ ( value ) => {
119	props.onGridChange({
120	centered: value,
121	});
122	}}
123	type="checkbox"
124	label={ __wpupg( 'Center Grid' ) }
125	help={ __wpupg( 'This option will only work with Masonry layout style and the same layout for tablet and mobile.' ) }
126	/>
127	}
128	{ sizingFields( props, 'desktop' ) }
129	</Fragment>
130	),
131	},
132	tablet: {
133	label: __wpupg( 'Tablet' ),
134	block: (
135	<Fragment>
136	<Field
137	value={ props.grid.layout_tablet_different }
138	onChange={ ( value ) => {
139	props.onGridChange({
140	layout_tablet_different: value,
141	});
142	}}
143	type="checkbox"
144	label={ __wpupg( 'Use different layout for Tablet' ) }
145	/>
146	{
147	props.grid.layout_tablet_different
148	&& sizingFields( props, 'tablet' )
149	}
150	</Fragment>
151	),
152	},
153	mobile: {
154	label: __wpupg( 'Mobile' ),
155	block: (
156	<Fragment>
157	<Field
158	value={ props.grid.layout_mobile_different }
159	onChange={ ( value ) => {
160	props.onGridChange({
161	layout_mobile_different: value,
162	});
163	}}
164	type="checkbox"
165	label={ __wpupg( 'Use different layout for Mobile' ) }
166	/>
167	{
168	props.grid.layout_mobile_different
169	&& sizingFields( props, 'mobile' )
170	}
171	</Fragment>
172	),
173	},
174	};
175
176	return (
177	<Fragment>
178	<EditMode
179	modes={ modes }
180	/>
181	</Fragment>
182	);
183	}
184	export default SectionLayout;
185