@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
74 lines (73 loc) • 3.71 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { BiCheck, BiClipboard } from "react-icons/bi";
import { VuiOptionsButton } from "../optionsButton/OptionsButton";
import { VuiIcon } from "../icon/Icon";
import { VuiButtonSecondary } from "../button/ButtonSecondary";
import { copyToClipboard } from "../../utils/copyToClipboard";
const sizeToIconSizeMap = {
xs: "s",
s: "s",
m: "m",
l: "m",
xl: "m"
};
export const VuiCopyButton = (_a) => {
var { value, options, label, size = "s" } = _a, rest = __rest(_a, ["value", "options", "label", "size"]);
const [isOpen, setIsOpen] = useState(false);
const [isCopied, setIsCopied] = useState(false);
useEffect(() => {
if (isCopied) {
const timeout = setTimeout(() => {
setIsCopied(false);
}, 2400);
return () => clearTimeout(timeout);
}
}, [isCopied]);
const icon = isCopied ? (_jsx(VuiIcon, Object.assign({ size: sizeToIconSizeMap[size], color: "success" }, { children: _jsx(BiCheck, {}) }))) : (_jsx(VuiIcon, Object.assign({ size: sizeToIconSizeMap[size] }, { children: _jsx(BiClipboard, {}) })));
const copy = (copyValue = value) => __awaiter(void 0, void 0, void 0, function* () {
yield copyToClipboard(copyValue);
setIsCopied(true);
});
return options ? (_jsx(VuiOptionsButton, Object.assign({ type: "secondary", icon: icon, isOpen: isOpen, setIsOpen: setIsOpen, color: "neutral", size: size, onClickButton: (e) => {
// Enable placing this button inside other buttons without triggering
// the click event of the parent button.
e.preventDefault();
e.stopPropagation();
}, onClick: (e) => {
// Enable placing this button inside other buttons without triggering
// the click event of the parent button.
e.preventDefault();
e.stopPropagation();
copy();
}, onSelectOption: (value) => {
copy(value);
setIsOpen(false);
}, options: options }, rest, { children: label }))) : (_jsx(VuiButtonSecondary, Object.assign({ size: size, icon: icon, color: "neutral", onClick: (e) => {
// Enable placing this button inside other buttons without triggering
// the click event of the parent button.
e.preventDefault();
e.stopPropagation();
copy(value);
} }, rest, { children: label })));
};