@selfcommunity/react-ui/lib/esm/shared/CopyTextArea/index.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Icon, IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
import { useThemeProps } from '@mui/system';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
const PREFIX = 'SCCopyTextField';
const classes = {
    root: `${PREFIX}-root`,
    btnCopy: `${PREFIX}-btn-copy`
};
const Root = styled(TextField, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({
    [`& .${classes.btnCopy}`]: {
        color: theme.palette.secondary.main
    },
    [`& .Mui-disabled`]: {
        color: `${theme.palette.primary.main} !important`,
        [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: `${theme.palette.primary.main} !important`
        }
    }
}));
export default function CopyTextField(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, label, value: _value, onCopy, onChange } = props, rest = __rest(props, ["className", "label", "value", "onCopy", "onChange"]);
    // STATE
    const [value, setValue] = useState(_value);
    const [openConfirm, setOpenConfirm] = useState(false);
    // REF
    const timeout = useRef(null);
    // HANDLERS
    const handleChange = (event) => {
        setValue(event.target.value);
        onChange && onChange(event.target.value);
    };
    const handleCopy = (value) => {
        navigator.clipboard.writeText(value).then(function () {
            /* clipboard successfully set */
            hanldeCopySuccess();
        }, function () {
            /* clipboard write failed */
            console.log('Failed to opy text!');
        });
    };
    const hanldeCopySuccess = () => {
        setOpenConfirm(true);
        if (timeout) {
            clearTimeout(timeout.current);
            timeout.current = null;
        }
        timeout.current = setTimeout(() => {
            setOpenConfirm(false);
            onCopy && onCopy(value);
        }, 1500);
    };
    const button = (_jsx(IconButton, Object.assign({ "aria-label": "Copy text", edge: "end", onClick: () => handleCopy(value), className: classes.btnCopy }, { children: _jsx(Icon, { children: "insert_link" }) })));
    // RENDER
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), label: label ? label : _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }), margin: "normal", variant: "outlined", disabled: true, fullWidth: true, value: value, multiline: true, onChange: handleChange, InputProps: {
            disableUnderline: true,
            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: openConfirm ? (_jsx(Tooltip, Object.assign({ open: openConfirm, PopperProps: { open: true }, title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textCopied", defaultMessage: "ui.shared.copyTextField.textCopied" }) }, { children: button }))) : (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }) }, { children: button }))) })))
        }, InputLabelProps: {
            shrink: true
        } }, rest)));
}