@ecoding/components.antd 0.3.57 → 0.3.58

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

@@ -56,7 +56,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)

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

@@ -19,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

@@ -19,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.57",
+    "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": "*",
@@ -45,5 +47,5 @@
         "antd": "5.27.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "2a522cbf03eb8695fb6abf0d8df807743fd7fdd9"
+    "gitHead": "d005731c58467d76d54228231819e2489af8ab2c"
 }