WP Ultimate Post Grid / 4.1.1

WP Ultimate Post Grid v4.1.1

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

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

176 lines 6.2 KB

Raw Download Zip

1	import React, { Fragment } from 'react';
2
3	import Field from 'Modal/field';
4	import { __wpupg } from 'Shared/Translations';
5
6	const ButtonStyle = (props) => {
7	const { style } = props;
8
9	const states = props.hasOwnProperty( 'states' ) ? props.states : {
10	default: __wpupg( 'Default' ),
11	active: __wpupg( 'Active' ),
12	hover: __wpupg( 'Hover' ),
13	};
14
15	const getColorsForStates = ( prefix ) => {
16	let colors = [];
17
18	for ( let state of Object.keys( states ) ) {
19	const key = 'default' === state ? '' : state;
20	const label = states[ state ];
21
22	const option = `${prefix}_${ key ? key + '_' : '' }color`;
23
24	colors.push({
25	label,
26	value: style[ option ],
27	onChange: ( value ) => { props.onChange({ [ option ]: value }); }
28	});
29	}
30
31	return colors;
32	};
33
34	return (
35	<Fragment>
36	<Field
37	value={ style.font_size }
38	onChange={ ( value ) => { props.onChange({ font_size: value }); } }
39	type="number"
40	min="0"
41	label={ __wpupg( 'Font Size' ) }
42	suffix="px"
43	/>
44	<Field
45	type="colors"
46	colors={ getColorsForStates( 'background' ) }
47	label={ __wpupg( 'Background Color' ) }
48	/>
49	<Field
50	type="colors"
51	colors={ getColorsForStates( 'text' ) }
52	label={ __wpupg( 'Text Color' ) }
53	/>
54	<Field
55	value={ style.border_width }
56	onChange={ ( value ) => { props.onChange({ border_width: value }); } }
57	type="number"
58	min="0"
59	label={ __wpupg( 'Border Width' ) }
60	suffix="px"
61	/>
62	{
63	0 < style.border_width
64	&&
65	<Field
66	type="colors"
67	colors={ getColorsForStates( 'border' ) }
68	label={ __wpupg( 'Border Color' ) }
69	/>
70	}
71	<Field
72	value={ style.border_radius }
73	onChange={ ( value ) => { props.onChange({ border_radius: value }); } }
74	type="number"
75	min="0"
76	label={ __wpupg( 'Border Radius' ) }
77	suffix="px"
78	/>
79	<Field
80	type="columns"
81	columns={[
82	<Fragment>
83	<input
84	type="number"
85	value={ style.margin_vertical }
86	min="0"
87	onChange={(e) => {
88	props.onChange({ margin_vertical: e.target.value });
89	}}
90	/> <span className="wpupg-admin-modal-field-number-suffix">px ({ __wpupg( 'vertical' ) })</span>
91	</Fragment>,
92	<Fragment>
93	<input
94	type="number"
95	value={ style.margin_horizontal }
96	min="0"
97	onChange={(e) => {
98	props.onChange({ margin_horizontal: e.target.value });
99	}}
100	/> <span className="wpupg-admin-modal-field-number-suffix">px ({ __wpupg( 'horizontal' ) })</span>
101	</Fragment>
102	]}
103	label={ __wpupg( 'Margin' ) }
104	/>
105	<Field
106	type="columns"
107	columns={[
108	<Fragment>
109	<input
110	type="number"
111	value={ style.padding_vertical }
112	min="0"
113	onChange={(e) => {
114	props.onChange({ padding_vertical: e.target.value });
115	}}
116	/> <span className="wpupg-admin-modal-field-number-suffix">px ({ __wpupg( 'vertical' ) })</span>
117	</Fragment>,
118	<Fragment>
119	<input
120	type="number"
121	value={ style.padding_horizontal }
122	min="0"
123	onChange={(e) => {
124	props.onChange({ padding_horizontal: e.target.value });
125	}}
126	/> <span className="wpupg-admin-modal-field-number-suffix">px ({ __wpupg( 'horizontal' ) })</span>
127	</Fragment>
128	]}
129	label={ __wpupg( 'Padding' ) }
130	/>
131	<Field
132	value={ style.alignment }
133	onChange={ ( value ) => { props.onChange({ alignment: value }); }}
134	type="dropdown"
135	options={[
136	{
137	value: 'left',
138	label: __wpupg( 'Left' ),
139	},
140	{
141	value: 'center',
142	label: __wpupg( 'Center' ),
143	},
144	{
145	value: 'right',
146	label: __wpupg( 'Right' ),
147	},
148	]}
149	label={ __wpupg( 'Alignment' ) }
150	/>
151	{
152	props.hasOwnProperty( 'hasIcon' )
153	&& props.hasIcon
154	&&
155	<Field
156	value={ style.icon_position }
157	onChange={ ( value ) => { props.onChange({ icon_position: value }); }}
158	type="dropdown"
159	options={[
160	{
161	value: 'before',
162	label: __wpupg( 'Before Text' ),
163	},
164	{
165	value: 'after',
166	label: __wpupg( 'After Text' ),
167	},
168	]}
169	label={ __wpupg( 'Icon Position' ) }
170	/>
171	}
172	</Fragment>
173	);
174	}
175	export default ButtonStyle;
176