Untitled diff

Created Diff never expires
10 removals
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
54 lines
5 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
50 lines
import React, { useState } from "react";
import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDOM from "react-dom";
import ClayButton from "@clayui/button";
import ClayButton from "@clayui/button";
import ClayModal, { useModal } from "@clayui/modal";
import ClayModal, { useModal } from "@clayui/modal";


import "@clayui/css/lib/css/atlas.css";
import "@clayui/css/lib/css/atlas.css";


function Modal({ onModalClose }) {
function Modal({ observer, onClose }) {
const { observer, onClose } = useModal({
onClose: onModalClose
});

return (
return (
<ClayModal observer={observer} size="md">
<ClayModal observer={observer} size="md">
<ClayModal.Header>
<ClayModal.Header>
<h1>Yay! I'm a modal</h1>
<h1>Yay! I'm a modal</h1>
</ClayModal.Header>
</ClayModal.Header>
<ClayModal.Body>
<ClayModal.Body>
<p>
<p>
Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta
Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta
pork loin bresaola, flank beef corned beef doner meatloaf venison
pork loin bresaola, flank beef corned beef doner meatloaf venison
pancetta.
pancetta.
</p>
</p>
</ClayModal.Body>
</ClayModal.Body>
<ClayModal.Footer
<ClayModal.Footer
last={
last={
<ClayButton.Group spaced>
<ClayButton.Group spaced>
<ClayButton displayType="secondary" onClick={onClose}>
<ClayButton displayType="secondary" onClick={onClose}>
Close me
Close me
</ClayButton>
</ClayButton>
</ClayButton.Group>
</ClayButton.Group>
}
}
/>
/>
</ClayModal>
</ClayModal>
);
);
}
}


function App() {
function App() {
const [showModal, setShowModal] = useState(true);
const [showModal, setShowModal] = useState(true);


const handleClose = () => {
const { observer, onClose } = useModal({
setShowModal(false);
onClose: () => setShowModal(false)
};
});


return (
return (
<div className="App">
<div className="App">
{showModal && <Modal onModalClose={handleClose} />}
{showModal && <Modal observer={observer} onClose={onClose} />}
</div>
</div>
);
);
}
}


const rootElement = document.getElementById("root");
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
ReactDOM.render(<App />, rootElement);