@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
149 lines (148 loc) • 8.37 kB
JavaScript
/* SyncBlockLabel.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SyncBlockLabel = void 0;
require("./SyncBlockLabel.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _messages = require("@atlaskit/editor-common/messages");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
var _compiled = require("@atlaskit/primitives/compiled");
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
var _time = require("./utils/time");
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); }
var SyncBlockLabelDataId = 'sync-block-label';
var styles = {
truncatedLabelText: "_11c8wadc _1reo15vq _18m915vq _syazazsu _1ul9idpf _1bto1l2s _o5721q9c",
unpublishedSuffix: "_11c8wadc _syazazsu _1o9zidpf _o5721q9c"
};
var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
var contentUpdatedAt = _ref.contentUpdatedAt,
isSource = _ref.isSource,
localId = _ref.localId,
title = _ref.title,
isUnsyncedBlock = _ref.isUnsyncedBlock,
unpublishedInfo = _ref.unpublishedInfo;
var intl = (0, _reactIntl.useIntl)();
var formatMessage = intl.formatMessage;
var _useState = (0, _react.useState)(formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip)),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
tooltipContent = _useState2[0],
setTooltipContent = _useState2[1];
var tooltipMessage = formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip);
if (title) {
tooltipMessage = formatMessage(_messages.syncBlockMessages.referenceSyncBlockTooltip, {
title: title
});
}
var updateTooltipContent = (0, _react.useCallback)(function () {
var tooltipContent = tooltipMessage;
if (contentUpdatedAt) {
var elapsedTime = (0, _time.formatElapsedTime)(contentUpdatedAt, intl);
tooltipContent = /*#__PURE__*/_react.default.createElement("div", null, title ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse",
weight: "bold"
}, formatMessage(_messages.syncBlockMessages.referenceSyncBlockSyncedFrom)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse"
}, ' ', title)) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse"
}, tooltipMessage), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse",
weight: "bold"
}, formatMessage(_messages.syncBlockMessages.referenceSyncBlockLastEdited)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.inverse"
}, ' ', elapsedTime));
}
setTooltipContent(tooltipContent);
}, [contentUpdatedAt, formatMessage, intl, title, tooltipMessage]);
var ariaDescribedById = "sync-block-label-description-".concat(localId);
var unpublishedParenthetical = unpublishedInfo ? formatMessage(_messages.syncBlockMessages.unpublishedInParentheses) : undefined;
var getLabelContent = (0, _react.useMemo)(function () {
// The parenthetical carries a leading space so the accessible name and copied text read as
// "… (unpublished)". Flex trims it visually, and the label's own gap provides the spacing.
var renderUnpublishedLabel = function renderUnpublishedLabel(label) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: styles.truncatedLabelText
}, label), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "span",
xcss: styles.unpublishedSuffix
}, " ".concat(unpublishedParenthetical)));
};
var renderPlainLabel = function renderPlainLabel(label) {
return unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.subtle"
}, label);
};
var renderTruncatingTitle = function renderTruncatingTitle(label) {
return unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
maxLines: 1,
size: "small",
color: "color.text.subtle"
}, label);
};
if (isUnsyncedBlock) {
return renderPlainLabel(formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
}
if (isSource) {
return renderPlainLabel(formatMessage(_messages.syncBlockMessages.sourceSyncedBlockLabel));
}
if (!title) {
return renderPlainLabel(formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
}
return renderTruncatingTitle(title);
}, [formatMessage, isSource, isUnsyncedBlock, title, unpublishedParenthetical]);
var unpublishedTooltipLabel = unpublishedInfo ? formatMessage(unpublishedInfo.variant === 'source' ? _messages.syncBlockMessages.unpublishedSourceAvailabilityTooltip : _messages.syncBlockMessages.unpublishedLocalReferenceAvailabilityTooltip, {
sourceType: unpublishedInfo.sourceType
}) : undefined;
var primaryLabel = /*#__PURE__*/_react.default.createElement("div", {
"data-testid": SyncBlockLabelDataId
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName,
"aria-describedby": isSource || isUnsyncedBlock ? undefined : ariaDescribedById
}, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
color: "var(--ds-icon-subtle, #505258)",
size: "small",
label: ""
}), getLabelContent);
var referenceDescription = !isSource && !isUnsyncedBlock && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
id: ariaDescribedById
}, tooltipMessage);
if (unpublishedTooltipLabel) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: "top",
content: unpublishedTooltipLabel
}, primaryLabel, referenceDescription);
}
if (isSource || isUnsyncedBlock) {
return primaryLabel;
}
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: "top",
content: tooltipContent
// workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
// this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
// tooltip content is available for screen readers in visually hidden content after the label
,
isScreenReaderAnnouncementDisabled: true
// using this to ensure that the 'last edited' time is updated when the tooltip is opened
,
onShow: updateTooltipContent
}, primaryLabel, referenceDescription);
};
var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);