AdvancedInspectorControl.js
2 years ago
AdvancedModalControl.js
2 years ago
BaseHelp.js
2 years ago
BaseLabel.js
2 years ago
ContainersList.js
2 years ago
DetailsContainer.js
2 years ago
GroupedSelectControl.js
2 years ago
HorizontalLine.js
2 years ago
HoverContainer.js
2 years ago
MacrosInserter.js
2 years ago
ToggleControl.js
2 years ago
MacrosInserter.js
68 lines
| 1 | const { |
| 2 | Button, |
| 3 | Popover, |
| 4 | PanelBody, |
| 5 | } = wp.components; |
| 6 | |
| 7 | const { |
| 8 | useState, |
| 9 | } = wp.element; |
| 10 | |
| 11 | function MacrosInserter( { |
| 12 | children, |
| 13 | fields, |
| 14 | onFieldClick, |
| 15 | customMacros, |
| 16 | zIndex = 1000000, |
| 17 | ...popoverProps |
| 18 | } ) { |
| 19 | |
| 20 | const [ showPopover, setPopoverState ] = useState( () => false ); |
| 21 | |
| 22 | return <div className="jet-form-editor__macros-inserter"> |
| 23 | <Button |
| 24 | isTertiary |
| 25 | isSmall |
| 26 | icon={ showPopover ? 'no-alt' : 'admin-tools' } |
| 27 | label={ 'Insert macros' } |
| 28 | className="jet-form-editor__macros-trigger" |
| 29 | onClick={ () => { |
| 30 | setPopoverState( prev => ! prev ); |
| 31 | } } |
| 32 | /> |
| 33 | { showPopover && ( |
| 34 | <Popover |
| 35 | style={ { zIndex } } |
| 36 | position={ 'bottom left' } |
| 37 | { ...popoverProps } |
| 38 | > |
| 39 | { fields.length && <PanelBody title={ 'Form Fields' }> |
| 40 | { fields.map( field => { |
| 41 | return <div key={ 'field_' + field.name }> |
| 42 | <Button |
| 43 | isLink |
| 44 | onClick={ () => { |
| 45 | onFieldClick( field.name ) |
| 46 | } } |
| 47 | >{ '%' + field.name + '%' }</Button> |
| 48 | </div>; |
| 49 | } ) } |
| 50 | </PanelBody> } |
| 51 | { customMacros && <PanelBody title={ 'Custom Macros' }> |
| 52 | { customMacros.map( macros => { |
| 53 | return <div key={ 'macros_' + macros }> |
| 54 | <Button |
| 55 | isLink |
| 56 | onClick={ () => { |
| 57 | onFieldClick( macros ) |
| 58 | } } |
| 59 | >{ '%' + macros + '%' }</Button> |
| 60 | </div>; |
| 61 | } ) } |
| 62 | </PanelBody> } |
| 63 | </Popover> |
| 64 | ) } |
| 65 | </div>; |
| 66 | } |
| 67 | |
| 68 | export default MacrosInserter; |