Select Git revision
QuatroInput.jsx
QuatroInput.jsx 2.67 KiB
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
export default function QuatroInput({
label, onChange, values, layout = 'cross', units = [
{label: 'px', value: 'px'},
{label: '%', value: '%'},
{label: 'em', value: 'em'},
{label: 'pt', value: 'pt'}
]
}) {
const keys = Object.keys(values);
const valuesArray = Object.values(values);
const handleChange = (side, value) => {
const changedSide = keys[side];
const newValues = {...values, [changedSide]: value};
if (onChange) {
onChange(newValues);
}
};
return (
<div className='fi-field-wrapper'>
<div className='fi-field-label-wrapper'>
<span className='fi-field-label'>{label}</span>
</div>
{layout === 'cross' &&
<div className='fi-field-buttons-wrapper fi-quatro-fields-wrapper'>
<div className='fi-quatro-fields'>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]}
units={units}
onChange={(e) => {
handleChange(0, e)
}}
/>
</div>
<div className='fi-quatro-fields fields-mid'>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)}
/>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]}
units={units}
onChange={(e) => handleChange(2, e)}
/>
</div>
<div className='fi-quatro-fields'>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]}
units={units}
onChange={(e) => handleChange(3, e)}
/>
</div>
</div>}
{layout === 'box' &&
<div className='fi-field-buttons-wrapper fi-quatro-fields-wrapper'>
<div className='fi-quatro-fields'>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]}
units={units}
onChange={(e) => {
handleChange(0, e)
}}
/>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)}
/>
</div>
<div className='fi-quatro-fields fields-mid'>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]}
units={units}
onChange={(e) => handleChange(2, e)}
/>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]}
units={units}
onChange={(e) => handleChange(3, e)}
/>
</div>
</div>}
</div>
);
}