From 219b937215994a17beff99f745c75aec15be35d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Mon, 19 Sep 2022 15:03:32 +0800
Subject: [PATCH 1/8] feat: define loadedKey to be controlled (#803)

---
 src/components/tree/__tests__/tree.test.tsx   |  8 ++++--
 src/components/tree/index.tsx                 |  6 ++---
 src/controller/explorer/folderTree.tsx        |  5 ++++
 src/model/workbench/explorer/folderTree.tsx   |  1 +
 .../__tests__/folderTreeService.test.tsx      | 22 ++++++++++++++++
 .../workbench/explorer/folderTreeService.ts   | 25 +++++++++++++++++++
 src/workbench/sidebar/explore/folderTree.tsx  |  2 ++
 7 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/components/tree/__tests__/tree.test.tsx b/src/components/tree/__tests__/tree.test.tsx
index c93ad03b9..fed390c31 100644
--- a/src/components/tree/__tests__/tree.test.tsx
+++ b/src/components/tree/__tests__/tree.test.tsx
@@ -450,8 +450,8 @@ describe('Test the Tree component', () => {
             },
         ];
         const mockFn = jest.fn().mockImplementation(() => sleep(1000));
-        const { getByText, container } = render(
-            <TreeView data={data} onLoadData={mockFn} />
+        const { getByText, container, rerender } = render(
+            <TreeView data={data} onLoadData={mockFn} loadedKeys={[]} />
         );
 
         act(() => {
@@ -466,6 +466,10 @@ describe('Test the Tree component', () => {
         });
         expect(container.querySelector('.codicon-spin')).toBeNull();
 
+        rerender(
+            <TreeView data={data} onLoadData={mockFn} loadedKeys={['1']} />
+        );
+
         act(() => {
             // unfold it and open it again
             fireEvent.click(getByText('test1'));
diff --git a/src/components/tree/index.tsx b/src/components/tree/index.tsx
index c1e4c1b34..23b41211a 100644
--- a/src/components/tree/index.tsx
+++ b/src/components/tree/index.tsx
@@ -62,6 +62,7 @@ export interface ITreeProps {
     className?: string;
     draggable?: boolean;
     expandKeys?: UniqueId[];
+    loadedKeys?: string[];
     activeKey?: UniqueId;
     onExpand?: (expandedKeys: React.Key[], node: ITreeNodeItemProps) => void;
     onSelect?: (node: ITreeNodeItemProps, isUpdate?) => void;
@@ -83,6 +84,7 @@ const TreeView = ({
     className,
     data = [],
     draggable = false,
+    loadedKeys,
     expandKeys: controlExpandKeys,
     activeKey: controlActiveKey,
     onExpand,
@@ -95,7 +97,6 @@ const TreeView = ({
 }: ITreeProps) => {
     const [expandKeys, setExpandKeys] = useState<UniqueId[]>([]);
     const [activeKey, setActiveKey] = useState<string | null>(null);
-    const loadDataCache = useRef<Record<string, boolean>>({});
     const [loadingKeys, setLoadingKeys] = useState<string[]>([]);
     const dragOverNode = useRef<ITreeNodeItemProps>();
     const dragInfo = useRef<{
@@ -108,7 +109,7 @@ const TreeView = ({
 
     const canLoadData = (key: string) => {
         if (!onLoadData) return false;
-        if (loadDataCache.current.hasOwnProperty(key)) return false;
+        if (loadedKeys?.includes(key)) return false;
         return true;
     };
 
@@ -120,7 +121,6 @@ const TreeView = ({
                 nextKeys.push(uuid!);
                 return nextKeys;
             });
-            loadDataCache.current[uuid] = true;
             onLoadData!(node).finally(() => {
                 setLoadingKeys((keys) => {
                     const nextKeys = keys.concat();
diff --git a/src/controller/explorer/folderTree.tsx b/src/controller/explorer/folderTree.tsx
index 04eaa4686..ab5ae2480 100644
--- a/src/controller/explorer/folderTree.tsx
+++ b/src/controller/explorer/folderTree.tsx
@@ -207,6 +207,11 @@ export class FolderTreeController
     public onLoadData = (treeNode: IFolderTreeNodeProps) => {
         const count = this.count(FolderTreeEvent.onLoadData);
         if (count) {
+            // define current treeNode to be loaded
+            this.folderTreeService.setLoadedKeys([
+                ...this.folderTreeService.getLoadedKeys(),
+                treeNode.id.toString(),
+            ]);
             return new Promise<void>((resolve, reject) => {
                 const callback = (node: IFolderTreeNodeProps) => {
                     this.folderTreeService.update(node);
diff --git a/src/model/workbench/explorer/folderTree.tsx b/src/model/workbench/explorer/folderTree.tsx
index 0f0b104ce..e72c21651 100644
--- a/src/model/workbench/explorer/folderTree.tsx
+++ b/src/model/workbench/explorer/folderTree.tsx
@@ -36,6 +36,7 @@ export interface IFolderTreeSubItem {
     folderPanelContextMenu?: IMenuItemProps[];
     current?: IFolderTreeNodeProps | null;
     expandKeys?: UniqueId[];
+    loadedKeys?: string[];
 }
 export interface IFolderTree {
     folderTree?: IFolderTreeSubItem;
diff --git a/src/services/workbench/__tests__/folderTreeService.test.tsx b/src/services/workbench/__tests__/folderTreeService.test.tsx
index 3bc6a481d..46b570468 100644
--- a/src/services/workbench/__tests__/folderTreeService.test.tsx
+++ b/src/services/workbench/__tests__/folderTreeService.test.tsx
@@ -424,6 +424,28 @@ describe('Test StatusBarService', () => {
         });
     });
 
+    test('Should remove loadedCached when removed successfully', () => {
+        folderTreeService.add({
+            id: '1',
+            name: 'test0',
+            fileType: 'RootFolder',
+            location: 'test0',
+            children: [
+                {
+                    id: '2',
+                    name: 'test',
+                    fileType: 'Folder',
+                    children: [],
+                },
+            ],
+        });
+        folderTreeService.setLoadedKeys(['1', '2']);
+        expect(folderTreeService.getLoadedKeys()).toEqual(['1', '2']);
+
+        folderTreeService.remove('2');
+        expect(folderTreeService.getLoadedKeys()).toEqual(['1']);
+    });
+
     test('Should support to logger ERROR message when remove failed', () => {
         expectLoggerErrorToBeCalled(() => {
             folderTreeService.remove('1');
diff --git a/src/services/workbench/explorer/folderTreeService.ts b/src/services/workbench/explorer/folderTreeService.ts
index 8791104f3..0de933745 100644
--- a/src/services/workbench/explorer/folderTreeService.ts
+++ b/src/services/workbench/explorer/folderTreeService.ts
@@ -65,6 +65,14 @@ export interface IFolderTreeService extends Component<IFolderTree> {
      * Set the expandKeys for folderTree
      */
     setExpandKeys: (expandKeys: UniqueId[]) => void;
+    /**
+     * Get the loadedKeys for folderTree
+     */
+    getLoadedKeys: () => string[];
+    /**
+     * Set the loadedKeys for folderTree
+     */
+    setLoadedKeys: (loadedKeys: string[]) => void;
     /**
      * Active specific node,
      * or unactive any node in folder tree
@@ -264,6 +272,17 @@ export class FolderTreeService
         });
     }
 
+    public getLoadedKeys() {
+        return this.state.folderTree?.loadedKeys || [];
+    }
+
+    public setLoadedKeys(loadedKeys: string[]) {
+        const { folderTree } = this.state;
+        this.setState({
+            folderTree: { ...folderTree, loadedKeys },
+        });
+    }
+
     private setCurrentFolderLocation(data: IFolderTreeNodeProps, id: UniqueId) {
         const children = data.children;
         const { tree } = this.getCurrentRootFolderInfo(id);
@@ -429,6 +448,12 @@ export class FolderTreeService
 
         tree.removeNode(id);
         if (index > -1) nextData[index] = tree.obj;
+        // Remove loadedKey while removing node
+        if (folderTree.loadedKeys?.includes(id.toString())) {
+            folderTree.loadedKeys = folderTree.loadedKeys.filter(
+                (key) => key !== id.toString()
+            );
+        }
         this.setState({
             folderTree,
         });
diff --git a/src/workbench/sidebar/explore/folderTree.tsx b/src/workbench/sidebar/explore/folderTree.tsx
index 2fe8d20c1..4ca85d80a 100644
--- a/src/workbench/sidebar/explore/folderTree.tsx
+++ b/src/workbench/sidebar/explore/folderTree.tsx
@@ -86,6 +86,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         data = [],
         folderPanelContextMenu = [],
         expandKeys,
+        loadedKeys,
         current,
     } = folderTree;
 
@@ -236,6 +237,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
                     // root folder do not render
                     activeKey={current?.id}
                     expandKeys={expandKeys}
+                    loadedKeys={loadedKeys}
                     data={data[0]?.children || []}
                     className={classNames(
                         folderTreeClassName,

From 3b73285bdcd37f4b425b007df0f554127c17d5cb Mon Sep 17 00:00:00 2001
From: Ziv <wewoor@gmail.com>
Date: Thu, 29 Sep 2022 17:22:28 +0800
Subject: [PATCH 2/8] fix: delcare the useEffect before return (#808)

---
 src/workbench/sidebar/explore/folderTree.tsx | 38 ++++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/workbench/sidebar/explore/folderTree.tsx b/src/workbench/sidebar/explore/folderTree.tsx
index 4ca85d80a..c77933939 100644
--- a/src/workbench/sidebar/explore/folderTree.tsx
+++ b/src/workbench/sidebar/explore/folderTree.tsx
@@ -90,25 +90,6 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         current,
     } = folderTree;
 
-    const handleAddRootFolder = () => {
-        createTreeNode?.('RootFolder');
-    };
-
-    const welcomePage = (
-        <div data-content={panel.id}>
-            {entry ? (
-                <>{entry}</>
-            ) : (
-                <div style={{ padding: '10px 5px' }}>
-                    you have not yet opened a folder
-                    <Button onClick={handleAddRootFolder}>Add Folder</Button>
-                </div>
-            )}
-        </div>
-    );
-
-    if (!data.length) return welcomePage;
-
     const inputRef = useRef<HTMLInputElement>(null);
     // tree context view
     const contextMenu = useRef<ReturnType<typeof useContextMenu>>();
@@ -221,6 +202,10 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         onDropTree?.(source, target);
     };
 
+    const handleAddRootFolder = () => {
+        createTreeNode?.('RootFolder');
+    };
+
     useEffect(() => {
         if (folderPanelContextMenu.length > 0) {
             contextMenu.current = initContextMenu();
@@ -230,6 +215,21 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         };
     }, [data.length]);
 
+    const welcomePage = (
+        <div data-content={panel.id}>
+            {entry ? (
+                <>{entry}</>
+            ) : (
+                <div style={{ padding: '10px 5px' }}>
+                    you have not yet opened a folder
+                    <Button onClick={handleAddRootFolder}>Add Folder</Button>
+                </div>
+            )}
+        </div>
+    );
+
+    if (!data.length) return welcomePage;
+
     return (
         <Scrollable noScrollX isShowShadow>
             <div data-content={panel.id} style={{ height: '100%' }}>

From 60a66abed67148127f0faf1189661d15b77e83ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Thu, 20 Oct 2022 17:11:24 +0800
Subject: [PATCH 3/8] fix: improve breadcrumb (#815)

---
 src/components/breadcrumb/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/breadcrumb/style.scss b/src/components/breadcrumb/style.scss
index 246d014cf..34a8f0866 100644
--- a/src/components/breadcrumb/style.scss
+++ b/src/components/breadcrumb/style.scss
@@ -2,12 +2,13 @@
 
 #{$breadcrumb} {
     display: flex;
+    overflow: auto;
+    white-space: nowrap;
 
     &__item {
         align-items: center;
         background-color: var(--breadcrumb-background);
         color: var(--breadcrumb-foreground);
-        color: inherit;
         cursor: pointer;
         display: flex;
         justify-content: left;

From 32641b9730586e408740d7ad5c150493fad17476 Mon Sep 17 00:00:00 2001
From: mortalYoung <yangwei1@outlook.com>
Date: Thu, 20 Oct 2022 11:53:55 +0800
Subject: [PATCH 4/8] fix: fix switch panels between problem and output

---
 src/services/workbench/panelService.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/services/workbench/panelService.ts b/src/services/workbench/panelService.ts
index e330a5bcb..e19fbc698 100644
--- a/src/services/workbench/panelService.ts
+++ b/src/services/workbench/panelService.ts
@@ -1,6 +1,7 @@
 import 'reflect-metadata';
 import { singleton, container } from 'tsyringe';
 import { editor as MonacoEditor } from 'monaco-editor';
+import { StandaloneEditor } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor';
 import { cloneDeepWith, cloneDeep } from 'lodash';
 import pickBy from 'lodash/pickBy';
 import { Component } from 'mo/react';
@@ -194,7 +195,7 @@ export class PanelService extends Component<IPanel> implements IPanelService {
             if (
                 value &&
                 typeof value === 'object' &&
-                value.constructor.name === 'StandaloneEditor'
+                value instanceof StandaloneEditor
             ) {
                 return value;
             }

From ac9d577897458eaf5aab693da83460769a1c7f29 Mon Sep 17 00:00:00 2001
From: mortalYoung <yangwei1@outlook.com>
Date: Thu, 20 Oct 2022 14:02:18 +0800
Subject: [PATCH 5/8] test: update test

---
 src/services/__tests__/panelService.test.ts | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/services/__tests__/panelService.test.ts b/src/services/__tests__/panelService.test.ts
index 2759c5107..8ab7b7484 100644
--- a/src/services/__tests__/panelService.test.ts
+++ b/src/services/__tests__/panelService.test.ts
@@ -1,6 +1,7 @@
 import 'reflect-metadata';
 import { container } from 'tsyringe';
 import { PanelService } from '../workbench/panelService';
+import { StandaloneEditor } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor';
 import { PanelEvent } from 'mo/model/workbench/panel';
 import { expectLoggerErrorToBeCalled } from '@test/utils';
 import { modules } from '../builtinService/const';
@@ -13,6 +14,15 @@ const restore = modules.builtInPanelToolboxReStore();
 
 const panelService = container.resolve(PanelService);
 
+jest.mock(
+    'monaco-editor/esm/vs/editor/standalone/browser/standaloneCodeEditor',
+    () => {
+        return {
+            StandaloneEditor: class {},
+        };
+    }
+);
+
 describe('The PanelService test', () => {
     afterEach(() => {
         panelService.reset();
@@ -128,20 +138,20 @@ describe('The PanelService test', () => {
     });
 
     test('Should NOT clone StandaloneEditor when get the panel', () => {
-        class StandaloneEditor {}
-        const standaloneEditor = new StandaloneEditor();
         panelService.setState({
             data: [
                 {
                     ...paneOutput,
-                    outputEditorInstance: standaloneEditor,
+                    outputEditorInstance: new StandaloneEditor(),
                 } as any,
             ],
         });
 
         const target = panelService.getPanel(paneOutput.id);
         expect(target).toEqual(expect.objectContaining(paneOutput));
-        expect((target as any).outputEditorInstance).toBe(standaloneEditor);
+        expect((target as any).outputEditorInstance).toBeInstanceOf(
+            StandaloneEditor
+        );
     });
 
     test('Should support to active a exist panel', () => {

From f8451ebfd40bdc8ad1e235dee19d6a991d442b77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Fri, 21 Oct 2022 13:54:25 +0800
Subject: [PATCH 6/8] feat: support stop event emit (#807)

---
 .../event/__tests__/eventEmitter.test.ts      | 38 ++++++++++++
 src/common/event/eventEmitter.ts              | 20 ++++++-
 website/docs/advanced/event.md                | 59 +++++++++++++++++++
 .../current/advanced/event.md                 | 57 ++++++++++++++++++
 4 files changed, 171 insertions(+), 3 deletions(-)
 create mode 100644 website/docs/advanced/event.md
 create mode 100644 website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/event.md

diff --git a/src/common/event/__tests__/eventEmitter.test.ts b/src/common/event/__tests__/eventEmitter.test.ts
index dab6d4f73..1d75a401b 100644
--- a/src/common/event/__tests__/eventEmitter.test.ts
+++ b/src/common/event/__tests__/eventEmitter.test.ts
@@ -1,4 +1,5 @@
 import { EventEmitter } from '../index';
+import type { ListenerEventContext } from '../index';
 
 describe('Test the EventEmitter class', () => {
     const event = new EventEmitter();
@@ -60,4 +61,41 @@ describe('Test the EventEmitter class', () => {
         evt.unsubscribe(eventName);
         expect(evt.count(eventName)).toBe(0);
     });
+
+    test('Should stop delivering event', () => {
+        const evt = new EventEmitter();
+        const eventName = 'event1';
+
+        const mockFn = jest.fn();
+        evt.subscribe(eventName, mockFn);
+        evt.subscribe(eventName, function (this: ListenerEventContext) {
+            this.stopDelivery();
+            mockFn();
+        });
+        evt.subscribe(eventName, mockFn);
+
+        evt.emit(eventName);
+        expect(mockFn).toBeCalledTimes(2);
+    });
+
+    test('Should stop async function in event chain', () => {
+        const evt = new EventEmitter();
+        const eventName = 'event1';
+
+        const mockFn = jest.fn();
+        evt.subscribe(eventName, mockFn);
+        evt.subscribe(eventName, async function (this: ListenerEventContext) {
+            await new Promise<void>((resolve) => {
+                setTimeout(() => {
+                    this.stopDelivery();
+                    resolve();
+                }, 0);
+            });
+            mockFn();
+        });
+        evt.subscribe(eventName, mockFn);
+
+        evt.emit(eventName);
+        expect(mockFn).toBeCalledTimes(2);
+    });
 });
diff --git a/src/common/event/eventEmitter.ts b/src/common/event/eventEmitter.ts
index 7a6f0ccf4..03cea7cb0 100644
--- a/src/common/event/eventEmitter.ts
+++ b/src/common/event/eventEmitter.ts
@@ -1,3 +1,7 @@
+export interface ListenerEventContext {
+    stopDelivery: () => void;
+}
+
 export class EventEmitter {
     private _events = new Map<string, Function[]>();
 
@@ -9,9 +13,19 @@ export class EventEmitter {
     public emit(name: string, ...args) {
         const events = this._events.get(name);
         if (events && events.length > 0) {
-            events.forEach((callEvent) => {
-                callEvent(...args);
-            });
+            let continued = true;
+            // call in descending order
+            for (let index = events.length - 1; index >= 0; index--) {
+                if (continued) {
+                    const evt = events[index];
+                    evt.call(
+                        {
+                            stopDelivery: () => (continued = false),
+                        },
+                        ...args
+                    );
+                }
+            }
         }
     }
 
diff --git a/website/docs/advanced/event.md b/website/docs/advanced/event.md
new file mode 100644
index 000000000..538cf0efb
--- /dev/null
+++ b/website/docs/advanced/event.md
@@ -0,0 +1,59 @@
+---
+title: Event
+sidebar_label: Event
+---
+
+An event actually is a callback function. The event-emitter calls the function when the corresponding event be emitted. For example, there is a button be called at editor, and it will emit an event called `molecule.editor.onClick`. And event-emitter will find the corresponding event according to the `molecule.editor.onClick` and then call it.
+
+If there are multiples functions related to an event, these functions will be called in chain. And this is called **event chains**.
+
+## Example
+
+At most situations, we don't have to care about the event chains. Every functions whatever built-in or user-defined are all have to be called.
+
+But if you want to stop the chain in some situations, you definitely have this situation, you could call `this.stopDelivery` to stop the delivery of event chains.
+
+:::tips
+The `this` context of the function is filled-in by Molecule.
+:::
+
+For example, if we want to stop delivery after calculating, and we can do like this:
+
+```ts Stop delivery in synchronous
+molecule.editor.onClick(() => {
+    // if result is true, and this function won't be called
+    console.log('onClick');
+});
+
+molecule.editor.onClick(function (this: ListenerEventContext) {
+    // do something
+    const result = calculated();
+    if (result) {
+        this.stopDelivery();
+    }
+});
+```
+
+```ts Stop delivery in asynchronous
+molecule.editor.onClick(() => {
+    // if result is true, and this function won't be called
+    console.log('onClick');
+});
+
+molecule.editor.onClick(async function (this: ListenerEventContext) {
+    await new Promise<void>((resolve) => {
+        setTimeout(() => {
+            this.stopDelivery();
+            resolve();
+        }, 0);
+    });
+});
+```
+
+## Order
+
+Functions in event chains are First In, Last Called(FILC). So the built-in functions are involved first, and called last.
+
+Oppositely the user-defined functions are involved last, but called first.
+
+So user-defined functions are ability to stop the delivery to the built-in functions.
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/event.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/event.md
new file mode 100644
index 000000000..601977339
--- /dev/null
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/advanced/event.md
@@ -0,0 +1,57 @@
+---
+title: 订阅事件
+sidebar_label: 订阅事件
+---
+
+一个订阅事件本质上就是一个回调函数。事件触发器将会在对应事件被触发的时候执行对应的订阅事件。例如：在 editor 上有一个按钮，点击按钮将会触发 `molecule.editor.onClick` 该事件。那么事件触发器将会根据 `molecule.editor.onClick` 找到对应的事件，并执行它。
+
+如果某个事件有被多处订阅，那么这个事件将会有很多回调函数。这些函数如果被触发将会被链式调用。我们称之为事件链。
+
+## 示例
+
+在大部分情况下，我们并不需要关心事件链的存在。每一个回调函数都有其存在的理由，不论是内置还是用户定义的函数。
+
+然而如果在某些业务场景下，我们需要阻止事件链的传递（你必然会遇到这样子的场景），那么我们只需要调用 `this.stopDelivery` 来阻止事件链的传递即可。
+
+:::tips
+回调函数的（`this`）上下文会被 Molecule 修改。
+:::
+
+例如，如果我们想在计算获得某种结果后，阻止事件的传递，那么我们可以这样操作：
+
+```ts 同步阻止事件传递
+molecule.editor.onClick(() => {
+    // if result is true, and this function won't be called
+    console.log('onClick');
+});
+
+molecule.editor.onClick(function (this: ListenerEventContext) {
+    // do something
+    const result = calculated();
+    if (result) {
+        this.stopDelivery();
+    }
+});
+```
+
+```ts 异步组织事件传递
+molecule.editor.onClick(() => {
+    // if result is true, and this function won't be called
+    console.log('onClick');
+});
+
+molecule.editor.onClick(async function (this: ListenerEventContext) {
+    await new Promise<void>((resolve) => {
+        setTimeout(() => {
+            this.stopDelivery();
+            resolve();
+        }, 0);
+    });
+});
+```
+
+## 顺序
+
+事件链中的函数遵循先进后执行（FILC）。所以内置回调函数是先进后执行
+
+相对的，用户定义的回调函数是后进先执行。所以用户定义的回调函数可以阻止事件传递到内置回调函数。

From 4356e1929bd1454ceb47da572db09c9c089ff8d8 Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 17:50:17 +0800
Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20optimize=20modal=20confirm=20bu?=
 =?UTF-8?q?tton=20style=20and=20fix=20redundacy=20heade=E2=80=A6=20(#810)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: optimize modal confirm button style and fix redundacy header for confirmDialog Component

* fix: resolve modal.confirm can not destory problems

* ci: fix closeModal rename problems

* ci: fix lint error

* test: fix test cases

* test: correct test cases

* fix: correct ActionButtonProps interface
---
 .../__snapshots__/actionbutton.test.tsx.snap  |  1 -
 .../dialog/__tests__/actionbutton.test.tsx    | 30 +++++--------------
 .../dialog/__tests__/confirm.test.tsx         |  3 --
 src/components/dialog/actionButton.tsx        | 22 +++++++-------
 src/components/dialog/confirm.tsx             | 11 ++-----
 src/components/dialog/confirmDialog.tsx       | 26 ++++++++--------
 src/components/dialog/modal.tsx               |  4 +--
 src/components/dialog/style.scss              | 20 +++++++++----
 stories/components/17-Dialog.stories.tsx      | 15 ++++++----
 9 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap b/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap
index 3d3df8812..165dd1592 100644
--- a/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap
+++ b/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Test ActionButton Component Match ActionButton Snapshot 1`] = `
 <button
   className="mo-btn mo-btn--normal"
-  closeModal={[MockFunction]}
   onClick={[Function]}
 />
 `;
diff --git a/src/components/dialog/__tests__/actionbutton.test.tsx b/src/components/dialog/__tests__/actionbutton.test.tsx
index 1e9f2327e..e300e866d 100644
--- a/src/components/dialog/__tests__/actionbutton.test.tsx
+++ b/src/components/dialog/__tests__/actionbutton.test.tsx
@@ -4,48 +4,34 @@ import renderer from 'react-test-renderer';
 
 import ActionButton from '../actionButton';
 
-const TEST_ID = 'test-id';
-
 describe('Test ActionButton Component', () => {
     test('Match ActionButton Snapshot', () => {
         const TEST_FN = jest.fn();
         const component = renderer.create(
-            <ActionButton closeModal={TEST_FN}></ActionButton>
+            <ActionButton close={TEST_FN}></ActionButton>
         );
         const tree = component.toJSON();
-
         expect(tree).toMatchSnapshot();
     });
 
     test('The ActionButton actionFn', () => {
         const ACTION_FN = jest.fn(() => false);
         const MODAL_FN = jest.fn();
-        const wrapper = render(
-            <ActionButton
-                data-testid={TEST_ID}
-                actionFn={ACTION_FN}
-                closeModal={MODAL_FN}
-            />
+        const { container } = render(
+            <ActionButton actionFn={ACTION_FN} close={MODAL_FN} />
         );
-        const button = wrapper.getByTestId(TEST_ID);
-
-        fireEvent.click(button);
+        fireEvent.click(container.querySelector('.mo-btn')!);
         expect(ACTION_FN).toBeCalled();
         expect(MODAL_FN).toBeCalled();
     });
 
-    test('The ActionButton closeModal', () => {
+    test('The ActionButton close', () => {
         const CLOSE_FN = jest.fn();
         const ACTION_FN = jest.fn(() => Promise.resolve(1));
-        const wrapper = render(
-            <ActionButton
-                data-testid={TEST_ID}
-                actionFn={ACTION_FN}
-                closeModal={CLOSE_FN}
-            />
+        const { container } = render(
+            <ActionButton actionFn={ACTION_FN} close={CLOSE_FN} />
         );
-        const button = wrapper.getByTestId(TEST_ID);
-
+        const button = container.querySelector('.mo-btn')!;
         fireEvent.click(button);
         expect(ACTION_FN).toBeCalled();
     });
diff --git a/src/components/dialog/__tests__/confirm.test.tsx b/src/components/dialog/__tests__/confirm.test.tsx
index 57d1ade3c..9c3edac4f 100644
--- a/src/components/dialog/__tests__/confirm.test.tsx
+++ b/src/components/dialog/__tests__/confirm.test.tsx
@@ -68,9 +68,6 @@ describe('Test Confirm Component', () => {
             const icon = querySelector('.codicon-warning');
             expect(icon).not.toBeNull();
 
-            const title = querySelector('.mo-modal-title');
-            expect(title?.textContent).toBe(TEST_TITLE);
-
             const confirmTitle = querySelector(`.${textConfirmClassName}`);
             expect(confirmTitle?.textContent).toBe(TEST_TITLE);
 
diff --git a/src/components/dialog/actionButton.tsx b/src/components/dialog/actionButton.tsx
index d2d5333c2..819c05b46 100644
--- a/src/components/dialog/actionButton.tsx
+++ b/src/components/dialog/actionButton.tsx
@@ -1,21 +1,23 @@
 import React, { useRef } from 'react';
 import { Button, IButtonProps } from 'mo/components/button';
-export interface ActionButtonProps extends IButtonProps {
+export interface ActionButtonProps {
     actionFn?: (...args: any[]) => any | PromiseLike<any>;
-    closeModal: Function;
+    close?: Function;
+    buttonProps?: IButtonProps;
+    children?: React.ReactNode;
 }
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {
     const clickedRef = useRef<boolean>(false);
+    const { close } = props;
 
     const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
-        const { closeModal } = props;
         if (!returnValueOfOnOk || !returnValueOfOnOk.then) {
             return;
         }
         returnValueOfOnOk.then(
             (...args: any[]) => {
-                closeModal(...args);
+                close?.(...args);
             },
             (e: Error) => {
                 // eslint-disable-next-line no-console
@@ -26,32 +28,32 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     };
 
     const onClick = () => {
-        const { actionFn, closeModal } = props;
+        const { actionFn, close } = props;
         if (clickedRef.current) {
             return;
         }
         clickedRef.current = true;
         if (!actionFn) {
-            closeModal();
+            close?.();
             return;
         }
         let returnValueOfOnOk;
         if (actionFn!.length) {
-            returnValueOfOnOk = actionFn(closeModal);
+            returnValueOfOnOk = actionFn(close);
             clickedRef.current = false;
         } else {
             returnValueOfOnOk = actionFn();
             if (!returnValueOfOnOk) {
-                closeModal();
+                close?.();
                 return;
             }
         }
         handlePromiseOnOk(returnValueOfOnOk);
     };
 
-    const { children, ...resetProps } = props;
+    const { children, buttonProps } = props;
     return (
-        <Button onClick={onClick} {...resetProps}>
+        <Button onClick={onClick} {...buttonProps}>
             {children}
         </Button>
     );
diff --git a/src/components/dialog/confirm.tsx b/src/components/dialog/confirm.tsx
index 5a4757ca5..52f5d61db 100644
--- a/src/components/dialog/confirm.tsx
+++ b/src/components/dialog/confirm.tsx
@@ -18,7 +18,7 @@ export default function confirm(config: IModalFuncProps) {
     const div = document.createElement('div');
     document.body.appendChild(div);
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    let currentConfig = { ...config, close, visible: true } as any;
+    const currentConfig = { ...config, close, visible: true } as any;
 
     function destroy(...args: any[]) {
         const triggerCancel = args.some(
@@ -46,21 +46,16 @@ export default function confirm(config: IModalFuncProps) {
     function render({ okText, cancelText, ...props }: any) {
         renderUtils(
             <ConfirmDialog
-                {...props}
                 okText={okText}
                 cancelText={cancelText}
+                {...props}
             />,
             div
         );
     }
 
     function close(...args: any[]) {
-        currentConfig = {
-            ...currentConfig,
-            visible: false,
-            afterClose: () => destroy(...args),
-        };
-        render(currentConfig);
+        destroy(...args);
     }
 
     render(currentConfig);
diff --git a/src/components/dialog/confirmDialog.tsx b/src/components/dialog/confirmDialog.tsx
index 34eae9c47..c344f4701 100644
--- a/src/components/dialog/confirmDialog.tsx
+++ b/src/components/dialog/confirmDialog.tsx
@@ -29,14 +29,14 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         onOk,
         close,
         maskStyle,
-        okText = 'delete',
+        okText = 'Ok',
         okButtonProps,
-        cancelText = 'cancel',
+        cancelText = 'Cancel',
         cancelButtonProps,
+        okCancel,
         bodyStyle,
-        closable = true,
+        closable = false,
         className,
-        okCancel,
         width = 520,
         style = {},
         mask = true,
@@ -44,11 +44,10 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         transitionName = 'zoom',
         maskTransitionName = 'fade',
         type,
-        ...resetProps
+        visible,
     } = props;
 
     const confirmDescriperClassName = iconConfirmClassName(type);
-
     const classString = classNames(
         confirmClassName,
         confirmDescriperClassName,
@@ -58,8 +57,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     const cancelButton = okCancel && (
         <ActionButton
             actionFn={onCancel}
-            closeModal={close}
-            {...cancelButtonProps}
+            close={close}
+            buttonProps={cancelButtonProps}
         >
             {cancelText}
         </ActionButton>
@@ -73,16 +72,17 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                 [centeredConfirmClassName]: !!props.centered,
             })}
             onCancel={() => close({ triggerCancel: true })}
-            title=""
             transitionName={transitionName}
-            footer=""
             maskTransitionName={maskTransitionName}
             mask={mask}
             maskClosable={maskClosable}
             style={style}
             width={width}
             closable={closable}
-            {...resetProps}
+            footer=""
+            title=""
+            maskStyle={maskStyle}
+            visible={visible}
         >
             <div className={containerConfirmClassName} style={bodyStyle}>
                 <div className={contentConfirmClassName}>
@@ -105,8 +105,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                             {
                                 <ActionButton
                                     actionFn={onOk}
-                                    closeModal={close}
-                                    {...okButtonProps}
+                                    close={close}
+                                    buttonProps={okButtonProps}
                                 >
                                     {okText}
                                 </ActionButton>
diff --git a/src/components/dialog/modal.tsx b/src/components/dialog/modal.tsx
index 087bb3cad..d6a1e48fc 100644
--- a/src/components/dialog/modal.tsx
+++ b/src/components/dialog/modal.tsx
@@ -89,8 +89,8 @@ export const Modal: React.FC<IModalProps> = (props: IModalProps) => {
         centered,
         getContainer,
         closeIcon,
-        cancelText = 'cancel',
-        okText = 'ok',
+        cancelText = 'Cancel',
+        okText = 'Ok',
         ...restProps
     } = props;
 
diff --git a/src/components/dialog/style.scss b/src/components/dialog/style.scss
index 0b2502087..b28e1a4e2 100644
--- a/src/components/dialog/style.scss
+++ b/src/components/dialog/style.scss
@@ -67,12 +67,14 @@
     }
 
     &-footer {
+        border-radius: 0 0 2px 2px;
         display: flex;
-        font-size: 13px;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 20px 10px 10px;
+        padding: 10px 16px;
 
-        .mo-botton {
+        .mo-btn {
+            margin-left: 8px;
             width: fit-content;
         }
     }
@@ -98,10 +100,10 @@
         &--x {
             display: block;
             font-size: 16px;
-            height: 40px;
+            height: 54px;
             line-height: 40px;
             text-align: center;
-            width: 40px;
+            width: 54px;
         }
     }
 }
@@ -155,7 +157,13 @@
 
     &__btns {
         display: flex;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 20px 10px 10px;
+        padding: 10px 16px;
+
+        .mo-btn {
+            margin-left: 8px;
+            width: fit-content;
+        }
     }
 }
diff --git a/stories/components/17-Dialog.stories.tsx b/stories/components/17-Dialog.stories.tsx
index ce167fa91..d5d9d6e80 100644
--- a/stories/components/17-Dialog.stories.tsx
+++ b/stories/components/17-Dialog.stories.tsx
@@ -24,14 +24,19 @@ stories.add('Basic Usage', () => {
 
     function showConfirm() {
         confirm({
-            title: 'Are you sure you want to permanently delete ?',
-            content: 'This action is irreversible!',
-            cancelButtonProps: { disabled: true },
+            title: 'Tweet us your feedback',
+            content: (
+                <div>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </div>
+            ),
             onOk() {
-                console.log('OK');
+                console.log('onOk');
             },
             onCancel() {
-                console.log('Cancel');
+                console.log('onCancel');
             },
         });
     }

From e345ce975b3ea68d4b63fb9b63c5d5f782530eec Mon Sep 17 00:00:00 2001
From: mortalYoung <yangwei1@outlook.com>
Date: Fri, 21 Oct 2022 17:54:52 +0800
Subject: [PATCH 8/8] chore(release): 1.2.0

---
 CHANGELOG.md | 13 +++++++++++++
 package.json |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 800b1d45d..43e478933 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.2.0](https://github.com/DTStack/molecule/compare/v1.1.1...v1.2.0) (2022-10-21)
+
+### Features
+
+-   define loadedKey to be controlled ([#803](https://github.com/DTStack/molecule/issues/803)) ([219b937](https://github.com/DTStack/molecule/commit/219b937215994a17beff99f745c75aec15be35d5))
+-   support stop event emit ([#807](https://github.com/DTStack/molecule/issues/807)) ([f8451eb](https://github.com/DTStack/molecule/commit/f8451ebfd40bdc8ad1e235dee19d6a991d442b77))
+
+### Bug Fixes
+
+-   delcare the useEffect before return ([#808](https://github.com/DTStack/molecule/issues/808)) ([3b73285](https://github.com/DTStack/molecule/commit/3b73285bdcd37f4b425b007df0f554127c17d5cb))
+-   fix switch panels between problem and output ([32641b9](https://github.com/DTStack/molecule/commit/32641b9730586e408740d7ad5c150493fad17476))
+-   improve breadcrumb ([#815](https://github.com/DTStack/molecule/issues/815)) ([60a66ab](https://github.com/DTStack/molecule/commit/60a66abed67148127f0faf1189661d15b77e83ed))
+
 ### [1.1.1](https://github.com/DTStack/molecule/compare/v1.1.0...v1.1.1) (2022-08-31)
 
 ### Bug Fixes
diff --git a/package.json b/package.json
index 85bd42259..5890a71b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dtinsight/molecule",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "A Web IDE UI Framework built with React.js, inspired by VSCode.",
     "module": "./esm/index.js",
     "typings": "./esm/index.d.ts",