Refactored and cleaned up Modal and friends
This commit is contained in:
Alvaro
GitHub
parent
f64426fbe0
commit
00a720faa9
31 changed files with 853 additions and 787 deletions
|
|
@ -19,13 +19,14 @@ import { Checkbox } from './Checkbox';
|
|||
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||
import { ContextMenu } from './ContextMenu';
|
||||
import {
|
||||
DistributionListSettings,
|
||||
EditDistributionList,
|
||||
DistributionListSettingsModal,
|
||||
EditDistributionListModal,
|
||||
EditMyStoriesPrivacy,
|
||||
Page as StoriesSettingsPage,
|
||||
} from './StoriesSettingsModal';
|
||||
import { MY_STORIES_ID, getStoryDistributionListName } from '../types/Stories';
|
||||
import { Modal } from './Modal';
|
||||
import type { RenderModalPage, ModalPropsType } from './Modal';
|
||||
import { PagedModal, ModalPage } from './Modal';
|
||||
import { StoryDistributionListName } from './StoryDistributionListName';
|
||||
import { Theme } from '../util/theme';
|
||||
import { isNotNil } from '../util/isNotNil';
|
||||
|
|
@ -254,58 +255,113 @@ export const SendStoryModal = ({
|
|||
Array<UUIDStringType>
|
||||
>(initialMyStoriesMemberUuids);
|
||||
|
||||
let content: JSX.Element;
|
||||
if (page === Page.SetMyStoriesPrivacy) {
|
||||
content = (
|
||||
<EditMyStoriesPrivacy
|
||||
hasDisclaimerAbove
|
||||
i18n={i18n}
|
||||
learnMore="SendStoryModal__privacy-disclaimer"
|
||||
myStories={stagedMyStories}
|
||||
onClickExclude={() => {
|
||||
let nextSelectedContacts = stagedMyStories.members;
|
||||
let selectedNames: string | undefined;
|
||||
if (page === Page.ChooseGroups) {
|
||||
selectedNames = chosenGroupNames.join(', ');
|
||||
} else {
|
||||
selectedNames = selectedStoryNames
|
||||
.map(listName => getStoryDistributionListName(i18n, listName, listName))
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
if (!stagedMyStories.isBlockList) {
|
||||
const modalCommonProps: Pick<ModalPropsType, 'hasXButton' | 'i18n'> = {
|
||||
hasXButton: true,
|
||||
i18n,
|
||||
};
|
||||
|
||||
let modal: RenderModalPage;
|
||||
if (page === Page.SetMyStoriesPrivacy) {
|
||||
const footer = (
|
||||
<>
|
||||
<div />
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => setPage(Page.SendStory)}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (stagedMyStories.isBlockList) {
|
||||
if (stagedMyStories.members.length) {
|
||||
onHideMyStoriesFrom(stagedMyStoriesMemberUuids);
|
||||
} else {
|
||||
setMyStoriesToAllSignalConnections();
|
||||
}
|
||||
} else {
|
||||
onViewersUpdated(MY_STORIES_ID, stagedMyStoriesMemberUuids);
|
||||
}
|
||||
|
||||
setSelectedContacts([]);
|
||||
setPage(Page.SendStory);
|
||||
}}
|
||||
variant={ButtonVariant.Primary}
|
||||
>
|
||||
{i18n('save')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
modal = handleClose => (
|
||||
<ModalPage
|
||||
modalName="SendStoryModal__my-stories-privacy"
|
||||
title={i18n('SendStoryModal__my-stories-privacy')}
|
||||
modalFooter={footer}
|
||||
onClose={handleClose}
|
||||
{...modalCommonProps}
|
||||
>
|
||||
<EditMyStoriesPrivacy
|
||||
hasDisclaimerAbove
|
||||
i18n={i18n}
|
||||
learnMore="SendStoryModal__privacy-disclaimer"
|
||||
myStories={stagedMyStories}
|
||||
onClickExclude={() => {
|
||||
let nextSelectedContacts = stagedMyStories.members;
|
||||
|
||||
if (!stagedMyStories.isBlockList) {
|
||||
setStagedMyStories(myStories => ({
|
||||
...myStories,
|
||||
isBlockList: true,
|
||||
members: [],
|
||||
}));
|
||||
nextSelectedContacts = [];
|
||||
}
|
||||
|
||||
setSelectedContacts(nextSelectedContacts);
|
||||
|
||||
setPage(Page.HideStoryFrom);
|
||||
}}
|
||||
onClickOnlyShareWith={() => {
|
||||
if (!stagedMyStories.isBlockList) {
|
||||
setSelectedContacts(stagedMyStories.members);
|
||||
} else {
|
||||
setStagedMyStories(myStories => ({
|
||||
...myStories,
|
||||
isBlockList: false,
|
||||
members: [],
|
||||
}));
|
||||
}
|
||||
|
||||
setPage(Page.AddViewer);
|
||||
}}
|
||||
setSelectedContacts={setSelectedContacts}
|
||||
setMyStoriesToAllSignalConnections={() => {
|
||||
setStagedMyStories(myStories => ({
|
||||
...myStories,
|
||||
isBlockList: true,
|
||||
members: [],
|
||||
}));
|
||||
nextSelectedContacts = [];
|
||||
}
|
||||
|
||||
setSelectedContacts(nextSelectedContacts);
|
||||
|
||||
setPage(Page.HideStoryFrom);
|
||||
}}
|
||||
onClickOnlyShareWith={() => {
|
||||
if (!stagedMyStories.isBlockList) {
|
||||
setSelectedContacts(stagedMyStories.members);
|
||||
} else {
|
||||
setStagedMyStories(myStories => ({
|
||||
...myStories,
|
||||
isBlockList: false,
|
||||
members: [],
|
||||
}));
|
||||
}
|
||||
|
||||
setPage(Page.AddViewer);
|
||||
}}
|
||||
setSelectedContacts={setSelectedContacts}
|
||||
setMyStoriesToAllSignalConnections={() => {
|
||||
setStagedMyStories(myStories => ({
|
||||
...myStories,
|
||||
isBlockList: true,
|
||||
members: [],
|
||||
}));
|
||||
setSelectedContacts([]);
|
||||
}}
|
||||
toggleSignalConnectionsModal={toggleSignalConnectionsModal}
|
||||
/>
|
||||
setSelectedContacts([]);
|
||||
}}
|
||||
toggleSignalConnectionsModal={toggleSignalConnectionsModal}
|
||||
/>
|
||||
</ModalPage>
|
||||
);
|
||||
} else if (page === Page.EditingDistributionList && listToEdit) {
|
||||
content = (
|
||||
<DistributionListSettings
|
||||
modal = handleClose => (
|
||||
<DistributionListSettingsModal
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
i18n={i18n}
|
||||
listToEdit={listToEdit}
|
||||
|
|
@ -316,6 +372,8 @@ export const SendStoryModal = ({
|
|||
setPage={setPage}
|
||||
setSelectedContacts={setSelectedContacts}
|
||||
toggleSignalConnectionsModal={toggleSignalConnectionsModal}
|
||||
onBackButtonClick={() => setListIdToEdit(undefined)}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
);
|
||||
} else if (
|
||||
|
|
@ -324,8 +382,8 @@ export const SendStoryModal = ({
|
|||
page === Page.AddViewer ||
|
||||
page === Page.HideStoryFrom
|
||||
) {
|
||||
content = (
|
||||
<EditDistributionList
|
||||
modal = handleClose => (
|
||||
<EditDistributionListModal
|
||||
candidateConversations={candidateConversations}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
i18n={i18n}
|
||||
|
|
@ -350,13 +408,60 @@ export const SendStoryModal = ({
|
|||
}
|
||||
}}
|
||||
page={page}
|
||||
onClose={handleClose}
|
||||
onBackButtonClick={() => {
|
||||
if (listIdToEdit) {
|
||||
if (
|
||||
page === Page.AddViewer ||
|
||||
page === Page.HideStoryFrom ||
|
||||
page === Page.ChooseViewers
|
||||
) {
|
||||
setPage(Page.EditingDistributionList);
|
||||
} else {
|
||||
setListIdToEdit(undefined);
|
||||
}
|
||||
} else if (page === Page.HideStoryFrom || page === Page.AddViewer) {
|
||||
setSelectedContacts([]);
|
||||
setStagedMyStories(initialMyStories);
|
||||
setStagedMyStoriesMemberUuids(initialMyStoriesMemberUuids);
|
||||
setPage(Page.SetMyStoriesPrivacy);
|
||||
} else if (page === Page.ChooseViewers) {
|
||||
setSelectedContacts([]);
|
||||
setPage(Page.SendStory);
|
||||
} else if (page === Page.NameStory) {
|
||||
setPage(Page.ChooseViewers);
|
||||
}
|
||||
}}
|
||||
selectedContacts={selectedContacts}
|
||||
setSelectedContacts={setSelectedContacts}
|
||||
/>
|
||||
);
|
||||
} else if (page === Page.ChooseGroups) {
|
||||
content = (
|
||||
const footer = (
|
||||
<>
|
||||
<div className="SendStoryModal__selected-lists">{selectedNames}</div>
|
||||
<button
|
||||
aria-label={i18n('SendStoryModal__ok')}
|
||||
className="SendStoryModal__ok"
|
||||
disabled={!chosenGroupIds.size}
|
||||
onClick={() => {
|
||||
toggleGroupsForStorySend(Array.from(chosenGroupIds));
|
||||
setChosenGroupIds(new Set());
|
||||
setPage(Page.SendStory);
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
modal = handleClose => (
|
||||
<ModalPage
|
||||
modalName="SendStoryModal__choose-groups"
|
||||
title={i18n('SendStoryModal__choose-groups')}
|
||||
modalFooter={footer}
|
||||
onClose={handleClose}
|
||||
{...modalCommonProps}
|
||||
>
|
||||
<SearchInput
|
||||
disabled={groupConversations.length === 0}
|
||||
i18n={i18n}
|
||||
|
|
@ -429,11 +534,32 @@ export const SendStoryModal = ({
|
|||
{i18n('noContactsFound')}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</ModalPage>
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
const footer = (
|
||||
<>
|
||||
<div className="SendStoryModal__selected-lists">{selectedNames}</div>
|
||||
<button
|
||||
aria-label={i18n('SendStoryModal__send')}
|
||||
className="SendStoryModal__send"
|
||||
disabled={!selectedListIds.size && !selectedGroupIds.size}
|
||||
onClick={() => {
|
||||
onSend(Array.from(selectedListIds), Array.from(selectedGroupIds));
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
modal = handleClose => (
|
||||
<ModalPage
|
||||
modalName="SendStoryModal__title"
|
||||
title={i18n('SendStoryModal__title')}
|
||||
moduleClassName="SendStoryModal"
|
||||
modalFooter={footer}
|
||||
onClose={handleClose}
|
||||
{...modalCommonProps}
|
||||
>
|
||||
<div className="SendStoryModal__top-bar">
|
||||
{i18n('stories')}
|
||||
<ContextMenu
|
||||
|
|
@ -649,159 +775,19 @@ export const SendStoryModal = ({
|
|||
)}
|
||||
</Checkbox>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
let modalTitle: string;
|
||||
if (page === Page.SetMyStoriesPrivacy) {
|
||||
modalTitle = i18n('SendStoryModal__my-stories-privacy');
|
||||
} else if (page === Page.HideStoryFrom) {
|
||||
modalTitle = i18n('StoriesSettings__hide-story');
|
||||
} else if (page === Page.ChooseGroups) {
|
||||
modalTitle = i18n('SendStoryModal__choose-groups');
|
||||
} else if (page === Page.NameStory) {
|
||||
modalTitle = i18n('StoriesSettings__name-story');
|
||||
} else if (page === Page.ChooseViewers || page === Page.AddViewer) {
|
||||
modalTitle = i18n('StoriesSettings__choose-viewers');
|
||||
} else {
|
||||
modalTitle = i18n('SendStoryModal__title');
|
||||
}
|
||||
|
||||
let selectedNames: string | undefined;
|
||||
if (page === Page.ChooseGroups) {
|
||||
selectedNames = chosenGroupNames.join(', ');
|
||||
} else {
|
||||
selectedNames = selectedStoryNames
|
||||
.map(listName => getStoryDistributionListName(i18n, listName, listName))
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
const hasBackButton = page !== Page.SendStory;
|
||||
|
||||
let modalFooter: JSX.Element | undefined;
|
||||
if (
|
||||
page === Page.SendStory ||
|
||||
page === Page.ChooseGroups ||
|
||||
page === Page.SetMyStoriesPrivacy
|
||||
) {
|
||||
modalFooter = (
|
||||
<Modal.ButtonFooter moduleClassName="SendStoryModal">
|
||||
{page !== Page.SetMyStoriesPrivacy && (
|
||||
<div className="SendStoryModal__selected-lists">{selectedNames}</div>
|
||||
)}
|
||||
{page === Page.ChooseGroups && (
|
||||
<button
|
||||
aria-label={i18n('SendStoryModal__ok')}
|
||||
className="SendStoryModal__ok"
|
||||
disabled={!chosenGroupIds.size}
|
||||
onClick={() => {
|
||||
toggleGroupsForStorySend(Array.from(chosenGroupIds));
|
||||
setChosenGroupIds(new Set());
|
||||
setPage(Page.SendStory);
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
)}
|
||||
{page === Page.SendStory && (
|
||||
<button
|
||||
aria-label={i18n('SendStoryModal__send')}
|
||||
className="SendStoryModal__send"
|
||||
disabled={!selectedListIds.size && !selectedGroupIds.size}
|
||||
onClick={() => {
|
||||
onSend(Array.from(selectedListIds), Array.from(selectedGroupIds));
|
||||
}}
|
||||
type="button"
|
||||
/>
|
||||
)}
|
||||
{page === Page.SetMyStoriesPrivacy && (
|
||||
<>
|
||||
<div />
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => setPage(Page.SendStory)}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (stagedMyStories.isBlockList) {
|
||||
if (stagedMyStories.members.length) {
|
||||
onHideMyStoriesFrom(stagedMyStoriesMemberUuids);
|
||||
} else {
|
||||
setMyStoriesToAllSignalConnections();
|
||||
}
|
||||
} else {
|
||||
onViewersUpdated(MY_STORIES_ID, stagedMyStoriesMemberUuids);
|
||||
}
|
||||
|
||||
setSelectedContacts([]);
|
||||
setPage(Page.SendStory);
|
||||
}}
|
||||
variant={ButtonVariant.Primary}
|
||||
>
|
||||
{i18n('save')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Modal.ButtonFooter>
|
||||
</ModalPage>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
<PagedModal
|
||||
modalName="SendStoryModal"
|
||||
hasStickyButtons
|
||||
hasXButton
|
||||
i18n={i18n}
|
||||
modalFooter={modalFooter}
|
||||
onBackButtonClick={
|
||||
hasBackButton
|
||||
? () => {
|
||||
if (listIdToEdit) {
|
||||
if (
|
||||
page === Page.AddViewer ||
|
||||
page === Page.HideStoryFrom ||
|
||||
page === Page.ChooseViewers
|
||||
) {
|
||||
setPage(Page.EditingDistributionList);
|
||||
} else {
|
||||
setListIdToEdit(undefined);
|
||||
}
|
||||
} else if (page === Page.SetMyStoriesPrivacy) {
|
||||
setSelectedContacts([]);
|
||||
setStagedMyStories(initialMyStories);
|
||||
setStagedMyStoriesMemberUuids(initialMyStoriesMemberUuids);
|
||||
setPage(Page.SendStory);
|
||||
} else if (
|
||||
page === Page.HideStoryFrom ||
|
||||
page === Page.AddViewer
|
||||
) {
|
||||
setSelectedContacts([]);
|
||||
setStagedMyStories(initialMyStories);
|
||||
setStagedMyStoriesMemberUuids(initialMyStoriesMemberUuids);
|
||||
setPage(Page.SetMyStoriesPrivacy);
|
||||
} else if (page === Page.ChooseGroups) {
|
||||
setChosenGroupIds(new Set());
|
||||
setPage(Page.SendStory);
|
||||
} else if (page === Page.ChooseViewers) {
|
||||
setSelectedContacts([]);
|
||||
setPage(Page.SendStory);
|
||||
} else if (page === Page.NameStory) {
|
||||
setPage(Page.ChooseViewers);
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onClose={onClose}
|
||||
title={modalTitle}
|
||||
theme={Theme.Dark}
|
||||
onClose={onClose}
|
||||
>
|
||||
{content}
|
||||
</Modal>
|
||||
{modal}
|
||||
</PagedModal>
|
||||
{confirmRemoveGroupId && (
|
||||
<ConfirmationDialog
|
||||
dialogName="SendStoryModal.confirmRemoveGroupId"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue