1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-24 00:01:36 +01:00

Merge branch 'add-copyinput' into 'dev'

Add CopyInput bootstrap component

See merge request turris/reforis/foris-js!192
This commit is contained in:
Aleksandr Gumroian 2022-05-19 16:09:31 +02:00
commit 92ed7f1ee7
4 changed files with 126 additions and 40 deletions

View File

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

View File

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

View File

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

View File

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