@ecoding/components.antd 0.3.56 → 0.3.58

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,124 @@
+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);
+        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)
+            .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/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

@@ -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";
@@ -18,5 +19,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

@@ -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";
@@ -18,5 +19,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.56",
+    "version": "0.3.58",
     "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": "*",
@@ -34,14 +36,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": "d005731c58467d76d54228231819e2489af8ab2c"
 }