From 46ce6ebbb906a05355956ee132ca24e04eb26bc5 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian 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 ( + +
+ +
+ + ); +} 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 `` HTML component. + +```js +import React, { useState } from "react"; +const [value, setValue] = useState("Text to appear in clipboard."); + +; +``` 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";