copy to clipboard button

Author: miguelgrinberg

demo/README.md

@@ -2,3 +2,5 @@
 
 This is a small React application that demonstrates how to work with the
 Request Converter library.
+
+Try it out [here](https://elastic.github.io/request-converter).

demo/src/App.tsx

@@ -4,6 +4,9 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Stack from 'react-bootstrap/Stack';
 import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import ToastContainer from 'react-bootstrap/ToastContainer';
+import Toast from 'react-bootstrap/Toast';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { compareVersions } from 'compare-versions';
@@ -18,6 +21,7 @@ function App() {
   const [error, setError] = useState<string | null>(null);
   const [code, setCode] = useState<string>('Loading...');
   const [language, setLanguage] = useState<string>(formats[0]);
+  const [showClipboardMsg, setShowClipboardMsg] = useState(false);
 
   useEffect(() => {
     const sourceElem = document.getElementById("source");
@@ -71,15 +75,43 @@ function App() {
     })();
   }, [hasSchema, source, language]);
 
-  const onRequestChanged = (ev: React.ChangeEvent<HTMLSelectElement>) => {
+  const onRequestChanged = (ev: React.ChangeEvent<HTMLSelectElement>): null => {
     setSource(ev.target.value);
     ev.target.style.height = ev.target.scrollHeight + "px";
   };
 
+  const copyToClipboard = async () => {
+    await navigator.clipboard.writeText(code);
+    setShowClipboardMsg(true);
+  };
+
   return (
     <Container id="main-container">
-      <h1>Elasticsearch Request Converter Demo</h1>
-      <p>→ <a href="./docs/index.html">Library documentation</a></p>
+      <div aria-live="polite" aria-atomic="true" className="position-relative">
+        <ToastContainer className="clipboard-toast p-3" position="top-end" style={{ zIndex: 1 }}>
+          <Toast onClose={() => setShowClipboardMsg(false)} show={showClipboardMsg} delay={2000} autohide>
+            <Toast.Body>Copied to clipboard!</Toast.Body>
+          </Toast>
+        </ToastContainer>
+      </div>
+      <Row>
+        <Col>
+          <h1>Elasticsearch Request Converter Demo</h1>
+        </Col>
+        <Col sm="auto">
+          <p>
+            <small>
+              <svg width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Interface / External_Link"> <path id="Vector" d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </g> </g></svg>
+              &nbsp;
+              <a href="https://github.com/elastic/request-converter">GitHub project</a>
+              <br />
+              <svg width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Interface / External_Link"> <path id="Vector" d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </g> </g></svg>
+              &nbsp;
+              <a href="./docs/index.html">Library documentation</a>
+            </small>
+          </p>
+        </Col>
+      </Row>
       <Row>
         <Col className="col-6">
           <Stack direction="horizontal" className="heading">
@@ -91,12 +123,13 @@ function App() {
           </Stack>
         </Col>
         <Col className="col-6">
-          <Stack direction="horizontal" className="heading">
+          <Stack direction="horizontal" className="heading" gap={1}>
             <p>Converted&nbsp;Code</p>
             <p className="spacer"></p>
             <Form.Select id="language-choice" size="sm" defaultValue={language} onChange={ev => setLanguage(ev.target.value)}>
               {formats.map(fmt => <option key={fmt} value={fmt}>{fmt}</option>)}
             </Form.Select>
+            <Button className="copy-clipboard" size="sm" variant="outline-secondary" onClick={() => copyToClipboard()}>&#x2398;</Button>
           </Stack>
         </Col>
       </Row>

demo/src/index.css

@@ -1,10 +1,3 @@
-html, body, #root {
-  margin-top: 0;
-  margin-bottom: 0;
-  height: 100%;
-  min-height: 100%;
-}
-
 body {
   color: #444;
 }
@@ -22,6 +15,10 @@ textarea.form-control {
   font-size: 14px;
 }
 
+#main-container {
+  margin-top: 10px;
+}
+
 .heading {
   align-items: baseline;
 }
@@ -41,4 +38,18 @@ pre {
   white-space: pre-wrap;
 }
 
+.copy-clipboard {
+  line-height: 0.5em;
+  padding-bottom: 11px;
+  font-size: 150%;
+  border: 1px solid #ddd;
+}
+
+.clipboard-toast {
+  margin-top: 90px;
+  width: 200px;
+}
 
+.clipboard-toast .toast {
+  background-color: #eee;
+}