Confronta il testo

Trova la differenza tra due file di testo

Editor live
Comprimi invariate
Senza a capo
Layout
Livello di dettaglio
Evidenziazione sintassi

Untitled diff

Creato Il diff non scade mai
9 rimozioni
54 linee
5 aggiunte
50 linee
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);


Diff salvati