@atlaskit/renderer
Version:
Renderer component
162 lines (161 loc) • 7.7 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @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 var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
var children = props.children,
rest = _objectWithoutProperties(props, _excluded);
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);
});
var 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
var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
function HeadingAnchor(props) {
var _this;
_classCallCheck(this, HeadingAnchor);
_this = _callSuper(this, HeadingAnchor, [props]);
_defineProperty(_this, "state", {
tooltipMessage: '',
isClicked: false
});
_defineProperty(_this, "setTooltipState", function (message) {
var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
_this.setState({
// TODO: ED-14403 - investigate why this does not translate
tooltipMessage: _this.props.intl.formatMessage(message),
isClicked: isClicked
});
});
_defineProperty(_this, "getCopyAriaLabel", function () {
var copyAriaLabel = headingAnchorLinkMessages.copyAriaLabel;
return _this.props.intl.formatMessage(copyAriaLabel);
});
_defineProperty(_this, "copyToClipboard", /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
var copiedHeadingLinkToClipboard, failedToCopyHeadingLink, _t;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
copiedHeadingLinkToClipboard = headingAnchorLinkMessages.copiedHeadingLinkToClipboard, failedToCopyHeadingLink = headingAnchorLinkMessages.failedToCopyHeadingLink;
event.stopPropagation();
_context.prev = 1;
_context.next = 2;
return _this.props.onCopyText();
case 2:
_this.setTooltipState(copiedHeadingLinkToClipboard, true);
_context.next = 4;
break;
case 3:
_context.prev = 3;
_t = _context["catch"](1);
_this.setTooltipState(failedToCopyHeadingLink);
case 4:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 3]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}());
_defineProperty(_this, "resetMessage", function () {
var tooltip = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorLinkMessages.copyLinkToClipboard : headingAnchorLinkMessages.copyHeadingLinkToClipboard;
_this.setTooltipState(tooltip);
});
_defineProperty(_this, "renderAnchorButton", function () {
var _this$props = _this.props,
_this$props$hideFromS = _this$props.hideFromScreenReader,
hideFromScreenReader = _this$props$hideFromS === void 0 ? false : _this$props$hideFromS,
headingId = _this$props.headingId;
var labelledBy = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? _this.props.intl.formatMessage(headingAnchorLinkMessages.copyHeadingLinkLabelledBy, {
copyLink: _this.copyLinkId,
heading: headingId
}) : headingId;
var 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;
return _this;
}
_inherits(HeadingAnchor, _React$PureComponent);
return _createClass(HeadingAnchor, [{
key: "componentDidMount",
value: function componentDidMount() {
this.resetMessage();
}
}, {
key: "render",
value: function render() {
var tooltipMessage = this.state.tooltipMessage;
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();
}
}]);
}(React.PureComponent); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = injectIntl(HeadingAnchor);
export default _default_1;