jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
components
/
controls
/
choose.jsx
jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
components
/
controls
Last commit date
border.jsx
3 months ago
choose.jsx
3 months ago
color.jsx
3 months ago
dimensions.jsx
3 months ago
heading.jsx
3 months ago
range.jsx
3 months ago
text.jsx
3 months ago
toggle.jsx
3 months ago
typography.jsx
3 months ago
choose.jsx
59 lines
| 1 | import { |
| 2 | __experimentalToggleGroupControl as ToggleGroupControl, |
| 3 | __experimentalToggleGroupControlOption as ToggleGroupControlOption, |
| 4 | __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, |
| 5 | Dashicon, |
| 6 | } from '@wordpress/components'; |
| 7 | |
| 8 | const ControlChoose = ( { control, value, handleChange } ) => { |
| 9 | |
| 10 | let controlValue = value; |
| 11 | |
| 12 | if ( undefined === controlValue && control.options ) { |
| 13 | // If the value is undefined, set it to the first option |
| 14 | controlValue = Object.keys( control.options )[ 0 ]; |
| 15 | } |
| 16 | |
| 17 | return ( |
| 18 | <ToggleGroupControl |
| 19 | label={ control.label } |
| 20 | value={ value } |
| 21 | onChange={ handleChange } |
| 22 | isBlock |
| 23 | __next40pxDefaultSize |
| 24 | __nextHasNoMarginBottom |
| 25 | > |
| 26 | { control.options && Object.entries( control.options ).map( ( [ optionValue, optionData ] ) => { |
| 27 | |
| 28 | var icon = optionData.icon || false; |
| 29 | |
| 30 | if ( icon ) { |
| 31 | if ( icon.includes( 'dashicons-' ) ) { |
| 32 | icon = icon.replace( 'dashicons-', '' ); |
| 33 | } |
| 34 | |
| 35 | icon = <Dashicon icon={ icon } />; |
| 36 | } |
| 37 | |
| 38 | if ( icon ) { |
| 39 | return ( <ToggleGroupControlOptionIcon |
| 40 | icon={ icon } |
| 41 | value={ optionValue } |
| 42 | label={ optionData.label } |
| 43 | aria-label={ optionData.label } |
| 44 | /> ); |
| 45 | } else { |
| 46 | return ( <ToggleGroupControlOption |
| 47 | key={ optionValue } |
| 48 | value={ optionValue } |
| 49 | label={ optionData.label } |
| 50 | aria-label={ optionData.label } |
| 51 | /> ); |
| 52 | } |
| 53 | |
| 54 | } ) } |
| 55 | </ToggleGroupControl> |
| 56 | ); |
| 57 | } |
| 58 | |
| 59 | export default ControlChoose; |