File "BorderRadiusControl.js"

Full path: /home/satkhirabarta/public_html/wp-content/plugins/complianz-gdpr/settings/src/Settings/BorderRadiusControl.js
File size: 2.64 B (2.64 KB bytes)
MIME-type: text/x-java
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

import { __ } from '@wordpress/i18n';
import useFields from "./Fields/FieldsData";

const BorderRadiusControl = (props) => {
	const {updateField, setChangedField} = useFields();

	const handleChange = (key, value) => {
		let valueCopy = {...props.field.value};
		valueCopy[key] = value;
		updateField(props.field.id, valueCopy);
		setChangedField(props.field.id, valueCopy);
	}

	const top = props.field.value.hasOwnProperty('top') ? props.field.value['top'] : props.field.default['top'];
	const right = props.field.value.hasOwnProperty('right') ? props.field.value['right'] : props.field.default['right'];
	const bottom = props.field.value.hasOwnProperty('bottom') ? props.field.value['bottom'] : props.field.default['bottom'];
	const left = props.field.value.hasOwnProperty('left') ? props.field.value['left'] : props.field.default['left'];
	const type = props.field.value.hasOwnProperty('type') ? props.field.value['type'] : props.field.default['type'];
	const pxClass = type==='%' ? 'cmplz-inactive' : '';
	const pcClass = type==='px' ? 'cmplz-inactive' : '';
	return (
		<div >
			<div className="cmplz-borderradius-label">
				{props.label}
			</div>
			<div className="cmplz-borderradius-control">
				<div className="cmplz-borderradius-element">
					<div className="cmplz-borderradius-element-label">{__("Top", "complianz-gdpr")}</div>
					<input type="number" key="1" onChange={(e) => handleChange('top', e.target.value)} value={top}/>
				</div>
				<div className="cmplz-borderradius-element">
					<div className="cmplz-borderradius-element-label">{__("Right", "complianz-gdpr")}</div>
					<input type="number" key="2" onChange={(e) => handleChange('right', e.target.value)} value={right}/>
				</div>
				<div className="cmplz-borderradius-element">
					<div className="cmplz-borderradius-element-label">{__("Bottom", "complianz-gdpr")}</div>
					<input type="number" key="3" onChange={(e) => handleChange('bottom', e.target.value)} value={bottom}/>
				</div>
				<div className="cmplz-borderradius-element">
					<div className="cmplz-borderradius-element-label">{__("Left", "complianz-gdpr")}</div>
					<input type="number" key="4" onChange={(e) => handleChange('left', e.target.value)} value={left}/>
				</div>
				<div className="cmplz-borderradius-inputtype">
					<div className={"cmplz-borderradius-inputtype-pixel "+pxClass} onClick={() => handleChange('type', 'px')}>px</div>
					<div className={"cmplz-borderradius-inputtype-percent "+pcClass} onClick={() => handleChange('type', '%')}>%</div>
				</div>
			</div>
		</div>
	);
}
export default BorderRadiusControl;

const BorderControl = (label, id, value, onChange, required, defaultValue, disabled, options = {}) => {

}