@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
185 lines (183 loc) • 11.1 kB
JavaScript
/* breadcrumbs-current-item.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./breadcrumbs-current-item.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
var _css = require("@atlaskit/css");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _anchor = require("@atlaskit/primitives/compiled/anchor");
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
var _useBreadcrumbsSize = require("./internal/use-breadcrumbs-size");
var _useOverflowable3 = _interopRequireDefault(require("./internal/use-overflowable"));
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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var analyticsAttributes = {
componentName: 'breadcrumbsCurrentItem',
packageName: "@atlaskit/breadcrumbs",
packageVersion: "17.8.3"
};
var COPY_RESET_DELAY_MS = 2000;
var ICON_WIDTH_ESTIMATE = 24;
var unboundedStyles = {
container: "_zulp1b66 _2rko12b0 _1rjcv77o _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k8s _1ql7kb7n",
itemWrapper: "_1e0c1txw _vchhusvi _p12f1osq _4cvr1h6o _1wpz1h6o _2lx2vrvc _ect4ttxp _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t",
copyButtonWrapper: "_1e0c116y _tzy4idpf _gwqekb7n _1mygkb7n",
iconWrapper: "_syaz1cv2",
iconWrapperSmall: "_w8l57vkz _17527vkz"
};
var styles = {
interactiveContainer: "_zulp1b66 _4bfu1r31 _1hmsglyw _ajmmnqa1 _11c8fhey _1e0c116y _4cvr1h6o _vchhusvi _syazi7uo _9oik1r31 _1bnx8stv _jf4cnqa1 _30l3i7uo _9h8hi7uo",
interactiveContainerMotion: "_v5641rrn _1hms8stv _4bfu1j28 _o7kshxmd _9oiki7uo _1ggl87vo _1nrmi7uo",
interactiveContainerSmall: "_11c8wadc",
interactiveContainerLegacy: "_4t3i1k8s",
interactiveContainerWithTruncation: "_1ul9idpf _1o9zkb7n",
iconWrapper: "_1reo15vq _18m915vq _1e0c116y _1o9zidpf _1bsb1tcg _4t3i1tcg _4cvr1h6o _1bah1h6o",
iconWrapperExternal: "_12l2v77o",
iconWrapperExternalSmall: "_12l2ze3t",
text: "_11c8fhey _1reo15vq _18m915vq _syazi7uo _1bto1l2s _o5721q9c",
textSmall: "_11c8wadc _1reo15vq _18m915vq _syazi7uo _1bto1l2s _o5721q9c",
textWithTruncation: "_1ul9idpf _p12f1osq _1o9zkb7n"
};
var BreadcrumbsCurrentItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var text = _ref.text,
href = _ref.href,
onClick = _ref.onClick,
target = _ref.target,
analyticsContext = _ref.analyticsContext,
elemBefore = _ref.elemBefore,
iconBefore = _ref.iconBefore,
truncationWidth = _ref.truncationWidth,
testId = _ref.testId,
onCopyLink = _ref.onCopyLink,
onTooltipShown = _ref.onTooltipShown,
_overflowRef = _ref._overflowRef;
var isSmall = (0, _useBreadcrumbsSize.useBreadcrumbsSize)() === 'small';
var handleClick = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onClick !== null && onClick !== void 0 ? onClick : _noop.default,
action: 'clicked',
analyticsData: analyticsContext
}, analyticsAttributes));
var resolvedElemBefore = elemBefore !== null && elemBefore !== void 0 ? elemBefore : iconBefore;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
copied = _useState2[0],
setCopied = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
linkElement = _useState4[0],
setLinkElement = _useState4[1];
var resetTimerRef = (0, _react.useRef)(null);
var setLinkRef = (0, _react.useCallback)(function (element) {
setLinkElement(element);
}, []);
var _useOverflowable = (0, _useOverflowable3.default)(truncationWidth, linkElement, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') ? 0 : resolvedElemBefore ? ICON_WIDTH_ESTIMATE : 0),
_useOverflowable2 = (0, _slicedToArray2.default)(_useOverflowable, 2),
shouldShowTooltip = _useOverflowable2[1];
var handleCopy = (0, _react.useCallback)(function () {
if (!navigator.clipboard) {
return;
}
var url = new URL(href, window.location.href).href;
navigator.clipboard.writeText(url).then(function () {
setCopied(true);
onCopyLink === null || onCopyLink === void 0 || onCopyLink();
if (resetTimerRef.current) {
clearTimeout(resetTimerRef.current);
}
resetTimerRef.current = setTimeout(function () {
setCopied(false);
}, COPY_RESET_DELAY_MS);
}, _noop.default);
}, [href, onCopyLink]);
(0, _react.useEffect)(function () {
return function () {
if (resetTimerRef.current) {
clearTimeout(resetTimerRef.current);
}
};
}, []);
var iconElement = resolvedElemBefore && /*#__PURE__*/React.createElement("span", {
"data-testid": testId && "".concat(testId, "--icon-before"),
className: (0, _runtime.ax)([styles.iconWrapper, unboundedStyles.iconWrapper, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.iconWrapperExternal, isSmall && styles.iconWrapperExternalSmall, isSmall && unboundedStyles.iconWrapperSmall])
}, resolvedElemBefore);
var textElement = /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([isSmall && styles.textSmall, !isSmall && styles.text, truncationWidth && styles.textWithTruncation])
}, text);
var renderLink = function renderLink(triggerProps) {
var tooltipRef = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref;
var handleTriggerClick = function handleTriggerClick(event) {
var _triggerProps$onClick;
triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
handleClick(event);
};
return /*#__PURE__*/React.createElement(_anchor.Anchor, {
href: href,
target: target,
rel: target === '_blank' ? 'noopener noreferrer' : undefined,
"aria-current": "page",
onClick: handleTriggerClick,
onMouseOver: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOver,
onMouseOut: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOut,
onMouseMove: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseMove,
onMouseDown: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseDown,
onFocus: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onFocus,
onBlur: triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onBlur,
"aria-describedby": triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps['aria-describedby'],
testId: testId,
ref: tooltipRef ? (0, _mergeRefs.default)([setLinkRef, tooltipRef]) : setLinkRef,
xcss:
// @ts-ignore -- Expression produces a union type that is too complex to represent. This matches existing `@atlaskit/primitives` handling for complex `xcss={cx(...)}` composition.
(0, _css.cx)(styles.interactiveContainer, !(0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.interactiveContainerLegacy, isSmall && styles.interactiveContainerSmall, truncationWidth != null && styles.interactiveContainerWithTruncation, (0, _fg.fg)('platform-dst-motion-uplift-list-item') && styles.interactiveContainerMotion),
style: {
maxWidth: truncationWidth
}
}, !(0, _fg.fg)('platform_dst_breadcrumbs-refresh') && iconElement, textElement);
};
var copyButton = /*#__PURE__*/React.createElement(_Tooltip.default, {
content: copied ? 'Copied!' : 'Copy link',
position: "bottom"
}, function (tooltipProps) {
return /*#__PURE__*/React.createElement("span", {
"data-breadcrumbs-copy-link": true,
"data-copied": copied || undefined,
className: (0, _runtime.ax)([unboundedStyles.copyButtonWrapper])
}, /*#__PURE__*/React.createElement(_button.default, (0, _extends2.default)({}, tooltipProps, {
appearance: "subtle",
icon: _link.default,
isTooltipDisabled: true,
label: copied ? 'Link copied' : 'Copy link',
onClick: handleCopy,
spacing: "compact",
testId: testId && "".concat(testId, "--copy-link")
})));
});
return /*#__PURE__*/React.createElement("li", {
ref: _overflowRef,
"data-breadcrumbs-current-item": true,
className: (0, _runtime.ax)([unboundedStyles.itemWrapper])
}, /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([unboundedStyles.container])
}, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && iconElement, shouldShowTooltip ? /*#__PURE__*/React.createElement(_Tooltip.default, {
content: text,
position: "bottom",
onShow: onTooltipShown
}, renderLink) : renderLink(), copyButton));
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = BreadcrumbsCurrentItem;