@ecoding/components.antd 0.0.6 → 0.0.7

package/lib/core/modal/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 export interface IModalProps {
+    key?: string;
+    id?: string;
     className?: string;
     open?: boolean;
     bodyStyle?: React.CSSProperties;
@@ -19,6 +21,32 @@ export interface IModalProps {
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
 }
+export declare class Modals extends React.Component<IModalProps> {
+    static defaultProps: {
+        className: string;
+        open: boolean;
+        bodyStyle: {};
+        width: string;
+        zIndex: number;
+        mask: boolean;
+        title: string;
+        okType: string;
+        okText: string;
+        cancelText: string;
+        closable: boolean;
+        footer: string;
+        onOk: () => Promise<void>;
+        onCancel: () => Promise<void>;
+        component: null;
+    };
+    state: {
+        loading: boolean;
+        open: boolean | undefined;
+    };
+    cancel: () => void;
+    ok: () => void;
+    render(): JSX.Element;
+}
 declare const _default: {
     show(props?: IModalProps): void;
     hide(props?: IModalProps): void;

package/lib/core/modal/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Modal, Button } from 'antd';
-import Notification from '../../helpers/notification';
-const notification = Notification.newInstance();
-class Modals extends React.Component {
+import InjectNotification from '../../helpers/inject.notification';
+const timeout = 300;
+export class Modals extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
             loading: false,
-            open: true
+            open: this.props.open
         };
         this.cancel = () => {
             if (this.state.loading) {
@@ -18,7 +18,9 @@ class Modals extends React.Component {
                     this.setState({
                         open: false
                     });
-                    // hideModal();
+                    setTimeout(() => {
+                        InjectNotification.removeNotice(this.props.id);
+                    }, timeout);
                 });
         };
         this.ok = () => {
@@ -33,8 +35,10 @@ class Modals extends React.Component {
                         loading: false,
                         open: false
                     });
-                    // hideModal();
-                    this.props.onOkAfter && this.props.onOkAfter(res);
+                    setTimeout(() => {
+                        InjectNotification.removeNotice(this.props.id);
+                        this.props.onOkAfter && this.props.onOkAfter(res);
+                    }, timeout);
                 })
                     .catch(() => {
                     this.setState({
@@ -45,24 +49,55 @@ class Modals extends React.Component {
     }
     render() {
         // if (!this.props.visible) return null;
-        return (React.createElement(Modal, { className: this.props.className, open: this.state.open, bodyStyle: this.props.bodyStyle, width: this.props.width, zIndex: this.props.zIndex, mask: this.props.mask, title: this.props.title, closable: this.props.closable, onCancel: this.cancel, footer: this.props.footer === null ? null : this.props.footer ? (this.props.footer) : (React.createElement(React.Fragment, null,
+        return (React.createElement(Modal, { className: this.props.className, open: this.state.open, bodyStyle: this.props.bodyStyle, width: this.props.width, zIndex: this.props.zIndex, mask: this.props.mask, title: this.props.title, closable: this.props.closable, onCancel: this.cancel, centered: true, destroyOnClose: true, keyboard: false, footer: this.props.footer === null ? null : this.props.footer ? (this.props.footer) : (React.createElement(React.Fragment, null,
                 this.props.addonBefore ? this.props.addonBefore : null,
                 React.createElement(Button, { key: "back", onClick: this.cancel }, this.props.cancelText),
                 React.createElement(Button, { key: "submit", type: this.props.okType, loading: this.state.loading, onClick: this.ok }, this.props.okText),
-                this.props.addonAfter ? this.props.addonAfter : null)), centered: true, destroyOnClose: true, keyboard: false }, this.props.component ? this.props.component : null));
+                this.props.addonAfter ? this.props.addonAfter : null)) }, this.props.component ? this.props.component : null));
     }
 }
 Modals.defaultProps = {
-    tip: ''
+    className: "g-modals",
+    open: false,
+    bodyStyle: {},
+    width: "80vw",
+    zIndex: 950,
+    mask: true,
+    title: "标题",
+    okType: "primary",
+    okText: "保存",
+    cancelText: "取消",
+    closable: true,
+    footer: "",
+    onOk: function () {
+        return Promise.resolve();
+    },
+    onCancel: function () {
+        return Promise.resolve();
+    },
+    component: null
 };
 export default {
     show(props = {}) {
-        if (notification) {
-            notification.removeNotice('modals');
+        props.open = true;
+        props.id = props.id || props.key || "modals";
+        if (props.footer !== null && !props.footer) {
+            props.footer = "";
+        }
+        if (!props.okText) {
+            props.okText = "保存";
+        }
+        if (!props.cancelText) {
+            props.cancelText = "取消";
         }
-        notification.notice(React.createElement(Modals, Object.assign({}, props, { key: "modals" })));
+        InjectNotification.notice(React.createElement(Modals, Object.assign({}, props, { key: props.id })));
     },
     hide(props = {}) {
-        notification.removeNotice('modals');
+        props.open = false;
+        props.footer = "";
+        props.id = props.id || "modals";
+        setTimeout(() => {
+            InjectNotification.removeNotice(props.id);
+        }, timeout);
     }
 };

package/lib/helpers/inject.notification.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface IState {
+    notices: React.Attributes[];
+    target: HTMLElement | null;
+}
+declare class InjectNotification extends React.Component<any, IState> {
+    static notice(component: any): void;
+    static removeNotice(key: any): void;
+    constructor(props: any);
+    add(notice: React.Attributes): void;
+    remove(key: string): void;
+    getNoticeList(): React.Attributes[];
+    componentDidMount(): void;
+    render(): React.ReactPortal | null;
+}
+export default InjectNotification;

package/lib/helpers/inject.notification.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import EventEmitter from "@ecoding/helper.event";
+const instanceEvent = new EventEmitter();
+// notification是父组件容器，通过其方法做额外渲染到 body 上的react节点
+// 是动态插入和删除DOM节点的核心
+class InjectNotification extends React.Component {
+    static notice(component) {
+        instanceEvent.emit("InjectNotification/SHOW", component);
+    }
+    static removeNotice(key) {
+        instanceEvent.emit("InjectNotification/HIDE", key);
+    }
+    constructor(props) {
+        super(props);
+        this.state = {
+            target: null,
+            notices: []
+        };
+    }
+    // 创建一个监听项
+    add(notice) {
+        // 添加notice
+        // 创造一个不重复的key
+        const { notices } = this.state;
+        const key = notice.key;
+        const index = notices.findIndex(item => item.key === key);
+        if (index === -1) {
+            // 不存在重复的 添加
+            notices.push(notice);
+            this.setState({
+                notices,
+            });
+        }
+        else {
+            const temp = notices.splice(index, 1);
+            console.log(notices.concat(temp));
+            this.setState(Object.assign({}, {
+                notices: notices.concat(temp),
+            }));
+        }
+    }
+    // 删除一个监听项
+    remove(key) {
+        this.setState(previousState => {
+            return {
+                notices: previousState.notices.filter(notice => notice.key !== key)
+            };
+        });
+    }
+    getNoticeList() {
+        const { notices } = this.state;
+        return notices.map((notice, i) => {
+            return notice;
+        });
+    }
+    componentDidMount() {
+        this.setState({
+            target: document.body,
+            notices: []
+        });
+        instanceEvent.on("InjectNotification/SHOW", this.add, this);
+        instanceEvent.on("InjectNotification/HIDE", this.remove, this);
+    }
+    render() {
+        const noticesDOM = this.getNoticeList();
+        return this.state.target ? createPortal(noticesDOM, this.state.target) : null;
+    }
+}
+export default InjectNotification;

package/lib/helpers/notification.d.ts

@@ -8,12 +8,12 @@ declare class Notification extends React.Component<any, IState> {
         notice(component: TNotices): void;
         removeNotice(key: string): void;
         destroy(): void;
-        component: any;
+        component: React.RefObject<unknown>;
     };
     constructor(props: any);
     add(notice: TNotices): void;
     remove(key: string): void;
-    getNoticeDOM(): React.Attributes[];
+    getNoticeList(): React.Attributes[];
     render(): JSX.Element;
 }
 export default Notification;

package/lib/helpers/notification.js

@@ -1,24 +1,25 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { createElement, createRef } from "react";
+import { createRoot } from "react-dom/client";
 // notification是父组件容器，通过其方法做额外渲染到 body 上的react节点
 // 是动态插入和删除DOM节点的核心
 class Notification extends React.Component {
     static newInstance() {
-        const div = document.createElement("div");
-        document.body.appendChild(div);
-        const notification = ReactDOM.render(React.createElement(Notification, null), div);
+        const notification = createRef();
+        const div = document.createElement("Other");
+        const root = createRoot(div);
+        root.render(createElement(Notification, { ref: notification }));
         return {
             notice(component) {
-                notification.add(component);
+                notification.current.add(component);
             },
             removeNotice(key) {
-                notification.remove(key);
+                notification.current.remove(key);
             },
             destroy() {
-                ReactDOM.unmountComponentAtNode(div);
-                document.body.removeChild(div);
+                // unmountComponentAtNode(div);
+                root.unmount();
             },
-            component: notification
+            component: notification,
         };
     }
     constructor(props) {
@@ -38,7 +39,7 @@ class Notification extends React.Component {
             // 不存在重复的 添加
             notices.push(notice);
             this.setState({
-                notices
+                notices,
             });
         }
     }
@@ -50,14 +51,14 @@ class Notification extends React.Component {
             };
         });
     }
-    getNoticeDOM() {
+    getNoticeList() {
         const { notices } = this.state;
         return notices.map((notice, i) => {
             return notice;
         });
     }
     render() {
-        const noticesDOM = this.getNoticeDOM();
+        const noticesDOM = this.getNoticeList();
         return (React.createElement(React.Fragment, null, noticesDOM));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -24,6 +24,7 @@
         "build": "rm -rf lib && tsc"
     },
     "peerDependencies": {
+        "@ecoding/helper.event": ">=0.0.2",
         "@ecoding/helper.is": ">=0.0.4",
         "@ecoding/helper.json": ">=0.0.5",
         "@ecoding/helper.request.hook": ">=0.0.6",
@@ -31,6 +32,7 @@
         "axios": ">=1.1.2"
     },
     "devDependencies": {
+        "@ecoding/helper.event": "^0.0.2",
         "@ecoding/helper.is": "^0.0.4",
         "@ecoding/helper.json": "^0.0.5",
         "@ecoding/helper.request.hook": "^0.0.6",
@@ -40,5 +42,5 @@
     "dependencies": {
         "react-quill": "^2.0.0"
     },
-    "gitHead": "05844c415468a69e3aa77f4e4748b4451b1d8a94"
+    "gitHead": "d41d5a815bc583f5499c1d0120a833a0622538f5"
 }