@ecoding/components.antd 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# `@ecoding/components.layout`
+
+> TODO: description
+
+## Usage
+
+```
+const components.layout = require('@ecoding/components.layout');
+
+// TODO: DEMONSTRATE API
+```

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface IComfirm {
+    title?: string;
+    content?: React.ReactNode;
+    okText?: string;
+    cancelText?: string;
+    okType?: "primary" | "default" | "ghost" | "dashed" | "link" | "text" | "danger" | undefined;
+    onOk: () => Promise<any>;
+    onCancel?: () => Promise<any>;
+}
+declare const confirm: {
+    showDelete(opts: IComfirm): void;
+    show(opts: IComfirm): void;
+};
+export default confirm;

package/lib/core/confirm/index.js

@@ -0,0 +1,79 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+const confirm = {
+    showDelete(opts) {
+        let loading = false;
+        Modal.confirm({
+            okType: 'danger',
+            icon: _jsx(ExclamationCircleOutlined, {}),
+            title: opts.title || '确定要删除吗？',
+            content: opts.content || '',
+            okText: opts.okText || '确定',
+            cancelText: opts.okText || '取消',
+            onOk() {
+                loading = true;
+                return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield opts.onOk();
+                        resolve(true);
+                    }
+                    catch (e) {
+                        loading = false;
+                        reject(false);
+                    }
+                }));
+            },
+            onCancel() {
+                if (loading) {
+                    return Promise.reject('正在请求中，不可关闭');
+                }
+                if (opts.onCancel) {
+                    return opts.onCancel();
+                }
+            },
+        });
+    },
+    show(opts) {
+        let loading = false;
+        Modal.confirm({
+            icon: _jsx(ExclamationCircleOutlined, {}),
+            title: opts.title || '标题',
+            content: opts.content || '',
+            okType: opts.okType || 'primary',
+            okText: opts.okText || '确定',
+            cancelText: opts.okText || '取消',
+            onOk() {
+                loading = true;
+                return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield opts.onOk();
+                        resolve(true);
+                    }
+                    catch (e) {
+                        loading = false;
+                        reject(false);
+                    }
+                }));
+            },
+            onCancel() {
+                if (loading) {
+                    return Promise.reject('正在请求中，不可关闭');
+                }
+                if (opts.onCancel) {
+                    return opts.onCancel();
+                }
+            },
+        });
+    }
+};
+export default confirm;

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

@@ -0,0 +1,8 @@
+interface ILoadingFCProps {
+    tip?: string;
+}
+declare const _default: {
+    show(props?: ILoadingFCProps): void;
+    hide(props?: ILoadingFCProps): void;
+};
+export default _default;

package/lib/core/loading/index.js

@@ -0,0 +1,41 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spin } from 'antd';
+import Notification from '../../helpers/notification';
+const notification = Notification.newInstance();
+const LoadingFC = (props) => {
+    const maskStyle = {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 9001,
+        backgroundColor: '#fff',
+        height: '100%',
+        opacity: 0.45
+    };
+    const alertStyle = {
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        maxWidth: 340,
+        zIndex: 9002,
+        transform: 'translate(-50%, -70%)'
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: maskStyle }), _jsx("div", Object.assign({ style: alertStyle }, { children: _jsx(Spin, { size: "large", tip: props.tip }) }))] }));
+};
+LoadingFC.defaultProps = {
+    tip: ''
+};
+export default {
+    show(props = {}) {
+        if (notification) {
+            notification.removeNotice('loading');
+        }
+        notification.notice(_createElement(LoadingFC, Object.assign({}, props, { key: "loading" })));
+    },
+    hide(props = {}) {
+        notification.removeNotice('loading');
+    }
+};

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

@@ -0,0 +1,15 @@
+interface IToastFCProps {
+    mask?: boolean;
+    title?: string;
+    maskTheme?: string;
+    duration?: number;
+    auto?: boolean;
+    type?: 'error' | 'warning' | 'info' | 'success';
+}
+declare const _default: {
+    info(props?: IToastFCProps): void;
+    success(props?: IToastFCProps): void;
+    warning(props?: IToastFCProps): void;
+    error(props?: IToastFCProps): void;
+};
+export default _default;

package/lib/core/toast/index.js

@@ -0,0 +1,79 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Alert } from 'antd';
+import Notification from '../../helpers/notification';
+const notification = Notification.newInstance();
+var EaskTheme;
+(function (EaskTheme) {
+    EaskTheme["dark"] = "#333";
+    EaskTheme["light"] = "#fff";
+})(EaskTheme || (EaskTheme = {}));
+const typeMap = {
+    error: '错误',
+    warning: '警告',
+    info: '提示',
+    success: '成功'
+};
+const ToastFC = (props) => {
+    const maskStyle = {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 9000,
+        height: '100%',
+        opacity: 0.45
+    };
+    const alertStyle = {
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        maxWidth: 340,
+        zIndex: 9001,
+        transform: 'translate(-50%, -70%)'
+    };
+    useEffect(() => {
+        if (props.duration === 0) {
+            return;
+        }
+        const timeout = setTimeout(() => {
+            if (props.auto) {
+                notification.removeNotice('toast');
+            }
+        }, props.duration);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [props.mask ? _jsx("div", { style: Object.assign(maskStyle, { backgroundColor: props.maskTheme === 'light' ? EaskTheme.light : EaskTheme.dark }) }) : null, _jsx("div", Object.assign({ style: alertStyle }, { children: _jsx(Alert, { description: props.title, message: typeMap[props.type], type: props.type, showIcon: true, closable: true, onClose: () => notification.removeNotice('toast') }) }))] }));
+};
+ToastFC.defaultProps = {
+    mask: false,
+    title: '提示',
+    maskTheme: 'light',
+    duration: 2000,
+    auto: true,
+    type: 'success'
+};
+const show = (props = {}) => {
+    if (notification) {
+        notification.removeNotice('toast');
+    }
+    notification.notice(_createElement(ToastFC, Object.assign({}, props, { key: "toast" })));
+};
+export default {
+    info(props = {}) {
+        return show(Object.assign(Object.assign({}, props), { type: 'info' }));
+    },
+    success(props = {}) {
+        return show(Object.assign(Object.assign({}, props), { type: 'success' }));
+    },
+    warning(props = {}) {
+        return show(Object.assign(Object.assign({}, props), { type: 'warning' }));
+    },
+    error(props = {}) {
+        return show(Object.assign(Object.assign({}, props), { type: 'error' }));
+    },
+};

package/lib/helpers/notification.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare type TNotices = React.Attributes;
+interface IState {
+    notices: TNotices[];
+}
+declare class Notification extends React.Component<any, IState> {
+    static newInstance(): {
+        notice(component: TNotices): void;
+        removeNotice(key: string): void;
+        destroy(): void;
+        component: any;
+    };
+    constructor(props: any);
+    add(notice: TNotices): void;
+    remove(key: string): void;
+    getNoticeDOM(): React.Attributes[];
+    render(): JSX.Element;
+}
+export default Notification;

package/lib/helpers/notification.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom";
+// notification是父组件容器，通过其方法做额外渲染到 body 上的react节点
+// 是动态插入和删除DOM节点的核心
+class Notification extends React.Component {
+    static newInstance() {
+        const div = document.createElement("div");
+        document.body.appendChild(div);
+        const notification = ReactDOM.render(_jsx(Notification, {}), div);
+        return {
+            notice(component) {
+                notification.add(component);
+            },
+            removeNotice(key) {
+                notification.remove(key);
+            },
+            destroy() {
+                ReactDOM.unmountComponentAtNode(div);
+                document.body.removeChild(div);
+            },
+            component: notification
+        };
+    }
+    constructor(props) {
+        super(props);
+        this.state = {
+            notices: []
+        };
+    }
+    // 创建一个监听项
+    add(notice) {
+        // 添加notice
+        // 创造一个不重复的key
+        const { notices } = this.state;
+        const key = notice.key;
+        const temp = notices.filter(item => item.key === key).length;
+        if (!temp) {
+            // 不存在重复的 添加
+            notices.push(notice);
+            this.setState({
+                notices
+            });
+        }
+    }
+    // 删除一个监听项
+    remove(key) {
+        this.setState(previousState => {
+            return {
+                notices: previousState.notices.filter(notice => notice.key !== key)
+            };
+        });
+    }
+    getNoticeDOM() {
+        const { notices } = this.state;
+        return notices.map((notice, i) => {
+            return notice;
+        });
+    }
+    render() {
+        const noticesDOM = this.getNoticeDOM();
+        return (_jsx(_Fragment, { children: noticesDOM }));
+    }
+}
+export default Notification;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Toast } from "./core/toast";
+export { default as Loading } from "./core/loading";
+export { default as Confirm } from "./core/confirm";

package/lib/index.js

@@ -0,0 +1,3 @@
+export { default as Toast } from "./core/toast";
+export { default as Loading } from "./core/loading";
+export { default as Confirm } from "./core/confirm";

package/lib/types/index.d.ts

@@ -0,0 +1,12 @@
+export declare type Types = "react" | "vue" | "pkg";
+export declare type Props = {
+    category: Types | null;
+    appname: string;
+};
+export interface IBaseFactory {
+    prompting?: () => void;
+    default?: () => void;
+    writing?: () => void;
+    install?: () => void;
+    end?: () => void;
+}

package/lib/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@ecoding/components.antd",
+    "version": "0.0.1",
+    "author": "cxc",
+    "homepage": "",
+    "license": "MIT",
+    "directories": {
+        "lib": "lib",
+        "test": "__tests__"
+    },
+    "files": [
+        "lib"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./lib/index.js",
+    "module": "./lib/index.js",
+    "typings": "./lib/index.d.ts",
+    "scripts": {
+        "unlink": "npm unlink",
+        "link": "npm link",
+        "dev": "tsc -w",
+        "build": "rm -rf lib && tsc"
+    },
+    "gitHead": "db098300a2dd7b59f4d25fecffd878df08b80cc3"
+}