@ecoding/components.antd 0.3.59 → 0.3.61

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

@@ -1,16 +1,21 @@
 import React from 'react';
 import type { UploadFile } from 'antd';
+interface IOpts {
+    size?: number;
+    w?: number;
+    h?: number;
+}
 interface IProps {
     message?: string;
     showMessage?: boolean;
     actionParams?: any;
     i18n?: any;
+    opts?: IOpts;
     value?: UploadFile[] | string[];
     headers?: any;
     data?: any;
     gif?: boolean;
     disabled?: boolean;
-    isTip?: boolean;
     name?: string;
     action: string | (() => string);
     buttonText?: string;

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

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useState } from 'react';
-import { Upload, Image } from 'antd';
+import React, { useState, useCallback, useMemo } from 'react';
+import { Upload, Image as Img, Alert, Flex, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import Toast from "../../core/toast";
-import Loading from "../../core/loading";
+import { buildURL } from "@ecoding/helper.url";
 import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, horizontalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -34,7 +33,9 @@ const DraggableUploadListItem = ({ originNode, file }) => {
  * @returns 返回地址的string
  */
 const MultipleImgUpload = (props) => {
-    const { action, name, buttonText, maxCount, disabled, value, onChange } = props;
+    const { name, buttonText, maxCount, disabled, value, onChange } = props;
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewImage, setPreviewImage] = useState('');
     const [imgList, setImgList] = useState((value === null || value === void 0 ? void 0 : value.map((url, index) => {
         if (typeof url === "string") {
             return {
@@ -60,47 +61,28 @@ const MultipleImgUpload = (props) => {
         });
         onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(!isEmpty ? urls : undefined));
     };
-    const handleChange = (info) => {
-        switch (info.file.status) {
-            case 'uploading':
-                Loading.show();
-                break;
-            case 'done': {
-                Loading.hide();
-                const response = info.file.response;
-                if (response && response.code === 200) {
-                    const data = response.data || {};
-                    const temp = imgList.concat([Object.assign({}, data)]);
-                    updateItems(temp);
-                }
-                else {
-                    Toast.error({
-                        mask: true,
-                        title: response.message || '服务出错，图片上传失败'
-                    });
-                }
-                break;
-            }
-            case 'error': {
-                const response = info.file.response;
-                console.log(response.data);
-                Toast.error({
-                    mask: true,
-                    title: response.message || '服务出错，图片上传失败'
-                });
-                Loading.hide();
-                break;
+    const handleChange = ({ fileList }) => {
+        fileList && fileList.forEach((item) => {
+            if (item.status == "done" && item.response.code == 200 && item.response.data) {
+                item.url = item.response.data.url;
             }
-            default:
-                break;
-        }
+        });
+        updateItems(fileList);
+        // if (len) {
+        //     return;
+        // }
+        // updateItems(fileList)
     };
     const handleRemove = (file) => {
         const lefts = imgList.filter(item => item.uid !== file.uid);
         updateItems(lefts);
     };
-    const [previewOpen, setPreviewOpen] = useState(false);
-    const [previewImage, setPreviewImage] = useState('');
+    const action = useMemo(() => {
+        if (typeof props.action === "string") {
+            return buildURL(props.action, props.actionParams);
+        }
+        return buildURL(props.action(), props.actionParams);
+    }, [props.actionParams, props.action]);
     const getBase64 = (file) => new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
@@ -133,22 +115,93 @@ const MultipleImgUpload = (props) => {
             updateItems(newItems);
         }
     };
-    return (React.createElement(DndContext, { sensors: [sensor], onDragEnd: onDragEnd },
-        React.createElement(SortableContext, { items: imgList === null || imgList === void 0 ? void 0 : imgList.map((i) => i.uid), strategy: horizontalListSortingStrategy },
-            React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, multiple: true, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file })) }, maxCount && imgList.length >= maxCount ? null : uploadButton),
-            previewImage && (React.createElement(Image, { wrapperStyle: { display: 'none' }, preview: {
-                    visible: previewOpen,
-                    onVisibleChange: (visible) => setPreviewOpen(visible),
-                    afterOpenChange: (visible) => !visible && setPreviewImage('')
-                }, src: previewImage })))));
+    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");
+            }
+            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;
+            }
+            resolve();
+        }));
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        props.showMessage && (React.createElement(Alert, { className: 'mb20', message: props.message ? props.message : (React.createElement(Flex, { gap: 10 },
+                React.createElement("div", null,
+                    props.i18n ? props.i18n.$t("global.size", "大小") : "大小",
+                    "\uFF1A",
+                    props.i18n ? props.i18n.$t("global.lt", "小于") : "小于",
+                    " ",
+                    props.opts.size || 1,
+                    "MB;"),
+                React.createElement("div", null,
+                    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("div", null,
+                    props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
+                    "\uFF1Ajpg\u3001jpeg\u3001png",
+                    props.gif ? "、gif" : "",
+                    ";"))), type: "warning", showIcon: true })),
+        React.createElement(DndContext, { sensors: [sensor], onDragEnd: onDragEnd },
+            React.createElement(SortableContext, { items: imgList === null || imgList === void 0 ? void 0 : imgList.map((i) => i.uid), strategy: horizontalListSortingStrategy },
+                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 })) }, maxCount && imgList.length >= maxCount ? null : uploadButton),
+                previewImage && (React.createElement(Img, { wrapperStyle: { display: 'none' }, preview: {
+                        visible: previewOpen,
+                        onVisibleChange: (visible) => setPreviewOpen(visible),
+                        afterOpenChange: (visible) => !visible && setPreviewImage('')
+                    }, src: previewImage }))))));
 };
 MultipleImgUpload.defaultProps = {
+    maxCount: 6,
+    showMessage: true,
     action: "/api/upload/img",
     name: "file",
     gif: false,
-    buttonText: '上传图片',
+    buttonText: 'Upload',
     data: {},
-    isTip: true,
     actionParams: {},
+    opts: {
+        size: 1
+    }
 };
 export default MultipleImgUpload;

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

@@ -122,7 +122,7 @@ MultiPileImgUpload.defaultProps = {
     action: '/api/upload/img',
     name: 'file',
     gif: false,
-    buttonText: '上传图片',
+    buttonText: 'Upload',
     data: {},
     isTip: false,
     actionParams: {},

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

@@ -26,5 +26,5 @@ interface IProps {
     openFileDialogOnClick?: boolean;
     style?: React.CSSProperties;
 }
-declare const SingleFileUpload: React.FC<IProps>;
-export default SingleFileUpload;
+declare const MultipleUpload: React.FC<IProps>;
+export default MultipleUpload;

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

@@ -37,7 +37,7 @@ const InfosRender = ({ infos, setInfos, onChange }) => {
     }
     return React.createElement(Empty, { imageStyle: { height: 30 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
 };
-const SingleFileUpload = (props) => {
+const MultipleUpload = (props) => {
     const [infos, setInfos] = useState([]);
     const [open, setOpen] = useState(undefined);
     const timeout = useRef();
@@ -128,7 +128,7 @@ const SingleFileUpload = (props) => {
         React.createElement(Popover, { destroyTooltipOnHide: true, open: open, placement: "right", trigger: "hover", title: "Uploaded", content: React.createElement(InfosRender, { onChange: props.onChange, infos: infos, setInfos: setInfos }) },
             React.createElement(Button, { icon: React.createElement(EllipsisOutlined, null) }))));
 };
-SingleFileUpload.defaultProps = {
+MultipleUpload.defaultProps = {
     name: 'file',
     openFileDialogOnClick: true,
     icon: true,
@@ -136,8 +136,8 @@ SingleFileUpload.defaultProps = {
     extraData: {},
     maxCount: 10,
     headers: undefined,
-    buttonText: '点击上传',
+    buttonText: 'Upload',
     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;
+export default MultipleUpload;

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

@@ -101,7 +101,7 @@ SingleFileUpload.defaultProps = {
     icon: true,
     data: {},
     actionParams: {},
-    buttonText: "点击上传",
+    buttonText: "Upload",
     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.js

@@ -163,7 +163,7 @@ ImgUpload.defaultProps = {
     name: "file",
     value: "",
     gif: false,
-    buttonText: '上传图片',
+    buttonText: 'Upload',
     data: {},
     isTip: true,
     actionParams: {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.59",
+    "version": "0.3.61",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -47,5 +47,5 @@
         "antd": "5.27.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "7c271775a18b32dedae8fea1707efcdadef6592f"
+    "gitHead": "40631c611e4f76eb3f693ba01640b53fe97ba494"
 }