wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
42 lines • 2.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnchoredTitle = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var wix_ui_icons_common_1 = require("@wix/wix-ui-icons-common");
var copy_to_clipboard_1 = tslib_1.__importDefault(require("copy-to-clipboard"));
var react_tooltip_1 = tslib_1.__importDefault(require("react-tooltip"));
var addons_1 = tslib_1.__importDefault(require("@storybook/addons"));
var Heading_1 = tslib_1.__importDefault(require("../Heading"));
var AnchoredTitle_st_css_1 = require("./AnchoredTitle.st.css");
var AnchoredTitle = function (_a) {
var title = _a.title, _b = _a.children, children = _b === void 0 ? null : _b;
var _c = (0, react_1.useState)(false), copied = _c[0], setCopied = _c[1];
var id = title.replace(/\s+/g, '_');
var copyLinkRef = (0, react_1.useRef)(null);
var onCopy = function (event) {
event.preventDefault();
setCopied(true);
addons_1.default.getChannel().emit('navigateUrl', "#".concat(id));
setTimeout(function () {
(0, copy_to_clipboard_1.default)(new URL(window.parent.location).href);
});
};
var onMouseEnter = function () { return react_tooltip_1.default.show(copyLinkRef.current); };
var onMouseLeave = function () {
return react_tooltip_1.default.hide(copyLinkRef.current) && setCopied(false);
};
var onAnchorClicked = function (event) {
return children ? onCopy(event) : event.preventDefault();
};
return (react_1.default.createElement("div", { className: AnchoredTitle_st_css_1.classes.root, onClick: !children && onCopy, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
react_1.default.createElement("a", { ref: copyLinkRef, "data-for": id, "data-tip": true, className: AnchoredTitle_st_css_1.classes.link, id: id, href: "#".concat(id), target: "_self", onClick: onAnchorClicked },
react_1.default.createElement(wix_ui_icons_common_1.LinkSmall, null)),
!children ? react_1.default.createElement(Heading_1.default, { as: "h3" }, title) : children,
react_1.default.createElement(react_tooltip_1.default, { id: id, effect: "solid", arrowColor: "transparent", offset: { top: -5 }, className: AnchoredTitle_st_css_1.classes.tooltip },
react_1.default.createElement("div", { className: AnchoredTitle_st_css_1.classes.tooltipContent },
copied && react_1.default.createElement(wix_ui_icons_common_1.ConfirmSmall, null),
copied ? 'Copied' : 'Copy Link'))));
};
exports.AnchoredTitle = AnchoredTitle;
//# sourceMappingURL=AnchoredTitle.js.map