@atlaskit/editor-plugin-extension/dist/esm/ui/SaveIndicator/SaveIndicator.js

editor-plugin-extension plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { Fragment, useCallback, useEffect, useRef, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl';
import { messages } from '@atlaskit/editor-common/extensions';
import CheckCircleIcon from '@atlaskit/icon/core/status-success';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, Text, xcss } from '@atlaskit/primitives';
var noop = function noop() {};
var saveIndicatorWrapperStyles = css({
  display: 'flex',
  justifyContent: 'center'
});
var saveIndicatorContentStyles = css({
  position: 'fixed',
  width: '256px',
  bottom: "var(--ds-space-250, 20px)",
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
  background: "var(--ds-surface-overlay, #FFFFFF)",
  /* E300 */
  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
  borderRadius: "var(--ds-radius-xxlarge, 16px)"
});
var saveIndicatorTextStyles = xcss({
  paddingLeft: 'space.075'
});
export var SaveIndicator = function SaveIndicator(_ref) {
  var children = _ref.children,
    duration = _ref.duration,
    _ref$visible = _ref.visible,
    visible = _ref$visible === void 0 ? true : _ref$visible;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    saving = _useState2[0],
    setSaving = _useState2[1];
  var shown = useRef(false);
  var onSaveStarted = useCallback(function () {
    if (!shown.current) {
      setSaving(true);
      shown.current = true;
    }
  }, []);
  useEffect(function () {
    if (saving) {
      var handleId = setTimeout(function () {
        setSaving(false);
      }, duration);
      return function () {
        return clearTimeout(handleId);
      };
    }
  }, [saving, duration]);
  return jsx(Fragment, null, jsx("div", null, children({
    onSaveStarted: onSaveStarted,
    onSaveEnded: noop
  })), visible && saving && jsx("div", {
    css: saveIndicatorWrapperStyles
  }, jsx("div", {
    css: saveIndicatorContentStyles,
    "data-testid": "save-indicator-content"
  }, jsx(CheckCircleIcon, {
    label: "Saving",
    color: "var(--ds-icon-success, #6A9A23)",
    spacing: "none"
  }), jsx(Box, {
    xcss: saveIndicatorTextStyles
  }, jsx(Text, null, jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , messages.saveIndicator))))));
};