@ioca/react 1.3.72 → 1.3.74

package/lib/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, pick, title } from 'radash';
-import { createElement, useEffect, useMemo, Children, cloneElement, isValidElement, useState, useRef, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, RedoRound, UndoRound, ClearAllRound, PauseRound, PlayArrowRound, StopRound, VolumeOffRound, VolumeDownRound, FullscreenExitRound, FullscreenRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, HideImageTwotone, VisibilityRound, VisibilityOffRound, SyncAltRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, PlusSharp } from '@ricons/material';
+import { useMemo, Children, cloneElement, useEffect, createElement, isValidElement, useState, useRef, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, RedoRound, UndoRound, ClearAllRound, PauseRound, PlayArrowRound, StopRound, VolumeOffRound, VolumeDownRound, FullscreenExitRound, FullscreenRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, HideImageTwotone, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, PlusSharp } from '@ricons/material';
 import { useReactive, useCreation, useSize } from 'ahooks';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
@@ -71,56 +71,6 @@ const Loading = (props) => {
                 }, children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
 };
 
-const formatClass = ({ outline, flat, loading, disabled, size = "normal", block, round, square, secondary, className, }) => classNames("i-btn", className, {
-    "i-btn-outline": outline,
-    "i-btn-flat": flat,
-    "i-btn-block": block,
-    "i-btn-loading": loading,
-    "i-btn-square": square,
-    "i-btn-secondary": secondary,
-    [`i-btn-${size}`]: size !== "normal",
-    round,
-    disabled,
-});
-const Button = (props) => {
-    const { as: As = "a", ref, children, className, loading, flat, outline, square, secondary, size, round, href, ripple = true, onClick, ...restProps } = props;
-    const handleClick = (e) => {
-        if (loading || restProps.disabled) {
-            e.stopPropagation();
-            e.preventDefault();
-            return;
-        }
-        onClick?.(e);
-    };
-    if (!children)
-        return jsx(Fragment, {});
-    const childNodes = [
-        loading && jsx(Loading, {}, 'loading'),
-        createElement("span", { key: "content", className: "i-btn-content" }, children),
-    ];
-    const attrs = {
-        className: formatClass(props),
-        ["data-ripple"]: ripple && !loading && !restProps.disabled ? "" : undefined,
-        onClick: handleClick,
-    };
-    useEffect(() => {
-        ripple && useRipple();
-    }, [ripple]);
-    if (typeof As === "string") {
-        return createElement(As, {
-            ref,
-            href,
-            ...attrs,
-            ...restProps,
-        }, childNodes);
-    }
-    return createElement(As, {
-        to: href || "",
-        ...attrs,
-        ...restProps,
-    }, childNodes);
-};
-
 function Group(props) {
     const { children, vertical, buttonProps, className, style } = props;
     const nodes = useMemo(() => {
@@ -173,6 +123,55 @@ function Toggle(props) {
             }), children: state.active ? after ?? children : children }) }));
 }
 
+const formatClass = ({ outline, flat, loading, disabled, size = "normal", block, round, square, secondary, className, }) => classNames("i-btn", className, {
+    "i-btn-outline": outline,
+    "i-btn-flat": flat,
+    "i-btn-block": block,
+    "i-btn-loading": loading,
+    "i-btn-square": square,
+    "i-btn-secondary": secondary,
+    [`i-btn-${size}`]: size !== "normal",
+    round,
+    disabled,
+});
+const Button = (props) => {
+    const { as: As = "a", ref, children, className, loading, flat, outline, square, secondary, size, round, href, ripple = true, onClick, ...restProps } = props;
+    const handleClick = (e) => {
+        if (loading || restProps.disabled) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    if (!children)
+        return jsx(Fragment, {});
+    const childNodes = [
+        loading && jsx(Loading, {}, 'loading'),
+        createElement("span", { key: "content", className: "i-btn-content" }, children),
+    ];
+    const attrs = {
+        className: formatClass(props),
+        ["data-ripple"]: ripple && !loading && !restProps.disabled ? "" : undefined,
+        onClick: handleClick,
+    };
+    useEffect(() => {
+        ripple && useRipple();
+    }, [ripple]);
+    if (typeof As === "string") {
+        return createElement(As, {
+            ref,
+            href,
+            ...attrs,
+            ...restProps,
+        }, childNodes);
+    }
+    return createElement(As, {
+        to: href || "",
+        ...attrs,
+        ...restProps,
+    }, childNodes);
+};
 Button.Toggle = Toggle;
 Button.Group = Group;
 
@@ -1765,6 +1764,33 @@ const Form = (props) => {
 Form.useForm = useForm;
 Form.Field = Field;
 
+function useModal() {
+    const ref = useRef(null);
+    const handleOpen = (props) => {
+        const unMount = renderNode(jsx(HookModal, { ref: ref, visible: true, ...props, onClose: () => {
+                props.onClose?.();
+                unMount?.();
+            } }));
+    };
+    const handleUpdate = (props) => {
+        if (!ref.current)
+            return;
+        const { update } = ref.current;
+        update(props);
+    };
+    const handleClose = () => {
+        if (!ref.current)
+            return;
+        const { close } = ref.current;
+        close();
+    };
+    return {
+        open: handleOpen,
+        update: handleUpdate,
+        close: handleClose,
+    };
+}
+
 function DefaultContent(props) {
     const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose, } = props;
     const showHeader = title || !hideCloseButton;
@@ -1862,6 +1888,7 @@ function Modal(props) {
                 onClick?.(e);
             }, ...restProps, children: [customized && children, !customized && (jsx(DefaultContent, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document?.body ?? null);
 }
+Modal.useModal = useModal;
 
 const HookModal = (props) => {
     const { ref } = props;
@@ -1883,28 +1910,6 @@ const HookModal = (props) => {
     return jsx(Modal, { ...mergedProps });
 };
 
-const Text = (props) => {
-    const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children, } = props;
-    const gradients = useMemo(() => {
-        if (!gradient || !Array.isArray(gradient))
-            return {};
-        return {
-            backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
-            backgroundClip: "text",
-        };
-    }, [gradient]);
-    return (jsx(Tag, { style: {
-            fontSize: size,
-            fontWeight: weight,
-            textDecoration: decoration,
-            ...gradients,
-            ...style,
-        }, className: classNames(className, {
-            "i-text-gradient": gradient,
-            "i-text-gradient-wave": wave,
-        }), children: children }));
-};
-
 function HighLight(props) {
     const { keyword, text, escape, caseSensitive, renderWord = (word) => jsx("mark", { children: word }), ...restProps } = props;
     const content = useMemo(() => {
@@ -1959,6 +1964,27 @@ function Number$1(props) {
     return jsx(Text, { ...restProps, children: text });
 }
 
+const Text = (props) => {
+    const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children, } = props;
+    const gradients = useMemo(() => {
+        if (!gradient || !Array.isArray(gradient))
+            return {};
+        return {
+            backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
+            backgroundClip: "text",
+        };
+    }, [gradient]);
+    return (jsx(Tag, { style: {
+            fontSize: size,
+            fontWeight: weight,
+            textDecoration: decoration,
+            ...gradients,
+            ...style,
+        }, className: classNames(className, {
+            "i-text-gradient": gradient,
+            "i-text-gradient-wave": wave,
+        }), children: children }));
+};
 Text.Number = Number$2;
 Text.Time = Number$1;
 Text.HighLight = HighLight;
@@ -2377,6 +2403,40 @@ function usePreview() {
     return preview;
 }
 
+function List(props) {
+    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
+    const preview = usePreview();
+    const files = useMemo(() => {
+        return items.map((item) => {
+            const o = {
+                src: "",
+            };
+            if (typeof item === "string") {
+                o.src = item;
+            }
+            else {
+                Object.assign(o, item);
+            }
+            o.suffix = getSuffixByUrl(o.src) || "";
+            o.type = getFileType(o.suffix, item["type"]);
+            return o;
+        });
+    }, [items]);
+    const handleClick = (e, i) => {
+        onClick?.(e);
+        previewable &&
+            preview({
+                items: files,
+                initial: i,
+            });
+    };
+    if (!files.length)
+        return "";
+    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
+            return (jsx(Image, { src: img.src, size: 60, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
+        }) }));
+}
+
 const Image = (props) => {
     const { src, round, size, initSize, lazyload, fallback = (jsx(Icon, { icon: jsx(HideImageTwotone, {}), size: '2em', className: 'color-5' })), fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
     const state = useReactive({
@@ -2436,41 +2496,6 @@ const Image = (props) => {
             [`i-image-${state.status}`]: state.status,
         }), children: state.status === "error" ? (fallback) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit, width: wh, height: wh }, ...restProps, onLoad: handleLoad, onError: handleError, onClick: handleClick })), src && state.status === "loading" && jsx(Loading, { absolute: true }), cover && (jsx("div", { className: classNames("i-image-cover", coverClass), onClick: handleClick, children: cover }))] })) }));
 };
-
-function List(props) {
-    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
-    const preview = usePreview();
-    const files = useMemo(() => {
-        return items.map((item) => {
-            const o = {
-                src: "",
-            };
-            if (typeof item === "string") {
-                o.src = item;
-            }
-            else {
-                Object.assign(o, item);
-            }
-            o.suffix = getSuffixByUrl(o.src) || "";
-            o.type = getFileType(o.suffix, item["type"]);
-            return o;
-        });
-    }, [items]);
-    const handleClick = (e, i) => {
-        onClick?.(e);
-        previewable &&
-            preview({
-                items: files,
-                initial: i,
-            });
-    };
-    if (!files.length)
-        return "";
-    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
-            return (jsx(Image, { src: img.src, size: 60, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
-        }) }));
-}
-
 Image.List = List;
 
 function InputContainer(props) {
@@ -2482,59 +2507,6 @@ function InputContainer(props) {
                 }), children: tip }))] }));
 }
 
-const Input = ((props) => {
-    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
-    const state = useReactive({
-        value,
-        type,
-        visible: false,
-    });
-    const handleChange = (e) => {
-        const v = e.target.value;
-        state.value = v;
-        onChange?.(v, e);
-    };
-    const handleKeydown = (e) => {
-        e.code === "Enter" && onEnter?.(e);
-    };
-    const handleHelperClick = () => {
-        if (type === "password" && !hideVisible) {
-            Object.assign(state, {
-                visible: !state.visible,
-                type: !state.visible ? "text" : "password",
-            });
-            return;
-        }
-        const v = "";
-        onChange?.(v);
-    };
-    const HelperIcon = useMemo(() => {
-        if (type === "password") {
-            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
-        }
-        return undefined;
-    }, [state.visible]);
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const inputProps = {
-        ref,
-        type: state.type,
-        name,
-        value: state.value,
-        className: classNames("i-input", `i-input-${type}`),
-        onChange: handleChange,
-        onKeyDown: handleKeydown,
-        ...restProps,
-    };
-    const clearable = clear && state.value;
-    const showHelper = type === "password" && !!state.value;
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
-});
-
 const Number = (props) => {
     const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const state = useReactive({
@@ -2673,6 +2645,58 @@ const Textarea = (props) => {
             }), children: jsx("textarea", { ...inputProps }) }) }));
 };
 
+const Input = ((props) => {
+    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
+    const state = useReactive({
+        value,
+        type,
+        visible: false,
+    });
+    const handleChange = (e) => {
+        const v = e.target.value;
+        state.value = v;
+        onChange?.(v, e);
+    };
+    const handleKeydown = (e) => {
+        e.code === "Enter" && onEnter?.(e);
+    };
+    const handleHelperClick = () => {
+        if (type === "password" && !hideVisible) {
+            Object.assign(state, {
+                visible: !state.visible,
+                type: !state.visible ? "text" : "password",
+            });
+            return;
+        }
+        const v = "";
+        onChange?.(v);
+    };
+    const HelperIcon = useMemo(() => {
+        if (type === "password") {
+            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
+        }
+        return undefined;
+    }, [state.visible]);
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const inputProps = {
+        ref,
+        type: state.type,
+        name,
+        value: state.value,
+        className: classNames("i-input", `i-input-${type}`),
+        onChange: handleChange,
+        onKeyDown: handleKeydown,
+        ...restProps,
+    };
+    const clearable = clear && state.value;
+    const showHelper = type === "password" && !!state.value;
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+});
 Input.Textarea = Textarea;
 Input.Number = Number;
 Input.Range = Range;
@@ -2852,35 +2876,6 @@ if (typeof window !== "undefined") {
     }
 }
 
-function useModal() {
-    const ref = useRef(null);
-    const handleOpen = (props) => {
-        const unMount = renderNode(jsx(HookModal, { ref: ref, visible: true, ...props, onClose: () => {
-                props.onClose?.();
-                unMount?.();
-            } }));
-    };
-    const handleUpdate = (props) => {
-        if (!ref.current)
-            return;
-        const { update } = ref.current;
-        update(props);
-    };
-    const handleClose = () => {
-        if (!ref.current)
-            return;
-        const { close } = ref.current;
-        close();
-    };
-    return {
-        open: handleOpen,
-        update: handleUpdate,
-        close: handleClose,
-    };
-}
-
-Modal.useModal = useModal;
-
 const Page = (props) => {
     const { page, active, children, onChange } = props;
     const [loading, setLoading] = useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.3.72",
+	"version": "1.3.74",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",