/
component.tsx
165 lines (156 loc) · 4.33 KB
/
component.tsx
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import BorderControlDropdown from '../border-control-dropdown';
import UnitControl from '../../unit-control';
import RangeControl from '../../range-control';
import { HStack } from '../../h-stack';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { VisuallyHidden } from '../../visually-hidden';
import type { WordPressComponentProps } from '../../context';
import { contextConnect } from '../../context';
import { useBorderControl } from './hook';
import type { BorderControlProps, LabelProps } from '../types';
const BorderLabel = ( props: LabelProps ) => {
const { label, hideLabelFromVision } = props;
if ( ! label ) {
return null;
}
return hideLabelFromVision ? (
<VisuallyHidden as="legend">{ label }</VisuallyHidden>
) : (
<StyledLabel as="legend">{ label }</StyledLabel>
);
};
const UnconnectedBorderControl = (
props: WordPressComponentProps< BorderControlProps, 'div', false >,
forwardedRef: React.ForwardedRef< any >
) => {
const {
__next40pxDefaultSize = false,
colors,
disableCustomColors,
disableUnits,
enableAlpha,
enableStyle,
hideLabelFromVision,
innerWrapperClassName,
inputWidth,
isStyleSettable,
label,
onBorderChange,
onSliderChange,
onWidthChange,
placeholder,
__unstablePopoverProps,
previousStyleSelection,
showDropdownHeader,
size,
sliderClassName,
value: border,
widthUnit,
widthValue,
withSlider,
__experimentalIsRenderedInSidebar,
...otherProps
} = useBorderControl( props );
return (
<View as="fieldset" { ...otherProps } ref={ forwardedRef }>
<BorderLabel
label={ label }
hideLabelFromVision={ hideLabelFromVision }
/>
<HStack spacing={ 4 } className={ innerWrapperClassName }>
<UnitControl
prefix={
<BorderControlDropdown
border={ border }
colors={ colors }
__unstablePopoverProps={ __unstablePopoverProps }
disableCustomColors={ disableCustomColors }
enableAlpha={ enableAlpha }
enableStyle={ enableStyle }
isStyleSettable={ isStyleSettable }
onChange={ onBorderChange }
previousStyleSelection={ previousStyleSelection }
showDropdownHeader={ showDropdownHeader }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
size={ size }
/>
}
label={ __( 'Border width' ) }
hideLabelFromVision
min={ 0 }
onChange={ onWidthChange }
value={ border?.width || '' }
placeholder={ placeholder }
disableUnits={ disableUnits }
__unstableInputWidth={ inputWidth }
size={ size }
/>
{ withSlider && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Border width' ) }
hideLabelFromVision
className={ sliderClassName }
initialPosition={ 0 }
max={ 100 }
min={ 0 }
onChange={ onSliderChange }
step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
value={ widthValue || undefined }
withInputField={ false }
__next40pxDefaultSize={ __next40pxDefaultSize }
/>
) }
</HStack>
</View>
);
};
/**
* The `BorderControl` brings together internal sub-components which allow users to
* set the various properties of a border. The first sub-component, a
* `BorderDropdown` contains options representing border color and style. The
* border width is controlled via a `UnitControl` and an optional `RangeControl`.
*
* Border radius is not covered by this control as it may be desired separate to
* color, style, and width. For example, the border radius may be absorbed under
* a "shape" abstraction.
*
* ```jsx
* import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
* import { __ } from '@wordpress/i18n';
*
* const colors = [
* { name: 'Blue 20', color: '#72aee6' },
* // ...
* ];
*
* const MyBorderControl = () => {
* const [ border, setBorder ] = useState();
* const onChange = ( newBorder ) => setBorder( newBorder );
*
* return (
* <BorderControl
* colors={ colors }
* label={ __( 'Border' ) }
* onChange={ onChange }
* value={ border }
* />
* );
* };
* ```
*/
export const BorderControl = contextConnect(
UnconnectedBorderControl,
'BorderControl'
);
export default BorderControl;