);
};
+
+type PagedModalProps = Readonly<{
+ modalName: string;
+ children: RenderModalPage;
+ moduleClassName?: string;
+ onClose?: () => void;
+ useFocusTrap?: boolean;
+ noMouseClose?: boolean;
+ theme?: Theme;
+}>;
+
+/**
+ * Provides modal animation and click to close functionality to a
+ * ModalPage descendant.
+ *
+ * Useful when we want to swap between different ModalPages (possibly
+ * rendered by different components) without triggering an open/close
+ * transition animation.
+ */
+export function PagedModal({
+ modalName,
+ children,
+ moduleClassName,
+ noMouseClose,
+ onClose = noop,
+ theme,
+ useFocusTrap,
+}: PagedModalProps): ReactElement {
+ const { close, modalStyles, overlayStyles } = useAnimated(onClose, {
+ getFrom: () => ({ opacity: 0, transform: 'translateY(48px)' }),
+ getTo: isOpen =>
+ isOpen
+ ? { opacity: 1, transform: 'translateY(0px)' }
+ : { opacity: 0, transform: 'translateY(48px)' },
+ });
+
+ return (
+
+ {children(close)}
+
+ );
+}
+
+export type RenderModalPage = (onClose: () => void) => JSX.Element;
diff --git a/ts/components/NeedsScreenRecordingPermissionsModal.tsx b/ts/components/NeedsScreenRecordingPermissionsModal.tsx
index 21f1718ee..e1f880e0d 100644
--- a/ts/components/NeedsScreenRecordingPermissionsModal.tsx
+++ b/ts/components/NeedsScreenRecordingPermissionsModal.tsx
@@ -24,6 +24,26 @@ export const NeedsScreenRecordingPermissionsModal = ({
openSystemPreferencesAction,
toggleScreenRecordingPermissionsDialog,
}: PropsType): JSX.Element => {
+ const footer = (
+ <>
+
+
+
+ );
return (
{i18n('calling__presenting--macos-permission-description')}
@@ -38,24 +59,6 @@ export const NeedsScreenRecordingPermissionsModal = ({
- {i18n('calling__presenting--permission-instruction-step2')}
- {i18n('calling__presenting--permission-instruction-step3')}
-
-
-
-
);
};
diff --git a/ts/components/ProfileEditorModal.tsx b/ts/components/ProfileEditorModal.tsx
index 7fe4df378..37fa16b0e 100644
--- a/ts/components/ProfileEditorModal.tsx
+++ b/ts/components/ProfileEditorModal.tsx
@@ -61,7 +61,6 @@ export const ProfileEditorModal = ({
<>
>(initialMyStoriesMemberUuids);
- let content: JSX.Element;
- if (page === Page.SetMyStoriesPrivacy) {
- content = (
- {
- 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 = {
+ hasXButton: true,
+ i18n,
+ };
+
+ let modal: RenderModalPage;
+ if (page === Page.SetMyStoriesPrivacy) {
+ const footer = (
+ <>
+
+
+
+
+
+
+ );
+
+ modal = handleClose => (
+
+ {
+ 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}
+ />
+
);
} else if (page === Page.EditingDistributionList && listToEdit) {
- content = (
- (
+ setListIdToEdit(undefined)}
+ onClose={handleClose}
/>
);
} else if (
@@ -324,8 +382,8 @@ export const SendStoryModal = ({
page === Page.AddViewer ||
page === Page.HideStoryFrom
) {
- content = (
- (
+ {
+ 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 = (
<>
+ {selectedNames}
+