terriajs
Version:
Geospatial data visualization platform.
81 lines • 3.81 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import styled, { useTheme } from "styled-components";
import Box from "../Styled/Box";
import Button from "../Styled/Button";
import Icon, { StyledIcon } from "../Styled/Icon";
import Input from "../Styled/Input";
import Spacing from "../Styled/Spacing";
import { TextSpan } from "../Styled/Text";
var CopyStatus;
(function (CopyStatus) {
CopyStatus[CopyStatus["Success"] = 0] = "Success";
CopyStatus[CopyStatus["Error"] = 1] = "Error";
CopyStatus[CopyStatus["Default"] = 2] = "Default";
})(CopyStatus || (CopyStatus = {}));
const Clipboard = (props) => {
const { text, inputTheme, inputPlaceholder, onCopy, createdMessage } = props;
const { t } = useTranslation();
const styledTheme = useTheme();
const [status, setStatus] = useState(CopyStatus.Default);
const [showCreatedMessage, setShowCreatedMessage] = useState(false);
const prevTextRef = useRef(text);
useEffect(() => {
if (createdMessage && !prevTextRef.current && text) {
setShowCreatedMessage(true);
}
prevTextRef.current = text;
}, [text, createdMessage]);
const handleCopy = async () => {
setShowCreatedMessage(false);
try {
if (text) {
await navigator.clipboard.writeText(text);
setStatus(CopyStatus.Success);
if (onCopy)
onCopy(text);
}
else {
setStatus(CopyStatus.Error);
}
}
catch {
setStatus(CopyStatus.Error);
}
};
useEffect(() => {
if (status === CopyStatus.Success || status === CopyStatus.Error) {
const timer = setTimeout(() => {
setStatus(CopyStatus.Default);
}, props.timeout ?? 3000);
return () => clearTimeout(timer);
}
}, [status, props.timeout]);
const canCopy = !!navigator.clipboard;
const statusMessage = status === CopyStatus.Error
? t("clipboard.unsuccessful")
: status === CopyStatus.Success
? t("clipboard.success")
: createdMessage;
return (_jsxs(ClipboardDiv, { children: [_jsxs(Box, { children: [_jsx(Input, { light: inputTheme === "light", dark: inputTheme === "dark", large: true, type: "text", value: text, placeholder: inputPlaceholder ?? t("share.shortLinkShortening"), readOnly: true, onClick: (e) => e.currentTarget.select() }), canCopy && (_jsx(Button, { onClick: handleCopy, primary: true, css: `
width: 80px;
border-radius: 0 2px 2px 0;
`, textProps: { large: true }, children: t("clipboard.copy") }))] }), (canCopy && status !== CopyStatus.Default) || showCreatedMessage ? (_jsxs(_Fragment, { children: [_jsx(Spacing, { bottom: 1 }), _jsxs(Box, { verticalCenter: true, children: [_jsx(StyledIcon, { light: true, glyph: status === CopyStatus.Error
? Icon.GLYPHS.close
: Icon.GLYPHS.selected, styledWidth: "16px", css: `
margin: 5px;
margin-left: 0;
display: inline-block;
${status !== CopyStatus.Error &&
`fill: ${styledTheme.textSuccess};`}
` }), _jsx(TextSpan, { medium: true, css: `
${status !== CopyStatus.Error &&
`color: ${styledTheme.textSuccess};`}
`, children: statusMessage })] })] })) : null] }));
};
export default Clipboard;
const ClipboardDiv = styled.div `
position: relative;
`;
//# sourceMappingURL=Clipboard.js.map