@ecoding/components.antd 0.0.2 → 0.0.3

package/lib/core/async-cascader/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { BaseOptionType } from "antd/lib/cascader";
+interface IFace {
+    url: string;
+    paramKey?: string;
+    paramValue?: string;
+    method?: string;
+    cache?: boolean;
+    format?: {
+        [props: string]: any;
+        isLeaf: boolean;
+    };
+    params?: any;
+    fromKey?: string[] | string;
+}
+interface IProps {
+    ifaces: IFace[];
+    placeholder?: string;
+    onChange?: (value: any, selectedOptions?: BaseOptionType[]) => void;
+    className?: string;
+    value?: string[] | number[];
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+declare const AsyncCascader: React.FC<IProps>;
+export default AsyncCascader;

package/lib/core/async-cascader/index.js

@@ -0,0 +1,181 @@
+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 React, { useCallback, useEffect, useState, memo, useMemo } from "react";
+import { Cascader } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { r } from "../../helpers/http";
+import { isSomething } from "@ecoding/helper.is";
+import { jsonFormatNewKey } from "@ecoding/helper.json";
+const setSourceChilren = (source, key, res) => {
+    const ex = (ary) => {
+        for (let i = 0; i < ary.length; i++) {
+            // eslint-disable-next-line eqeqeq
+            if (ary[i].value == key) {
+                ary[i].children = res;
+                break;
+            }
+            if (ary[i].children && ary[i].children.length > 0) {
+                ex(ary[i].children);
+            }
+        }
+    };
+    ex(source);
+    return source;
+};
+const AsyncCascader = memo((props) => {
+    const [loading, setLoading] = useState(true);
+    const [options, setOptions] = useState([]);
+    const interfaceUrls = useMemo(() => props.ifaces || [], []);
+    useEffect(() => {
+        const ex = () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerEx = () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                // 获得第一个接口信息
+                const firIFace = interfaceUrls[0];
+                let firParams = {};
+                if (firIFace.paramKey) {
+                    // 设置接口调用参数
+                    firParams[firIFace.paramKey] = firIFace.paramValue;
+                }
+                if (firIFace.params) {
+                    firParams = Object.assign({}, firParams, firIFace.params);
+                }
+                let firResOrigin = [];
+                const firMapCache = isSomething(firIFace.cache) ? firIFace.cache : false;
+                // 获取第一级联数据
+                if (((_a = firIFace.method) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === "post") {
+                    firResOrigin = yield r.post(firIFace.url, firParams, { cache: firMapCache });
+                }
+                else {
+                    firResOrigin = yield r.get(firIFace.url, firParams, { cache: firMapCache });
+                }
+                // 指定数据key
+                if (firIFace && firIFace.fromKey) {
+                    if (Array.isArray(firIFace.fromKey)) {
+                        firIFace.fromKey.forEach((key) => {
+                            firResOrigin = firResOrigin[key];
+                        });
+                    }
+                    else {
+                        firResOrigin = firResOrigin[firIFace.fromKey];
+                    }
+                }
+                const res = jsonFormatNewKey(firResOrigin, firIFace.format);
+                const opts = res;
+                // 踢除第一级联的接口，剩下接口根据value数组遍历请求
+                const afterFirFaces = interfaceUrls.slice(1);
+                // 踢除级联最后一位的value，最后的级联不需要请求
+                const ary = (props.value && props.value.slice(0, props.value.length - 1)) || [];
+                // 异步遍历请求开始
+                if (ary && ary.length > 0) {
+                    return new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
+                        let i = -1;
+                        let temp = [];
+                        const exx = () => __awaiter(void 0, void 0, void 0, function* () {
+                            var _b;
+                            i++;
+                            if (i >= ary.length) {
+                                return;
+                            }
+                            const iFace = afterFirFaces[i];
+                            let params = {};
+                            if (iFace.paramKey) {
+                                // 设置接口调用参数
+                                params[iFace.paramKey] = ary[i];
+                            }
+                            if (iFace.params) {
+                                params = Object.assign({}, params, iFace.params);
+                            }
+                            // 获取当前级联数据
+                            let resOrigin = [];
+                            const cache = isSomething(iFace.cache) ? iFace.cache : false;
+                            if (((_b = iFace.method) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase()) === "post") {
+                                resOrigin = yield r.post(iFace.url, params, { cache });
+                            }
+                            else {
+                                resOrigin = yield r.get(iFace.url, params, { cache });
+                            }
+                            // 指定数据key
+                            if (iFace && iFace.fromKey) {
+                                if (Array.isArray(iFace.fromKey)) {
+                                    iFace.fromKey.forEach((key) => {
+                                        resOrigin = resOrigin[key];
+                                    });
+                                }
+                                else {
+                                    resOrigin = resOrigin[iFace.fromKey];
+                                }
+                            }
+                            const formatRes = jsonFormatNewKey(resOrigin, iFace.format);
+                            temp = setSourceChilren(opts, ary[i], formatRes);
+                            if (i < ary.length) {
+                                yield exx();
+                            }
+                        });
+                        yield exx();
+                        resolve(temp);
+                    }));
+                }
+                // 异步遍历请求结束
+                // ary.lenth < 0 return first res
+                return Promise.resolve(res);
+            });
+            const res = yield innerEx();
+            setOptions(res);
+            setLoading(false);
+        });
+        ex();
+    }, []);
+    const loadData = useCallback((selectedOptions) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const len = selectedOptions.length;
+        const targetOption = selectedOptions[len - 1];
+        // 获得接口信息
+        const iFace = interfaceUrls[len];
+        let params = {};
+        if (iFace && iFace.paramKey) {
+            // 设置接口调用参数
+            params[iFace.paramKey] = targetOption.value;
+        }
+        if (iFace.params) {
+            params = Object.assign({}, params, iFace.params);
+        }
+        targetOption.loading = true;
+        // 获取当前级联数据
+        let resOrigin = [];
+        const cache = isSomething(iFace.cache) ? iFace.cache : false;
+        if (((_a = iFace.method) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === "post") {
+            resOrigin = yield r.post(iFace.url, params, { cache });
+        }
+        else {
+            resOrigin = yield r.get(iFace.url, params, { cache });
+        }
+        // 指定数据key
+        if (iFace && iFace.fromKey) {
+            if (Array.isArray(iFace.fromKey)) {
+                iFace.fromKey.forEach((key) => {
+                    resOrigin = resOrigin[key];
+                });
+            }
+            else {
+                resOrigin = resOrigin[iFace.fromKey];
+            }
+        }
+        const res = jsonFormatNewKey(resOrigin, iFace.format);
+        targetOption.loading = false;
+        targetOption.children = res;
+        setOptions([...options]);
+    }), [options]);
+    if (loading) {
+        return React.createElement(LoadingOutlined, { style: { color: "#3E4D5B" } });
+    }
+    return React.createElement(Cascader, Object.assign({}, props, { options: options, loadData: loadData, changeOnSelect: true }));
+});
+export default AsyncCascader;

package/lib/core/async-select/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { SelectProps } from "antd/lib/select";
+interface IFace {
+    url: string;
+    paramKey?: string;
+    paramValue?: string;
+    params?: any;
+    cache?: boolean;
+    method?: string;
+    fromKey?: string[] | string;
+    format?: {
+        [props: string]: any;
+    };
+}
+interface IData {
+    datas: any;
+    format?: {
+        [props: string]: any;
+    };
+}
+interface IProps extends SelectProps<any> {
+    iface?: IFace;
+    data?: IData;
+}
+declare const AsyncSlect: React.FC<IProps>;
+export default AsyncSlect;

package/lib/core/async-select/index.js

@@ -0,0 +1,87 @@
+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 React, { useEffect, useState, memo, useMemo } from "react";
+import { Select } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { r } from "../../helpers/http";
+import { isSomething } from "@ecoding/helper.is";
+import { jsonFormatNewKey } from "@ecoding/helper.json";
+const { Option } = Select;
+const AsyncSlect = memo((props) => {
+    const [loading, setLoading] = useState(true);
+    const [options, setOptions] = useState([]);
+    const iface = useMemo(() => props.iface, []);
+    const data = useMemo(() => props.data, []);
+    useEffect(() => {
+        const ex = () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerEx = () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                // 获得第一个接口信息
+                if (data) {
+                    const res = data.format ? jsonFormatNewKey(data.datas, data.format) : data.datas;
+                    return Promise.resolve(res);
+                }
+                let params = {};
+                if (iface) {
+                    if (iface.paramKey) {
+                        // 设置接口调用参数
+                        params[iface.paramKey] = iface.paramValue;
+                    }
+                    if (iface.params) {
+                        params = Object.assign({}, params, iface.params);
+                    }
+                    let resOrigin = [];
+                    // 这里支持了外部直接传入列表结果
+                    const cache = isSomething(iface.cache) ? iface.cache : false;
+                    if (((_a = iface.method) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === "post") {
+                        resOrigin = yield r.post(iface.url, params, { cache });
+                    }
+                    else {
+                        resOrigin = yield r.get(iface.url, params, { cache });
+                    }
+                    // 指定数据key
+                    if (iface && iface.fromKey) {
+                        if (Array.isArray(iface.fromKey)) {
+                            iface.fromKey.forEach((key) => {
+                                resOrigin = resOrigin[key];
+                            });
+                        }
+                        else {
+                            resOrigin = resOrigin[iface.fromKey];
+                        }
+                    }
+                    const res = jsonFormatNewKey(resOrigin, iface.format);
+                    return Promise.resolve(res);
+                }
+                return Promise.reject("没有iface或data");
+            });
+            const res = yield innerEx();
+            setOptions(res);
+            setLoading(false);
+        });
+        ex();
+    }, []);
+    const children = useMemo(() => {
+        return (options &&
+            options.map((item) => {
+                return (React.createElement(Option, { key: item.value, value: item.value }, item.label));
+            }));
+    }, [options]);
+    if (loading) {
+        return React.createElement(LoadingOutlined, { style: { color: "#3E4D5B" } });
+    }
+    return (React.createElement(Select, Object.assign({ filterOption: (input, option) => {
+            if (Array.isArray(option.children)) {
+                return option.children.join("").toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            }
+            return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        }, allowClear: true, showSearch: true, optionFilterProp: "children" }, props), children));
+});
+export default AsyncSlect;

package/lib/core/async-transfer/index.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TransferProps } from "antd/lib/transfer";
+interface IFace {
+    url: string;
+    paramKey?: string;
+    paramValue?: string;
+    method?: string;
+    cache?: boolean;
+    format?: {
+        [props: string]: any;
+    };
+    params?: any;
+    fromKey?: string[] | string;
+}
+interface IProps extends TransferProps<any> {
+    iface?: IFace;
+    onChange?: any;
+    width?: number;
+    value?: any;
+}
+declare const AsyncTransfer: React.FC<IProps>;
+export default AsyncTransfer;

package/lib/core/async-transfer/index.js

@@ -0,0 +1,96 @@
+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 React, { useEffect, useState, memo, useMemo, useCallback } from "react";
+import { Transfer } from "antd";
+import zhCN from "antd/lib/locale/zh_CN";
+import { LoadingOutlined } from "@ant-design/icons";
+import { r } from "../../helpers/http";
+import { isSomething } from "@ecoding/helper.is";
+import { jsonFormatNewKey } from "@ecoding/helper.json";
+const AsyncTransfer = memo((props) => {
+    const [loading, setLoading] = useState(true);
+    const [dataSource, setDataSource] = useState(props.dataSource || []);
+    const [targetKeys, setTargetKeys] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const iface = useMemo(() => props.iface, []);
+    useEffect(() => {
+        const ex = () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerEx = () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                // 获得第一个接口信息
+                let params = {};
+                if (iface.paramKey) {
+                    // 设置接口调用参数
+                    params[iface.paramKey] = iface.paramValue;
+                }
+                if (iface.params) {
+                    params = Object.assign({}, params, iface.params);
+                }
+                let resOrigin = [];
+                const cache = isSomething(iface.cache) ? iface.cache : false;
+                if (((_a = iface.method) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === "post") {
+                    resOrigin = yield r.post(iface.url, params, { cache });
+                }
+                else {
+                    resOrigin = yield r.get(iface.url, params, { cache });
+                }
+                // 指定数据key
+                if (iface && iface.fromKey) {
+                    if (Array.isArray(iface.fromKey)) {
+                        iface.fromKey.forEach((key) => {
+                            resOrigin = resOrigin[key];
+                        });
+                    }
+                    else {
+                        resOrigin = resOrigin[iface.fromKey];
+                    }
+                }
+                const res = jsonFormatNewKey(resOrigin, iface.format);
+                return Promise.resolve(res);
+            });
+            const res = yield innerEx();
+            setDataSource(res);
+            setTargetKeys(props.value || []);
+            setLoading(false);
+        });
+        if (dataSource && dataSource.length > 0) {
+            setTargetKeys(props.value || []);
+            setLoading(false);
+            return;
+        }
+        ex();
+    }, []);
+    const onChange = useCallback((nextTargetKeys, direction, moveKeys) => {
+        // console.log('targetKeys:', nextTargetKeys);
+        // console.log('moveKeys:', moveKeys);
+        setTargetKeys(nextTargetKeys);
+        props.onChange(nextTargetKeys);
+    }, []);
+    const onSelectChange = useCallback((sourceSelectedKeys, targetSelectedKeys) => {
+        // console.log('sourceSelectedKeys:', sourceSelectedKeys);
+        // console.log('targetSelectedKeys:', targetSelectedKeys);
+        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
+    }, []);
+    if (loading) {
+        return React.createElement(LoadingOutlined, { style: { color: "#3E4D5B" } });
+    }
+    return (React.createElement(Transfer, Object.assign({ filterOption: (input, option) => {
+            if (Array.isArray(option.label)) {
+                return option.label.join("").toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            }
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        }, oneWay: true, showSearch: true, showSelectAll: true, titles: ["选择源", "已选择"], render: (item) => item.label, locale: zhCN.Transfer, pagination: { pageSize: 10 } }, props, { listStyle: props.listStyle && JSON.stringify(props.listStyle) !== "{}"
+            ? props.listStyle
+            : {
+                width: props.width || 300,
+                height: 300
+            }, onChange: onChange, onSelectChange: onSelectChange, targetKeys: targetKeys, selectedKeys: selectedKeys, dataSource: dataSource })));
+});
+export default AsyncTransfer;

package/lib/core/length-input/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface IProps {
+    placeholder?: string;
+    value?: string;
+    max?: number;
+    onChange?: any;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+declare const LengthInput: React.FC<IProps>;
+export default LengthInput;

package/lib/core/length-input/index.js

@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { Input } from "antd";
+const LengthInput = (props) => {
+    const isCompositionStart = useRef(false);
+    const [n, setN] = useState(0);
+    const [v, setV] = useState(props.value || "");
+    const setString = useCallback((str, len) => {
+        let strlen = 0;
+        let s = "";
+        for (let i = 0; i < str.length; i++) {
+            // eslint-disable-next-line no-control-regex
+            const m = str.charAt(i).match(/[^\x00-\x80]/g); // 利用match方法检索出中文字符并返回一个存放中文的数
+            if (m != null && m.length > 0) {
+                strlen += 2;
+            }
+            else {
+                strlen++;
+            }
+            s += str.charAt(i);
+            if (strlen >= len) {
+                return s;
+            }
+        }
+        return s;
+    }, []);
+    const getLen = useCallback((str) => {
+        // 获取字符串的真实长度（字节长度）
+        if (!str) {
+            return 0;
+        }
+        const len = str.length;
+        let truelen = 0;
+        for (let x = 0; x < len; x++) {
+            if (str.charCodeAt(x) > 128) {
+                truelen += 2;
+            }
+            else {
+                truelen += 1;
+            }
+        }
+        return truelen;
+    }, []);
+    const keyUpHandler = useCallback((e) => {
+        let vs = e.target.value;
+        let len = getLen(vs);
+        if (!isCompositionStart.current && len > props.max) {
+            vs = setString(vs, props.max);
+            len = getLen(vs);
+        }
+        setV(vs);
+        setN(len);
+        e.target.value = vs;
+        // 估计form表单会默认有onChange事件
+        props.onChange(e);
+    }, []);
+    useEffect(() => {
+        setV(props.value || "");
+    }, [props]);
+    useEffect(() => {
+        const vs = props.value || "";
+        const len = getLen(vs);
+        setN(len);
+    }, [props]);
+    const compositionStartHandler = useCallback(() => {
+        isCompositionStart.current = true;
+    }, []);
+    const compositionEndHandler = useCallback((e) => {
+        isCompositionStart.current = false;
+        keyUpHandler(e);
+    }, []);
+    return (React.createElement(Input, Object.assign({}, props, { value: v, onCompositionStart: compositionStartHandler, onCompositionEnd: compositionEndHandler, onChange: keyUpHandler, suffix: React.createElement("div", { style: { color: "#666" } },
+            n,
+            React.createElement("span", { style: { padding: "0 2px" } }, "/"),
+            props.max) })));
+};
+LengthInput.defaultProps = {
+    max: 30
+};
+export default LengthInput;

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface IProps {
+    action?: string;
+    value?: string;
+    className?: string;
+    style?: any;
+    onChange?: any;
+    gif?: boolean;
+    size?: number;
+    disabled?: boolean;
+}
+declare const Quill: React.FC<IProps>;
+export default Quill;

package/lib/core/quill/index.js

@@ -0,0 +1,136 @@
+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 React, { useMemo, useCallback, useState, useRef, lazy } from "react";
+import { Upload, message } from "antd";
+import Toast from "../../core/toast";
+import { r } from "../../helpers/http";
+const ReactQuill = lazy(() => import(/* webpackChunkName: "ReactQuill" */ /* webpackPrefetch: true */ "react-quill"));
+const Quill = (props) => {
+    const upRef = useRef();
+    const quillRef = useRef();
+    const [urlParams, setUrlParams] = useState("");
+    const modules = useMemo(() => {
+        return {
+            toolbar: {
+                container: [
+                    ["bold", "italic", "underline", "strike"],
+                    ["blockquote", "code-block"],
+                    [{ header: 1 }, { header: 2 }],
+                    [{ list: "ordered" }, { list: "bullet" }],
+                    [{ script: "sub" }, { script: "super" }],
+                    [{ indent: "-1" }, { indent: "+1" }],
+                    [{ direction: "rtl" }],
+                    [{ size: ["small", false, "large", "huge"] }],
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    [{ color: [] }, { background: [] }],
+                    [{ font: [] }],
+                    [{ align: [] }],
+                    ["link", "image"],
+                    ["clean"]
+                ],
+                handlers: {
+                    image: (value) => {
+                        if (value) {
+                            // ref.current && upRef.current.upload.uploader.uploadFiles([file]);
+                            upRef.current && upRef.current.upload.uploader.fileInput.click();
+                        }
+                        else {
+                            quillRef.current.format("image", false);
+                        }
+                    }
+                }
+            }
+        };
+    }, []);
+    const getBase64 = useCallback((imgFile) => {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.addEventListener("load", () => resolve(reader.result));
+            reader.readAsDataURL(imgFile);
+        });
+    }, []);
+    const getImgwh = useCallback((base64) => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                // 宽度固定
+                resolve({
+                    w: img.width,
+                    h: img.height
+                });
+            };
+            img.onerror = () => reject();
+            img.src = base64;
+        });
+    }, []);
+    const beforeUpload = useCallback((file) => {
+        return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+            const ary = ["jpg", "jpeg", "png"];
+            if (props.gif) {
+                ary.push("gif");
+            }
+            const isLt2M = file.size / 1024 / 1024 < (props.size || 1);
+            if (!isLt2M) {
+                message.error(`图片大小必须小于${props.size} MB!`);
+                reject();
+            }
+            if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) === -1) {
+                message.error(`请上传 ${ary.join(",")} 格式的图片!`);
+                reject();
+            }
+            const base64 = yield getBase64(file);
+            const wh = yield getImgwh(base64);
+            setUrlParams(`height=${wh.h}`);
+            resolve();
+        }));
+    }, []);
+    const handleChange = (info) => {
+        switch (info.file.status) {
+            case "uploading":
+                break;
+            case "done":
+                const url = info.file.response.data && info.file.response.data[0].imageUrl;
+                // setImageUrl(url);
+                // 获取富文本组件实例
+                const quill = quillRef.current.getEditor();
+                // 获取光标所在位置
+                const length = quill.getSelection().index;
+                // 插入图片，res为服务器返回的图片链接地址
+                quill.insertEmbed(length, "image", url);
+                // 调整光标到最后
+                quill.setSelection(length + 1);
+                break;
+            case "error":
+                Toast.error({
+                    mask: true,
+                    title: info.file.response
+                        ? info.file.response.retDesc || info.file.response.desc || info.file.response.message
+                        : "服务出错，图片上传失败"
+                });
+                break;
+            default:
+                break;
+        }
+    };
+    const action = /^http|^\/\//i.test(props.action) ? `${props.action}?${urlParams}` : `${r.domain}${props.action}?${urlParams}`;
+    return (React.createElement(React.Suspense, { fallback: null },
+        React.createElement(ReactQuill, { onChange: props.onChange, defaultValue: props.value, ref: quillRef, modules: modules, theme: "snow", className: props.className, style: props.style }),
+        React.createElement("span", { style: { display: "none" } },
+            React.createElement(Upload, { ref: upRef, withCredentials: true, beforeUpload: beforeUpload, name: "file", listType: "picture-card", showUploadList: false, action: action, onChange: handleChange }))));
+};
+Quill.defaultProps = {
+    action: "/upload/img",
+    value: "",
+    gif: false,
+    size: 1,
+    className: "",
+    style: {}
+};
+export default Quill;

package/lib/core/single-file-upload/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { UploadFile } from "antd/lib/upload/interface";
+interface IProps {
+    action: string;
+    buttonText?: string;
+    type?: string;
+    name?: string;
+    uploadRef?: any;
+    onChange?: (file: UploadFile) => void;
+    onDone?: (file: UploadFile, res: any) => void;
+    onRemove?: (file: UploadFile) => void;
+    onError?: (file: UploadFile) => void;
+    disabled?: boolean;
+    icon?: boolean;
+    openFileDialogOnClick?: boolean;
+    style?: React.CSSProperties;
+}
+declare const SingleFileUpload: React.FC<IProps>;
+export default SingleFileUpload;

package/lib/core/single-file-upload/index.js

@@ -0,0 +1,84 @@
+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 React, { useCallback, useMemo, useState } from "react";
+import { Upload, message, Button } from "antd";
+import { UploadOutlined } from "@ant-design/icons";
+import { buildURL } from "@ecoding/helper.url";
+import Toast from "../../core/toast";
+import { r } from "../../helpers/http";
+const SingleFileUpload = (props) => {
+    const [urlParams, setUrlParams] = useState({});
+    const action = useMemo(() => {
+        return /^http|^\/\//i.test(props.action) ? buildURL(props.action, urlParams) : buildURL(`${r.domain}${props.action}`, urlParams);
+    }, [urlParams]);
+    const handleChange = (info) => {
+        props.onChange && props.onChange(info.file);
+        switch (info.file.status) {
+            case "uploading":
+                break;
+            case "done":
+                const response = info.file.response;
+                if (response && (response.code === 200 || response.retCode === 200)) {
+                    props.onDone && props.onDone(info.file, info.file.response.data);
+                }
+                else {
+                    Toast.error({
+                        mask: true,
+                        title: info.file.response
+                            ? info.file.response.retDesc || info.file.response.desc || info.file.response.message
+                            : "服务出错，文件上传失败"
+                    });
+                }
+                break;
+            case "error":
+                Toast.error({
+                    mask: true,
+                    title: info.file.response
+                        ? info.file.response.retDesc || info.file.response.desc || info.file.response.message
+                        : "服务出错，文件上传失败"
+                });
+                props.onError && props.onError(info.file);
+                break;
+            default:
+                break;
+        }
+    };
+    const beforeUpload = useCallback((file) => {
+        return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+            const ary = ["jpg", "jpeg", "png", "gif"];
+            if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) !== -1) {
+                message.error("上传图片请使用 SingleImgUpload 组件");
+                reject(new Error("上传图片请使用 SingleImgUpload 组件"));
+                return;
+            }
+            const fileExtension = file.name && file.name.split(".").pop().toLowerCase();
+            if (fileExtension && props.type.indexOf(fileExtension) === -1) {
+                message.error(`请上传 ${props.type} 格式的文件!`);
+                reject();
+                return;
+            }
+            resolve();
+        }));
+    }, []);
+    return (React.createElement(Upload, { ref: props.uploadRef, withCredentials: true, openFileDialogOnClick: props.openFileDialogOnClick, beforeUpload: beforeUpload, name: props.name, disabled: props.disabled, action: action, onChange: handleChange, onRemove: (e) => {
+            console.log(e);
+            props.onRemove && props.onRemove(e);
+        }, maxCount: 1 },
+        React.createElement(Button, { icon: props.icon ? React.createElement(UploadOutlined, null) : null }, props.buttonText)));
+};
+SingleFileUpload.defaultProps = {
+    name: "file",
+    openFileDialogOnClick: true,
+    icon: true,
+    buttonText: "点击上传",
+    type: "xls, xlsx, txt",
+    style: {}
+};
+export default SingleFileUpload;

package/lib/core/single-img-upload/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * 小知识（这里默认读了Form.Item value,所以不用设置了）：Form.Item 设置
+ * valuePropName="imgUrl" // imgUpload默认读取的字段名，welFareUrl的值 => imgUrl 的值
+ */
+interface IOpts {
+    size?: number;
+    w?: number;
+    h?: number;
+}
+interface IProps {
+    action?: string;
+    name?: string;
+    opts?: IOpts;
+    value?: string;
+    onChange?: any;
+    gif?: boolean;
+    disabled?: boolean;
+}
+declare const ImgUpload: React.FC<IProps>;
+export default ImgUpload;

package/lib/core/single-img-upload/index.js

@@ -0,0 +1,165 @@
+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 React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Upload, message, Space } from "antd";
+import { LoadingOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
+import { buildURL } from "@ecoding/helper.url";
+import Toast from "../../core/toast";
+import { r } from "../../helpers/http";
+const ImgUpload = (props) => {
+    const [loading, setLoading] = useState(false);
+    const [imageUrl, setImageUrl] = useState(props.value || "");
+    const [urlParams, setUrlParams] = useState({});
+    useEffect(() => {
+        if (props.value) {
+            setImageUrl(props.value);
+        }
+    }, [props.value]);
+    const getBase64 = useCallback((imgFile) => {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.addEventListener("load", () => resolve(reader.result));
+            reader.readAsDataURL(imgFile);
+        });
+    }, []);
+    const getImgwh = useCallback((base64) => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                // 宽度固定
+                resolve({
+                    w: img.width,
+                    h: img.height
+                });
+            };
+            img.onerror = () => reject();
+            img.src = base64;
+        });
+    }, []);
+    const handleChange = (info) => {
+        switch (info.file.status) {
+            case "uploading":
+                setLoading(true);
+                break;
+            case "done":
+                setLoading(false);
+                const response = info.file.response;
+                if (response && (response.code == 200 || response.retCode == 200)) {
+                    const url = info.file.response.data && info.file.response.data[0].imageUrl;
+                    setImageUrl(url);
+                    // Form.item 值注入关键
+                    props.onChange && props.onChange(url);
+                }
+                else {
+                    Toast.error({
+                        mask: true,
+                        title: info.file.response
+                            ? info.file.response.retDesc || info.file.response.desc || info.file.response.message
+                            : "服务出错，图片上传失败"
+                    });
+                }
+                break;
+            case "error":
+                Toast.error({
+                    mask: true,
+                    title: info.file.response
+                        ? info.file.response.retDesc || info.file.response.desc || info.file.response.message
+                        : "服务出错，图片上传失败"
+                });
+                setLoading(false);
+                break;
+            default:
+                break;
+        }
+    };
+    const clear = () => {
+        setImageUrl("");
+        // Form.item 值注入关键
+        props.onChange && props.onChange("");
+    };
+    const beforeUpload = useCallback((file) => {
+        return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+            const ary = ["jpg", "jpeg", "png"];
+            if (props.gif) {
+                ary.push("gif");
+            }
+            if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) === -1) {
+                message.error(`请上传 ${ary.join(",")} 格式的图片!`);
+                reject();
+                return;
+            }
+            const isLt2M = file.size / 1024 / 1024 < (props.opts.size || 1);
+            if (!isLt2M) {
+                message.error(`图片大小必须小于${props.opts.size} MB!`);
+                reject();
+                return;
+            }
+            const base64 = yield getBase64(file);
+            const wh = yield getImgwh(base64);
+            if (props.opts.w && props.opts.w !== wh.w) {
+                message.error(`图片宽度不符合 ${props.opts.w}px 约定!`);
+                reject();
+                return;
+            }
+            if (props.opts.h && props.opts.h !== wh.h) {
+                message.error(`图片高度不符合 ${props.opts.h}px 约定!`);
+                reject();
+                return;
+            }
+            setUrlParams({ height: wh.h });
+            resolve();
+        }));
+    }, []);
+    const uploadButton = useMemo(() => (React.createElement("div", null,
+        loading ? React.createElement(LoadingOutlined, null) : React.createElement(PlusOutlined, null),
+        React.createElement("div", { style: { marginTop: 8 } }, "\u4E0A\u4F20\u56FE\u7247"))), [loading]);
+    const action = useMemo(() => {
+        return /^http|^\/\//i.test(props.action) ? buildURL(props.action, urlParams) : buildURL(`${r.domain}${props.action}`, urlParams);
+    }, [urlParams]);
+    return (React.createElement(Space, null,
+        React.createElement(Upload, { withCredentials: true, beforeUpload: beforeUpload, name: props.name, disabled: props.disabled, listType: "picture-card", showUploadList: false, action: action, onChange: handleChange }, imageUrl ? (React.createElement("div", { style: { position: "relative" } },
+            React.createElement("span", { style: {
+                    position: "absolute",
+                    background: "#fff",
+                    bottom: "6px",
+                    right: "2px",
+                    width: "18px",
+                    height: "18px",
+                    opacity: ".9"
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    clear();
+                } },
+                React.createElement(DeleteOutlined, null)),
+            React.createElement("img", { style: { width: "102px", height: "102px", objectFit: "contain" }, src: imageUrl }))) : (uploadButton)),
+        React.createElement("div", null,
+            React.createElement("p", null,
+                "\u5927\u5C0F\uFF1A\u5C0F\u4E8E ",
+                props.opts.size || 1,
+                "MB"),
+            React.createElement("p", null,
+                "\u5C3A\u5BF8\uFF1A",
+                props.opts.w ? `${props.opts.w}px` : "n",
+                " * ",
+                props.opts.h ? `${props.opts.h}px` : "n"),
+            React.createElement("p", null,
+                "\u652F\u6301\uFF1Ajpg\u3001jpeg\u3001png",
+                props.gif ? "、gif" : ""))));
+};
+ImgUpload.defaultProps = {
+    action: "/upload/img",
+    name: "file",
+    value: "",
+    gif: false,
+    opts: {
+        size: 1
+    }
+};
+export default ImgUpload;

package/lib/helpers/http.d.ts

@@ -0,0 +1,2 @@
+import R from "@ecoding/helper.request.hook";
+export declare const r: R;

package/lib/helpers/http.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+import Loading from "../core/loading";
+import Toast from "../core/toast";
+import R from "@ecoding/helper.request.hook";
+const request = new R(axios);
+request.setDomain("");
+request.setFinallyHook(() => {
+    Loading.hide();
+});
+request.setErrorUiHook((err) => {
+    Toast.error({
+        duration: 20000,
+        title: err.message || err.msg
+    });
+});
+export const r = request;

package/lib/index.d.ts

@@ -1,3 +1,10 @@
 export { default as Toast } from "./core/toast";
 export { default as Loading } from "./core/loading";
 export { default as Confirm } from "./core/confirm";
+export { default as AsyncCascader } from "./core/async-cascader";
+export { default as LengthInput } from "./core/length-input";
+export { default as SingleImgUpload } from "./core/single-img-upload";
+export { default as SingleFileUpload } from "./core/single-file-upload";
+export { default as AsyncSlect } from "./core/async-select";
+export { default as AsyncTransfer } from "./core/async-transfer";
+export { default as Quill } from "./core/quill";

package/lib/index.js

@@ -1,3 +1,10 @@
 export { default as Toast } from "./core/toast";
 export { default as Loading } from "./core/loading";
 export { default as Confirm } from "./core/confirm";
+export { default as AsyncCascader } from "./core/async-cascader";
+export { default as LengthInput } from "./core/length-input";
+export { default as SingleImgUpload } from "./core/single-img-upload";
+export { default as SingleFileUpload } from "./core/single-file-upload";
+export { default as AsyncSlect } from "./core/async-select";
+export { default as AsyncTransfer } from "./core/async-transfer";
+export { default as Quill } from "./core/quill";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -23,5 +23,22 @@
         "dev": "tsc -w",
         "build": "rm -rf lib && tsc"
     },
-    "gitHead": "6f1f561a65700696c8d6fc008642fc936f91d3b2"
+    "peerDependencies": {
+        "@ecoding/helper.is": ">=0.0.4",
+        "@ecoding/helper.json": ">=0.0.5",
+        "@ecoding/helper.request.hook": ">=0.0.6",
+        "@ecoding/helper.url": ">=0.0.5",
+        "axios": ">=1.1.2"
+    },
+    "devDependencies": {
+        "@ecoding/helper.is": "^0.0.4",
+        "@ecoding/helper.json": "^0.0.5",
+        "@ecoding/helper.request.hook": "^0.0.6",
+        "@ecoding/helper.url": "^0.0.5",
+        "axios": "^1.1.2"
+    },
+    "dependencies": {
+        "react-quill": "^2.0.0"
+    },
+    "gitHead": "4171cff635b5d61704143157ddb27e6c94553179"
 }