ActionModal.js
92 lines
| 1 | import ActionModalContext from '../context/ActionModalContext'; |
| 2 | |
| 3 | const { |
| 4 | Button, |
| 5 | ButtonGroup, |
| 6 | Modal, |
| 7 | } = wp.components; |
| 8 | |
| 9 | const { |
| 10 | useState, |
| 11 | } = wp.element; |
| 12 | |
| 13 | function ActionModal( { |
| 14 | onRequestClose, |
| 15 | children, |
| 16 | title = '', |
| 17 | classNames = [], |
| 18 | onUpdateClick, |
| 19 | onCancelClick, |
| 20 | updateBtnLabel = 'Update', |
| 21 | updateBtnProps = {}, |
| 22 | cancelBtnProps = {}, |
| 23 | cancelBtnLabel = 'Cancel', |
| 24 | fixedHeight = '', |
| 25 | isUseActions = true |
| 26 | } ) { |
| 27 | |
| 28 | const modalClasses = [ 'jet-form-edit-modal', ...classNames ]; |
| 29 | |
| 30 | const [ actionClick, setActionClick ] = useState( null ); |
| 31 | |
| 32 | const updateClick = () => { |
| 33 | if ( onUpdateClick ) { |
| 34 | onUpdateClick(); |
| 35 | } |
| 36 | setActionClick( true ); |
| 37 | }; |
| 38 | const cancelClick = () => { |
| 39 | if ( onCancelClick ) { |
| 40 | onCancelClick(); |
| 41 | } |
| 42 | setActionClick( false ); |
| 43 | }; |
| 44 | |
| 45 | let style = {}; |
| 46 | if ( fixedHeight ) { |
| 47 | style = { height: fixedHeight }; |
| 48 | modalClasses.push( 'jet-modal-fixed-height' ); |
| 49 | } |
| 50 | |
| 51 | return <Modal |
| 52 | onRequestClose={ onRequestClose } |
| 53 | className={ modalClasses.join( ' ' ) } |
| 54 | title={ title } |
| 55 | style={ style } |
| 56 | > |
| 57 | { ! children && <div |
| 58 | className="jet-form-edit-modal__content" |
| 59 | > |
| 60 | { 'Action callback is not found.' } |
| 61 | </div> } |
| 62 | { children && <> |
| 63 | <div className='jet-form-edit-modal__wrapper'> |
| 64 | <ActionModalContext.Provider value={ { actionClick, onRequestClose } }> |
| 65 | <div className="jet-form-edit-modal__content"> |
| 66 | { 'function' === typeof children && children( { actionClick, onRequestClose } ) } |
| 67 | { 'function' !== typeof children && children } |
| 68 | </div> |
| 69 | </ActionModalContext.Provider> |
| 70 | </div> |
| 71 | { isUseActions && <ButtonGroup |
| 72 | className="jet-form-edit-modal__actions" |
| 73 | > |
| 74 | <Button |
| 75 | isPrimary |
| 76 | onClick={ updateClick } |
| 77 | { ...updateBtnProps } |
| 78 | >{ updateBtnLabel }</Button> |
| 79 | <Button |
| 80 | isSecondary |
| 81 | style={ { |
| 82 | margin: '0 0 0 10px', |
| 83 | } } |
| 84 | onClick={ cancelClick } |
| 85 | { ...cancelBtnProps } |
| 86 | >{ cancelBtnLabel }</Button> |
| 87 | </ButtonGroup> } |
| 88 | </> } |
| 89 | </Modal>; |
| 90 | } |
| 91 | |
| 92 | export default ActionModal; |