jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
components
/
common
/
controls-popover.jsx
jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
components
/
common
Last commit date
controls-popover.jsx
3 months ago
controls-tabs-navigation.jsx
3 months ago
controls-tabs.jsx
3 months ago
popover-container.jsx
3 months ago
controls-popover.jsx
42 lines
| 1 | import { Popover, Button } from '@wordpress/components'; |
| 2 | |
| 3 | const ControlsPopover = ( { children, isOpen, onClose, label, anchor } ) => { |
| 4 | |
| 5 | if ( ! isOpen ) { |
| 6 | return null; |
| 7 | } |
| 8 | |
| 9 | const closeIcon = ( |
| 10 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg> |
| 11 | ); |
| 12 | |
| 13 | return ( |
| 14 | <Popover |
| 15 | className="crocoblock-style-manager__popover" |
| 16 | placement="left-start" |
| 17 | onClose={ onClose } |
| 18 | shouldCloseOnClickOutside={ true } |
| 19 | anchor={ anchor } |
| 20 | noArrow={ false } |
| 21 | shift={ true } |
| 22 | offset={ 10 } |
| 23 | > |
| 24 | <div className="crocoblock-style-manager__popover"> |
| 25 | <div className="crocoblock-style-manager__popover-header"> |
| 26 | { label} |
| 27 | <Button |
| 28 | className="crocoblock-style-manager__popover-close" |
| 29 | onClick={ onClose } |
| 30 | icon={ closeIcon } label="Close" |
| 31 | ></Button> |
| 32 | </div> |
| 33 | <div className="crocoblock-style-manager__popover-content"> |
| 34 | { children } |
| 35 | </div> |
| 36 | </div> |
| 37 | </Popover> |
| 38 | ); |
| 39 | }; |
| 40 | |
| 41 | export default ControlsPopover; |
| 42 |