diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx index 81b6e0eb7ba66aa39e7632633516a2d6b85c34a3..932aecba360a582b7285a236803e7174da4a3b65 100644 --- a/src/DuoInput/DuoInput.jsx +++ b/src/DuoInput/DuoInput.jsx @@ -1,6 +1,11 @@ import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; -export default function DuoInput({label, onChange, values, layout = 'column'}) { +export default function DuoInput({label, onChange, values, layout = 'column', 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); @@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) { <NumberWithUnit className='fi-duo-field fi-duo-field-input' value={valuesArray[0]} + units={units} onChange={(e) => { handleChange(0, e) }} @@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) { <NumberWithUnit className='fi-duo-field fi-duo-field-input' value={valuesArray[1]} + units={units} onChange={(e) => handleChange(1, e)} /> </div> diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx index b4853afdd19f431804f6c3d4f863756b50d292a4..981ac5b713544a5385c906ab44cc9dfe6ac4e7a5 100644 --- a/src/NumberWithUnit/NumberWithUnit.jsx +++ b/src/NumberWithUnit/NumberWithUnit.jsx @@ -1,11 +1,19 @@ import {SelectControl, TextControl} from "@wordpress/components"; import {useState} from "react"; -export default function NumberWithUnit({label, onChange, value, className}) { +export default function NumberWithUnit({ + label, onChange, value, className, + units = [ + {label: 'px', value: 'px'}, + {label: '%', value: '%'}, + {label: 'em', value: 'em'}, + {label: 'pt', value: 'pt'}, + ] + }) { const splitValues = function (fontSize) { - if( !fontSize ) { + if (!fontSize) { return {size: "0", unit: "px"}; } @@ -24,7 +32,6 @@ export default function NumberWithUnit({label, onChange, value, className}) { const [size, setSize] = useState(splitValues(value).size); - const handleChange = (newSize, newUnit) => { if (onChange) { onChange(newSize + newUnit); @@ -37,7 +44,8 @@ export default function NumberWithUnit({label, onChange, value, className}) { <div className='fi-field-label-wrapper'> <span className='fi-field-label'>{label}</span> </div> - <div className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}> + <div + className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}> <TextControl style={{flex: 3}} type={'number'} @@ -49,13 +57,8 @@ export default function NumberWithUnit({label, onChange, value, className}) { }} /> <SelectControl - options={[ - {label: 'px', value: 'px'}, - {label: '%', value: '%'}, - {label: 'em', value: 'em'}, - {label: 'pt', value: 'pt'}, - ]} - style={{minWidth:'56px'}} + options={units} + style={{minWidth: '56px'}} value={unit} onChange={(value) => { setUnit(value); diff --git a/src/QuatroInput/QuatroInput.jsx b/src/QuatroInput/QuatroInput.jsx index 15e2795acd6b66bcb41b48a8bef817f6b842cb0e..724481d44618cc5b814585a7937373e1dbbaa43d 100644 --- a/src/QuatroInput/QuatroInput.jsx +++ b/src/QuatroInput/QuatroInput.jsx @@ -1,6 +1,13 @@ import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; -export default function QuatroInput({label, onChange, values, layout = 'cross'}) { +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); @@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) <NumberWithUnit className='fi-quatro-field fi-quatro-field-input' value={valuesArray[0]} + units={units} onChange={(e) => { handleChange(0, e) }} @@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) <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> @@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) <NumberWithUnit className='fi-quatro-field fi-quatro-field-input' value={valuesArray[3]} + units={units} onChange={(e) => handleChange(3, e)} /> </div> @@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) <NumberWithUnit className='fi-quatro-field fi-quatro-field-input' value={valuesArray[0]} + units={units} onChange={(e) => { handleChange(0, e) }} @@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) <NumberWithUnit className='fi-quatro-field fi-quatro-field-input' value={valuesArray[1]} + units={units} onChange={(e) => handleChange(1, e)} /> </div> @@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) <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>