@atlaskit/editor-plugin-synced-block/dist/es2019/ui/SyncBlockLabel.js

SyncedBlock plugin for @atlaskit/editor-core

import React, { useCallback, useMemo, useState } from 'react';
import { useIntl } from 'react-intl-next';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
import { Text } from '@atlaskit/primitives/compiled';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import Tooltip from '@atlaskit/tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden';
import { formatElapsedTime } from './utils/time';
const SyncBlockLabelDataId = 'sync-block-label';
const SyncBlockLabelComponent = ({
  contentUpdatedAt,
  isSource,
  localId,
  title,
  isUnsyncedBlock
}) => {
  const intl = useIntl();
  const {
    formatMessage
  } = intl;
  const [tooltipContent, setTooltipContent] = useState(formatMessage(messages.defaultSyncBlockTooltip));
  let tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
  if (title) {
    tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
      title
    });
  }
  const updateTooltipContent = useCallback(() => {
    let tooltipContent = tooltipMessage;
    if (contentUpdatedAt) {
      const elapsedTime = formatElapsedTime(contentUpdatedAt, intl);
      tooltipContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
        size: "small",
        color: "color.text.inverse"
      }, tooltipMessage), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text, {
        size: "small",
        color: "color.text.inverse",
        weight: "bold"
      }, formatMessage(messages.referenceSyncBlockLastEdited)), /*#__PURE__*/React.createElement(Text, {
        size: "small",
        color: "color.text.inverse"
      }, elapsedTime));
    }
    setTooltipContent(tooltipContent);
  }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
  const ariaDescribedById = `sync-block-label-description-${localId}`;
  const getLabelContent = useMemo(() => {
    if (isUnsyncedBlock) {
      return /*#__PURE__*/React.createElement(Text, {
        size: "small",
        color: "color.text.subtle"
      }, formatMessage(messages.unsyncedBlockLabel));
    }
    if (isSource || !title) {
      return /*#__PURE__*/React.createElement(Text, {
        size: "small",
        color: "color.text.subtle"
      }, formatMessage(messages.syncedBlockLabel));
    }
    return /*#__PURE__*/React.createElement(Text, {
      maxLines: 1,
      size: "small",
      color: "color.text.subtle"
    }, title);
  }, [formatMessage, isSource, isUnsyncedBlock, title]);
  const label = /*#__PURE__*/React.createElement("div", {
    "data-testid": SyncBlockLabelDataId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    ,
    className: SyncBlockLabelSharedCssClassName.labelClassName,
    "aria-describedby": (isSource || isUnsyncedBlock) && editorExperiment('platform_synced_block_patch_6', true, {
      exposure: true
    }) ? undefined : ariaDescribedById
  }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
    color: "var(--ds-icon-subtle, #505258)",
    size: "small",
    label: ""
  }), getLabelContent);
  if (isSource || isUnsyncedBlock) {
    return label;
  }
  return /*#__PURE__*/React.createElement(Tooltip, {
    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
  }, label, /*#__PURE__*/React.createElement(VisuallyHidden, {
    id: ariaDescribedById
  }, tooltipContent));
};
export const SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);