gutenberg/packages/components/src/box-control/input-controls.js at 76fbf580a66ade5ad689354b55d09de87a1b9e3e · WordPress/gutenberg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
 * Internal dependencies
 */
import UnitControl from './unit-control';
import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
import { ALL_SIDES, LABELS } from './utils';
import { LayoutContainer, Layout } from './styles/box-control-styles';

const noop = () => {};

export default function BoxInputControls( {
	onChange = noop,
	onFocus = noop,
	onHoverOn = noop,
	onHoverOff = noop,
	values,
	selectedUnits,
	setSelectedUnits,
	sides,
	...props
} ) {
	const createHandleOnFocus = ( side ) => ( event ) => {
		onFocus( event, { side } );
	};

	const createHandleOnHoverOn = ( side ) => () => {
		onHoverOn( { [ side ]: true } );
	};

	const createHandleOnHoverOff = ( side ) => () => {
		onHoverOff( { [ side ]: false } );
	};

	const handleOnChange = ( nextValues ) => {
		onChange( nextValues );
	};

	const createHandleOnChange =
		( side ) =>
		( next, { event } ) => {
			const { altKey } = event;
			const nextValues = { ...values };
			const isNumeric = ! isNaN( parseFloat( next ) );
			const nextValue = isNumeric ? next : undefined;

			nextValues[ side ] = nextValue;

			/**
			 * Supports changing pair sides. For example, holding the ALT key
			 * when changing the TOP will also update BOTTOM.
			 */
			if ( altKey ) {
				switch ( side ) {
					case 'top':
						nextValues.bottom = nextValue;
						break;
					case 'bottom':
						nextValues.top = nextValue;
						break;
					case 'left':
						nextValues.right = nextValue;
						break;
					case 'right':
						nextValues.left = nextValue;
						break;
				}
			}

			handleOnChange( nextValues );
		};

	const createHandleOnUnitChange = ( side ) => ( next ) => {
		const newUnits = { ...selectedUnits };
		newUnits[ side ] = next;
		setSelectedUnits( newUnits );
	};

	// Filter sides if custom configuration provided, maintaining default order.
	const filteredSides = sides?.length
		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
		: ALL_SIDES;

	const first = filteredSides[ 0 ];
	const last = filteredSides[ filteredSides.length - 1 ];
	const only = first === last && first;

	return (
		<LayoutContainer className="component-box-control__input-controls-wrapper">
			<Layout
				gap={ 0 }
				align="top"
				className="component-box-control__input-controls"
			>
				{ filteredSides.map( ( side ) => {
					const [ parsedQuantity, parsedUnit ] =
						parseQuantityAndUnitFromRawValue( values[ side ] );

					const computedUnit = values[ side ]
						? parsedUnit
						: selectedUnits[ side ];

					return (
						<UnitControl
							{ ...props }
							isFirst={ first === side }
							isLast={ last === side }
							isOnly={ only === side }
							value={ [ parsedQuantity, computedUnit ].join(
								''
							) }
							onChange={ createHandleOnChange( side ) }
							onUnitChange={ createHandleOnUnitChange( side ) }
							onFocus={ createHandleOnFocus( side ) }
							onHoverOn={ createHandleOnHoverOn( side ) }
							onHoverOff={ createHandleOnHoverOff( side ) }
							label={ LABELS[ side ] }
							key={ `box-control-${ side }` }
						/>
					);
				} ) }
			</Layout>
		</LayoutContainer>
	);
}