yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Remove centralized Modal management (#1444)

Browse Source 
* refactor: Finally remove centralized Modals component

* chore: Cleanup related unused methods in UiStore
This commit is contained in:
Tom Moor
2020-08-12 10:49:15 -07:00
committed by GitHub
parent d055021ad4
commit 0f41a04e49
8 changed files with 111 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Layout.js
View File

@@ -19,7 +19,6 @@ import Flex from "components/Flex";
import { LoadingIndicatorBar } from "components/LoadingIndicator";
import Modal from "components/Modal";
import Modals from "components/Modals";
import Sidebar from "components/Sidebar";
import SettingsSidebar from "components/Sidebar/Settings";
import {
@@ -127,7 +126,6 @@ class Layout extends React.Component<Props> {
/>
</Switch>
</Container>
<Modals ui={ui} />
<Modal
isOpen={this.keyboardShortcutsOpen}
onRequestClose={this.handleCloseKeyboardShortcuts}

58
app/components/Modals.js
View File

@@ -1,58 +0,0 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import UiStore from "stores/UiStore";
import CollectionDelete from "scenes/CollectionDelete";
import CollectionEdit from "scenes/CollectionEdit";
import CollectionExport from "scenes/CollectionExport";
import CollectionNew from "scenes/CollectionNew";
import DocumentShare from "scenes/DocumentShare";
import BaseModal from "components/Modal";
type Props = {
ui: UiStore,
};
@observer
class Modals extends React.Component<Props> {
handleClose = () => {
this.props.ui.clearActiveModal();
};
render() {
const { activeModalName, activeModalProps } = this.props.ui;
const Modal = ({ name, children, ...rest }) => {
return (
<BaseModal
isOpen={activeModalName === name}
onRequestClose={this.handleClose}
{...rest}
>
{React.cloneElement(children, activeModalProps)}
</BaseModal>
);
};
return (
<span>
<Modal name="collection-new" title="Create a collection">
<CollectionNew onSubmit={this.handleClose} />
</Modal>
<Modal name="collection-edit" title="Edit collection">
<CollectionEdit onSubmit={this.handleClose} />
</Modal>
<Modal name="collection-delete" title="Delete collection">
<CollectionDelete onSubmit={this.handleClose} />
</Modal>
<Modal name="collection-export" title="Export collection">
<CollectionExport onSubmit={this.handleClose} />
</Modal>
<Modal name="document-share" title="Share document">
<DocumentShare onSubmit={this.handleClose} />
</Modal>
</span>
);
}
}
export default Modals;

27
app/components/Sidebar/Main.js
View File

@@ -17,7 +17,7 @@ import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import CollectionNew from "scenes/CollectionNew";
import Invite from "scenes/Invite";
import Flex from "components/Flex";
import Modal from "components/Modal";
@@ -34,21 +34,25 @@ type Props = {
auth: AuthStore,
documents: DocumentsStore,
policies: PoliciesStore,
ui: UiStore,
};
@observer
class MainSidebar extends React.Component<Props> {
@observable inviteModalOpen: boolean = false;
@observable inviteModalOpen = false;
@observable createCollectionModalOpen = false;
componentDidMount() {
this.props.documents.fetchDrafts();
this.props.documents.fetchTemplates();
}
handleCreateCollection = (ev: SyntheticEvent<>) => {
handleCreateCollectionModalOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.props.ui.setActiveModal("collection-new");
this.createCollectionModalOpen = true;
};
handleCreateCollectionModalClose = (ev: SyntheticEvent<>) => {
this.createCollectionModalOpen = false;
};
handleInviteModalOpen = (ev: SyntheticEvent<>) => {
@@ -134,7 +138,9 @@ class MainSidebar extends React.Component<Props> {
/>
</Section>
<Section>
<Collections onCreateCollection={this.handleCreateCollection} />
<Collections
onCreateCollection={this.handleCreateCollectionModalOpen}
/>
</Section>
<Section>
<SidebarLink
@@ -175,6 +181,13 @@ class MainSidebar extends React.Component<Props> {
>
<Invite onSubmit={this.handleInviteModalClose} />
</Modal>
<Modal
title="Create a collection"
onRequestClose={this.handleCreateCollectionModalClose}
isOpen={this.createCollectionModalOpen}
>
<CollectionNew onSubmit={this.handleCreateCollectionModalClose} />
</Modal>
</Sidebar>
);
}
@@ -184,4 +197,4 @@ const Drafts = styled(Flex)`
height: 24px;
`;
export default inject("documents", "policies", "auth", "ui")(MainSidebar);
export default inject("documents", "policies", "auth")(MainSidebar);

2
app/components/Toasts/components/Toast.js
View File

@@ -3,7 +3,7 @@ import { darken } from "polished";
import * as React from "react";
import styled from "styled-components";
import { fadeAndScaleIn } from "shared/styles/animations";
import type { Toast as TToast } from "../../../types";
import type { Toast as TToast } from "types";
type Props = {
onRequestClose: () => void,

90
app/menus/CollectionMenu.js
View File

@@ -7,8 +7,10 @@ import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import Collection from "models/Collection";
import CollectionDelete from "scenes/CollectionDelete";
import CollectionEdit from "scenes/CollectionEdit";
import CollectionExport from "scenes/CollectionExport";
import CollectionMembers from "scenes/CollectionMembers";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import Modal from "components/Modal";
import VisuallyHidden from "components/VisuallyHidden";
@@ -30,7 +32,10 @@ type Props = {
@observer
class CollectionMenu extends React.Component<Props> {
file: ?HTMLInputElement;
@observable membersModalOpen: boolean = false;
@observable showCollectionMembers = false;
@observable showCollectionEdit = false;
@observable showCollectionDelete = false;
@observable showCollectionExport = false;
onNewDocument = (ev: SyntheticEvent<>) => {
ev.preventDefault();
@@ -61,31 +66,40 @@ class CollectionMenu extends React.Component<Props> {
}
};
onEdit = (ev: SyntheticEvent<>) => {
handleEditCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { collection } = this.props;
this.props.ui.setActiveModal("collection-edit", { collection });
this.showCollectionEdit = true;
};
onDelete = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { collection } = this.props;
this.props.ui.setActiveModal("collection-delete", { collection });
handleEditCollectionClose = () => {
this.showCollectionEdit = false;
};
onExport = (ev: SyntheticEvent<>) => {
handleDeleteCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
const { collection } = this.props;
this.props.ui.setActiveModal("collection-export", { collection });
this.showCollectionDelete = true;
};
onPermissions = (ev: SyntheticEvent<>) => {
handleDeleteCollectionClose = () => {
this.showCollectionDelete = false;
};
handleExportCollectionOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.membersModalOpen = true;
this.showCollectionExport = true;
};
handleExportCollectionClose = () => {
this.showCollectionExport = false;
};
handleMembersModalOpen = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.showCollectionMembers = true;
};
handleMembersModalClose = () => {
this.membersModalOpen = false;
this.showCollectionMembers = false;
};
render() {
@@ -107,12 +121,12 @@ class CollectionMenu extends React.Component<Props> {
<Modal
title="Collection permissions"
onRequestClose={this.handleMembersModalClose}
isOpen={this.membersModalOpen}
isOpen={this.showCollectionMembers}
>
<CollectionMembers
collection={collection}
onSubmit={this.handleMembersModalClose}
onEdit={this.onEdit}
handleEditCollectionOpen={this.handleEditCollectionOpen}
/>
</Modal>
<DropdownMenu onOpen={onOpen} onClose={onClose} position={position}>
@@ -130,24 +144,58 @@ class CollectionMenu extends React.Component<Props> {
)}
{can.update && <hr />}
{can.update && (
<DropdownMenuItem onClick={this.onEdit}>Edit…</DropdownMenuItem>
<DropdownMenuItem onClick={this.handleEditCollectionOpen}>
Edit…
</DropdownMenuItem>
)}
{can.update && (
<DropdownMenuItem onClick={this.onPermissions}>
<DropdownMenuItem onClick={this.handleMembersModalOpen}>
Permissions…
</DropdownMenuItem>
)}
{can.export && (
<DropdownMenuItem onClick={this.onExport}>
<DropdownMenuItem onClick={this.handleExportCollectionOpen}>
Export…
</DropdownMenuItem>
)}
</>
)}
{can.delete && (
<DropdownMenuItem onClick={this.onDelete}>Delete…</DropdownMenuItem>
<DropdownMenuItem onClick={this.handleDeleteCollectionOpen}>
Delete…
</DropdownMenuItem>
)}
</DropdownMenu>
<Modal
title="Edit collection"
isOpen={this.showCollectionEdit}
onRequestClose={this.handleEditCollectionClose}
>
<CollectionEdit
onSubmit={this.handleEditCollectionClose}
collection={collection}
/>
</Modal>
<Modal
title="Delete collection"
isOpen={this.showCollectionDelete}
onRequestClose={this.handleDeleteCollectionClose}
>
<CollectionDelete
onSubmit={this.handleDeleteCollectionClose}
collection={collection}
/>
</Modal>
<Modal
title="Export collection"
isOpen={this.showCollectionExport}
onRequestClose={this.handleExportCollectionClose}
>
<CollectionExport
onSubmit={this.handleExportCollectionClose}
collection={collection}
/>
</Modal>
</>
);
}

22
app/menus/DocumentMenu.js
View File

@@ -10,6 +10,7 @@ import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import Document from "models/Document";
import DocumentDelete from "scenes/DocumentDelete";
import DocumentShare from "scenes/DocumentShare";
import DocumentTemplatize from "scenes/DocumentTemplatize";
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
import Modal from "components/Modal";
@@ -40,8 +41,9 @@ type Props = {
@observer
class DocumentMenu extends React.Component<Props> {
@observable redirectTo: ?string;
@observable showDeleteModal: boolean = false;
@observable showTemplateModal: boolean = false;
@observable showDeleteModal = false;
@observable showTemplateModal = false;
@observable showShareModal = false;
componentDidUpdate() {
this.redirectTo = undefined;
@@ -129,7 +131,11 @@ class DocumentMenu extends React.Component<Props> {
handleShareLink = async (ev: SyntheticEvent<>) => {
const { document } = this.props;
await document.share();
this.props.ui.setActiveModal("document-share", { document });
this.showShareModal = true;
};
handleCloseShareModal = () => {
this.showShareModal = false;
};
render() {
@@ -282,6 +288,16 @@ class DocumentMenu extends React.Component<Props> {
onSubmit={this.handleCloseTemplateModal}
/>
</Modal>
<Modal
title="Share document"
onRequestClose={this.handleCloseShareModal}
isOpen={this.showShareModal}
>
<DocumentShare
document={this.props.document}
onSubmit={this.handleCloseShareModal}
/>
</Modal>
</>
);
}

2
app/scenes/CollectionDelete.js
View File

@@ -49,7 +49,7 @@ class CollectionDelete extends React.Component<Props> {
<strong>{collection.name}</strong> collection is permanent and will
also delete all of the documents within it, so be extra careful.
</HelpText>
<Button type="submit" disabled={this.isDeleting} danger>
<Button type="submit" disabled={this.isDeleting} autoFocus danger>
{this.isDeleting ? "Deleting…" : "I’m sure – Delete"}
</Button>
</form>

16
app/stores/UiStore.js
View File

@@ -4,7 +4,7 @@ import { observable, action, autorun, computed } from "mobx";
import { v4 } from "uuid";
import Collection from "models/Collection";
import Document from "models/Document";
import type { Toast } from "../types";
import type { Toast } from "types";
const UI_STORE = "UI_STORE";
@@ -14,8 +14,6 @@ class UiStore {
// systemTheme represents the system UI theme (Settings -> General in macOS)
@observable systemTheme: "light" | "dark";
@observable activeModalName: ?string;
@observable activeModalProps: ?Object;
@observable activeDocumentId: ?string;
@observable activeCollectionId: ?string;
@observable progressBarVisible: boolean = false;
@@ -68,18 +66,6 @@ class UiStore {
}
};
@action
setActiveModal = (name: string, props: ?Object): void => {
this.activeModalName = name;
this.activeModalProps = props;
};
@action
clearActiveModal = (): void => {
this.activeModalName = undefined;
this.activeModalProps = undefined;
};
@action
setActiveDocument = (document: Document): void => {
this.activeDocumentId = document.id;