@ecoding/components.antd 0.2.28 → 0.2.30

package/lib/core/form.label/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface IProps {
+    value?: string;
+    type?: "secondary" | "success" | "warning" | "danger";
+    empty?: React.ReactNode;
+    disabled?: boolean;
+    mark?: boolean;
+    code?: boolean;
+    keyboard?: boolean;
+    underline?: boolean;
+    delete?: boolean;
+    strong?: boolean;
+    italic?: boolean;
+    link?: {
+        href?: string;
+        target?: "_blank" | "_self";
+    };
+}
+declare const C: React.FC<IProps>;
+export default C;

package/lib/core/form.label/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Typography } from "antd";
+const C = (props) => {
+    if (props.link) {
+        return React.createElement(Typography.Link, Object.assign({}, props.link), props.value);
+    }
+    return React.createElement(Typography.Text, { italic: props.italic, strong: props.strong, delete: props.delete, underline: props.underline, disabled: props.disabled, mark: props.mark, code: props.code, keyboard: props.keyboard }, props.empty ? props.empty : props.value);
+};
+export default C;

package/lib/core/form.list/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { FormListFieldData } from 'antd';
+interface IC {
+    title: string;
+    require?: boolean;
+    name: string;
+    rules?: any;
+    width?: number;
+    render: (field: FormListFieldData, index: number) => React.ReactNode;
+}
+interface IProps {
+    columns: IC[];
+    name: string;
+    rules?: any;
+    i18n?: any;
+    hideOperation?: boolean;
+    operation?: {
+        width?: number;
+        component?: React.ReactNode;
+        title: string;
+    };
+}
+declare const C: React.FC<IProps>;
+export default C;

package/lib/core/form.list/index.js

@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import { Typography, Form, Button } from 'antd';
+import { PlusCircleOutlined } from '@ant-design/icons';
+const C = ({ columns, rules, name, hideOperation, operation, i18n }) => {
+    const tdStyle = {
+        verticalAlign: 'top',
+        lineHeight: '32px',
+        padding: '10px'
+    };
+    const thStyle = {
+        textAlign: 'left',
+        backgroundColor: '#fafafa',
+        padding: '8px'
+    };
+    const trStyle = {
+        borderBottom: '1px solid #eee'
+    };
+    const widths = useMemo(() => {
+        let w = 60;
+        columns.forEach((column) => {
+            w += column.width || 200;
+        });
+        if (operation) {
+            w += operation.width || 150;
+        }
+        else {
+            w += 150;
+        }
+        return w;
+    }, []);
+    return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove }, { errors }) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "m-form-list", style: { overflowX: 'auto', marginBottom: '4px', paddingBottom: '12px', position: 'relative' } },
+            React.createElement("table", { style: { width: widths } },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", { style: Object.assign({}, thStyle, { width: '60px' }) }, i18n ? i18n.$t("global.num") : "序号"),
+                        columns.map((column, i) => {
+                            if (column.require) {
+                                return (React.createElement("th", { style: Object.assign({}, thStyle, { width: column.width || 200 }) },
+                                    React.createElement("span", { style: { color: '#ff4d4f' } }, "*"),
+                                    " ",
+                                    column.title));
+                            }
+                            return React.createElement("th", { style: Object.assign({}, thStyle, { width: 150 }) }, column.title);
+                        }),
+                        hideOperation ? null : operation ? (React.createElement("th", { style: Object.assign({}, thStyle, { width: operation.width || 150, right: 0, position: "sticky" }) }, operation.title)) : (React.createElement("th", { style: Object.assign({}, thStyle, { width: 150, right: 0, position: "sticky" }) }, i18n ? i18n.$t("global.operation") : "操作")))),
+                React.createElement("tbody", null, fields.map((field, index) => {
+                    return (React.createElement("tr", { style: trStyle },
+                        React.createElement("td", { style: tdStyle }, index + 1),
+                        columns.map((column, i) => {
+                            return (React.createElement("td", { style: tdStyle },
+                                React.createElement(Form.Item, { name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index))));
+                        }),
+                        hideOperation ? null : operation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) }, operation.component)) : (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
+                            React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => remove(field.name) }, i18n ? i18n.$t("global.del") : '删除')))));
+                })))),
+        React.createElement("div", null,
+            React.createElement(Button, { icon: React.createElement(PlusCircleOutlined, null), type: "dashed", onClick: () => add() }, i18n ? i18n.$t("global.add") : "添加"))))));
+};
+export default C;

package/lib/core/multiple-upload/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { UploadFile } from 'antd/lib/upload/interface';
+interface IRes {
+    name: string;
+    url: string;
+}
+interface IProps {
+    action: string | (() => string);
+    actionParams?: any;
+    buttonText?: string;
+    type?: string;
+    maxCount?: number;
+    name?: string;
+    data?: any;
+    value?: IRes[];
+    headers?: any;
+    uploadRef?: any;
+    onChange?: (infos: IRes[]) => 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/multiple-upload/index.js

@@ -0,0 +1,137 @@
+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, useEffect, useRef } from 'react';
+import { Upload, message, Button, Popover, Typography, Space, Empty } from 'antd';
+import { UploadOutlined, LinkOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { buildURL } from '@ecoding/helper.url';
+import Toast from "../../core/toast";
+import Loading from "../../core/loading";
+import http from "../../helpers/http";
+const InfosRender = ({ infos, setInfos }) => {
+    const remove = (i) => {
+        const temp = infos.concat([]);
+        temp.splice(i, 1);
+        setInfos(temp);
+    };
+    if (infos && infos.length > 0) {
+        return (React.createElement("ul", null, infos.map((info, i) => {
+            return (React.createElement("li", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    maxWidth: 250
+                } },
+                React.createElement(Typography.Link, { ellipsis: true, title: info.name, href: info.url, target: "_blank" },
+                    React.createElement(LinkOutlined, null),
+                    " ",
+                    info.name),
+                React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => remove(i) },
+                    React.createElement(DeleteOutlined, null))));
+        })));
+    }
+    return React.createElement(Empty, { imageStyle: { height: 30 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
+};
+const SingleFileUpload = (props) => {
+    const [infos, setInfos] = useState([]);
+    const [open, setOpen] = useState(undefined);
+    const timeout = useRef();
+    const r = http.getRequest();
+    const action = useMemo(() => {
+        if (typeof props.action === "string") {
+            return /^http|^\/\//i.test(props.action)
+                ? buildURL(props.action, props.actionParams)
+                : buildURL(`${r.domain}${props.action}`, props.actionParams);
+        }
+        return props.action();
+    }, [props.actionParams]);
+    const handleChange = (info, type) => {
+        switch (info.file.status) {
+            case 'uploading':
+                Loading.show();
+                break;
+            case 'done':
+                Loading.hide();
+                const response = info.file.response;
+                const file = info.file;
+                if ((response && response.code === 200) || response.success) {
+                    const tempObj = Object.assign({ name: file.name, url: response.data.url }, props.data);
+                    const tempRes = infos.concat([]);
+                    tempRes.push(tempObj);
+                    setInfos(tempRes);
+                    setOpen(true);
+                    clearTimeout(timeout.current);
+                    timeout.current = setTimeout(() => {
+                        setOpen(undefined);
+                    }, 3000);
+                    props.onChange && props.onChange(tempRes);
+                }
+                else {
+                    Toast.error({
+                        mask: true,
+                        title: response
+                            ? `${file.name}-${response.msg}` || `${file.name}-${response.message}`
+                            : `${file.name}-服务出错，文件上传失败`
+                    });
+                }
+                break;
+            case 'error':
+                Toast.error({
+                    mask: true,
+                    title: info.file.response
+                        ? `${info.file.name}-${info.file.response.msg}` || `${info.file.name}-${info.file.response.message}`
+                        : `${info.file.name}-服务出错，文件上传失败`
+                });
+                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();
+        }));
+    }, []);
+    useEffect(() => {
+        if (props.value) {
+            setInfos(props.value);
+        }
+    }, [props.value]);
+    return (React.createElement(Space.Compact, { block: true },
+        React.createElement(Upload, { ref: props.uploadRef, withCredentials: true, multiple: true, data: props.data, openFileDialogOnClick: props.openFileDialogOnClick, beforeUpload: beforeUpload, name: props.name, disabled: props.disabled, headers: props.headers, action: action, onChange: handleChange, showUploadList: false, onRemove: (e) => {
+                props.onRemove && props.onRemove(e);
+            }, maxCount: props.maxCount },
+            React.createElement(Button, { icon: props.icon ? React.createElement(UploadOutlined, null) : null }, props.buttonText)),
+        React.createElement(Popover, { destroyTooltipOnHide: true, open: open, placement: "right", trigger: "hover", title: "Uploaded", content: React.createElement(InfosRender, { infos: infos, setInfos: setInfos }) },
+            React.createElement(Button, { icon: React.createElement(EllipsisOutlined, null) }))));
+};
+SingleFileUpload.defaultProps = {
+    name: 'file',
+    openFileDialogOnClick: true,
+    icon: true,
+    data: {},
+    maxCount: 10,
+    headers: undefined,
+    buttonText: '点击上传',
+    type: 'jpg, jpeg, png, gif, bmp, wbmp, webp, tif, woff, woff2, ttf, otf, txt, psd, svg, js, jsx, json, css, less, html, htm, xml, pdf, zip, gz, tgz, gzip, mp3, mp4, avi, xlsx, xls, doc, docx, ppt, pptx, rar, 7z',
+    style: {}
+};
+export default SingleFileUpload;

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

@@ -1,11 +1,15 @@
 import React from "react";
-import { UploadFile } from "antd/lib/upload/interface";
+import type { UploadFile } from "antd/lib/upload/interface";
 interface IProps {
-    action: string;
+    action: string | (() => string);
+    actionParams?: any;
     buttonText?: string;
     type?: string;
     name?: string;
+    i18n?: any;
+    headers?: any;
     value?: any;
+    data?: any;
     uploadRef?: any;
     onChange?: (url: string) => void;
     onDone?: (file: UploadFile, res: any) => void;

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

@@ -15,11 +15,15 @@ import Toast from "../../core/toast";
 import http from "../../helpers/http";
 const SingleFileUpload = (props) => {
     const r = http.getRequest();
-    const [urlParams, setUrlParams] = useState({});
     const [fileUrl, setFileUrl] = useState('');
     const action = useMemo(() => {
-        return /^http|^\/\//i.test(props.action) ? buildURL(props.action, urlParams) : buildURL(`${r.domain}${props.action}`, urlParams);
-    }, [urlParams]);
+        if (typeof props.action === "string") {
+            return /^http|^\/\//i.test(props.action)
+                ? buildURL(props.action, props.actionParams)
+                : buildURL(`${r.domain}${props.action}`, props.actionParams);
+        }
+        return props.action();
+    }, [props.actionParams]);
     const handleChange = (info) => {
         // props.onChange && props.onChange(info.file);
         switch (info.file.status) {
@@ -79,7 +83,7 @@ const SingleFileUpload = (props) => {
                 // setFileUrl(v);
                 props.onChange && props.onChange(v);
             } }),
-        React.createElement(Upload, { ref: props.uploadRef, withCredentials: true, openFileDialogOnClick: props.openFileDialogOnClick, beforeUpload: beforeUpload, name: props.name, disabled: props.disabled, action: action, onChange: handleChange, showUploadList: false, onRemove: (e) => {
+        React.createElement(Upload, { ref: props.uploadRef, withCredentials: true, openFileDialogOnClick: props.openFileDialogOnClick, beforeUpload: beforeUpload, name: props.name, disabled: props.disabled, headers: props.headers, action: action, onChange: handleChange, showUploadList: false, onRemove: (e) => {
                 console.log(e);
                 props.onRemove && props.onRemove(e);
             }, maxCount: 1 },
@@ -89,6 +93,8 @@ SingleFileUpload.defaultProps = {
     name: "file",
     openFileDialogOnClick: true,
     icon: true,
+    data: {},
+    actionParams: {},
     buttonText: "点击上传",
     type: "jpg, jpeg, png, gif, bmp, wbmp, webp, tif, woff, woff2, ttf, otf, txt, psd, svg, js, jsx, json, css, less, html, htm, xml, pdf, zip, gz, tgz, gzip, mp3, mp4, avi, xlsx, xls, doc, docx, ppt, pptx, rar, 7z",
     style: {}

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

@@ -9,10 +9,15 @@ interface IOpts {
     h?: number;
 }
 interface IProps {
-    action?: string;
+    action: string | (() => string);
+    actionParams?: any;
     name?: string;
+    i18n?: any;
     opts?: IOpts;
     value?: string;
+    buttonText?: string;
+    headers?: any;
+    data?: any;
     onChange?: any;
     gif?: boolean;
     disabled?: boolean;

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

@@ -17,12 +17,14 @@ const ImgUpload = (props) => {
     const r = http.getRequest();
     const [loading, setLoading] = useState(false);
     const [imageUrl, setImageUrl] = useState(props.value || "");
-    const [urlParams, setUrlParams] = useState({});
-    useEffect(() => {
-        if (props.value) {
-            setImageUrl(props.value);
+    const action = useMemo(() => {
+        if (typeof props.action === "string") {
+            return /^http|^\/\//i.test(props.action)
+                ? buildURL(props.action, props.actionParams)
+                : buildURL(`${r.domain}${props.action}`, props.actionParams);
         }
-    }, [props.value]);
+        return props.action();
+    }, [props.actionParams]);
     const getBase64 = useCallback((imgFile) => {
         return new Promise((resolve) => {
             const reader = new FileReader();
@@ -110,18 +112,19 @@ const ImgUpload = (props) => {
                 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]);
+        React.createElement("div", { style: { marginTop: 8 } }, props.buttonText))), [loading]);
+    useEffect(() => {
+        if (props.value) {
+            setImageUrl(props.value);
+        }
+    }, [props.value]);
     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(Upload, { withCredentials: true, beforeUpload: beforeUpload, name: props.name, headers: props.headers, 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",
@@ -138,16 +141,21 @@ const ImgUpload = (props) => {
             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.i18n ? props.i18n.$t("global.size") : "大小",
+                "\uFF1A",
+                props.i18n ? props.i18n.$t("global.lt") : "小于",
+                " ",
                 props.opts.size || 1,
                 "MB"),
             React.createElement("p", null,
-                "\u5C3A\u5BF8\uFF1A",
+                props.i18n ? props.i18n.$t("global.dimension") : "尺寸",
+                "\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.i18n ? props.i18n.$t("global.support") : "支持",
+                "\uFF1Ajpg\u3001jpeg\u3001png",
                 props.gif ? "、gif" : ""))));
 };
 ImgUpload.defaultProps = {
@@ -155,6 +163,9 @@ ImgUpload.defaultProps = {
     name: "file",
     value: "",
     gif: false,
+    buttonText: '上传图片',
+    data: {},
+    actionParams: {},
     opts: {
         size: 1
     }

package/lib/index.d.ts

@@ -10,6 +10,9 @@ export { default as PhoneInput } from "./core/phone-input";
 export { default as RangePicker } from "./core/range-picker";
 export { default as SingleImgUpload } from "./core/single-img-upload";
 export { default as SingleFileUpload } from "./core/single-file-upload";
+export { default as MultipleUpload } from "./core/multiple-upload";
+export { default as FormLabel } from "./core/form.label";
+export { default as FormList } from "./core/form.list";
 export { default as AsyncSelect } from "./core/async-select";
 export { default as AsyncTransfer } from "./core/async-transfer";
 export { default as TablePro } from "./core/table-pro";

package/lib/index.js

@@ -10,6 +10,9 @@ export { default as PhoneInput } from "./core/phone-input";
 export { default as RangePicker } from "./core/range-picker";
 export { default as SingleImgUpload } from "./core/single-img-upload";
 export { default as SingleFileUpload } from "./core/single-file-upload";
+export { default as MultipleUpload } from "./core/multiple-upload";
+export { default as FormLabel } from "./core/form.label";
+export { default as FormList } from "./core/form.list";
 export { default as AsyncSelect } from "./core/async-select";
 export { default as AsyncTransfer } from "./core/async-transfer";
 export { default as TablePro } from "./core/table-pro";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.2.28",
+    "version": "0.2.30",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -44,5 +44,5 @@
     "dependencies": {
         "react-quill": "^2.0.0"
     },
-    "gitHead": "2a3afebdf083c3afa505959cf0a35093c0383fa2"
+    "gitHead": "1f4c0c8bd91160a2625a5db93d9247a7e1fc385e"
 }