| 1 |
// Lives outside the .extendify-quick-edit prefix scope; modal styles need |
| 2 |
// the /* no-prefix */ marker to match the body-level DOM wp-components portals to. |
| 3 |
import { createRoot } from '@wordpress/element'; |
| 4 |
|
| 5 |
const ROOT_ID = 'extendify-quick-edit-modal-root'; |
| 6 |
|
| 7 |
// Modal's default "modal-open" trips quick-edit.css's wp.media hide rule. |
| 8 |
export const QE_MODAL_BODY_OPEN_CLASS = 'extendify-quick-edit-modal-open'; |
| 9 |
|
| 10 |
let modalRoot = null; |
| 11 |
let reactRoot = null; |
| 12 |
|
| 13 |
const ensureNode = () => { |
| 14 |
if (modalRoot?.isConnected) return modalRoot; |
| 15 |
modalRoot = document.createElement('div'); |
| 16 |
modalRoot.id = ROOT_ID; |
| 17 |
modalRoot.className = 'extendify-quick-edit'; |
| 18 |
document.body.appendChild(modalRoot); |
| 19 |
return modalRoot; |
| 20 |
}; |
| 21 |
|
| 22 |
export const mountModal = (element) => { |
| 23 |
const node = ensureNode(); |
| 24 |
if (!reactRoot) reactRoot = createRoot(node); |
| 25 |
reactRoot.render(element); |
| 26 |
}; |
| 27 |
|
| 28 |
export const closeModal = (reload) => { |
| 29 |
if (reactRoot) { |
| 30 |
reactRoot.unmount(); |
| 31 |
reactRoot = null; |
| 32 |
} |
| 33 |
if (modalRoot) { |
| 34 |
modalRoot.remove(); |
| 35 |
modalRoot = null; |
| 36 |
} |
| 37 |
if (reload) window.location.reload(); |
| 38 |
}; |
| 39 |
|
