@prezly/theme-kit-ui
Version:
UI components for Prezly themes
91 lines (90 loc) • 4.22 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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__*/_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)
})));
}