@ecoding/components.antd 0.0.6 → 0.0.8

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

@@ -0,0 +1,56 @@
+import React from 'react';
+export interface IDrawerProps {
+    key?: string;
+    id?: string;
+    className?: string;
+    bodyStyle?: React.CSSProperties;
+    closable?: boolean;
+    maskClosable?: boolean;
+    open?: boolean;
+    width?: string;
+    zIndex?: number;
+    title?: React.ReactNode;
+    okType?: "text" | "link" | "ghost" | "default" | "primary" | "dashed" | undefined;
+    okText?: string;
+    cancelText?: string;
+    mask?: boolean;
+    footer?: React.ReactNode;
+    onOk?: () => Promise<any>;
+    onOkAfter?: (args: any) => void | Promise<any>;
+    onCancel?: () => Promise<any>;
+    component?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+}
+export declare class Drawers extends React.Component<IDrawerProps> {
+    static defaultProps: {
+        className: string;
+        open: boolean;
+        bodyStyle: {};
+        width: string;
+        zIndex: number;
+        mask: boolean;
+        title: string;
+        okType: string;
+        okText: string;
+        cancelText: string;
+        maskClosable: boolean;
+        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?: IDrawerProps): void;
+    hide(props?: IDrawerProps): void;
+};
+export default _default;

package/lib/core/drawer/index.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Drawer, Button } from 'antd';
+import InjectNotification from '../inject-notification';
+const timeout = 300;
+export class Drawers extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            loading: false,
+            open: this.props.open
+        };
+        this.cancel = () => {
+            if (this.state.loading) {
+                return;
+            }
+            this.props.onCancel &&
+                this.props.onCancel().then(() => {
+                    this.setState({
+                        open: false
+                    });
+                    setTimeout(() => {
+                        InjectNotification.removeNotice(this.props.id);
+                    }, timeout);
+                });
+        };
+        this.ok = () => {
+            this.setState({
+                loading: true
+            });
+            this.props.onOk &&
+                this.props
+                    .onOk()
+                    .then((res) => {
+                    this.setState({
+                        loading: false,
+                        open: false
+                    });
+                    setTimeout(() => {
+                        InjectNotification.removeNotice(this.props.id);
+                        this.props.onOkAfter && this.props.onOkAfter(res);
+                    }, timeout);
+                })
+                    .catch(() => {
+                    this.setState({
+                        loading: false
+                    });
+                });
+        };
+    }
+    render() {
+        // if (!this.props.visible) return null;
+        return (React.createElement(Drawer, { className: this.props.className, bodyStyle: this.props.bodyStyle, open: this.props.open, destroyOnClose: true, maskClosable: this.props.maskClosable, keyboard: false, title: this.props.title, footer: this.props.footer === null ? null : this.props.footer ? (this.props.footer) : (React.createElement("div", { className: "tac" },
+                this.props.addonBefore ? this.props.addonBefore : null,
+                React.createElement(Button, { className: "mr10", 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)), width: this.props.width, zIndex: this.props.zIndex, mask: this.props.mask, onClose: this.cancel, closable: this.props.closable }, this.props.component ? this.props.component : null));
+    }
+}
+Drawers.defaultProps = {
+    className: "g-drawer",
+    open: false,
+    bodyStyle: {},
+    width: "60vw",
+    zIndex: 900,
+    mask: true,
+    title: "标题",
+    okType: "primary",
+    okText: "保存",
+    cancelText: "取消",
+    maskClosable: true,
+    closable: true,
+    footer: "",
+    onOk: function () {
+        return Promise.resolve();
+    },
+    onCancel: function () {
+        return Promise.resolve();
+    },
+    component: null
+};
+export default {
+    show(props = {}) {
+        props.open = true;
+        props.id = props.id || props.key || "drawers";
+        if (props.footer !== null && !props.footer) {
+            props.footer = "";
+        }
+        if (!props.okText) {
+            props.okText = "保存";
+        }
+        if (!props.cancelText) {
+            props.cancelText = "取消";
+        }
+        InjectNotification.notice(React.createElement(Drawers, Object.assign({}, props, { key: props.id })));
+    },
+    hide(props = {}) {
+        props.open = false;
+        props.footer = "";
+        props.id = props.id || "drawers";
+        setTimeout(() => {
+            InjectNotification.removeNotice(props.id);
+        }, timeout);
+    }
+};

package/lib/core/inject-notification/index.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/core/inject-notification/index.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/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 '../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/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/lib/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Toast } from "./core/toast";
 export { default as Loading } from "./core/loading";
 export { default as Modal } from "./core/modal";
+export { default as InjectNotification } from "./core/inject-notification";
 export { default as Confirm } from "./core/confirm";
 export { default as AsyncCascader } from "./core/async-cascader";
 export { default as LengthInput } from "./core/length-input";

package/lib/index.js

@@ -1,6 +1,7 @@
 export { default as Toast } from "./core/toast";
 export { default as Loading } from "./core/loading";
 export { default as Modal } from "./core/modal";
+export { default as InjectNotification } from "./core/inject-notification";
 export { default as Confirm } from "./core/confirm";
 export { default as AsyncCascader } from "./core/async-cascader";
 export { default as LengthInput } from "./core/length-input";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "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": "1efade9b77a4b03945a80f85c6e0fb69ad187e89"
 }