AdvancedRuleItem.js
2 years ago
AdvancedRuleModalItem.js
2 years ago
AdvancedRulesIsEmpty.js
2 years ago
AdvancedRulesList.js
2 years ago
AdvancedRulesModal.js
2 years ago
ChooseRelatedField.js
2 years ago
EditAdvancedRulesButton.js
2 years ago
EditRulesModalContext.js
2 years ago
HumanReadableRule.js
2 years ago
ValidationBlockMessage.js
2 years ago
ValidationMetaMessage.js
2 years ago
ValidationToggleGroup.js
2 years ago
ValidationToggleGroup.js
53 lines
| 1 | import useBlockAttributes from '../../blocks/hooks/useBlockAttributes'; |
| 2 | import useUniqKey from '../../blocks/hooks/useUniqKey'; |
| 3 | |
| 4 | const { |
| 5 | __experimentalToggleGroupControl: ToggleGroupControl, |
| 6 | __experimentalToggleGroupControlOption: ToggleGroupControlOption, |
| 7 | } = wp.components; |
| 8 | |
| 9 | const { __ } = wp.i18n; |
| 10 | |
| 11 | let { formats } = window.jetFormValidation; |
| 12 | |
| 13 | function ValidationToggleGroup( { excludeBrowser = false } ) { |
| 14 | const [ attributes, setAttributes ] = useBlockAttributes(); |
| 15 | const uniqKey = useUniqKey(); |
| 16 | |
| 17 | formats = formats.filter( |
| 18 | ( { value } ) => value !== 'browser' || !excludeBrowser, |
| 19 | ); |
| 20 | |
| 21 | return <ToggleGroupControl |
| 22 | onChange={ type => setAttributes( prev => ( |
| 23 | { |
| 24 | ...prev, |
| 25 | validation: { |
| 26 | ...attributes.validation, |
| 27 | type, |
| 28 | }, |
| 29 | } |
| 30 | ) ) } |
| 31 | value={ attributes.validation?.type ?? '' } |
| 32 | label={ __( 'Validation type', 'jet-form-builder' ) } |
| 33 | isBlock={ true } |
| 34 | isAdaptiveWidth={ false } |
| 35 | > |
| 36 | <ToggleGroupControlOption |
| 37 | label={ __( 'Inherit', 'jet-form-builder' ) } |
| 38 | value={ '' } |
| 39 | aria-label={ __( 'Inherit from form\'s args', 'jet-form-builder' ) } |
| 40 | showTooltip |
| 41 | /> |
| 42 | { formats.map( |
| 43 | current => <ToggleGroupControlOption |
| 44 | key={ uniqKey( current.value + '_key' ) } |
| 45 | label={ current.label } |
| 46 | value={ current.value } |
| 47 | aria-label={ current.title } |
| 48 | showTooltip |
| 49 | /> ) } |
| 50 | </ToggleGroupControl>; |
| 51 | } |
| 52 | |
| 53 | export default ValidationToggleGroup; |