@prezly/theme-kit-ui
Version:
UI components for Prezly themes
93 lines (92 loc) • 4.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StoryShareLinks = StoryShareLinks;
var _outline = require("@heroicons/react/24/outline");
var _react = _interopRequireWildcard(require("react"));
var _tailwindMerge = require("tailwind-merge");
var _ShareButton = require("./ShareButton.cjs");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var SCROLL_TOP_MIN_HEIGHT = 300;
function StoryShareLinks(_ref) {
var {
className,
iconClassName,
shareUrl,
onUrlCopied,
withScrollToTopButton,
layout = 'horizontal'
} = _ref;
var [isScrollToTopVisible, setIsScrollToTopVisible] = (0, _react.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();
}
(0, _react.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.default.createElement("div", {
className: (0, _tailwindMerge.twMerge)('flex items-center rounded border border-gray-200 w-max overflow-hidden', layout === 'vertical' && 'flex-col h-max', className)
}, /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButton, {
network: "facebook",
shareUrl: shareUrl,
iconClassName: iconClassName,
layout: layout
}), /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButton, {
network: "twitter",
shareUrl: shareUrl,
iconClassName: iconClassName,
layout: layout
}), /*#__PURE__*/_react.default.createElement(_ShareButton.ShareButton, {
network: "linkedin",
shareUrl: shareUrl,
iconClassName: iconClassName,
layout: layout
}), /*#__PURE__*/_react.default.createElement("a", {
href: "#",
target: "_blank",
rel: "noopener noreferrer",
title: "Copy URL",
"aria-label": "Copy URL",
className: (0, _tailwindMerge.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.default.createElement(_outline.LinkIcon, {
className: (0, _tailwindMerge.twMerge)('text-gray-800 w-5', iconClassName)
})), withScrollToTopButton && isScrollToTopVisible &&
/*#__PURE__*/
// biome-ignore lint/a11y/useValidAnchor: <...>
_react.default.createElement("a", {
href: "#",
target: "_blank",
rel: "noopener noreferrer",
title: "Go to top",
"aria-label": "Go to top",
className: (0, _tailwindMerge.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.default.createElement(_outline.ArrowUpIcon, {
className: (0, _tailwindMerge.twMerge)('text-gray-800 w-5', iconClassName)
})));
}