WP Ultimate Post Grid / 4.0.1

WP Ultimate Post Grid v4.0.1

wp-ultimate-post-grid / assets / js / admin-modal / grid / Edit.js

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

179 lines 6.5 KB

Raw Download Zip

1	import React, { Component } from 'react';
2
3	import { __wpupg } from 'Shared/Translations';
4	import Icon from 'Shared/Icon';
5
6	import SectionGeneral from './section/SectionGeneral';
7	import SectionDataSource from './section/SectionDataSource';
8	import SectionLimit from './section/SectionLimit';
9	import SectionFilter from './section/SectionFilter';
10	import SectionLayout from './section/SectionLayout';
11	import SectionItem from './section/SectionItem';
12	import SectionOther from './section/SectionOther';
13	import SectionPagination from './section/SectionPagination';
14
15	export default class Edit extends Component {
16	constructor(props) {
17	super(props);
18
19	// Set initial state.
20	this.state = {
21	section: 'general',
22	};
23	}
24
25	render() {
26	let structure = [
27	{
28	id: 'general', name: __wpupg( 'General' ),
29	help: 'https://help.bootstrapped.ventures/article/230-general',
30	type: 'all',
31	elem: (
32	<SectionGeneral
33	grid={ this.props.grid }
34	onGridChange={ this.props.onGridChange }
35	/>
36	)
37	},
38	{
39	id: 'data-source', name: __wpupg( 'Data Source' ),
40	help: 'https://help.bootstrapped.ventures/article/231-data-source',
41	type: 'all',
42	elem: (
43	<SectionDataSource
44	grid={ this.props.grid }
45	onGridChange={ this.props.onGridChange }
46	/>
47	)
48	},
49	{
50	id: 'limit', name: __wpupg( 'Limit Items' ),
51	help: 'https://help.bootstrapped.ventures/article/232-limit-items',
52	type: 'all',
53	elem: (
54	<SectionLimit
55	grid={ this.props.grid }
56	onGridChange={ this.props.onGridChange }
57	/>
58	)
59	},
60	{
61	id: 'filters', name: __wpupg( 'Filters' ),
62	help: 'https://help.bootstrapped.ventures/article/233-filters',
63	type: 'posts',
64	elem: (
65	<SectionFilter
66	grid={ this.props.grid }
67	onGridChange={ this.props.onGridChange }
68	/>
69	)
70	},
71	{
72	id: 'layout', name: __wpupg( 'Layout' ),
73	help: 'https://help.bootstrapped.ventures/article/234-layout',
74	type: 'all',
75	elem: (
76	<SectionLayout
77	grid={ this.props.grid }
78	onGridChange={ this.props.onGridChange }
79	/>
80	)
81	},
82	{
83	id: 'item', name: __wpupg( 'Item' ),
84	help: 'https://help.bootstrapped.ventures/article/235-item',
85	type: 'all',
86	elem: (
87	<SectionItem
88	grid={ this.props.grid }
89	onGridChange={ this.props.onGridChange }
90	/>
91	)
92	},
93	{
94	id: 'pagination', name: __wpupg( 'Pagination' ),
95	help: 'https://help.bootstrapped.ventures/article/236-pagination',
96	type: 'posts',
97	elem: (
98	<SectionPagination
99	grid={ this.props.grid }
100	onGridChange={ this.props.onGridChange }
101	/>
102	)
103	},
104	{
105	id: 'other', name: __wpupg( 'Other' ),
106	help: 'https://help.bootstrapped.ventures/article/237-other',
107	type: 'all',
108	elem: (
109	<SectionOther
110	grid={ this.props.grid }
111	onGridChange={ this.props.onGridChange }
112	/>
113	)
114	},
115	];
116
117	let selected = null;
118
119	return (
120	<div className="wpupg-admin-modal-grid-edit-container">
121	<div className="wpupg-admin-modal-grid-edit-sections">
122	{
123	structure.map((group, index) => {
124	let className = null;
125
126	if ( group.id === this.state.section ) {
127	selected = group;
128	className = 'active';
129	}
130
131	if ( 'all' !== group.type && this.props.grid.type !== group.type ) {
132	return null;
133	}
134
135	return (
136	<a
137	href="#"
138	className={ className }
139	onClick={ (e) => {
140	e.preventDefault();
141	this.setState({
142	section: group.id,
143	});
144	}}
145	key={ index }
146	>
147	{ group.name }
148	</a>
149	)
150	})
151	}
152	</div>
153	{
154	null !== selected
155	&&
156	<div className="wpupg-admin-modal-grid-edit">
157	<div className="wpupg-admin-modal-fields-group-header">{ selected.name }
158	{
159	selected.hasOwnProperty( 'help' )
160	&&
161	<Icon
162	type="question"
163	title={ __wpupg( 'Click to learn more about these options.' ) }
164	className="wpupg-admin-icon-help"
165	onClick={() => {
166	window.open( selected.help, '_blank' );
167	}}
168	/>
169	}
170	</div>
171	{
172	selected.elem
173	}
174	</div>
175	}
176	</div>
177	);
178	}
179	}