@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
74 lines (73 loc) • 2.4 kB
JavaScript
/**
* @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';
const noop = () => {};
const saveIndicatorWrapperStyles = css({
display: 'flex',
justifyContent: 'center'
});
const saveIndicatorContentStyles = css({
position: 'fixed',
width: '256px',
bottom: "var(--ds-space-250, 20px)",
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: `${"var(--ds-space-075, 6px)"} ${"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)"
});
const saveIndicatorTextStyles = xcss({
paddingLeft: 'space.075'
});
export const SaveIndicator = ({
children,
duration,
visible = true
}) => {
const [saving, setSaving] = useState(false);
const shown = useRef(false);
const onSaveStarted = useCallback(() => {
if (!shown.current) {
setSaving(true);
shown.current = true;
}
}, []);
useEffect(() => {
if (saving) {
const handleId = setTimeout(() => {
setSaving(false);
}, duration);
return () => clearTimeout(handleId);
}
}, [saving, duration]);
return jsx(Fragment, null, jsx("div", null, children({
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))))));
};