@particle-network/connectkit
Version:
231 lines (225 loc) • 6.46 kB
JavaScript
"use client";
import {
button_default,
init_button
} from "./chunk-G4I34CN4.mjs";
import {
CopyIcon2_default,
init_CopyIcon2
} from "./chunk-FDSW5JWY.mjs";
import {
__esm
} from "./chunk-Y7A564BU.mjs";
// src/components/copyToClipboard/CopyToClipboardIcon.tsx
import { motion } from "framer-motion";
import { css, styled } from "styled-components";
import { jsx } from "react/jsx-runtime";
var IconContainer, CopyToClipboardIcon, CopyToClipboardIcon_default;
var init_CopyToClipboardIcon = __esm({
"src/components/copyToClipboard/CopyToClipboardIcon.tsx"() {
"use strict";
init_CopyIcon2();
IconContainer = styled(motion.div)`
transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 24px;
svg {
display: block;
}
svg,
svg path,
svg rect {
transition: inherit;
}
svg path:first-child {
transform-origin: 50% 50%;
fill: var(--pcm-body-background);
stroke: var(--pcm-body-color-secondary);
}
svg rect {
transform-origin: 53% 63%;
fill: var(--pcm-body-background);
stroke: var(--pcm-body-color-secondary);
}
svg path:last-child {
opacity: 0;
stroke: #fff !important;
transform: translate(11.75px, 10px) rotate(90deg) scale(0.6);
}
${(props) => props.$clipboard ? css`
svg {
transition-delay: 0ms;
path:first-child {
opacity: 0;
transform: rotate(-90deg) scale(0.2);
}
rect {
rx: 10px;
fill: var(--pcm-accent-color);
stroke: var(--pcm-accent-color);
transform: rotate(-90deg) scale(1.45);
}
path:last-child {
transition-delay: 100ms;
opacity: 1;
transform: translate(7.75px, 9.5px);
}
}
` : css`
&:hover {
}
&:hover:active {
}
`}
`;
CopyToClipboardIcon = ({ copied, small }) => /* @__PURE__ */ jsx(IconContainer, { $clipboard: copied, children: /* @__PURE__ */ jsx(
CopyIcon2_default,
{
style: {
transform: small ? "scale(1)" : "translateX(3px) scale(1.5)",
opacity: small || copied ? 1 : 0.6
}
}
) });
CopyToClipboardIcon_default = CopyToClipboardIcon;
}
});
// src/components/copyToClipboard/styles.ts
import { css as css2, styled as styled2 } from "styled-components";
var Container, OffsetContainer;
var init_styles = __esm({
"src/components/copyToClipboard/styles.ts"() {
"use strict";
Container = styled2.div`
transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
${(props) => props.$disabled ? css2`
cursor: not-allowed;
opacity: 0.4;
` : css2`
&:hover {
}
`}
`;
OffsetContainer = styled2.div`
display: flex;
gap: 4px;
position: relative;
transition: inherit;
align-items: center;
/* svg {
position: absolute;
display: block;
top: -2px;
margin: 0;
margin-left: 4px;
} */
`;
}
});
// src/components/copyToClipboard/index.tsx
import { useState } from "react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var CopyToClipboard, copyToClipboard_default;
var init_copyToClipboard = __esm({
"src/components/copyToClipboard/index.tsx"() {
"use strict";
init_button();
init_CopyToClipboardIcon();
init_styles();
CopyToClipboard = ({ string, children, variant }) => {
const [clipboard, setClipboard] = useState(false);
const [className, setClassName] = useState("copied-0");
let timeout;
function copyToClipboard(str) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(str).then(() => {
}).catch((err) => {
});
} else {
const textArea = document.createElement("textarea");
textArea.value = str;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
try {
document.execCommand("copy");
document.body.removeChild(textArea);
res(true);
} catch (err) {
document.body.removeChild(textArea);
rej(err);
}
});
}
}
const onCopy = () => {
if (!string)
return;
const str = string.trim();
copyToClipboard(str);
setClipboard(true);
setClassName("copied");
clearTimeout(timeout);
timeout = setTimeout(() => {
setClipboard(false);
setClassName("copied-0");
}, 1e3);
};
if (variant === "button")
return /* @__PURE__ */ jsx2(button_default, { disabled: !string, onClick: onCopy, className, children: /* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
gap: "8px",
alignItems: "center",
overflow: "hidden"
},
children: [
/* @__PURE__ */ jsx2(
"div",
{
style: {
width: "16px"
},
children: /* @__PURE__ */ jsx2(CopyToClipboardIcon_default, { copied: clipboard })
}
),
children
]
}
) });
return /* @__PURE__ */ jsx2(Container, { onClick: onCopy, $disabled: !string, className, children: /* @__PURE__ */ jsxs(OffsetContainer, { children: [
children,
/* @__PURE__ */ jsx2(
"div",
{
style: {
display: "flex",
alignItems: "center",
overflow: "hidden"
},
children: /* @__PURE__ */ jsx2(CopyToClipboardIcon_default, { copied: clipboard, small: true })
}
)
] }) });
};
copyToClipboard_default = CopyToClipboard;
}
});
export {
copyToClipboard_default,
init_copyToClipboard
};
//# sourceMappingURL=chunk-KFSERCOH.mjs.map