Comparer le texte

Trouver la différence entre deux fichiers texte

Éditeur live
Cacher identiques
Sans retour à la ligne
Vue
Niveau de précision
Coloration syntaxique

Untitled diff

Créé Le diff n'expire jamais
9 suppressions
54 lignes
5 ajouts
50 lignes
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érences enregistrées