@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
162 lines (161 loc) • 8.07 kB
JavaScript
/* breadcrumbs-current-item.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./breadcrumbs-current-item.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import IconButton from '@atlaskit/button/icon/button';
import { cx } from '@atlaskit/css';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import __noop from '@atlaskit/ds-lib/noop';
import LinkIcon from '@atlaskit/icon/core/link';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Anchor } from '@atlaskit/primitives/compiled/anchor';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import { useBreadcrumbsSize } from './internal/use-breadcrumbs-size';
import useOverflowable from './internal/use-overflowable';
const analyticsAttributes = {
componentName: 'breadcrumbsCurrentItem',
packageName: "@atlaskit/breadcrumbs",
packageVersion: "17.8.3"
};
const COPY_RESET_DELAY_MS = 2000;
const ICON_WIDTH_ESTIMATE = 24;
const 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"
};
const 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"
};
const BreadcrumbsCurrentItem = /*#__PURE__*/memo(({
text,
href,
onClick,
target,
analyticsContext,
elemBefore,
iconBefore,
truncationWidth,
testId,
onCopyLink,
onTooltipShown,
_overflowRef
}) => {
const isSmall = useBreadcrumbsSize() === 'small';
const handleClick = usePlatformLeafEventHandler({
fn: onClick !== null && onClick !== void 0 ? onClick : __noop,
action: 'clicked',
analyticsData: analyticsContext,
...analyticsAttributes
});
const resolvedElemBefore = elemBefore !== null && elemBefore !== void 0 ? elemBefore : iconBefore;
const [copied, setCopied] = useState(false);
const [linkElement, setLinkElement] = useState(null);
const resetTimerRef = useRef(null);
const setLinkRef = useCallback(element => {
setLinkElement(element);
}, []);
const [, shouldShowTooltip] = useOverflowable(truncationWidth, linkElement, fg('platform_dst_breadcrumbs-refresh') ? 0 : resolvedElemBefore ? ICON_WIDTH_ESTIMATE : 0);
const handleCopy = useCallback(() => {
if (!navigator.clipboard) {
return;
}
const url = new URL(href, window.location.href).href;
navigator.clipboard.writeText(url).then(() => {
setCopied(true);
onCopyLink === null || onCopyLink === void 0 ? void 0 : onCopyLink();
if (resetTimerRef.current) {
clearTimeout(resetTimerRef.current);
}
resetTimerRef.current = setTimeout(() => {
setCopied(false);
}, COPY_RESET_DELAY_MS);
}, __noop);
}, [href, onCopyLink]);
useEffect(() => () => {
if (resetTimerRef.current) {
clearTimeout(resetTimerRef.current);
}
}, []);
const iconElement = resolvedElemBefore && /*#__PURE__*/React.createElement("span", {
"data-testid": testId && `${testId}--icon-before`,
className: ax([styles.iconWrapper, unboundedStyles.iconWrapper, fg('platform_dst_breadcrumbs-refresh') && styles.iconWrapperExternal, isSmall && styles.iconWrapperExternalSmall, isSmall && unboundedStyles.iconWrapperSmall])
}, resolvedElemBefore);
const textElement = /*#__PURE__*/React.createElement("span", {
className: ax([isSmall && styles.textSmall, !isSmall && styles.text, truncationWidth && styles.textWithTruncation])
}, text);
const renderLink = triggerProps => {
const tooltipRef = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref;
const handleTriggerClick = event => {
var _triggerProps$onClick;
triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
handleClick(event);
};
return /*#__PURE__*/React.createElement(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 ? mergeRefs([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.
cx(styles.interactiveContainer, !fg('platform_dst_breadcrumbs-refresh') && styles.interactiveContainerLegacy, isSmall && styles.interactiveContainerSmall, truncationWidth != null && styles.interactiveContainerWithTruncation, fg('platform-dst-motion-uplift-list-item') && styles.interactiveContainerMotion),
style: {
maxWidth: truncationWidth
}
}, !fg('platform_dst_breadcrumbs-refresh') && iconElement, textElement);
};
const copyButton = /*#__PURE__*/React.createElement(Tooltip, {
content: copied ? 'Copied!' : 'Copy link',
position: "bottom"
}, tooltipProps => /*#__PURE__*/React.createElement("span", {
"data-breadcrumbs-copy-link": true,
"data-copied": copied || undefined,
className: ax([unboundedStyles.copyButtonWrapper])
}, /*#__PURE__*/React.createElement(IconButton, _extends({}, tooltipProps, {
appearance: "subtle",
icon: LinkIcon,
isTooltipDisabled: true,
label: copied ? 'Link copied' : 'Copy link',
onClick: handleCopy,
spacing: "compact",
testId: testId && `${testId}--copy-link`
}))));
return /*#__PURE__*/React.createElement("li", {
ref: _overflowRef,
"data-breadcrumbs-current-item": true,
className: ax([unboundedStyles.itemWrapper])
}, /*#__PURE__*/React.createElement("span", {
className: ax([unboundedStyles.container])
}, fg('platform_dst_breadcrumbs-refresh') && iconElement, shouldShowTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
content: text,
position: "bottom",
onShow: onTooltipShown
}, renderLink) : renderLink(), copyButton));
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default BreadcrumbsCurrentItem;