@ecoding/components.antd 0.3.64 → 0.4.1

package/lib/core/form.list/index.bak.d.ts

@@ -24,7 +24,6 @@ interface IProps {
     afterRemove?: (index: any) => void;
     afterAdd?: (index: any) => void;
     tStyle?: React.CSSProperties;
-    enableSort?: boolean;
     operation?: {
         hide?: boolean;
         width?: number;

package/lib/core/form.list/index.bak.js

@@ -1,77 +1,13 @@
 import React, { useMemo, useRef } from 'react';
 import { Typography, Form, Button, Space, Tooltip } from 'antd';
 import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { DragOutlined } from '@ant-design/icons';
-import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-const SortableItem = (props) => {
-    const { columns, i18n, field, index, add, remove, afterRemove, enableSort } = props;
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id: props.id
-    });
-    const trStyle = enableSort ? {
-        borderBottom: '1px solid #eee',
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.5 : 1,
-        cursor: 'grab',
-        marginBottom: 16,
-    } : {
-        borderBottom: '1px solid #eee',
-    };
+const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd }) => {
+    const tbodyRef = useRef(null);
     const tdStyle = {
         verticalAlign: 'top',
         lineHeight: '32px',
-        padding: '10px',
-        position: 'relative',
+        padding: '10px'
     };
-    const needDefaultOperation = useMemo(() => {
-        return columns.findIndex(column => column.type == "operation") == -1;
-    }, []);
-    return (React.createElement("tr", { style: trStyle, ref: setNodeRef },
-        React.createElement("td", { style: tdStyle },
-            React.createElement("div", { style: { width: '100%', height: '100%', position: "relative" } },
-                enableSort ? (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, { style: { fontSize: 14 } }))) : null,
-                index + 1)),
-        columns.map((column, i) => {
-            if (column.type == "operation") {
-                return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
-                    React.createElement(Space, null,
-                        column.render && column.render(field, index, { add, remove }),
-                        (typeof column.hideRemove == "function" && column.hideRemove(field, index)) || (typeof column.hideRemove == "boolean" && column.hideRemove) ? (React.createElement(Typography.Text, { disabled: true }, i18n ? i18n.$t("global.del", '删除') : '删除')) : (React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
-                                remove(field.name);
-                                afterRemove && afterRemove(field.name);
-                            } }, i18n ? i18n.$t("global.del", '删除') : '删除')))));
-            }
-            else {
-                return (React.createElement("td", { style: tdStyle },
-                    React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index, { add, remove }))));
-            }
-        }),
-        needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
-            React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
-                    remove(field.name);
-                    afterRemove && afterRemove(field.name);
-                } }, i18n ? i18n.$t("global.del", '删除') : '删除'))) : null));
-};
-const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd, enableSort }) => {
-    const sensors = useSensors(useSensor(PointerSensor));
-    const tbodyRef = useRef(null);
     const thStyle = {
         textAlign: 'left',
         backgroundColor: '#fafafa',
@@ -80,6 +16,9 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
         top: 0,
         zIndex: 1
     };
+    const trStyle = {
+        borderBottom: '1px solid #eee'
+    };
     const widths = useMemo(() => {
         let w = 60;
         columns.forEach((column) => {
@@ -93,7 +32,10 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
         }
         return w;
     }, []);
-    return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove, move }, { errors }) => {
+    const needDefaultOperation = useMemo(() => {
+        return columns.findIndex(column => column.type == "operation") == -1;
+    }, []);
+    return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove }, { errors }) => {
         return (React.createElement("div", { className: 'm-form-list' },
             React.createElement("div", { ref: tbodyRef, className: "m-form-list-table", style: Object.assign({}, { marginBottom: '4px', paddingBottom: '12px', overflow: "auto", position: 'relative' }, tStyle) },
                 React.createElement("table", { style: { width: widths } },
@@ -125,17 +67,30 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
                                     React.createElement(QuestionCircleOutlined, { style: { paddingLeft: 4, color: "rgba(0, 0, 0, 0.45)" } }))) : null));
                         }),
                         (operation === null || operation === void 0 ? void 0 : operation.hide) ? null : (React.createElement("th", { style: Object.assign({}, thStyle, { right: 0 }) }, i18n ? i18n.$t("global.operation", "操作") : "操作"))))),
-                    React.createElement("tbody", null,
-                        React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: ({ active, over }) => {
-                                if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
-                                    const oldIndex = fields.findIndex((field) => field.key === active.id);
-                                    const newIndex = fields.findIndex((field) => field.key === (over === null || over === void 0 ? void 0 : over.id));
-                                    move(oldIndex, newIndex);
+                    React.createElement("tbody", null, fields.map((field, index) => {
+                        return (React.createElement("tr", { style: trStyle },
+                            React.createElement("td", { style: tdStyle }, index + 1),
+                            columns.map((column, i) => {
+                                if (column.type == "operation") {
+                                    return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
+                                        React.createElement(Space, null,
+                                            column.render && column.render(field, index, { add, remove }),
+                                            (typeof column.hideRemove == "function" && column.hideRemove(field, index)) || (typeof column.hideRemove == "boolean" && column.hideRemove) ? (React.createElement(Typography.Text, { disabled: true }, i18n ? i18n.$t("global.del", '删除') : '删除')) : (React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
+                                                    remove(field.name);
+                                                    afterRemove && afterRemove(field.name);
+                                                } }, i18n ? i18n.$t("global.del", '删除') : '删除')))));
+                                }
+                                else {
+                                    return (React.createElement("td", { style: tdStyle },
+                                        React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index, { add, remove }))));
                                 }
-                            } },
-                            React.createElement(SortableContext, { items: fields.map(field => field.key), strategy: verticalListSortingStrategy }, fields.map((field, index) => {
-                                return (React.createElement(SortableItem, { columns: columns, index: index, key: field.key, id: field.key, i18n: i18n, field: field, add: add, remove: remove, afterRemove: afterRemove, enableSort: enableSort }));
-                            })))))),
+                            }),
+                            needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
+                                React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
+                                        remove(field.name);
+                                        afterRemove && afterRemove(field.name);
+                                    } }, i18n ? i18n.$t("global.del", '删除') : '删除'))) : null));
+                    })))),
             hideBottom ? null : (React.createElement("div", null,
                 React.createElement(Button, { icon: React.createElement(PlusCircleOutlined, null), type: "dashed", onClick: () => {
                         add();
@@ -146,7 +101,4 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
                     } }, i18n ? i18n.$t("global.add", "添加") : "添加")))));
     }));
 };
-C.defaultProps = {
-    enableSort: false,
-};
 export default C;

package/lib/core/form.list/index.d.ts

@@ -21,6 +21,7 @@ interface IProps {
     i18n?: any;
     hideBottom?: boolean;
     hideHeader?: boolean;
+    max?: number;
     afterRemove?: (index: any) => void;
     afterAdd?: (index: any) => void;
     tStyle?: React.CSSProperties;

package/lib/core/form.list/index.js

@@ -1,7 +1,6 @@
 import React, { useMemo, useRef } from 'react';
-import { Typography, Form, Button, Space, Tooltip } from 'antd';
-import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { DragOutlined } from '@ant-design/icons';
+import { Typography, Form, Button, Space, Tooltip, message } from 'antd';
+import { PlusCircleOutlined, QuestionCircleOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -31,22 +30,19 @@ const SortableItem = (props) => {
     }, []);
     return (React.createElement("tr", { style: trStyle, ref: setNodeRef },
         React.createElement("td", { style: tdStyle },
-            React.createElement("div", { style: { width: '100%', height: '100%', position: "relative" } },
-                enableSort ? (React.createElement("div", Object.assign({}, attributes, listeners, { style: {
+            React.createElement("div", { style: enableSort ? { paddingLeft: 20, position: "relative", height: '32px', lineHeight: '32px' } : { height: '32px', lineHeight: '32px' } },
+                enableSort ? (React.createElement("span", Object.assign({}, attributes, listeners, { style: {
                         position: 'absolute',
-                        top: '4px',
-                        left: '4px',
+                        top: '6px',
+                        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, { style: { fontSize: 14 } }))) : null,
+                    React.createElement(UnorderedListOutlined, { style: { fontSize: 14 } }))) : null,
                 index + 1)),
         columns.map((column, i) => {
             if (column.type == "operation") {
@@ -69,7 +65,7 @@ const SortableItem = (props) => {
                     afterRemove && afterRemove(field.name);
                 } }, i18n ? i18n.$t("global.del", '删除') : '删除'))) : null));
 };
-const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd, enableSort }) => {
+const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd, enableSort, max }) => {
     const sensors = useSensors(useSensor(PointerSensor));
     const tbodyRef = useRef(null);
     const thStyle = {
@@ -138,6 +134,10 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
                             })))))),
             hideBottom ? null : (React.createElement("div", null,
                 React.createElement(Button, { icon: React.createElement(PlusCircleOutlined, null), type: "dashed", onClick: () => {
+                        if (max && fields.length >= max) {
+                            message.error(i18n ? `i18n.$t("global.max.add", "最多添加条数为:") ${max}` : `最多添加条数为: ${max}`);
+                            return;
+                        }
                         add();
                         setTimeout(() => {
                             tbodyRef.current.scrollTop = tbodyRef.current.scrollHeight;

package/lib/core/length-input/index.js

@@ -3,7 +3,7 @@ import { Input } from "antd";
 const LengthInput = (props) => {
     const isCompositionStart = useRef(false);
     const [n, setN] = useState(0);
-    const [v, setV] = useState(props.value || "");
+    const [v, setV] = useState("");
     const setString = useCallback((str, len) => {
         let strlen = 0;
         let s = "";
@@ -16,10 +16,10 @@ const LengthInput = (props) => {
             else {
                 strlen++;
             }
-            s += str.charAt(i);
-            if (strlen >= len) {
+            if (strlen > len) {
                 return s;
             }
+            s += str.charAt(i);
         }
         return s;
     }, []);
@@ -54,13 +54,13 @@ const LengthInput = (props) => {
         props.onChange(e);
     }, []);
     useEffect(() => {
-        if (props.value) {
+        if (props.value && !v) {
             const vs = props.value || "";
             const len = getLen(vs);
-            setN(len);
-            setV(vs);
+            setN(len >= props.max ? props.max : len);
+            setV(setString(vs, props.max));
         }
-    }, [props]);
+    }, [props.value]);
     const compositionStartHandler = useCallback(() => {
         isCompositionStart.current = true;
     }, []);

package/lib/core/length-input-textarea/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface IProps {
+    placeholder?: string;
+    value?: string;
+    max?: number;
+    onChange?: any;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    autoSize?: boolean | {
+        minRows: number;
+        maxRows: number;
+    };
+    autoComplete?: "off" | "new-password" | "on";
+}
+declare const LengthInputTextArea: React.FC<IProps>;
+export default LengthInputTextArea;

package/lib/core/length-input-textarea/index.js

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { Input } from "antd";
+const LengthInputTextArea = (props) => {
+    const isCompositionStart = useRef(false);
+    const [n, setN] = useState(0);
+    const [v, setV] = useState("");
+    const setString = useCallback((str, len) => {
+        let strlen = 0;
+        let s = "";
+        for (let i = 0; i < str.length; i++) {
+            // eslint-disable-next-line no-control-regex
+            const m = str.charAt(i).match(/[^\x00-\x80]/g); // 利用match方法检索出中文字符并返回一个存放中文的数
+            if (m != null && m.length > 0) {
+                strlen += 2;
+            }
+            else {
+                strlen++;
+            }
+            if (strlen > len) {
+                return s;
+            }
+            s += str.charAt(i);
+        }
+        return s;
+    }, []);
+    const getLen = useCallback((str) => {
+        // 获取字符串的真实长度（字节长度）
+        if (!str) {
+            return 0;
+        }
+        const len = str.length;
+        let truelen = 0;
+        for (let x = 0; x < len; x++) {
+            if (str.charCodeAt(x) > 128) {
+                truelen += 2;
+            }
+            else {
+                truelen += 1;
+            }
+        }
+        return truelen;
+    }, []);
+    const keyUpHandler = useCallback((e) => {
+        let vs = e.target.value;
+        let len = getLen(vs);
+        if (!isCompositionStart.current && len >= props.max) {
+            vs = setString(vs, props.max);
+            len = getLen(vs);
+        }
+        setV(vs);
+        setN(len);
+        e.target.value = vs;
+        // 估计form表单会默认有onChange事件
+        props.onChange(e);
+    }, []);
+    useEffect(() => {
+        if (props.value && !v) {
+            const vs = props.value || "";
+            const len = getLen(vs);
+            setN(len >= props.max ? props.max : len);
+            setV(setString(vs, props.max));
+        }
+    }, [props.value]);
+    const compositionStartHandler = useCallback(() => {
+        isCompositionStart.current = true;
+    }, []);
+    const compositionEndHandler = useCallback((e) => {
+        isCompositionStart.current = false;
+        keyUpHandler(e);
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(Input.TextArea, Object.assign({}, props, { value: v, onCompositionStart: compositionStartHandler, onCompositionEnd: compositionEndHandler, onChange: keyUpHandler })),
+        React.createElement("div", { style: { color: "#666", textAlign: "right" } },
+            n,
+            React.createElement("span", { style: { padding: "0 2px" } }, "/"),
+            props.max)));
+};
+LengthInputTextArea.defaultProps = {
+    max: 300,
+    autoSize: { minRows: 4, maxRows: 6 }
+};
+export default LengthInputTextArea;

package/lib/core/{multiple-upload → multiple-file-upload}/index.js

@@ -137,7 +137,7 @@ MultipleUpload.defaultProps = {
     maxCount: 10,
     headers: undefined,
     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',
+    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, mkv, mov, avi, xlsx, xls, doc, docx, ppt, pptx, rar, 7z',
     style: {}
 };
 export default MultipleUpload;

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

@@ -4,6 +4,12 @@ interface IOpts {
     size?: number;
     w?: number;
     h?: number;
+    minH?: number;
+    maxH?: number;
+    minW?: number;
+    maxW?: number;
+    ratioW?: number;
+    ratioH?: number;
 }
 interface IProps {
     message?: string;

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useState, useCallback, useMemo } from 'react';
-import { Upload, Image as Img, Alert, Flex, message } from 'antd';
+import { Upload, Image as Img, Alert, Flex, message, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { buildURL } from "@ecoding/helper.url";
 import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
@@ -33,6 +33,7 @@ const DraggableUploadListItem = ({ originNode, file }) => {
  * @returns 返回地址的string
  */
 const MultipleImgUpload = (props) => {
+    var _a, _b, _c, _d;
     const { name, buttonText, maxCount, disabled, value, onChange } = props;
     const [previewOpen, setPreviewOpen] = useState(false);
     const [previewImage, setPreviewImage] = useState('');
@@ -131,33 +132,63 @@ const MultipleImgUpload = (props) => {
     }, []);
     const beforeUpload = useCallback((file) => {
         return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
-            const ary = ["jpg", "jpeg", "png"];
+            const ary = ["jpg", "jpeg", "png", "webp"];
             if (props.gif) {
                 ary.push("gif");
             }
             if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) === -1) {
-                message.error(`请上传 ${ary.join(",")} 格式的图片!`);
+                message.error(`支持图片格式为：${ary.join(",")}`);
                 reject();
                 return;
             }
             const isLt2M = file.size / 1024 / 1024 < (props.opts.size || 1);
             if (!isLt2M) {
-                message.error(`图片大小必须小于${props.opts.size} MB!`);
+                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 约定!`);
+                message.error(`图片宽度不符合 ${props.opts.w}px`);
                 reject();
                 return;
             }
             if (props.opts.h && props.opts.h !== wh.h) {
-                message.error(`图片高度不符合 ${props.opts.h}px 约定!`);
+                message.error(`图片高度不符合 ${props.opts.h}px`);
                 reject();
                 return;
             }
+            if (props.opts.maxH && props.opts.maxH < wh.h) {
+                message.error(`图片高度不能大于 ${props.opts.maxH}px`);
+                reject();
+                return;
+            }
+            if (props.opts.minH && props.opts.minH > wh.h) {
+                message.error(`图片高度不能小于 ${props.opts.minH}px`);
+                reject();
+                return;
+            }
+            if (props.opts.maxW && props.opts.maxW < wh.w) {
+                message.error(`图片宽度不能大于 ${props.opts.maxW}px`);
+                reject();
+                return;
+            }
+            if (props.opts.minW && props.opts.minW > wh.w) {
+                message.error(`图片宽度不能小于 ${props.opts.minW}px`);
+                reject();
+                return;
+            }
+            if (props.opts.ratioW && props.opts.ratioH) {
+                // 保留2位小数进行比例计算
+                const ratio = Number((wh.w / wh.h).toFixed(2));
+                const targetRatio = Number((props.opts.ratioW / props.opts.ratioH).toFixed(2));
+                if (ratio !== targetRatio) {
+                    message.error(`图片宽度与高度比例必须是 ${props.opts.ratioW} x ${props.opts.ratioH}`);
+                    reject();
+                    return;
+                }
+            }
             resolve();
         }));
     }, []);
@@ -170,18 +201,23 @@ const MultipleImgUpload = (props) => {
                     " ",
                     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",
-                    ";"),
+                props.opts.w && props.opts.h ? (React.createElement("div", null,
+                    props.i18n ? `${props.i18n.$t("global.dimension", "尺寸")}: ${props.opts.w}px * ${props.opts.h}px` : `尺寸: ${props.opts.w}px x ${props.opts.h}px`,
+                    ";")) : null,
+                props.opts.ratioW && props.opts.ratioH ? (React.createElement("div", null,
+                    props.i18n ? `${props.i18n.$t("global.ratio", "比例")}: ${props.opts.ratioW} x ${props.opts.ratioH}` : `比例: ${props.opts.ratioW} x ${props.opts.ratioH}`,
+                    ";")) : null,
                 React.createElement("div", null,
                     props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
                     "\uFF1Ajpg\u3001jpeg\u3001png",
                     props.gif ? "、gif" : "",
-                    ";"))), type: "warning", showIcon: true })),
+                    ";"),
+                props.opts.minH || props.opts.minW || props.opts.maxH || props.opts.maxW ? (React.createElement("div", null,
+                    React.createElement(Space, { split: "," },
+                        !((_a = props.opts) === null || _a === void 0 ? void 0 : _a.minH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minH", "最小高")}：${props.opts.minH}` : `最小高：${props.opts.minH}`)),
+                        !((_b = props.opts) === null || _b === void 0 ? void 0 : _b.maxH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`)),
+                        !((_c = props.opts) === null || _c === void 0 ? void 0 : _c.minW) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minW", "最小宽")}：${props.opts.minW}` : `最小宽：${props.opts.minW}`)),
+                        !((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`))))) : null)), 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),

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

@@ -3,6 +3,12 @@ interface IOpts {
     size?: number;
     w?: number;
     h?: number;
+    minH?: number;
+    maxH?: number;
+    minW?: number;
+    maxW?: number;
+    ratioW?: number;
+    ratioH?: number;
 }
 interface IProps {
     max?: number;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Flex, Alert } from 'antd';
+import { Flex, Alert, Space } 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';
@@ -49,6 +49,7 @@ const SortableItem = (props) => {
         React.createElement(ImgUpload, Object.assign({}, props, { value: props.value, onChange: handleChange }))));
 };
 const MultiPileImgUpload = (props) => {
+    var _a, _b, _c, _d;
     const [items, setItems] = useState([]);
     const sensors = useSensors(useSensor(PointerSensor));
     const handleDragEnd = (event) => {
@@ -100,18 +101,23 @@ const MultiPileImgUpload = (props) => {
                     " ",
                     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",
-                    ";"),
+                props.opts.w && props.opts.h ? (React.createElement("div", null,
+                    props.i18n ? `${props.i18n.$t("global.dimension", "尺寸")}: ${props.opts.w}px * ${props.opts.h}px` : `尺寸: ${props.opts.w}px x ${props.opts.h}px`,
+                    ";")) : null,
+                props.opts.ratioW && props.opts.ratioH ? (React.createElement("div", null,
+                    props.i18n ? `${props.i18n.$t("global.ratio", "比例")}: ${props.opts.ratioW} x ${props.opts.ratioH}` : `比例: ${props.opts.ratioW} x ${props.opts.ratioH}`,
+                    ";")) : null,
                 React.createElement("div", null,
                     props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
                     "\uFF1Ajpg\u3001jpeg\u3001png",
                     props.gif ? "、gif" : "",
-                    ";"))), type: "warning", showIcon: true })),
+                    ";"),
+                props.opts.minH || props.opts.minW || props.opts.maxH || props.opts.maxW ? (React.createElement("div", null,
+                    React.createElement(Space, { split: "," },
+                        !((_a = props.opts) === null || _a === void 0 ? void 0 : _a.minH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minH", "最小高")}：${props.opts.minH}` : `最小高：${props.opts.minH}`)),
+                        !((_b = props.opts) === null || _b === void 0 ? void 0 : _b.maxH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`)),
+                        !((_c = props.opts) === null || _c === void 0 ? void 0 : _c.minW) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minW", "最小宽")}：${props.opts.minW}` : `最小宽：${props.opts.minW}`)),
+                        !((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`))))) : null)), type: "warning", showIcon: true })),
         React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
             React.createElement(SortableContext, { items: items, strategy: horizontalListSortingStrategy },
                 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 })))))))));

package/lib/core/number-input/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { InputNumberProps } from "antd";
+interface IProps extends InputNumberProps {
+    placeholder?: string;
+    value?: string;
+    onChange?: any;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    precision?: number;
+}
+declare const NumberInput: React.FC<IProps>;
+export default NumberInput;

package/lib/core/number-input/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { InputNumber } from "antd";
+const NumberInput = (props) => {
+    const { precision } = props;
+    const formatter = (value, precision) => {
+        let [start, end] = `${value}`.split('.') || [];
+        if (precision) {
+            end = (end === null || end === void 0 ? void 0 : end.substring(0, precision)) || '';
+        }
+        return `${end ? `${start}.${end}` : `${start}`}`;
+    };
+    const style = Object.assign({
+        width: '100%',
+    }, props.style ? props.style : {});
+    return (React.createElement(InputNumber, Object.assign({ style: style, formatter: precision ? (value) => formatter(value, precision) : undefined }, props)));
+};
+NumberInput.defaultProps = {
+    max: 30
+};
+export default NumberInput;

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

@@ -102,7 +102,7 @@ SingleFileUpload.defaultProps = {
     data: {},
     actionParams: {},
     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",
+    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, mkv, mov, avi, xlsx, xls, doc, docx, ppt, pptx, rar, 7z",
     style: {}
 };
 export default SingleFileUpload;

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

@@ -7,6 +7,12 @@ interface IOpts {
     size?: number;
     w?: number;
     h?: number;
+    minH?: number;
+    maxH?: number;
+    minW?: number;
+    maxW?: number;
+    ratioW?: number;
+    ratioH?: number;
 }
 interface IProps {
     action: string | (() => string);

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

@@ -8,11 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Upload, message, Flex, Image as Img } from "antd";
+import { Upload, message, Flex, Image as Img, Space } from "antd";
 import { LoadingOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 import { buildURL } from "@ecoding/helper.url";
 import Toast from "../../core/toast";
 const ImgUpload = (props) => {
+    var _a, _b, _c, _d;
     const [loading, setLoading] = useState(false);
     const [imageUrl, setImageUrl] = useState(props.value || "");
     const action = useMemo(() => {
@@ -85,33 +86,63 @@ const ImgUpload = (props) => {
     };
     const beforeUpload = useCallback((file) => {
         return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
-            const ary = ["jpg", "jpeg", "png"];
+            const ary = ["jpg", "jpeg", "png", "webp"];
             if (props.gif) {
                 ary.push("gif");
             }
             if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) === -1) {
-                message.error(`请上传 ${ary.join(",")} 格式的图片!`);
+                message.error(`支持图片格式为：${ary.join(",")}`);
                 reject();
                 return;
             }
             const isLt2M = file.size / 1024 / 1024 < (props.opts.size || 1);
             if (!isLt2M) {
-                message.error(`图片大小必须小于${props.opts.size} MB!`);
+                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 约定!`);
+                message.error(`图片宽度不符合 ${props.opts.w}px`);
                 reject();
                 return;
             }
             if (props.opts.h && props.opts.h !== wh.h) {
-                message.error(`图片高度不符合 ${props.opts.h}px 约定!`);
+                message.error(`图片高度不符合 ${props.opts.h}px`);
                 reject();
                 return;
             }
+            if (props.opts.maxH && props.opts.maxH < wh.h) {
+                message.error(`图片高度不能大于 ${props.opts.maxH}px`);
+                reject();
+                return;
+            }
+            if (props.opts.minH && props.opts.minH > wh.h) {
+                message.error(`图片高度不能小于 ${props.opts.minH}px`);
+                reject();
+                return;
+            }
+            if (props.opts.maxW && props.opts.maxW < wh.w) {
+                message.error(`图片宽度不能大于 ${props.opts.maxW}px`);
+                reject();
+                return;
+            }
+            if (props.opts.minW && props.opts.minW > wh.w) {
+                message.error(`图片宽度不能小于 ${props.opts.minW}px`);
+                reject();
+                return;
+            }
+            if (props.opts.ratioW && props.opts.ratioH) {
+                // 保留2位小数进行比例计算
+                const ratio = Number((wh.w / wh.h).toFixed(2));
+                const targetRatio = Number((props.opts.ratioW / props.opts.ratioH).toFixed(2));
+                if (ratio !== targetRatio) {
+                    message.error(`图片宽度与高度比例必须是 ${props.opts.ratioW} x ${props.opts.ratioH}`);
+                    reject();
+                    return;
+                }
+            }
             resolve();
         }));
     }, []);
@@ -140,7 +171,7 @@ const ImgUpload = (props) => {
                 } },
                 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", { style: { fontSize: '13px', marginLeft: '18px', lineHeight: '30px' } },
+        props.isTip ? (React.createElement("div", { style: { fontSize: '13px', marginLeft: '18px', lineHeight: '22px' } },
             React.createElement("p", null,
                 props.i18n ? props.i18n.$t("global.size", "大小") : "大小",
                 "\uFF1A",
@@ -148,12 +179,14 @@ const ImgUpload = (props) => {
                 " ",
                 props.opts.size || 1,
                 "MB"),
-            React.createElement("p", 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"),
+            props.opts.w && props.opts.h ? (React.createElement("p", null, props.i18n ? `${props.i18n.$t("global.dimension", "尺寸")}: ${props.opts.w}px * ${props.opts.h}px` : `尺寸: ${props.opts.w}px x ${props.opts.h}px`)) : null,
+            props.opts.ratioW && props.opts.ratioH ? (React.createElement("p", null, props.i18n ? `${props.i18n.$t("global.ratio", "比例")}: ${props.opts.ratioW} x ${props.opts.ratioH}` : `比例: ${props.opts.ratioW} x ${props.opts.ratioH}`)) : null,
+            props.opts.minH || props.opts.minW || props.opts.maxH || props.opts.maxW ? (React.createElement("p", null,
+                React.createElement(Space, { split: "," },
+                    !((_a = props.opts) === null || _a === void 0 ? void 0 : _a.minH) ? "" : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minH", "最小高")}：${props.opts.minH}` : `最小高：${props.opts.minH}`)),
+                    !((_b = props.opts) === null || _b === void 0 ? void 0 : _b.maxH) ? "" : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`)),
+                    !((_c = props.opts) === null || _c === void 0 ? void 0 : _c.minW) ? "" : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minW", "最小宽")}：${props.opts.minW}` : `最小宽：${props.opts.minW}`)),
+                    !((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? "" : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`))))) : null,
             React.createElement("p", null,
                 props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
                 "\uFF1Ajpg\u3001jpeg\u3001png",

package/lib/core/tree.select/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+interface IProps {
+    i18n?: any;
+    disabled?: boolean;
+    treeData: any[];
+    disabledParent?: boolean;
+    fieldNames: {
+        label: string;
+        value: string;
+        children?: string;
+    };
+    value?: any;
+    treeNodeFilterProp?: string;
+    multiple?: boolean;
+    treeCheckable?: boolean;
+    onChange?: (value: any) => void;
+}
+declare const C: React.FC<IProps>;
+export default C;
+/**
+ *
+ <TreeSelect
+    disabled={operateDisabled}
+    fieldNames={{
+        label: 'label',
+        value: 'value',
+        children: 'children'
+    }}
+    treeNodeFilterProp="label"
+    treeData={[
+        {
+            label: '虎标颈肩舒',
+            value: '虎标颈肩舒'
+        },
+        {
+            label: '虎标镇痛药布',
+            value: '虎标镇痛药布',
+            children: [
+                {
+                    label: '清凉型',
+                    value: '清凉型',
+                },
+                {
+                    label: '温感型',
+                    value: '温感型',
+                }
+            ]
+        }
+    ]}
+/>
+ */ 

package/lib/core/tree.select/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TreeSelect } from 'antd';
+const processTreeData = (data) => {
+    return data.map((node) => {
+        const processedNode = Object.assign({}, node);
+        // 当节点有children且children数量大于1时,设置selectable为false
+        if (node.children && node.children.length > 0) {
+            processedNode.selectable = false;
+            processedNode.children = processTreeData(node.children);
+        }
+        return processedNode;
+    });
+};
+const C = ({ treeCheckable, i18n, disabledParent, treeData, fieldNames, onChange, treeNodeFilterProp, multiple, value, disabled }) => {
+    // 是否禁用父级
+    const treeDataFormat = disabledParent ? processTreeData(treeData || []) : treeData || [];
+    return (React.createElement(TreeSelect, { fieldNames: fieldNames, treeData: treeDataFormat, treeCheckable: treeCheckable, showSearch: true, style: { width: '100%' }, placeholder: i18n.$t('global.please.select'), allowClear: true, treeDefaultExpandAll: true, onChange: onChange, treeNodeFilterProp: treeNodeFilterProp, multiple: multiple, value: value, disabled: disabled || false }));
+};
+C.defaultProps = {
+    disabledParent: true
+};
+export default C;
+/**
+ *
+ <TreeSelect
+    disabled={operateDisabled}
+    fieldNames={{
+        label: 'label',
+        value: 'value',
+        children: 'children'
+    }}
+    treeNodeFilterProp="label"
+    treeData={[
+        {
+            label: '虎标颈肩舒',
+            value: '虎标颈肩舒'
+        },
+        {
+            label: '虎标镇痛药布',
+            value: '虎标镇痛药布',
+            children: [
+                {
+                    label: '清凉型',
+                    value: '清凉型',
+                },
+                {
+                    label: '温感型',
+                    value: '温感型',
+                }
+            ]
+        }
+    ]}
+/>
+ */ 

package/lib/index.d.ts

@@ -6,6 +6,8 @@ export { default as InjectNotification } from "./core/inject-notification";
 export { default as Confirm } from "./core/confirm";
 export { default as AsyncCascader } from "./core/async-cascader";
 export { default as LengthInput } from "./core/length-input";
+export { default as NumberInput } from "./core/number-input";
+export { default as LengthInputTextArea } from "./core/length-input-textarea";
 export { default as SearchInput } from "./core/search.input";
 export { default as PhoneInput } from "./core/phone-input";
 export { default as RangePicker } from "./core/range-picker";
@@ -14,11 +16,12 @@ 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 MultipleFileUpload } from "./core/multiple-file-upload";
 export { default as FormLabel } from "./core/form.label";
 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 TreeSelect } from "./core/tree.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";

package/lib/index.js

@@ -6,6 +6,8 @@ export { default as InjectNotification } from "./core/inject-notification";
 export { default as Confirm } from "./core/confirm";
 export { default as AsyncCascader } from "./core/async-cascader";
 export { default as LengthInput } from "./core/length-input";
+export { default as NumberInput } from "./core/number-input";
+export { default as LengthInputTextArea } from "./core/length-input-textarea";
 export { default as SearchInput } from "./core/search.input";
 export { default as PhoneInput } from "./core/phone-input";
 export { default as RangePicker } from "./core/range-picker";
@@ -14,11 +16,12 @@ 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 MultipleFileUpload } from "./core/multiple-file-upload";
 export { default as FormLabel } from "./core/form.label";
 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 TreeSelect } from "./core/tree.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";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.64",
+    "version": "0.4.1",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -47,5 +47,5 @@
         "antd": "5.27.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "ef14924dda25dc0d39c6256047e7e3111dcd57bf"
+    "gitHead": "335bbcfb186e62a67a1d24a0c0c99e0548a82cc1"
 }