Gutenify – Visual Site Builder Blocks & Starter Templates / 0.0.2

Gutenify – Visual Site Builder Blocks & Starter Templates v0.0.2

gutenify / src / components / blocks / google-maps / controls / GutenifyRangeControl.js

GutenifyRangeControl.js in Gutenify – Visual Site Builder Blocks & Starter Templates 0.0.2, at src/components/blocks/google-maps/controls/GutenifyRangeControl.js

145 lines 4.3 KB

Raw Download Zip

1	import { Component } from '@wordpress/element';
2	import { PanelRow, RangeControl, Icon } from '@wordpress/components';
3
4	class GutenifyRangeControl extends Component {
5	constructor(props) {
6	super(props);
7	let defaults = {};
8	if(props.defaults){
9	defaults = props.defaults;
10	}
11	this.defaults = {...{
12	desktop: {
13	value: '',
14	unit: '%'
15	},
16	tablet: {
17	value: '',
18	unit: '%'
19	},
20	mobile: {
21	value: '',
22	unit: '%'
23	}
24	},...defaults}
25
26	this.defaultUnits = [ '%', 'px' ];
27
28	let units = [ '%', 'px' ];
29	if(props.units){
30	units = props.units;
31	}
32	const data = { ...this.defaults, ...props.value };
33	this.state = {
34	viewport: 'desktop',
35	unit: data.desktop.unit,
36	showViewports: false,
37	data,
38	units
39	}
40
41
42	this.onUpdateRange = this.onUpdateRange.bind(this);
43	this.onChangeViewPort = this.onChangeViewPort.bind(this);
44	this.onResetRange = this.onResetRange.bind(this);
45	}
46
47	onUpdateRange(value) {
48
49	let data = {
50	...this.state.data,
51	[this.state.viewport]: {
52	...this.state.data[this.state.viewport],
53	value
54	}
55	}
56	this.setState({
57	data
58	});
59
60	this.props.onChange(data)
61	}
62
63	onChangeViewPort(viewport) {
64	this.setState({
65	viewport,
66	unit: this.state.data[viewport].unit,
67	showViewports: true
68	});
69	}
70
71	onChangeUnit(unit) {
72	let data = {
73	...this.state.data,
74	[this.state.viewport]: {
75	...this.state.data[this.state.viewport],
76	unit
77	}
78	}
79	this.setState({
80	data,
81	unit,
82	showViewports: true
83	});
84	this.props.onChange(data)
85	}
86
87	onResetRange() {
88	const value = this.defaults[this.state.viewport].value;
89	const unit = this.defaults[this.state.viewport].unit;
90	let data = {
91	...this.state.data,
92	[this.state.viewport]: {
93	...this.state.data[this.state.viewport],
94	value,
95	unit
96	}
97	}
98	// console.log(data);
99
100	this.setState({
101	data
102	});
103	this.setState({
104	unit
105	});
106	this.props.onChange(data)
107	}
108
109	render() {
110	const viewport = this.state.viewport;
111	const unit = this.state.unit;
112	return <>
113	<PanelRow className="gutenify-range-control-label-row">
114	<div className="gutenify-range-control-label-wrap">
115	{this.props.label&&<label>{this.props.label} </label>}
116	<div className="gutenify-range-control-viewport">
117	<span className={'desktop' === viewport ? 'active' : ''} onClick={() => this.onChangeViewPort('desktop')}><Icon icon="laptop" size={12} /></span>
118	{this.state.showViewports && <>
119	<span className={'tablet' === viewport ? 'active' : ''} onClick={() => this.onChangeViewPort('tablet')}><Icon icon="tablet" size={12} /></span>
120	<span className={'mobile' === viewport ? 'active' : ''} onClick={() => this.onChangeViewPort('mobile')}><Icon icon="smartphone" size={12} /></span>
121
122	</>}
123	</div>
124	</div>
125	<div className="gutenify-range-control-unit">
126	{this.state.units.map((unitIcon)=>{
127	return <span className={unitIcon === unit ? 'active' : ''} onClick={() => this.onChangeUnit(unitIcon)}>{unitIcon}</span>
128	})}
129	</div>
130	</PanelRow>
131	<PanelRow>
132	<RangeControl
133	// label="Columns"
134	value={this.state.data[viewport].value}
135	onChange={(value) => this.onUpdateRange(value)}
136	// min={1}
137	initialPosition={100}
138	// allowReset={true}
139	/>
140	</PanelRow>
141	</>;
142	}
143	}
144
145	export default GutenifyRangeControl;