Skip to content
Snippets Groups Projects
Commit 5b5120ea authored by Eryk Mika's avatar Eryk Mika
Browse files

feature: added units for fields

parent 76b25497
Branches
Tags
1 merge request!2Devel
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; 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 keys = Object.keys(values);
const valuesArray = Object.values(values); const valuesArray = Object.values(values);
...@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) { ...@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
<NumberWithUnit <NumberWithUnit
className='fi-duo-field fi-duo-field-input' className='fi-duo-field fi-duo-field-input'
value={valuesArray[0]} value={valuesArray[0]}
units={units}
onChange={(e) => { onChange={(e) => {
handleChange(0, e) handleChange(0, e)
}} }}
...@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) { ...@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
<NumberWithUnit <NumberWithUnit
className='fi-duo-field fi-duo-field-input' className='fi-duo-field fi-duo-field-input'
value={valuesArray[1]} value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)} onChange={(e) => handleChange(1, e)}
/> />
</div> </div>
......
import {SelectControl, TextControl} from "@wordpress/components"; import {SelectControl, TextControl} from "@wordpress/components";
import {useState} from "react"; 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) { const splitValues = function (fontSize) {
...@@ -24,7 +32,6 @@ export default function NumberWithUnit({label, onChange, value, className}) { ...@@ -24,7 +32,6 @@ export default function NumberWithUnit({label, onChange, value, className}) {
const [size, setSize] = useState(splitValues(value).size); const [size, setSize] = useState(splitValues(value).size);
const handleChange = (newSize, newUnit) => { const handleChange = (newSize, newUnit) => {
if (onChange) { if (onChange) {
onChange(newSize + newUnit); onChange(newSize + newUnit);
...@@ -37,7 +44,8 @@ export default function NumberWithUnit({label, onChange, value, className}) { ...@@ -37,7 +44,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
<div className='fi-field-label-wrapper'> <div className='fi-field-label-wrapper'>
<span className='fi-field-label'>{label}</span> <span className='fi-field-label'>{label}</span>
</div> </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 <TextControl
style={{flex: 3}} style={{flex: 3}}
type={'number'} type={'number'}
...@@ -49,12 +57,7 @@ export default function NumberWithUnit({label, onChange, value, className}) { ...@@ -49,12 +57,7 @@ export default function NumberWithUnit({label, onChange, value, className}) {
}} }}
/> />
<SelectControl <SelectControl
options={[ options={units}
{label: 'px', value: 'px'},
{label: '%', value: '%'},
{label: 'em', value: 'em'},
{label: 'pt', value: 'pt'},
]}
style={{minWidth: '56px'}} style={{minWidth: '56px'}}
value={unit} value={unit}
onChange={(value) => { onChange={(value) => {
......
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; 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 keys = Object.keys(values);
const valuesArray = Object.values(values); const valuesArray = Object.values(values);
...@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]} value={valuesArray[0]}
units={units}
onChange={(e) => { onChange={(e) => {
handleChange(0, e) handleChange(0, e)
}} }}
...@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]} value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)} onChange={(e) => handleChange(1, e)}
/> />
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]} value={valuesArray[2]}
units={units}
onChange={(e) => handleChange(2, e)} onChange={(e) => handleChange(2, e)}
/> />
</div> </div>
...@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]} value={valuesArray[3]}
units={units}
onChange={(e) => handleChange(3, e)} onChange={(e) => handleChange(3, e)}
/> />
</div> </div>
...@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]} value={valuesArray[0]}
units={units}
onChange={(e) => { onChange={(e) => {
handleChange(0, e) handleChange(0, e)
}} }}
...@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]} value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)} onChange={(e) => handleChange(1, e)}
/> />
</div> </div>
...@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]} value={valuesArray[2]}
units={units}
onChange={(e) => handleChange(2, e)} onChange={(e) => handleChange(2, e)}
/> />
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]} value={valuesArray[3]}
units={units}
onChange={(e) => handleChange(3, e)} onChange={(e) => handleChange(3, e)}
/> />
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment