[refactor] transfer IdeaDialog to Component-independent Class

[remove] IdeaDialog storybook
idea2app · Jun 8, 2023 · 00c60a5 · 00c60a5
1 parent 0194306
commit 00c60a5
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 141 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
         "@types/leaflet": "^1.9.3",
         "classnames": "^2.3.2",
         "editorjs-html": "^3.4.2",
+        "iterable-observer": "^1.0.0",
         "koajax": "^0.8.4",
         "leaflet": "^1.9.4",
         "lodash": "^4.17.21",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/preview/index.tsx b/preview/index.tsx
@@ -1,17 +1,19 @@
 import React, { PureComponent, ReactNode } from 'react';
-import { Button, Container, Image } from 'react-bootstrap';
+import { Button, Container, Image, Modal } from 'react-bootstrap';
 import { render } from 'react-dom';
 import { sleep } from 'web-utility';
+
 import {
     Avatar,
     CodeBlock,
+    Dialog,
+    DialogClose,
     Icon,
-    IdeaDialog,
-    IdeaPopover,
     Loading,
     Nameplate,
     OpenMap,
     Option,
+    OverlayBox,
     Select,
     SpinnerButton,
     TimeDistance
@@ -46,6 +48,32 @@ export class App extends PureComponent<{}, State> {
         );
     }
 
+    inputDialog = new Dialog<Record<'a' | 'b', number>>(({ defer }) => (
+        <Modal show={!!defer} onHide={() => defer?.reject(new DialogClose())}>
+            <Modal.Header>Dialog</Modal.Header>
+            <Modal.Body
+                as="form"
+                onSubmit={event => {
+                    event.preventDefault();
+
+                    defer?.resolve({ a: 1, b: 2 });
+                }}
+            >
+                <Button type="submit">√</Button>
+            </Modal.Body>
+        </Modal>
+    ));
+
+    someLogic = async () => {
+        try {
+            const data = await this.inputDialog.open();
+
+            alert(JSON.stringify(data, null, 4));
+        } catch (error) {
+            if (error instanceof DialogClose) console.warn(error.message);
+        }
+    };
+
     render() {
         const { selectValue, showLoading, showDialog, mapAddressName } =
             this.state;
@@ -126,37 +154,26 @@ export class App extends PureComponent<{}, State> {
                     <Section title="IdeaDialog">
                         {this.renderCode(
                             <>
-                                <Button
-                                    onClick={() =>
-                                        this.setState({ showDialog: true })
-                                    }
-                                >
+                                <Button onClick={this.someLogic}>
                                     显示弹窗
                                 </Button>
-                                <IdeaDialog
-                                    title="查看"
-                                    size="lg"
-                                    confirmText="确定"
-                                    cancelText="取消"
-                                    show={showDialog}
-                                    centered
-                                    onCancel={() =>
-                                        this.setState({ showDialog: false })
-                                    }
-                                >
-                                    <Image src="https://github.com/idea2app.png" />
-                                </IdeaDialog>
+
+                                <this.inputDialog.Component />
                             </>
                         )}
                     </Section>
 
                     <Section title="IdeaPopover">
                         {this.renderCode(
-                            <IdeaPopover onShow={console.log} title="view info">
+                            <OverlayBox
+                                trigger="click"
+                                title="view info"
+                                detail={
+                                    <Image src="https://github.com/idea2app.png" />
+                                }
+                            >
                                 <Button>查看</Button>
-
-                                <Image src="https://github.com/idea2app.png" />
-                            </IdeaPopover>
+                            </OverlayBox>
                         )}
                     </Section>
 

diff --git a/source/IdeaDialog.tsx b/source/IdeaDialog.tsx
@@ -1,76 +1,33 @@
+import { Defer } from 'iterable-observer';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
 import { FC } from 'react';
-import { Button, Modal, ModalProps } from 'react-bootstrap';
 
-import { SpinnerButton, SpinnerButtonProps } from './SpinnerButton';
+export class DialogClose extends Error {
+    constructor(message = 'Dialog closed') {
+        super(message);
+    }
+}
 
-export interface IdeaDialogProps
-    extends Partial<
-        Pick<SpinnerButtonProps, 'animation' | 'loading'> &
-            Pick<
-                ModalProps,
-                | 'className'
-                | 'show'
-                | 'size'
-                | 'fullscreen'
-                | 'centered'
-                | 'scrollable'
-                | 'contentClassName'
-            >
-    > {
-    title: string;
-    formId?: string;
-    confirmText?: string;
-    onConfirm?: () => any;
-    cancelText?: string;
-    onCancel?: () => any;
+export interface DialogProps<T = any> {
+    defer?: Defer<T>;
 }
 
-export const IdeaDialog: FC<IdeaDialogProps> = ({
-    children,
-    title,
-    formId,
-    confirmText,
-    onConfirm,
-    cancelText,
-    onCancel,
-    animation = 'border',
-    loading,
-    ...rest
-}) => (
-    <Modal {...rest} onHide={onCancel}>
-        <Modal.Header closeButton>
-            <Modal.Title>{title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>{children}</Modal.Body>
+export class Dialog<T = any> {
+    @observable
+    defer?: Defer<T>;
+
+    Component: FC;
+
+    constructor(Factory: FC<DialogProps<T>>) {
+        this.Component = observer(() => <Factory defer={this.defer} />);
+    }
 
-        {(confirmText || cancelText) && (
-            <Modal.Footer>
-                {cancelText && (
-                    <Button
-                        variant="secondary"
-                        type="reset"
-                        form={formId}
-                        disabled={loading}
-                        onClick={onCancel}
-                    >
-                        {cancelText}
-                    </Button>
-                )}
-                {confirmText && (
-                    <SpinnerButton
-                        variant="primary"
-                        type="submit"
-                        form={formId}
-                        animation={animation}
-                        loading={loading}
-                        onClick={onConfirm}
-                    >
-                        {confirmText}
-                    </SpinnerButton>
-                )}
-            </Modal.Footer>
-        )}
-    </Modal>
-);
+    open() {
+        this.defer = new Defer();
 
-IdeaDialog.displayName = 'IdeaDialog';
+        this.defer.promise.finally(() => (this.defer = undefined));
+
+        return this.defer.promise;
+    }
+}
diff --git a/source/IdeaPopover.tsx → source/OverlayBox.tsx b/source/IdeaPopover.tsx → source/OverlayBox.tsx
@@ -6,11 +6,14 @@ import {
     Tooltip
 } from 'react-bootstrap';
 
-export interface OverlayBoxProps extends OverlayTriggerProps {
+export interface OverlayBoxProps extends Omit<OverlayTriggerProps, 'overlay'> {
     title: ReactNode;
     detail?: ReactNode;
 }
 
+/**
+ * ToDo: {@link https://react-bootstrap.github.io/docs/components/overlays#disabled-elements}
+ */
 export const OverlayBox: FC<OverlayBoxProps> = ({
     title,
     detail,

diff --git a/source/index.ts b/source/index.ts
@@ -7,10 +7,10 @@ export * from './Editor';
 export * from './EditorHTML';
 export * from './Icon';
 export * from './IdeaDialog';
-export * from './IdeaPopover';
 export * from './Loading';
 export * from './Nameplate';
 export * from './OpenMap';
+export * from './OverlayBox';
 export * from './Select';
 export * from './SpinnerButton';
 export * from './TableSpinner';

diff --git a/stories/IdeaDialog.stories.tsx b/stories/IdeaDialog.stories.tsx
diff --git a/stories/IdeaPopover.stories.tsx → stories/OverlayBox.stories.tsx b/stories/IdeaPopover.stories.tsx → stories/OverlayBox.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { OverlayBox } from '../source/IdeaPopover';
+import { OverlayBox } from '../source/OverlayBox';
 
 const meta: Meta<typeof OverlayBox> = {
     title: 'Idea-React/OverlayBox',