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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SaveIndicator = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _extensions = require("@atlaskit/editor-common/extensions");
var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
var _primitives = require("@atlaskit/primitives");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss

var noop = function noop() {};
var saveIndicatorWrapperStyles = (0, _react2.css)({
  display: 'flex',
  justifyContent: 'center'
});
var saveIndicatorContentStyles = (0, _react2.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 = (0, _primitives.xcss)({
  paddingLeft: 'space.075'
});
var SaveIndicator = exports.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 = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    saving = _useState2[0],
    setSaving = _useState2[1];
  var shown = (0, _react.useRef)(false);
  var onSaveStarted = (0, _react.useCallback)(function () {
    if (!shown.current) {
      setSaving(true);
      shown.current = true;
    }
  }, []);
  (0, _react.useEffect)(function () {
    if (saving) {
      var handleId = setTimeout(function () {
        setSaving(false);
      }, duration);
      return function () {
        return clearTimeout(handleId);
      };
    }
  }, [saving, duration]);
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", null, children({
    onSaveStarted: onSaveStarted,
    onSaveEnded: noop
  })), visible && saving && (0, _react2.jsx)("div", {
    css: saveIndicatorWrapperStyles
  }, (0, _react2.jsx)("div", {
    css: saveIndicatorContentStyles,
    "data-testid": "save-indicator-content"
  }, (0, _react2.jsx)(_statusSuccess.default, {
    label: "Saving",
    color: "var(--ds-icon-success, #6A9A23)",
    spacing: "none"
  }), (0, _react2.jsx)(_primitives.Box, {
    xcss: saveIndicatorTextStyles
  }, (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntl.FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , _extensions.messages.saveIndicator))))));
};