@ecoding/components.antd 0.3.57 → 0.3.59

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { UploadFile } from 'antd';
+interface IProps {
+    message?: string;
+    showMessage?: boolean;
+    actionParams?: any;
+    i18n?: any;
+    value?: UploadFile[] | string[];
+    headers?: any;
+    data?: any;
+    gif?: boolean;
+    disabled?: boolean;
+    isTip?: boolean;
+    name?: string;
+    action: string | (() => string);
+    buttonText?: string;
+    maxCount?: number;
+    onChange?: (infos: string[]) => void;
+}
+/**
+ * @returns 返回地址的string
+ */
+declare const MultipleImgUpload: React.FC<IProps>;
+export default MultipleImgUpload;

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

@@ -0,0 +1,154 @@
+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, { useState } from 'react';
+import { Upload, Image } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import Toast from "../../core/toast";
+import Loading from "../../core/loading";
+import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable, horizontalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+const DraggableUploadListItem = ({ originNode, file }) => {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: file.uid,
+    });
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+        cursor: 'move',
+        height: '102px',
+        width: '102px',
+    };
+    return (React.createElement("div", Object.assign({ ref: setNodeRef, style: style, 
+        // prevent preview event when drag end
+        className: isDragging ? 'is-dragging' : '' }, attributes, listeners), file.status === 'error' && isDragging ? originNode.props.children : originNode));
+};
+/**
+ * @returns 返回地址的string
+ */
+const MultipleImgUpload = (props) => {
+    const { action, name, buttonText, maxCount, disabled, value, onChange } = props;
+    const [imgList, setImgList] = useState((value === null || value === void 0 ? void 0 : value.map((url, index) => {
+        if (typeof url === "string") {
+            return {
+                uid: String(index),
+                status: 'done',
+                url,
+                name: url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'))
+            };
+        }
+        else {
+            return url;
+        }
+    })) || []);
+    const updateItems = (newItems) => {
+        setImgList(newItems);
+        let isEmpty = true;
+        const urls = newItems.map((item) => item.url);
+        urls.forEach((item) => {
+            if (item) {
+                isEmpty = false;
+                return;
+            }
+        });
+        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;
+            }
+            default:
+                break;
+        }
+    };
+    const handleRemove = (file) => {
+        const lefts = imgList.filter(item => item.uid !== file.uid);
+        updateItems(lefts);
+    };
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewImage, setPreviewImage] = useState('');
+    const getBase64 = (file) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = (error) => reject(error);
+    });
+    const handlePreview = (file) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!file.url && !file.preview) {
+            file.preview = yield getBase64(file.originFileObj);
+        }
+        setPreviewImage(file.url || file.preview);
+        setPreviewOpen(true);
+    });
+    const uploadButton = (React.createElement("button", { style: { border: 0, background: 'none' }, type: "button" },
+        React.createElement(PlusOutlined, null),
+        React.createElement("div", { style: { marginTop: 8 } }, buttonText ? buttonText : '上传')));
+    const sensor = useSensor(PointerSensor, {
+        activationConstraint: { distance: 10 },
+    });
+    const onDragEnd = ({ active, over }) => {
+        if (!imgList || imgList.length == 0) {
+            return;
+        }
+        if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+            const temp = [...imgList];
+            const activeIndex = temp.findIndex((i) => i.uid === active.id);
+            const overIndex = temp.findIndex((i) => i.uid === (over === null || over === void 0 ? void 0 : over.id));
+            // 使用arrayMove计算新的排序结果
+            const newItems = arrayMove(temp, activeIndex, overIndex);
+            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 })))));
+};
+MultipleImgUpload.defaultProps = {
+    action: "/api/upload/img",
+    name: "file",
+    gif: false,
+    buttonText: '上传图片',
+    data: {},
+    isTip: true,
+    actionParams: {},
+};
+export default MultipleImgUpload;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Space, Alert } from 'antd';
+import { Flex, Alert } from 'antd';
 import { DragOutlined } from '@ant-design/icons';
 import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
@@ -14,7 +14,8 @@ const SortableItem = (props) => {
         transform: CSS.Transform.toString(transform),
         transition,
         position: 'relative',
-        margin: '0 8px'
+        margin: '0 8px',
+        fontSize: 0
     };
     const handleChange = (url) => {
         const newItems = [...items];
@@ -36,7 +37,15 @@ const SortableItem = (props) => {
                 alignItems: 'center',
                 justifyContent: 'center'
             } }),
-            React.createElement(DragOutlined, null)),
+            React.createElement(DragOutlined, { style: { fontSize: 14 } })),
+        index == 0 ? (React.createElement("div", { style: {
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                padding: '0 2px',
+                fontSize: '12px',
+                background: 'rgba(0,0,0,0.1)',
+            } }, "\u4E3B\u56FE")) : null,
         React.createElement(ImgUpload, Object.assign({}, props, { value: props.value, onChange: handleChange }))));
 };
 const MultiPileImgUpload = (props) => {
@@ -56,7 +65,15 @@ const MultiPileImgUpload = (props) => {
     const updateItems = (newItems) => {
         var _a;
         setItems(newItems);
-        props.onChange && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newItems.map((item) => item.url)));
+        let isEmpty = true;
+        const urls = newItems.map((item) => item.url);
+        urls.forEach((item) => {
+            if (item) {
+                isEmpty = false;
+                return;
+            }
+        });
+        props.onChange && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !isEmpty ? urls : undefined));
     };
     useEffect(() => {
         const initItems = Array(props.max)
@@ -74,8 +91,8 @@ const MultiPileImgUpload = (props) => {
             setItems(initItems);
         }
     }, [props.value]);
-    return (React.createElement("div", null,
-        props.showMessage && (React.createElement(Alert, { className: 'mb20', message: props.message ? props.message : (React.createElement(Space, null,
+    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",
@@ -97,7 +114,7 @@ const MultiPileImgUpload = (props) => {
                     ";"))), type: "warning", showIcon: true })),
         React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
             React.createElement(SortableContext, { items: items, strategy: horizontalListSortingStrategy },
-                React.createElement(Space, { wrap: true, align: "start" }, items.map((item, index) => (React.createElement(SortableItem, Object.assign({}, props, { index: index, items: items, updateItems: updateItems, value: item.url, key: item.id, id: item.id })))))))));
+                React.createElement(Flex, { wrap: true, align: "start" }, items.map((item, index) => (React.createElement(SortableItem, Object.assign({}, props, { index: index, items: items, updateItems: updateItems, value: item.url, key: item.id, id: item.id })))))))));
 };
 MultiPileImgUpload.defaultProps = {
     showMessage: true,

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Upload, message, Space, Image as Img } from "antd";
+import { Upload, message, Flex, Image as Img } from "antd";
 import { LoadingOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 import { buildURL } from "@ecoding/helper.url";
 import Toast from "../../core/toast";
@@ -123,7 +123,7 @@ const ImgUpload = (props) => {
             setImageUrl(props.value);
         }
     }, [props.value]);
-    return (React.createElement(Space, null,
+    return (React.createElement(Flex, { style: { fontSize: 0 } },
         imageUrl ? (React.createElement("div", { style: { position: "relative" } },
             React.createElement("span", { style: {
                     position: "absolute",
@@ -133,14 +133,13 @@ const ImgUpload = (props) => {
                     height: "18px",
                     opacity: ".9",
                     cursor: "pointer",
-                    zIndex: 10
                 }, onClick: (e) => {
                     e.stopPropagation();
                     clear();
                 } },
-                React.createElement(DeleteOutlined, null)),
+                React.createElement(DeleteOutlined, { style: { fontSize: 14 } })),
             React.createElement(Img, { style: { width: "102px", height: "102px", objectFit: "contain", cursor: "pointer" }, src: imageUrl }))) : (React.createElement(Upload, { withCredentials: true, beforeUpload: beforeUpload, name: props.name, data: props.data, headers: props.headers, disabled: props.disabled, listType: "picture-card", showUploadList: false, action: action, onChange: handleChange }, uploadButton)),
-        props.isTip ? (React.createElement("div", null,
+        props.isTip ? (React.createElement("div", { style: { fontSize: '13px', marginLeft: '18px', lineHeight: '30px' } },
             React.createElement("p", null,
                 props.i18n ? props.i18n.$t("global.size", "大小") : "大小",
                 "\uFF1A",

package/lib/core/tag.items/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface IProps {
+    value?: string[];
+    onChange?: any;
+    className?: string;
+    disabled?: boolean;
+    fixedFirst?: boolean;
+    addTagText?: string;
+}
+declare const C: React.FC<IProps>;
+export default C;

package/lib/core/tag.items/index.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { isEqual } from "@ecoding/helper.is";
+import { Flex, Input, Tag, theme, Tooltip } from 'antd';
+const tagInputStyle = {
+    width: 64,
+    height: 22,
+    marginInlineEnd: 8,
+    verticalAlign: 'top'
+};
+const C = (props) => {
+    const { token } = theme.useToken();
+    const [tags, setTags] = useState([]);
+    const [inputVisible, setInputVisible] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [editInputIndex, setEditInputIndex] = useState(-1);
+    const [editInputValue, setEditInputValue] = useState('');
+    const inputRef = useRef(null);
+    const editInputRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (inputVisible) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [inputVisible]);
+    useEffect(() => {
+        var _a;
+        (_a = editInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [editInputValue]);
+    const handleClose = (removedTag) => {
+        const newTags = tags.filter((tag) => tag !== removedTag);
+        setTags(newTags);
+        props.onChange && props.onChange(newTags && newTags.length > 0 ? newTags : undefined);
+    };
+    const showInput = () => {
+        setInputVisible(true);
+    };
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    const handleInputConfirm = () => {
+        if (inputValue && !tags.includes(inputValue)) {
+            const values = [...tags, inputValue];
+            setTags(values);
+            props.onChange && props.onChange(values && values.length > 0 ? values : undefined);
+        }
+        setInputVisible(false);
+        setInputValue('');
+    };
+    const handleEditInputChange = (e) => {
+        setEditInputValue(e.target.value);
+    };
+    const handleEditInputConfirm = () => {
+        const newTags = [...(tags || [])];
+        newTags[editInputIndex] = editInputValue;
+        setTags(newTags);
+        props.onChange && props.onChange(newTags && newTags.length > 0 ? newTags : undefined);
+        setEditInputIndex(-1);
+        setEditInputValue('');
+    };
+    const tagPlusStyle = {
+        height: 22,
+        background: token.colorBgContainer,
+        borderStyle: 'dashed'
+    };
+    useEffect(() => {
+        if (props.value && !isEqual(props.value, tags)) {
+            setTags(props.value);
+        }
+    }, [props.value]);
+    return (React.createElement(Flex, { gap: "4px 0", wrap: "wrap" },
+        tags.map((tag, index) => {
+            if (editInputIndex === index) {
+                return (React.createElement(Input, { ref: editInputRef, key: tag, size: "small", style: tagInputStyle, value: editInputValue, onChange: handleEditInputChange, onBlur: handleEditInputConfirm, onPressEnter: handleEditInputConfirm }));
+            }
+            const isLongTag = tag.length > 20;
+            const tagElem = (React.createElement(Tag, { key: tag, closable: props.fixedFirst ? index !== 0 : true, style: { userSelect: 'none' }, onClose: () => handleClose(tag) },
+                React.createElement("span", { onDoubleClick: (e) => {
+                        if (props.disabled) {
+                            return;
+                        }
+                        if (props.fixedFirst ? index !== 0 : true) {
+                            setEditInputIndex(index);
+                            setEditInputValue(tag);
+                            e.preventDefault();
+                        }
+                    } }, isLongTag ? `${tag.slice(0, 20)}...` : tag)));
+            return isLongTag ? (React.createElement(Tooltip, { title: tag, key: tag }, tagElem)) : (tagElem);
+        }),
+        props.disabled ? null : inputVisible ? (React.createElement(Input, { ref: inputRef, type: "text", size: "small", style: tagInputStyle, value: inputValue, onChange: handleInputChange, onBlur: handleInputConfirm, onPressEnter: handleInputConfirm })) : (React.createElement(Tag, { style: tagPlusStyle, icon: React.createElement(PlusOutlined, null), onClick: showInput }, props.addTagText))));
+};
+C.defaultProps = {
+    disabled: false,
+    fixedFirst: false,
+    addTagText: 'New Tag'
+};
+export default C;

package/lib/index.d.ts

@@ -12,6 +12,7 @@ export { default as RangePicker } from "./core/range-picker";
 export { default as DatePicker } from "./core/date.picker";
 export { default as SingleImgUpload } from "./core/single-img-upload";
 export { default as MultipleSingleImgUpload } from "./core/multiple-single-img-upload";
+export { default as MultipleImgUpload } from "./core/multiple-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";
@@ -19,5 +20,6 @@ export { default as FormLabelAttachment } from "./core/form.label.attachment";
 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 TagItems } from "./core/tag.items";
 export { default as TablePro } from "./core/table-pro";
 export { default as http } from "./helpers/http";

package/lib/index.js

@@ -12,6 +12,7 @@ export { default as RangePicker } from "./core/range-picker";
 export { default as DatePicker } from "./core/date.picker";
 export { default as SingleImgUpload } from "./core/single-img-upload";
 export { default as MultipleSingleImgUpload } from "./core/multiple-single-img-upload";
+export { default as MultipleImgUpload } from "./core/multiple-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";
@@ -19,5 +20,6 @@ export { default as FormLabelAttachment } from "./core/form.label.attachment";
 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 TagItems } from "./core/tag.items";
 export { default as TablePro } from "./core/table-pro";
 export { default as http } from "./helpers/http";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.57",
+    "version": "0.3.59",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -24,6 +24,8 @@
         "build": "rm -rf lib && tsc && rollup -c"
     },
     "peerDependencies": {
+        "@dnd-kit/core": ">=6.3.1",
+        "@dnd-kit/sortable": ">=10.0.0",
         "@ecoding/helper.event": "*",
         "@ecoding/helper.is": "*",
         "@ecoding/helper.json": "*",
@@ -45,5 +47,5 @@
         "antd": "5.27.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "2a522cbf03eb8695fb6abf0d8df807743fd7fdd9"
+    "gitHead": "7c271775a18b32dedae8fea1707efcdadef6592f"
 }