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 ( + +