@ecoding/components.antd 0.5.7 → 0.5.9

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

@@ -46,7 +46,7 @@ const SortableItem = (props) => {
                 index + 1)),
         columns.map((column, i) => {
             if (column.type == "operation") {
-                return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
+                return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, zIndex: 10, position: "sticky", backgroundColor: "#fff" }) },
                     React.createElement(Space, null,
                         column.render && column.render(field, index, { add, remove }),
                         (typeof column.hideRemove == "function" && column.hideRemove(field, index)) || (typeof column.hideRemove == "boolean" && column.hideRemove) ? (React.createElement(Typography.Text, { style: { cursor: 'no-drop', 'color': '#ccc' }, disabled: true }, i18n ? i18n.$t("global.del", '删除') : '删除')) : (React.createElement(Typography.Text, { style: disabled ? { cursor: 'no-drop', 'color': '#ccc' } : { cursor: 'pointer' }, type: disabled ? undefined : "danger", disabled: disabled, onClick: () => {
@@ -66,7 +66,7 @@ const SortableItem = (props) => {
                     React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index, { add, remove }))));
             }
         }),
-        needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
+        needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, zIndex: 10, position: "sticky", backgroundColor: "#fff" }) },
             React.createElement(Typography.Text, { style: disabled ? { cursor: 'no-drop', 'color': '#ccc' } : { cursor: 'pointer' }, type: disabled ? undefined : "danger", onClick: () => {
                     if (disabled) {
                         return;

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

@@ -1,10 +1,5 @@
 import React from 'react';
 import { UploadFile } from 'antd/lib/upload/interface';
-interface IRes {
-    name: string;
-    url: string;
-    [props: string]: any;
-}
 interface IProps {
     action: string | (() => string);
     actionParams?: any;
@@ -14,12 +9,13 @@ interface IProps {
     i18n?: any;
     name?: string;
     data?: any;
-    extraData?: any;
-    value?: IRes[];
+    value?: UploadFile[] | string[];
+    valueKey?: string;
     headers?: any;
     uploadRef?: any;
     domain?: string;
-    onChange?: (infos: IRes[]) => void;
+    objectInValue?: boolean;
+    onChange?: (infos: any[] | undefined) => void;
     onDone?: (file: UploadFile, res: any) => void;
     onRemove?: (file: UploadFile) => void;
     onError?: (file: UploadFile) => void;

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

@@ -12,25 +12,32 @@ 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";
-const InfosRender = ({ infos, setInfos, onChange, domain }) => {
+const InfosRender = ({ infos, updateItems, domain }) => {
     const remove = (i) => {
         const temp = infos.concat([]);
         temp.splice(i, 1);
-        setInfos(temp);
-        onChange && onChange(temp);
+        updateItems(temp, false);
     };
     if (infos && infos.length > 0) {
         return (React.createElement("ul", null, infos.map((info, i) => {
-            return (React.createElement("li", { key: info.url, style: {
+            let name, url;
+            if (typeof info == "string") {
+                url = info;
+                name = info.substring(info.lastIndexOf('/') + 1, info.lastIndexOf('.'));
+            }
+            else {
+                url = info.url;
+                name = info.name || info.filename || info.file_name || info.fileName || info.original_file_name || info.originalFilename || info.originalFileName;
+            }
+            return (React.createElement("li", { key: url, style: {
                     display: "flex",
                     justifyContent: "space-between",
                     maxWidth: 250
                 } },
-                React.createElement(Typography.Link, { download: info.name, ellipsis: true, title: info.name, href: domain ? `${domain}${info.url}` : info.url, target: "_blank" },
+                React.createElement(Typography.Link, { download: name, ellipsis: true, title: name, href: domain ? `${domain}${url}` : url, target: "_blank" },
                     React.createElement(LinkOutlined, null),
                     " ",
-                    info.name),
+                    name),
                 React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => remove(i) },
                     React.createElement(DeleteOutlined, null))));
         })));
@@ -38,7 +45,11 @@ const InfosRender = ({ infos, setInfos, onChange, domain }) => {
     return React.createElement(Empty, { style: { height: 30 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
 };
 const MultipleUpload = (props) => {
-    const [infos, setInfos] = useState([]);
+    const { value, domain, onChange, valueKey, objectInValue } = props;
+    const isInnerChange = useRef(false);
+    const [infos, setInfos] = useState(() => {
+        return [];
+    });
     const [open, setOpen] = useState(undefined);
     const timeout = useRef();
     const action = useMemo(() => {
@@ -47,56 +58,69 @@ const MultipleUpload = (props) => {
         }
         return buildURL(props.action(), props.actionParams);
     }, [props.actionParams, props.action]);
-    const handleChange = (info, type) => {
-        var _a, _b;
-        switch (info.file.status) {
-            case 'uploading':
-                Loading.show();
-                break;
-            case 'done':
-                const response = info.file.response || {};
-                const file = info.file;
-                const data = response.data || response.model;
+    const updateItems = (newItems, open = true) => {
+        isInnerChange.current = true;
+        setInfos(newItems);
+        let isEmpty = true;
+        const temp = [];
+        newItems && newItems.forEach((item) => {
+            if (item && item.url) {
+                // 防止重复拼接
+                item.url = domain ? item.url.replace(domain, '') : item.url;
+                item.url = domain ? `${domain}${item.url}` : item.url;
+                temp.push(item);
+            }
+        });
+        temp.forEach((item) => {
+            if (item) {
+                isEmpty = false;
+                return;
+            }
+        });
+        if (objectInValue) {
+            const temp2 = temp && temp.map((item) => {
+                const responseData = item.responseData;
+                return Object.assign(Object.assign(Object.assign({}, item), responseData), { url: domain ? item.url.replace(domain, '') : item.url });
+            });
+            onChange && onChange(!isEmpty ? temp2 : undefined);
+        }
+        else {
+            const urls = temp.map((item) => domain ? item.url.replace(domain, '') : item.url);
+            onChange && onChange(!isEmpty ? urls : undefined);
+        }
+        if (open) {
+            setOpen(true);
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => {
+                setOpen(undefined);
+            }, 3000);
+        }
+    };
+    const handleChange = ({ fileList }) => {
+        fileList && fileList.forEach((file) => {
+            if (file.status == "done") {
+                const response = file.response || {};
                 if (response.code === 200 ||
                     response.code === 0 ||
                     response.success ||
                     response.successed) {
-                    Loading.hide();
-                    const tempObj = Object.assign({ name: file.name, url: data.url }, props.extraData);
-                    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);
+                    const data = response.data || response.model;
+                    file.url = data && data[valueKey || "url"];
+                    file.responseData = data;
+                    delete file.response;
+                    delete file.xhr;
+                    delete file.lastModifiedDate;
+                    delete file.originFileObj;
                 }
-                else {
-                    Loading.hide();
-                    Toast.error({
-                        mask: true,
-                        title: response
-                            ? `${file.name}-${response.msg}` || `${file.name}-${response.message}`
-                            : `${file.name}-${props.i18n ? props.i18n.$t('global.upload.error.file') : '服务出错，文件上传失败'}`
-                    });
-                }
-                break;
-            case 'error':
-                Loading.hide();
+            }
+            else if (file.status === "error") {
                 Toast.error({
                     mask: true,
-                    title: info.file.response
-                        ? `${info.file.name}-${(_a = info.file.response) === null || _a === void 0 ? void 0 : _a.msg}` || `${info.file.name}-${(_b = info.file.response) === null || _b === void 0 ? void 0 : _b.message}`
-                        : `${info.file.name}-${props.i18n ? props.i18n.$t('global.upload.error.file') : '服务出错，文件上传失败'}`
+                    title: file.response ? file.response.msg || file.response.message : `${props.i18n ? props.i18n.$t('global.upload.error.img') : '服务出错，文件上传失败'}`
                 });
-                props.onError && props.onError(info.file);
-                break;
-            default:
-                Loading.hide();
-                break;
-        }
+            }
+        });
+        updateItems(fileList);
     };
     const beforeUpload = useCallback((file) => {
         return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
@@ -116,16 +140,41 @@ const MultipleUpload = (props) => {
         }));
     }, []);
     useEffect(() => {
-        if (props.value) {
-            setInfos(props.value);
+        if (isInnerChange.current) {
+            isInnerChange.current = false;
+            return;
+        }
+        if (value && value.length > 0) {
+            const temp = [];
+            value.forEach((item, index) => {
+                if (typeof item === "string" && item) {
+                    // 防止重复拼接domain
+                    item = domain ? item.replace(domain, "") : item;
+                    temp.push({
+                        uid: String(index),
+                        status: 'done',
+                        url: domain ? `${domain}${item}` : item,
+                        name: item.substring(item.lastIndexOf('/') + 1, item.lastIndexOf('.'))
+                    });
+                }
+                else {
+                    if (item === null || item === void 0 ? void 0 : item.url) {
+                        // 防止重复拼接domain
+                        item.url = domain ? item.url.replace(domain, "") : item.url;
+                        item.url = domain ? `${domain}${item.url}` : item.url;
+                        temp.push(item);
+                    }
+                }
+            });
+            setInfos(temp);
         }
-    }, [props.value]);
+    }, [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);
+        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: (file) => {
+                props.onRemove && props.onRemove(file);
             }, maxCount: props.maxCount },
             React.createElement(Button, { disabled: props.disabled, icon: props.icon ? React.createElement(UploadOutlined, null) : null }, props.buttonText)),
-        React.createElement(Popover, { destroyOnHidden: true, open: open, placement: "right", trigger: "hover", title: "Uploaded", content: React.createElement(InfosRender, { onChange: props.onChange, infos: infos, setInfos: setInfos, domain: props.domain }) },
+        React.createElement(Popover, { destroyOnHidden: true, open: open, placement: "right", trigger: "hover", title: "Uploaded", content: React.createElement(InfosRender, { infos: infos, updateItems: updateItems, domain: props.domain }) },
             React.createElement(Button, { icon: React.createElement(EllipsisOutlined, null) }))));
 };
 MultipleUpload.defaultProps = {
@@ -133,7 +182,6 @@ MultipleUpload.defaultProps = {
     openFileDialogOnClick: true,
     icon: true,
     data: {},
-    extraData: {},
     maxCount: 10,
     headers: undefined,
     buttonText: 'Upload',

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

@@ -17,6 +17,7 @@ interface IProps {
     i18n?: any;
     opts?: IOpts;
     value?: any[];
+    valueKey?: string;
     headers?: any;
     data?: any;
     gif?: boolean;

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { Upload, Image as Img, Alert, Flex, message, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { buildURL } from "@ecoding/helper.url";
@@ -35,18 +35,20 @@ const DraggableUploadListItem = ({ originNode, file, disabled }) => {
  */
 const MultipleImgUpload = (props) => {
     var _a, _b, _c, _d;
-    const { i18n, name, buttonText, maxCount, disabled, value, onChange, objectInValue, domain } = props;
+    const { i18n, name, buttonText, maxCount, disabled, value, onChange, objectInValue, domain, valueKey } = props;
+    const isInnerChange = useRef(false);
     const [previewOpen, setPreviewOpen] = useState(false);
     const [previewImage, setPreviewImage] = useState('');
     const [imgList, setImgList] = useState(() => {
         return [];
     });
     const updateItems = (newItems) => {
+        isInnerChange.current = true;
         setImgList(newItems);
         let isEmpty = true;
         const temp = [];
         newItems && newItems.forEach((item) => {
-            if (item.url) {
+            if (item && item.url) {
                 // 防止重复拼接
                 item.url = domain ? item.url.replace(domain, '') : item.url;
                 item.url = domain ? `${domain}${item.url}` : item.url;
@@ -60,7 +62,10 @@ const MultipleImgUpload = (props) => {
             }
         });
         if (objectInValue) {
-            const temp2 = temp && temp.map((item) => (Object.assign(Object.assign({}, item), { url: domain ? item.url.replace(domain, '') : item.url })));
+            const temp2 = temp && temp.map((item) => {
+                const responseData = item.responseData;
+                return Object.assign(Object.assign(Object.assign({}, item), responseData), { url: domain ? item.url.replace(domain, '') : item.url });
+            });
             onChange && onChange(!isEmpty ? temp2 : undefined);
         }
         else {
@@ -69,7 +74,8 @@ const MultipleImgUpload = (props) => {
         }
     };
     const handleChange = ({ fileList }) => {
-        fileList && fileList.forEach((file) => {
+        const newFileList = [...fileList];
+        newFileList && newFileList.forEach((file) => {
             if (file.status == "done") {
                 const response = file.response || {};
                 if (response.code === 200 ||
@@ -77,7 +83,8 @@ const MultipleImgUpload = (props) => {
                     response.success ||
                     response.successed) {
                     const data = response.data || response.model;
-                    file.url = data.url;
+                    file.responseData = data;
+                    file.url = data && data[valueKey || "url"];
                     delete file.response;
                     delete file.xhr;
                     delete file.lastModifiedDate;
@@ -91,7 +98,7 @@ const MultipleImgUpload = (props) => {
                 });
             }
         });
-        updateItems(fileList);
+        updateItems(newFileList);
     };
     const handleRemove = (file) => {
         const lefts = imgList.filter(item => item.uid !== file.uid);
@@ -116,7 +123,7 @@ const MultipleImgUpload = (props) => {
             file.preview = yield getBase64(file.originFileObj);
         }
         let url;
-        if (file.url) {
+        if (file === null || file === void 0 ? void 0 : file.url) {
             url = domain ? file.url.replace(domain, '') : file.url;
         }
         setPreviewImage(url || file.preview);
@@ -211,6 +218,10 @@ const MultipleImgUpload = (props) => {
         }));
     }, []);
     useEffect(() => {
+        if (isInnerChange.current) {
+            isInnerChange.current = false;
+            return;
+        }
         if (value && value.length > 0) {
             const temp = [];
             value.forEach((item, index) => {
@@ -225,7 +236,7 @@ const MultipleImgUpload = (props) => {
                     });
                 }
                 else {
-                    if (item.url) {
+                    if (item === null || item === void 0 ? void 0 : item.url) {
                         // 防止重复拼接domain
                         item.url = domain ? item.url.replace(domain, "") : item.url;
                         item.url = domain ? `${domain}${item.url}` : item.url;
@@ -273,7 +284,7 @@ const MultipleImgUpload = (props) => {
                         !((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? null : (React.createElement("span", null, i18n ? `${i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`))))) : null)), type: "warning", showIcon: true })),
         React.createElement(DndContext, { sensors: disabled ? [] : [sensor], onDragEnd: disabled ? undefined : onDragEnd },
             React.createElement(SortableContext, { items: imgList === null || imgList === void 0 ? void 0 : imgList.map((i) => i.uid), strategy: rectSortingStrategy },
-                React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, beforeUpload: beforeUpload, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, data: props.data, multiple: true, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file, disabled: disabled })) }, maxCount == 0 ? uploadButton : maxCount && imgList.length >= maxCount ? null : uploadButton),
+                React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, beforeUpload: beforeUpload, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, data: props.data, multiple: true, headers: props.headers, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file, disabled: disabled })) }, maxCount == 0 ? uploadButton : maxCount && imgList.length >= maxCount ? null : uploadButton),
                 previewImage && (React.createElement(Img, { wrapperStyle: { display: 'none' }, preview: {
                         visible: previewOpen,
                         onVisibleChange: (visible) => setPreviewOpen(visible),

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

@@ -21,6 +21,7 @@ interface IProps {
     openFileDialogOnClick?: boolean;
     style?: React.CSSProperties;
     domain?: string;
+    objectInValue?: boolean;
 }
 declare const SingleFileUpload: React.FC<IProps>;
 export default SingleFileUpload;

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

@@ -35,9 +35,22 @@ const SingleFileUpload = (props) => {
                     response.success ||
                     response.successed) {
                     setLoading(false);
-                    const url = data && data[props.valueKey || "url"];
+                    let url = data && data[props.valueKey || "url"];
+                    if (props.domain) {
+                        url = url.replace(props.domain, "");
+                    }
                     setFileUrl(url);
-                    props.onChange && props.onChange(url);
+                    if (props.objectInValue) {
+                        delete info.file.response;
+                        delete info.file.xhr;
+                        delete info.file.lastModifiedDate;
+                        delete info.file.originFileObj;
+                        props.onChange && props.onChange(Object.assign(Object.assign({}, info.file), data));
+                    }
+                    else {
+                        // Form.item 值注入关键
+                        props.onChange && props.onChange(url);
+                    }
                     props.onDone && props.onDone(info.file, data);
                 }
                 else {
@@ -79,16 +92,23 @@ const SingleFileUpload = (props) => {
         }));
     }, []);
     useEffect(() => {
-        if (typeof props.value === "string") {
-            const temp = props.domain ? props.value.replace(props.domain, "") : props.value;
-            setFileUrl(temp);
+        let item = props.value;
+        if (typeof item === "string" && (item || item == '') && fileUrl != item) {
+            // 防止重复拼接domain
+            item = props.domain ? item.replace(props.domain, "") : item;
+            setFileUrl(item);
+        }
+        if (((item === null || item === void 0 ? void 0 : item.url) || (item === null || item === void 0 ? void 0 : item.url) == '') && fileUrl != item.url) {
+            // 防止重复拼接domain
+            item.url = props.domain ? item.url.replace(props.domain, "") : item.url;
+            setFileUrl(item.url);
         }
     }, [props.value]);
     return (React.createElement(Space.Compact, { block: true },
         React.createElement(Input, { addonBefore: fileUrl ? (React.createElement("a", { style: { color: "#666" }, href: props.domain ? `${props.domain}${fileUrl}` : fileUrl, target: "_blank" }, "View")) : null, value: fileUrl ? props.domain ? `${props.domain}${fileUrl}` : fileUrl : "", onChange: (e) => {
                 const v = e.target.value.trim();
                 props.onChange && props.onChange(v);
-            } }),
+            }, disabled: props.disabled || props.objectInValue }),
         React.createElement(Upload, { ref: props.uploadRef, withCredentials: true, openFileDialogOnClick: props.openFileDialogOnClick, beforeUpload: beforeUpload, name: props.name, disabled: props.disabled, headers: props.headers, data: props.data, action: action, onChange: handleChange, showUploadList: false, onRemove: (e) => {
                 props.onRemove && props.onRemove(e);
             }, maxCount: 1 },

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

@@ -67,7 +67,7 @@ const ImgUpload = (props) => {
                         delete info.file.xhr;
                         delete info.file.lastModifiedDate;
                         delete info.file.originFileObj;
-                        props.onChange && props.onChange(info.file);
+                        props.onChange && props.onChange(Object.assign(Object.assign({}, info.file), data));
                     }
                     else {
                         // Form.item 值注入关键
@@ -171,7 +171,7 @@ const ImgUpload = (props) => {
             item = props.domain ? item.replace(props.domain, "") : item;
             setImageUrl(item);
         }
-        if (item.url) {
+        if (item === null || item === void 0 ? void 0 : item.url) {
             // 防止重复拼接domain
             item.url = props.domain ? item.url.replace(props.domain, "") : item.url;
             setImageUrl(item.url);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.5.7",
+    "version": "0.5.9",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -47,5 +47,5 @@
         "antd": "^6.0.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "32035c81dce6abb37d4b60b1216d2c0253622455"
+    "gitHead": "b9691a891b05214151e9ec74cb5a6392c038f3ef"
 }