@atlaskit/renderer
Version:
Renderer component
168 lines (167 loc) • 8.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.HeadingAnchorWrapperClassName = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _messages = require("../../messages");
var _excluded = ["children"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
var HeadingAnchorWrapperClassName = exports.HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
var children = props.children,
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
return (0, _react2.jsx)("span", (0, _extends2.default)({}, rest, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: HeadingAnchorWrapperClassName,
ref: ref
}), children);
});
var copyAnchorButtonStyles = (0, _react2.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;
(0, _classCallCheck2.default)(this, HeadingAnchor);
_this = _callSuper(this, HeadingAnchor, [props]);
(0, _defineProperty2.default)(_this, "state", {
tooltipMessage: '',
isClicked: false
});
(0, _defineProperty2.default)(_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
});
});
(0, _defineProperty2.default)(_this, "getCopyAriaLabel", function () {
var copyAriaLabel = _messages.headingAnchorLinkMessages.copyAriaLabel;
return _this.props.intl.formatMessage(copyAriaLabel);
});
(0, _defineProperty2.default)(_this, "copyToClipboard", /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
var copiedHeadingLinkToClipboard, failedToCopyHeadingLink, _t;
return _regenerator.default.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
copiedHeadingLinkToClipboard = _messages.headingAnchorLinkMessages.copiedHeadingLinkToClipboard, failedToCopyHeadingLink = _messages.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);
};
}());
(0, _defineProperty2.default)(_this, "resetMessage", function () {
var tooltip = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? _messages.headingAnchorLinkMessages.copyLinkToClipboard : _messages.headingAnchorLinkMessages.copyHeadingLinkToClipboard;
_this.setTooltipState(tooltip);
});
(0, _defineProperty2.default)(_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 = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? _this.props.intl.formatMessage(_messages.headingAnchorLinkMessages.copyHeadingLinkLabelledBy, {
copyLink: _this.copyLinkId,
heading: headingId
}) : headingId;
var tabIndex = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
return (0, _react2.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"
}, (0, _react2.jsx)(_link.default, {
label: _this.getCopyAriaLabel(),
color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
}));
});
_this.copyLinkId = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? crypto.randomUUID() : undefined;
return _this;
}
(0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
return (0, _createClass2.default)(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 (0, _react2.jsx)(_tooltip.default
// @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: (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? true : false
}, this.renderAnchorButton());
}
return this.renderAnchorButton();
}
}]);
}(_react.default.PureComponent); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(HeadingAnchor);
var _default = exports.default = _default_1;