File "KirkiMarginPaddingForm.js"
Full Path: /home/fineflavourcocoa/public_html/wp-content/plugins/kirki/pro-src/packages/kirki-pro-margin-padding/src/KirkiMarginPaddingForm.js
File size: 4.57 KB
MIME-type: text/x-java
Charset: utf-8
import { useRef, useState } from "react";
const KirkiMarginPaddingForm = (props) => {
const { control, customizerSetting, defaultArray, valueArray, valueUnit } =
props;
const [inputValues, setInputValues] = useState(() => {
return valueArray;
});
const getSingleValueAsObject = (value) => {
let unit = "";
let number = "";
let negative = "";
if ("" !== value) {
value = "string" !== typeof value ? value.toString() : value;
value = value.trim();
negative = -1 < value.indexOf("-") ? "-" : "";
value = value.replace(negative, "");
if ("" !== value) {
unit = value.replace(/\d+/g, "");
number = value.replace(unit, "");
number = negative + number.trim();
number = parseFloat(number);
} else {
number = negative;
}
}
return {
unit: unit,
number: number,
};
};
const getValuesForInput = (values) => {
let singleValue;
for (const position in values) {
if (Object.hasOwnProperty.call(values, position)) {
singleValue = getSingleValueAsObject(values[position]);
values[position] = singleValue.number;
}
}
return values;
};
const getValuesForCustomizer = (values) => {
let singleValue;
for (const position in values) {
if (Object.hasOwnProperty.call(values, position)) {
singleValue = values[position];
if ("" !== singleValue) {
singleValue = getSingleValueAsObject(singleValue);
singleValue = singleValue.number + valueUnit;
}
values[position] = singleValue;
}
}
return values;
};
control.updateComponentState = (val) => {
setInputValues(getValuesForInput(val));
};
const handleChange = (e, position) => {
let values = { ...inputValues };
values[position] = e.target.value;
customizerSetting.set(getValuesForCustomizer(values));
};
const handleReset = (e) => {
const values =
"" !== props.default && "undefined" !== typeof props.default
? defaultArray
: valueArray;
customizerSetting.set(getValuesForCustomizer(values));
};
// Preparing for the template.
const fieldId = `kirki-control-input-${props.type}-top`;
const unitRef = useRef(null);
const makeMapable = () => {
const items = [];
for (const position in inputValues) {
if (Object.hasOwnProperty.call(inputValues, position)) {
items.push({ position: position, value: inputValues[position] });
}
}
return items;
};
return (
<div className="kirki-control-form" tabIndex="1">
{(props.label || props.description) && (
<>
<label className="kirki-control-label" htmlFor={fieldId}>
{props.label && (
<span className="customize-control-title">{props.label}</span>
)}
{props.description && (
<span
className="customize-control-description description"
dangerouslySetInnerHTML={{ __html: props.description }}
/>
)}
</label>
<div
className="customize-control-notifications-container"
ref={props.setNotificationContainer}
/>
</>
)}
<button
type="button"
className="kirki-control-reset"
onClick={handleReset}
>
<i className="dashicons dashicons-image-rotate"></i>
</button>
<div className="kirki-control-cols">
<div className="kirki-control-left-col">
<div class="kirki-control-fields">
{makeMapable(inputValues).map((item) => {
const className = `kirki-control-input kirki-control-input-${item.position}`;
const id = `kirki-control-input-${props.type}-${item.position}`;
return (
<div class="kirki-control-field">
<input
id={id}
type="number"
value={item.value || 0 === item.value ? item.value : ""}
className={className}
onChange={(e) => handleChange(e, item.position)}
/>
<label class="kirki-control-sublabel" htmlFor={id}>
{item.position}
</label>
</div>
);
})}
</div>
</div>
<div className="kirki-control-right-col">
<span ref={unitRef} className="kirki-control-unit">
{valueUnit}
</span>
</div>
</div>
</div>
);
};
export default KirkiMarginPaddingForm;