Skip to content
Snippets Groups Projects
Select Git revision
  • c47c124a7a49c3fc99e1803e9c957b1bbec6e164
  • main default protected
  • just_for_review
  • 1.0.0
4 results

QuatroInput.jsx

Blame
  • 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>
    	);
    }