Merge branch 'add-copyinput' into 'dev'

Add CopyInput bootstrap component

See merge request turris/reforis/foris-js!192

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>
+    );
+}

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
+/>;
+```

src/bootstrap/Input.js

@@ -1,14 +1,60 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * 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 from "react";
+import React, { forwardRef } from "react";
 import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
+/** Base bootstrap input component. */
+export const Input = forwardRef(
+    (
+        {
+            type,
+            label,
+            helpText,
+            error,
+            className,
+            children,
+            labelClassName,
+            groupClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const uid = useUID();
+
+        const inputClassName = `form-control ${className || ""} ${
+            error ? "is-invalid" : ""
+        }`.trim();
+
+        return (
+            <div className="form-group">
+                <label className={labelClassName} htmlFor={uid}>
+                    {label}
+                </label>
+                <div className={`input-group ${groupClassName || ""}`.trim()}>
+                    <input
+                        className={inputClassName}
+                        type={type}
+                        id={uid}
+                        ref={ref}
+                        {...props}
+                    />
+                    {children}
+                </div>
+                {error ? <div className="invalid-feedback">{error}</div> : null}
+                {helpText ? (
+                    <small className="form-text text-muted">{helpText}</small>
+                ) : null}
+            </div>
+        );
+    }
+);
+
 Input.propTypes = {
     type: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
@@ -22,41 +68,3 @@ Input.propTypes = {
     labelClassName: PropTypes.string,
     groupClassName: PropTypes.string,
 };
-
-/** Base bootstrap input component. */
-export function Input({
-    type,
-    label,
-    helpText,
-    error,
-    className,
-    children,
-    labelClassName,
-    groupClassName,
-    ...props
-}) {
-    const uid = useUID();
-    const inputClassName = `form-control ${className || ""} ${
-        error ? "is-invalid" : ""
-    }`.trim();
-    return (
-        <div className="form-group">
-            <label className={labelClassName} htmlFor={uid}>
-                {label}
-            </label>
-            <div className={`input-group ${groupClassName || ""}`.trim()}>
-                <input
-                    className={inputClassName}
-                    type={type}
-                    id={uid}
-                    {...props}
-                />
-                {children}
-            </div>
-            {error ? <div className="invalid-feedback">{error}</div> : null}
-            {helpText ? (
-                <small className="form-text text-muted">{helpText}</small>
-            ) : null}
-        </div>
-    );
-}

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";