| 1 |
import React, { useState } from "react"; |
| 2 |
import Modal from "react-modal"; |
| 3 |
|
| 4 |
const { useSelect } = wp.data; |
| 5 |
|
| 6 |
const ModalContainer = () => { |
| 7 |
const [isOpen, toggleOpen] = useState(false); |
| 8 |
const onButtonClick = () => { |
| 9 |
toggleOpen(!isOpen); |
| 10 |
}; |
| 11 |
|
| 12 |
const onExportClick = () => { |
| 13 |
const content = useSelect((select) => |
| 14 |
select("core/editor").getEditedPostContent() |
| 15 |
); |
| 16 |
}; |
| 17 |
|
| 18 |
return ( |
| 19 |
<div> |
| 20 |
<button onClick={onButtonClick}>EB Cloud</button> |
| 21 |
<Modal isOpen={isOpen} style={customStyles}> |
| 22 |
<h1>Cloud items here</h1> |
| 23 |
<button onClick={() => onExportClick()}>Export</button> |
| 24 |
</Modal> |
| 25 |
</div> |
| 26 |
); |
| 27 |
}; |
| 28 |
|
| 29 |
// Styles for modal |
| 30 |
const customStyles = { |
| 31 |
content: { |
| 32 |
top: "50%", |
| 33 |
left: "50%", |
| 34 |
right: "auto", |
| 35 |
bottom: "auto", |
| 36 |
marginRight: "-50%", |
| 37 |
transform: "translate(-50%, -50%)", |
| 38 |
}, |
| 39 |
}; |
| 40 |
|
| 41 |
export default ModalContainer; |
| 42 |
|
