From 46ce6ebbb906a05355956ee132ca24e04eb26bc5 Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Wed, 13 Apr 2022 15:50:08 +0200
Subject: [PATCH] Add CopyInput bootstrap component

---
 src/bootstrap/CopyInput.js | 60 ++++++++++++++++++++++++++++++++++++++
 src/bootstrap/CopyInput.md | 17 +++++++++++
 src/index.js               |  1 +
 3 files changed, 78 insertions(+)
 create mode 100644 src/bootstrap/CopyInput.js
 create mode 100644 src/bootstrap/CopyInput.md

diff --git a/src/bootstrap/CopyInput.js b/src/bootstrap/CopyInput.js
new file mode 100644
index 0000000..c87329b
--- /dev/null
+++ b/src/bootstrap/CopyInput.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
+import { Input } from "./Input";
+
+CopyInput.propTypes = {
+    /** Field label. */
+    label: PropTypes.string.isRequired,
+    /** Field value. */
+    value: PropTypes.string,
+    /** Help text message. */
+    helpText: PropTypes.string,
+    /** Disable input field */
+    disabled: PropTypes.bool,
+    /** Readonly input field */
+    readOnly: PropTypes.bool,
+};
+
+export function CopyInput({ value, ...props }) {
+    const inputTextRef = useRef();
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopyClick = async () => {
+        // Clipboard API works only in a secure (HTTPS) context.
+        if (navigator.clipboard) {
+            await navigator.clipboard.writeText(value);
+        } else {
+            // Fallback to the "classic" copy to clipboard implementation.
+            inputTextRef.current.focus();
+            inputTextRef.current.select();
+            document.execCommand("copy");
+            inputTextRef.current.blur();
+        }
+
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1500);
+    };
+
+    return (
+        <Input type="text" value={value} ref={inputTextRef} {...props}>
+            <div className="input-group-append">
+                <button
+                    className="btn btn-outline-secondary"
+                    type="button"
+                    onClick={handleCopyClick}
+                >
+                    <span>{isCopied ? _("Copied!") : _("Copy")}</span>
+                </button>
+            </div>
+        </Input>
+    );
+}
diff --git a/src/bootstrap/CopyInput.md b/src/bootstrap/CopyInput.md
new file mode 100644
index 0000000..dcd6b4c
--- /dev/null
+++ b/src/bootstrap/CopyInput.md
@@ -0,0 +1,17 @@
+CopyInput Bootstrap component contains input with a label, predefined sizes, and
+structure for use in ForisForm and the "Copy" button (copy to clipboard). It can
+be used with `readOnly` and `disabled` parameters, please see an example.
+
+All additional `props` are passed to the `<input type="text">` HTML component.
+
+```js
+import React, { useState } from "react";
+const [value, setValue] = useState("Text to appear in clipboard.");
+
+<CopyInput
+    label="Copy me"
+    value={value}
+    helpText="Read the small text!"
+    readOnly
+/>;
+```
diff --git a/src/index.js b/src/index.js
index ee7edad..c52f1fa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,6 +20,7 @@ export { API_STATE } from "./api/utils";
 export { Alert, ALERT_TYPES } from "./bootstrap/Alert";
 export { Button } from "./bootstrap/Button";
 export { CheckBox } from "./bootstrap/CheckBox";
+export { CopyInput } from "./bootstrap/CopyInput";
 export { DownloadButton } from "./bootstrap/DownloadButton";
 export { DataTimeInput } from "./bootstrap/DataTimeInput";
 export { EmailInput } from "./bootstrap/EmailInput";