@prezly/theme-kit-ui
Version:
UI components for Prezly themes
83 lines • 3.05 kB
JavaScript
import { ArrowUpIcon, LinkIcon } from '@heroicons/react/24/outline';
import React, { useEffect, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import { ShareButton } from "./ShareButton.mjs";
var SCROLL_TOP_MIN_HEIGHT = 300;
export function StoryShareLinks(_ref) {
var {
className,
iconClassName,
shareUrl,
onUrlCopied,
withScrollToTopButton,
layout = 'horizontal'
} = _ref;
var [isScrollToTopVisible, setIsScrollToTopVisible] = useState(false);
function copyShareUrl(event) {
event === null || event === void 0 || event.preventDefault();
if (!shareUrl) return;
window.navigator.clipboard.writeText(shareUrl);
onUrlCopied === null || onUrlCopied === void 0 || onUrlCopied();
}
useEffect(() => {
function scrollListener() {
setIsScrollToTopVisible(document.body.scrollTop > SCROLL_TOP_MIN_HEIGHT || document.documentElement.scrollTop > SCROLL_TOP_MIN_HEIGHT);
}
if (typeof window !== 'undefined') {
window.onscroll = scrollListener;
}
return () => {
if (typeof window !== 'undefined') {
window.onscroll = null;
}
};
}, []);
if (!shareUrl) {
return null;
}
function scrollToTop(event) {
event === null || event === void 0 || event.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
return /*#__PURE__*/React.createElement("div", {
className: twMerge("flex items-center rounded border border-gray-200 w-max overflow-hidden", layout === 'vertical' && "flex-col h-max", className)
}, /*#__PURE__*/React.createElement(ShareButton, {
network: "facebook",
shareUrl: shareUrl,
iconClassName: iconClassName,
layout: layout
}), /*#__PURE__*/React.createElement(ShareButton, {
network: "twitter",
shareUrl: shareUrl,
iconClassName: iconClassName,
layout: layout
}), /*#__PURE__*/React.createElement(ShareButton, {
network: "linkedin",
shareUrl: shareUrl,
iconClassName: iconClassName,
layout: layout
}), /*#__PURE__*/React.createElement("a", {
href: "#",
target: "_blank",
rel: "noopener noreferrer",
title: "Copy URL",
"aria-label": "Copy URL",
className: twMerge('p-3 border-gray-200 bg-white hover:bg-gray-100 active:bg-gray-200', layout === 'vertical' ? "border-b last:border-b-0" : "border-r last:border-r-0"),
onClick: copyShareUrl
}, /*#__PURE__*/React.createElement(LinkIcon, {
className: twMerge('text-gray-800 w-5', iconClassName)
})), withScrollToTopButton && isScrollToTopVisible && /*#__PURE__*/React.createElement("a", {
href: "#",
target: "_blank",
rel: "noopener noreferrer",
title: "Go to top",
"aria-label": "Go to top",
className: twMerge('p-3 border-gray-200 bg-white hover:bg-gray-100 active:bg-gray-200', layout === 'vertical' ? "border-b last:border-b-0" : "border-r last:border-r-0"),
onClick: scrollToTop
}, /*#__PURE__*/React.createElement(ArrowUpIcon, {
className: twMerge('text-gray-800 w-5', iconClassName)
})));
}