-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
106 lines (95 loc) · 2.3 KB
/
index.js
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
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { BaseControl } from '@wordpress/components';
/**
* Internal dependencies
*/
import AllInputControl from './all-input-control';
import InputControls from './input-controls';
import AxialInputControls from './axial-input-controls';
import LinkedButton from './linked-button';
import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
import useSetting from '../use-setting';
export default function SpacingSizesControl( {
inputProps,
onChange,
label = __( 'Spacing Control' ),
values,
sides,
splitOnAxis = false,
useSelect,
minimumCustomValue = 0,
onMouseOver,
onMouseOut,
} ) {
const spacingSizes = [
{ name: 0, slug: '0', size: 0 },
...( useSetting( 'spacing.spacingSizes' ) || [] ),
];
if ( spacingSizes.length > 8 ) {
spacingSizes.unshift( {
name: __( 'Default' ),
slug: 'default',
size: undefined,
} );
}
const inputValues = values || DEFAULT_VALUES;
const hasInitialValue = isValuesDefined( values );
const hasOneSide = sides?.length === 1;
const [ isLinked, setIsLinked ] = useState(
! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide
);
const toggleLinked = () => {
setIsLinked( ! isLinked );
};
const handleOnChange = ( nextValue ) => {
const newValues = { ...values, ...nextValue };
onChange( newValues );
};
const inputControlProps = {
...inputProps,
onChange: handleOnChange,
isLinked,
sides,
values: inputValues,
spacingSizes,
useSelect,
type: label,
minimumCustomValue,
onMouseOver,
onMouseOut,
};
return (
<fieldset
className={ classnames( 'component-spacing-sizes-control', {
'is-unlinked': ! isLinked,
} ) }
>
<BaseControl.VisualLabel as="legend">
{ label }
</BaseControl.VisualLabel>
{ ! hasOneSide && (
<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
) }
{ isLinked && (
<AllInputControl
aria-label={ label }
{ ...inputControlProps }
/>
) }
{ ! isLinked && splitOnAxis && (
<AxialInputControls { ...inputControlProps } />
) }
{ ! isLinked && ! splitOnAxis && (
<InputControls { ...inputControlProps } />
) }
</fieldset>
);
}