@atlaskit/renderer
Version:
Renderer component
133 lines (131 loc) • 5.12 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import LinkIcon from '@atlaskit/icon/core/link';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
import { headingAnchorLinkMessages } from '../../messages';
export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
children,
...rest
} = props;
return jsx("span", _extends({}, rest, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: HeadingAnchorWrapperClassName,
ref: ref
}), children);
});
const copyAnchorButtonStyles = css({
display: 'inline',
outline: 'none',
backgroundColor: 'transparent',
border: 'none',
color: "var(--ds-icon, #292A2E)",
cursor: 'pointer',
right: 0
});
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
class HeadingAnchor extends React.PureComponent {
constructor(props) {
super(props);
_defineProperty(this, "state", {
tooltipMessage: '',
isClicked: false
});
_defineProperty(this, "setTooltipState", (message, isClicked = false) => {
this.setState({
// TODO: ED-14403 - investigate why this does not translate
tooltipMessage: this.props.intl.formatMessage(message),
isClicked
});
});
_defineProperty(this, "getCopyAriaLabel", () => {
const {
copyAriaLabel
} = headingAnchorLinkMessages;
return this.props.intl.formatMessage(copyAriaLabel);
});
_defineProperty(this, "copyToClipboard", async event => {
const {
copiedHeadingLinkToClipboard,
failedToCopyHeadingLink
} = headingAnchorLinkMessages;
event.stopPropagation();
try {
await this.props.onCopyText();
this.setTooltipState(copiedHeadingLinkToClipboard, true);
} catch {
this.setTooltipState(failedToCopyHeadingLink);
}
});
_defineProperty(this, "resetMessage", () => {
const tooltip = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorLinkMessages.copyLinkToClipboard : headingAnchorLinkMessages.copyHeadingLinkToClipboard;
this.setTooltipState(tooltip);
});
_defineProperty(this, "renderAnchorButton", () => {
const {
hideFromScreenReader = false,
headingId
} = this.props;
const labelledBy = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? this.props.intl.formatMessage(headingAnchorLinkMessages.copyHeadingLinkLabelledBy, {
copyLink: this.copyLinkId,
heading: headingId
}) : headingId;
const tabIndex = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
return jsx("button", {
"data-testid": "anchor-button",
id: this.copyLinkId,
css: copyAnchorButtonStyles,
onMouseLeave: this.resetMessage,
onBlur: this.resetMessage,
onClick: this.copyToClipboard,
"aria-hidden": hideFromScreenReader,
tabIndex: tabIndex,
"aria-label": hideFromScreenReader ? undefined : this.state.tooltipMessage,
"aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
type: "button"
}, jsx(LinkIcon, {
label: this.getCopyAriaLabel(),
color: this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
}));
});
this.copyLinkId = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? crypto.randomUUID() : undefined;
}
componentDidMount() {
this.resetMessage();
}
render() {
const {
tooltipMessage
} = this.state;
if (tooltipMessage) {
// We set the key to the message to ensure it remounts when the message
// changes, so that it correctly repositions.
// @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
return jsx(Tooltip
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
, {
tag: CopyAnchorWrapperWithRef,
content: tooltipMessage,
position: "top",
delay: 0,
key: tooltipMessage,
isScreenReaderAnnouncementDisabled: expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? true : false
}, this.renderAnchorButton());
}
return this.renderAnchorButton();
}
}
// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(HeadingAnchor);
export default _default_1;