@ecoding/components.antd 0.3.56 → 0.3.57

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

@@ -0,0 +1,26 @@
+import React from 'react';
+interface IOpts {
+    size?: number;
+    w?: number;
+    h?: number;
+}
+interface IProps {
+    max?: number;
+    message?: string;
+    showMessage?: boolean;
+    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;
+    isTip?: boolean;
+}
+declare const MultiPileImgUpload: React.FC<IProps>;
+export default MultiPileImgUpload;

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

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { Space, 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';
+import { CSS } from '@dnd-kit/utilities';
+import ImgUpload from '../single-img-upload';
+const SortableItem = (props) => {
+    const { index, items, updateItems } = props;
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: props.id
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        position: 'relative',
+        margin: '0 8px'
+    };
+    const handleChange = (url) => {
+        const newItems = [...items];
+        newItems[index].url = url;
+        updateItems(newItems);
+    };
+    return (React.createElement("div", { ref: setNodeRef, style: style },
+        React.createElement("div", Object.assign({}, attributes, listeners, { style: {
+                position: 'absolute',
+                top: '4px',
+                left: '4px',
+                width: '20px',
+                height: '20px',
+                background: 'rgba(0,0,0,0.1)',
+                borderRadius: '50%',
+                cursor: 'grab',
+                zIndex: 10,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            } }),
+            React.createElement(DragOutlined, null)),
+        React.createElement(ImgUpload, Object.assign({}, props, { value: props.value, onChange: handleChange }))));
+};
+const MultiPileImgUpload = (props) => {
+    const [items, setItems] = useState([]);
+    const sensors = useSensors(useSensor(PointerSensor));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const temp = [...items];
+            const activeIndex = temp.findIndex((i) => i.id === active.id);
+            const overIndex = temp.findIndex((i) => i.id === (over === null || over === void 0 ? void 0 : over.id));
+            // 使用arrayMove计算新的排序结果
+            const newItems = arrayMove(temp, activeIndex, overIndex);
+            updateItems(newItems);
+        }
+    };
+    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)));
+    };
+    useEffect(() => {
+        const initItems = Array(props.max)
+            .fill(undefined)
+            .map((item, i) => ({ id: i + 1, url: '' }));
+        if (props.value) {
+            const sorts = props.value.map((item, i) => ({ id: i + 1, url: item }));
+            const len = initItems.length - sorts.length;
+            for (let i = 0; i < len; i++) {
+                sorts.push({ id: sorts.length + 1 + i, url: '' });
+            }
+            setItems(sorts);
+        }
+        else {
+            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,
+                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: 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 })))))))));
+};
+MultiPileImgUpload.defaultProps = {
+    showMessage: true,
+    max: 6,
+    action: '/api/upload/img',
+    name: 'file',
+    gif: false,
+    buttonText: '上传图片',
+    data: {},
+    isTip: false,
+    actionParams: {},
+    opts: {
+        size: 1
+    }
+};
+export default MultiPileImgUpload;

package/lib/core/search.input/index.d.ts

@@ -3,6 +3,7 @@ import type { InputProps } from 'antd';
 interface IItem {
     key: any;
     label: string;
+    [props: string]: any;
 }
 interface IProps extends InputProps {
     placeholder?: string;

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

@@ -21,6 +21,7 @@ interface IProps {
     onChange?: any;
     gif?: boolean;
     disabled?: boolean;
+    isTip?: boolean;
 }
 declare const ImgUpload: React.FC<IProps>;
 export default ImgUpload;

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 } from "antd";
+import { Upload, message, Space, Image as Img } from "antd";
 import { LoadingOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 import { buildURL } from "@ecoding/helper.url";
 import Toast from "../../core/toast";
@@ -119,27 +119,28 @@ const ImgUpload = (props) => {
         loading ? React.createElement(LoadingOutlined, null) : React.createElement(PlusOutlined, null),
         React.createElement("div", { style: { marginTop: 8 } }, props.buttonText))), [loading]);
     useEffect(() => {
-        if (props.value) {
+        if (props.value || props.value == "") {
             setImageUrl(props.value);
         }
     }, [props.value]);
     return (React.createElement(Space, null,
-        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 }, imageUrl ? (React.createElement("div", { style: { position: "relative" } },
+        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"
+                    opacity: ".9",
+                    cursor: "pointer",
+                    zIndex: 10
                 }, 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(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,
             React.createElement("p", null,
                 props.i18n ? props.i18n.$t("global.size", "大小") : "大小",
                 "\uFF1A",
@@ -156,7 +157,7 @@ const ImgUpload = (props) => {
             React.createElement("p", null,
                 props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
                 "\uFF1Ajpg\u3001jpeg\u3001png",
-                props.gif ? "、gif" : ""))));
+                props.gif ? "、gif" : ""))) : null));
 };
 ImgUpload.defaultProps = {
     action: "/api/upload/img",
@@ -165,6 +166,7 @@ ImgUpload.defaultProps = {
     gif: false,
     buttonText: '上传图片',
     data: {},
+    isTip: true,
     actionParams: {},
     opts: {
         size: 1

package/lib/index.d.ts

@@ -11,6 +11,7 @@ export { default as PhoneInput } from "./core/phone-input";
 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 SingleFileUpload } from "./core/single-file-upload";
 export { default as MultipleUpload } from "./core/multiple-upload";
 export { default as FormLabel } from "./core/form.label";

package/lib/index.js

@@ -11,6 +11,7 @@ export { default as PhoneInput } from "./core/phone-input";
 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 SingleFileUpload } from "./core/single-file-upload";
 export { default as MultipleUpload } from "./core/multiple-upload";
 export { default as FormLabel } from "./core/form.label";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.56",
+    "version": "0.3.57",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -34,14 +34,16 @@
         "axios": ">=1.1.2"
     },
     "devDependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
         "@ecoding/helper.event": "*",
         "@ecoding/helper.is": "*",
         "@ecoding/helper.json": "*",
         "@ecoding/helper.request": "*",
         "@ecoding/helper.request.hook": "*",
         "@ecoding/helper.url": "*",
-        "antd": "^5.8.4",
+        "antd": "5.27.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "748f27b64bf7cc282367b4167f9439d92e97fb94"
+    "gitHead": "2a522cbf03eb8695fb6abf0d8df807743fd7fdd9"
 }