Added story preview and confirmation dialogs to send story

This commit is contained in:
Alvaro 2022-10-12 10:14:35 -06:00 committed by GitHub
parent e80d9d1f30
commit 820eaa50ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 315 additions and 109 deletions

View file

@ -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>
);