Added story preview and confirmation dialogs to send story
This commit is contained in:
parent
e80d9d1f30
commit
820eaa50ad
12 changed files with 315 additions and 109 deletions
|
@ -2,7 +2,7 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { get, has, noop } from 'lodash';
|
||||
import { usePopper } from 'react-popper';
|
||||
|
@ -28,6 +28,7 @@ import {
|
|||
} from '../util/getStoryBackground';
|
||||
import { objectMap } from '../util/objectMap';
|
||||
import { handleOutsideClick } from '../util/handleOutsideClick';
|
||||
import { ConfirmDiscardDialog } from './ConfirmDiscardDialog';
|
||||
|
||||
export type PropsType = {
|
||||
debouncedMaybeGrabLinkPreview: (
|
||||
|
@ -125,6 +126,12 @@ export const TextStoryCreator = ({
|
|||
onClose,
|
||||
onDone,
|
||||
}: PropsType): JSX.Element => {
|
||||
const [showConfirmDiscardModal, setShowConfirmDiscardModal] = useState(false);
|
||||
|
||||
const onTryClose = useCallback(() => {
|
||||
setShowConfirmDiscardModal(true);
|
||||
}, [setShowConfirmDiscardModal]);
|
||||
|
||||
const [isEditingText, setIsEditingText] = useState(false);
|
||||
const [selectedBackground, setSelectedBackground] =
|
||||
useState<BackgroundStyleType>(BackgroundStyle.BG1);
|
||||
|
@ -252,11 +259,11 @@ export const TextStoryCreator = ({
|
|||
setIsColorPickerShowing(false);
|
||||
setIsEditingText(false);
|
||||
setIsLinkPreviewInputShowing(false);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
onClose();
|
||||
onTryClose();
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -271,7 +278,9 @@ export const TextStoryCreator = ({
|
|||
isEditingText,
|
||||
isLinkPreviewInputShowing,
|
||||
colorPickerPopperButtonRef,
|
||||
onClose,
|
||||
showConfirmDiscardModal,
|
||||
setShowConfirmDiscardModal,
|
||||
onTryClose,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -422,7 +431,7 @@ export const TextStoryCreator = ({
|
|||
)}
|
||||
<div className="StoryCreator__toolbar--buttons">
|
||||
<Button
|
||||
onClick={onClose}
|
||||
onClick={onTryClose}
|
||||
theme={Theme.Dark}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
|
@ -566,6 +575,13 @@ export const TextStoryCreator = ({
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{showConfirmDiscardModal && (
|
||||
<ConfirmDiscardDialog
|
||||
i18n={i18n}
|
||||
onClose={() => setShowConfirmDiscardModal(false)}
|
||||
onDiscard={onClose}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</FocusTrap>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue