@ioca/react 1.5.3 → 1.5.5

package/lib/es/components/image/image.js

@@ -1,28 +1,35 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { useRef, useEffect } from 'react';
+import { memo, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useReactive, useIntersectionObserver } from '../../js/hooks.js';
 import usePreview from '../../js/usePreview/index.js';
 import Loading from '../loading/loading.js';
 import List from './list.js';
 
+const STATUS_LOADING = "loading";
+const STATUS_ERROR = "error";
 const Image = (props) => {
     const { src, thumb, round, size, height, width, ratio, initSize, lazyload, fallback, fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
     const state = useReactive({
-        status: "loading",
+        status: STATUS_LOADING,
     });
     const ref = useRef(null);
     const { observe, unobserve } = useIntersectionObserver();
     const preview = usePreview();
-    const handleError = (err) => {
+    const setStatus = useCallback((status) => {
+        if (state.status === status)
+            return;
+        state.status = status;
+    }, [state]);
+    const handleError = useCallback((err) => {
         onError?.(err);
-        state.status = "error";
-    };
-    const handleLoad = (e) => {
+        setStatus(STATUS_ERROR);
+    }, [onError, setStatus]);
+    const handleLoad = useCallback((e) => {
         onLoad?.(e);
-        state.status = undefined;
-    };
-    const handleClick = (e) => {
+        setStatus(undefined);
+    }, [onLoad, setStatus]);
+    const handleClick = useCallback((e) => {
         onClick?.(e);
         if (!previewable || !src)
             return;
@@ -36,44 +43,53 @@ const Image = (props) => {
                 },
             ],
         });
-    };
+    }, [onClick, preview, previewable, src]);
     useEffect(() => {
         if (!src || typeof window === "undefined")
             return;
         const img = ref.current;
+        if (!img)
+            return;
         const hasSrcAttr = img?.getAttribute("src");
         const canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));
-        if (canSyncStatus && img?.complete) {
-            state.status = img.naturalWidth > 0 ? undefined : "error";
+        if (canSyncStatus && img.complete) {
+            setStatus(img.naturalWidth > 0 ? undefined : STATUS_ERROR);
         }
-        if (!ref.current?.complete && observe && lazyload) {
-            state.status = "loading";
+        if (!img.complete && observe && lazyload) {
+            setStatus(STATUS_LOADING);
         }
-        if (!lazyload || !ref.current || !observe)
+        if (!lazyload || !observe)
             return;
-        observe(ref.current, (tar, visible) => {
+        observe(img, (tar, visible) => {
             if (!visible)
                 return;
             tar.setAttribute("src", tar.dataset.src || "");
             unobserve(tar);
         });
         return () => {
-            ref.current && unobserve(ref.current);
+            unobserve(img);
         };
-    }, [src]);
-    restProps[lazyload ? "data-src" : "src"] = thumb ?? src;
-    const iSize = state.status === "loading" ? initSize : undefined;
-    return (jsx("div", { style: {
-            width: width ?? size ?? iSize,
-            height: height ?? size ?? iSize,
-            aspectRatio: ratio,
-            ...style,
-        }, className: classNames("i-image", className, {
-            rounded: round,
-            [`i-image-${state.status}`]: state.status,
-        }), onClick: handleClick, children: state.status === "error" ? ((fallback ?? null)) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit }, ...restProps, onLoad: handleLoad, onError: handleError })), src && state.status === "loading" && jsx(Loading, { absolute: true }), cover && (jsx("div", { className: classNames("i-image-cover", coverClass), children: cover }))] })) }));
+    }, [lazyload, observe, setStatus, src, unobserve]);
+    const imageStatus = state.status;
+    const iSize = imageStatus === STATUS_LOADING ? initSize : undefined;
+    const wrapperStyle = useMemo(() => ({
+        width: width ?? size ?? iSize,
+        height: height ?? size ?? iSize,
+        aspectRatio: ratio,
+        ...style,
+    }), [height, iSize, ratio, size, style, width]);
+    const wrapperClassName = useMemo(() => classNames("i-image", className, {
+        rounded: round,
+        [`i-image-${imageStatus}`]: imageStatus,
+    }), [className, imageStatus, round]);
+    const imageStyle = useMemo(() => ({ objectFit: fit }), [fit]);
+    const imageSrcProps = lazyload
+        ? { "data-src": thumb ?? src }
+        : { src: thumb ?? src };
+    return (jsx("div", { style: wrapperStyle, className: wrapperClassName, onClick: handleClick, children: imageStatus === STATUS_ERROR ? ((fallback ?? null)) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: imageStyle, ...imageSrcProps, ...restProps, onLoad: handleLoad, onError: handleError })), src && imageStatus === STATUS_LOADING && (jsx(Loading, { absolute: true })), cover && (jsx("div", { className: classNames("i-image-cover", coverClass), children: cover }))] })) }));
 };
-Image.List = List;
+const MemoImage = memo(Image);
+MemoImage.List = List;
 
-export { Image as default };
+export { MemoImage as default };
 //# sourceMappingURL=image.js.map

package/lib/es/components/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../packages/components/image/image.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { useIntersectionObserver, useReactive } from \"../../js/hooks\";\r\nimport usePreview from \"../../js/usePreview\";\r\nimport Loading from \"../loading\";\r\nimport \"./index.css\";\r\nimport List from \"./list\";\r\nimport type { CompositionImage, IImage } from \"./type\";\r\n\r\nconst Image = (props: IImage) => {\r\n\tconst {\r\n\t\tsrc,\r\n\t\tthumb,\r\n\t\tround,\r\n\t\tsize,\r\n\t\theight,\r\n\t\twidth,\r\n\t\tratio,\r\n\t\tinitSize,\r\n\t\tlazyload,\r\n\t\tfallback,\r\n\t\tfit,\r\n\t\tstyle,\r\n\t\tclassName,\r\n\t\tcover,\r\n\t\tcoverClass,\r\n\t\tusePreview: previewable,\r\n\t\tonLoad,\r\n\t\tonError,\r\n\t\tonClick,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst state = useReactive<{ status?: string }>({\r\n\t\tstatus: \"loading\",\r\n\t});\r\n\tconst ref = useRef<HTMLImageElement>(null);\r\n\r\n\tconst { observe, unobserve } = useIntersectionObserver();\r\n\tconst preview = usePreview();\r\n\r\n\tconst handleError = (err) => {\r\n\t\tonError?.(err);\r\n\t\tstate.status = \"error\";\r\n\t};\r\n\r\n\tconst handleLoad = (e) => {\r\n\t\tonLoad?.(e);\r\n\t\tstate.status = undefined;\r\n\t};\r\n\r\n\tconst handleClick = (e) => {\r\n\t\tonClick?.(e);\r\n\r\n\t\tif (!previewable || !src) return;\r\n\r\n\t\tconst previewConfigs =\r\n\t\t\ttypeof previewable === \"boolean\" ? {} : previewable;\r\n\r\n\t\tpreview({\r\n\t\t\t...previewConfigs,\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\tsrc,\r\n\t\t\t\t\ttype: \"IMAGE\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t});\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!src || typeof window === \"undefined\") return;\r\n\r\n\t\tconst img = ref.current;\r\n\t\tconst hasSrcAttr = img?.getAttribute(\"src\");\r\n\t\tconst canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));\r\n\t\tif (canSyncStatus && img?.complete) {\r\n\t\t\tstate.status = img.naturalWidth > 0 ? undefined : \"error\";\r\n\t\t}\r\n\r\n\t\tif (!ref.current?.complete && observe && lazyload) {\r\n\t\t\tstate.status = \"loading\";\r\n\t\t}\r\n\r\n\t\tif (!lazyload || !ref.current || !observe) return;\r\n\r\n\t\tobserve(ref.current, (tar: HTMLElement, visible: boolean) => {\r\n\t\t\tif (!visible) return;\r\n\r\n\t\t\ttar.setAttribute(\"src\", tar.dataset.src || \"\");\r\n\t\t\tunobserve(tar);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tref.current && unobserve(ref.current);\r\n\t\t};\r\n\t}, [src]);\r\n\r\n\trestProps[lazyload ? \"data-src\" : \"src\"] = thumb ?? src;\r\n\tconst iSize = state.status === \"loading\" ? initSize : undefined;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: width ?? size ?? iSize,\r\n\t\t\t\theight: height ?? size ?? iSize,\r\n\t\t\t\taspectRatio: ratio,\r\n\t\t\t\t...style,\r\n\t\t\t}}\r\n\t\t\tclassName={classNames(\"i-image\", className, {\r\n\t\t\t\trounded: round,\r\n\t\t\t\t[`i-image-${state.status}`]: state.status,\r\n\t\t\t})}\r\n\t\t\tonClick={handleClick}\r\n\t\t>\r\n\t\t\t{state.status === \"error\" ? (\r\n\t\t\t\t(fallback ?? null)\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{src && (\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t\t\tstyle={{ objectFit: fit }}\r\n\t\t\t\t\t\t\t{...restProps}\r\n\t\t\t\t\t\t\tonLoad={handleLoad}\r\n\t\t\t\t\t\t\tonError={handleError}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t{src && state.status === \"loading\" && <Loading absolute />}\r\n\r\n\t\t\t\t\t{cover && (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclassName={classNames(\"i-image-cover\", coverClass)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{cover}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nImage.List = List;\r\n\r\nexport default Image as CompositionImage;\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"image.js","sources":["../../../../packages/components/image/image.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\r\nimport { useIntersectionObserver, useReactive } from \"../../js/hooks\";\r\nimport usePreview from \"../../js/usePreview\";\r\nimport Loading from \"../loading\";\r\nimport \"./index.css\";\r\nimport List from \"./list\";\r\nimport type { CompositionImage, IImage } from \"./type\";\r\n\r\nconst STATUS_LOADING = \"loading\";\r\nconst STATUS_ERROR = \"error\";\r\n\r\nconst Image = (props: IImage) => {\r\n    const {\r\n        src,\r\n        thumb,\r\n        round,\r\n        size,\r\n        height,\r\n        width,\r\n        ratio,\r\n        initSize,\r\n        lazyload,\r\n        fallback,\r\n        fit,\r\n        style,\r\n        className,\r\n        cover,\r\n        coverClass,\r\n        usePreview: previewable,\r\n        onLoad,\r\n        onError,\r\n        onClick,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const state = useReactive<{ status?: string }>({\r\n        status: STATUS_LOADING,\r\n    });\r\n    const ref = useRef<HTMLImageElement>(null);\r\n\r\n    const { observe, unobserve } = useIntersectionObserver();\r\n    const preview = usePreview();\r\n\r\n    const setStatus = useCallback(\r\n        (status?: string) => {\r\n            if (state.status === status) return;\r\n            state.status = status;\r\n        },\r\n        [state],\r\n    );\r\n\r\n    const handleError = useCallback(\r\n        (err) => {\r\n            onError?.(err);\r\n            setStatus(STATUS_ERROR);\r\n        },\r\n        [onError, setStatus],\r\n    );\r\n\r\n    const handleLoad = useCallback(\r\n        (e) => {\r\n            onLoad?.(e);\r\n            setStatus(undefined);\r\n        },\r\n        [onLoad, setStatus],\r\n    );\r\n\r\n    const handleClick = useCallback(\r\n        (e) => {\r\n            onClick?.(e);\r\n\r\n            if (!previewable || !src) return;\r\n\r\n            const previewConfigs =\r\n                typeof previewable === \"boolean\" ? {} : previewable;\r\n\r\n            preview({\r\n                ...previewConfigs,\r\n                items: [\r\n                    {\r\n                        src,\r\n                        type: \"IMAGE\",\r\n                    },\r\n                ],\r\n            });\r\n        },\r\n        [onClick, preview, previewable, src],\r\n    );\r\n\r\n    useEffect(() => {\r\n        if (!src || typeof window === \"undefined\") return;\r\n\r\n        const img = ref.current;\r\n        if (!img) return;\r\n\r\n        const hasSrcAttr = img?.getAttribute(\"src\");\r\n        const canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));\r\n        if (canSyncStatus && img.complete) {\r\n            setStatus(img.naturalWidth > 0 ? undefined : STATUS_ERROR);\r\n        }\r\n\r\n        if (!img.complete && observe && lazyload) {\r\n            setStatus(STATUS_LOADING);\r\n        }\r\n\r\n        if (!lazyload || !observe) return;\r\n\r\n        observe(img, (tar: HTMLElement, visible: boolean) => {\r\n            if (!visible) return;\r\n\r\n            tar.setAttribute(\"src\", tar.dataset.src || \"\");\r\n            unobserve(tar);\r\n        });\r\n\r\n        return () => {\r\n            unobserve(img);\r\n        };\r\n    }, [lazyload, observe, setStatus, src, unobserve]);\r\n\r\n    const imageStatus = state.status;\r\n    const iSize = imageStatus === STATUS_LOADING ? initSize : undefined;\r\n\r\n    const wrapperStyle = useMemo(\r\n        () => ({\r\n            width: width ?? size ?? iSize,\r\n            height: height ?? size ?? iSize,\r\n            aspectRatio: ratio,\r\n            ...style,\r\n        }),\r\n        [height, iSize, ratio, size, style, width],\r\n    );\r\n\r\n    const wrapperClassName = useMemo(\r\n        () =>\r\n            classNames(\"i-image\", className, {\r\n                rounded: round,\r\n                [`i-image-${imageStatus}`]: imageStatus,\r\n            }),\r\n        [className, imageStatus, round],\r\n    );\r\n\r\n    const imageStyle = useMemo(() => ({ objectFit: fit }), [fit]);\r\n    const imageSrcProps = lazyload\r\n        ? { \"data-src\": thumb ?? src }\r\n        : { src: thumb ?? src };\r\n\r\n    return (\r\n        <div\r\n            style={wrapperStyle}\r\n            className={wrapperClassName}\r\n            onClick={handleClick}\r\n        >\r\n            {imageStatus === STATUS_ERROR ? (\r\n                (fallback ?? null)\r\n            ) : (\r\n                <>\r\n                    {src && (\r\n                        <img\r\n                            ref={ref}\r\n                            style={imageStyle}\r\n                            {...imageSrcProps}\r\n                            {...restProps}\r\n                            onLoad={handleLoad}\r\n                            onError={handleError}\r\n                        />\r\n                    )}\r\n\r\n                    {src && imageStatus === STATUS_LOADING && (\r\n                        <Loading absolute />\r\n                    )}\r\n\r\n                    {cover && (\r\n                        <div\r\n                            className={classNames(\"i-image-cover\", coverClass)}\r\n                        >\r\n                            {cover}\r\n                        </div>\r\n                    )}\r\n                </>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nconst MemoImage = memo(Image) as unknown as CompositionImage;\r\n\r\nMemoImage.List = List;\r\n\r\nexport default MemoImage;\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/lib/es/components/image/index.js

@@ -1,6 +1,6 @@
-import Image from './image.js';
+import MemoImage from './image.js';
 
 
 
-export { Image as default };
+export { MemoImage as default };
 //# sourceMappingURL=index.js.map

package/lib/es/components/image/list.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import usePreview from '../../js/usePreview/index.js';
 import { getSuffixByUrl, getFileType } from '../../js/utils.js';
 import Flex from '../flex/flex.js';
-import Image from './image.js';
+import MemoImage from './image.js';
 
 function List(props) {
     const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
@@ -35,7 +35,7 @@ function List(props) {
     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, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
+            return (jsx(MemoImage, { src: img.src, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
         }) }));
 }
 

package/lib/es/components/image/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../packages/components/image/list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport usePreview from \"../../js/usePreview\";\r\nimport { TPreviewItem } from \"../../js/usePreview/type\";\r\nimport { getFileType, getSuffixByUrl } from \"../../js/utils\";\r\nimport Flex from \"../flex\";\r\nimport Image from \"./image\";\r\nimport { IImageList } from \"./type\";\r\n\r\nexport default function List(props: IImageList) {\r\n\tconst {\r\n\t\titems = [],\r\n\t\tgap = 8,\r\n\t\tcolumns,\r\n\t\twrap,\r\n\t\tdirection,\r\n\t\tusePreview: previewable,\r\n\t\tonClick,\r\n\t\t...restProps\r\n\t} = props;\r\n\tconst preview = usePreview();\r\n\r\n\tconst files = useMemo(() => {\r\n\t\treturn items.map((item) => {\r\n\t\t\tconst o: TPreviewItem = {\r\n\t\t\t\tsrc: \"\",\r\n\t\t\t};\r\n\t\t\tif (typeof item === \"string\") {\r\n\t\t\t\to.src = item;\r\n\t\t\t} else {\r\n\t\t\t\tObject.assign(o, item);\r\n\t\t\t}\r\n\r\n\t\t\to.suffix = getSuffixByUrl(o.src) || \"\";\r\n\t\t\to.type = getFileType(o.suffix, item[\"type\"]);\r\n\r\n\t\t\treturn o;\r\n\t\t});\r\n\t}, [items]);\r\n\r\n\tconst handleClick = (e, i) => {\r\n\t\tonClick?.(e);\r\n\r\n\t\tpreviewable &&\r\n\t\t\tpreview({\r\n\t\t\t\titems: files,\r\n\t\t\t\tinitial: i,\r\n\t\t\t});\r\n\t};\r\n\r\n\tif (!files.length) return \"\";\r\n\r\n\treturn (\r\n\t\t<Flex\r\n\t\t\tclassName='i-image-list'\r\n\t\t\tgap={gap}\r\n\t\t\tcolumns={columns}\r\n\t\t\twrap={wrap}\r\n\t\t\tdirection={direction}\r\n\t\t>\r\n\t\t\t{files.map((img, i) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<Image\r\n\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\tsrc={img.src}\r\n\t\t\t\t\t\tusePreview={false}\r\n\t\t\t\t\t\tonClick={(e) => handleClick(e, i)}\r\n\t\t\t\t\t\t{...restProps}\r\n\t\t\t\t\t/>\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t</Flex>\r\n\t);\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;;;AAQc,SAAU,IAAI,CAAC,KAAiB,EAAA;IAC7C,MAAM,EACL,KAAK,GAAG,EAAE,EACV,GAAG,GAAG,CAAC,EACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,UAAU,EAAE,WAAW,EACvB,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK;AACT,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;AAC1B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AACzB,YAAA,MAAM,CAAC,GAAiB;AACvB,gBAAA,GAAG,EAAE,EAAE;aACP;AACD,YAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC7B,gBAAA,CAAC,CAAC,GAAG,GAAG,IAAI;YACb;iBAAO;AACN,gBAAA,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC;YACvB;YAEA,CAAC,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE;AACtC,YAAA,CAAC,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAE5C,YAAA,OAAO,CAAC;AACT,QAAA,CAAC,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,QAAA,OAAO,GAAG,CAAC,CAAC;QAEZ,WAAW;AACV,YAAA,OAAO,CAAC;AACP,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,OAAO,EAAE,CAAC;AACV,aAAA,CAAC;AACJ,IAAA,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,MAAM;AAAE,QAAA,OAAO,EAAE;AAE5B,IAAA,QACCA,GAAA,CAAC,IAAI,EAAA,EACJ,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACrB,YAAA,QACCA,GAAA,CAAC,KAAK,EAAA,EAEL,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,KAC7B,SAAS,EAAA,EAJR,CAAC,CAKL;QAEJ,CAAC,CAAC,EAAA,CACI;AAET;;;;"}
+{"version":3,"file":"list.js","sources":["../../../../packages/components/image/list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport usePreview from \"../../js/usePreview\";\r\nimport { TPreviewItem } from \"../../js/usePreview/type\";\r\nimport { getFileType, getSuffixByUrl } from \"../../js/utils\";\r\nimport Flex from \"../flex\";\r\nimport Image from \"./image\";\r\nimport { IImageList } from \"./type\";\r\n\r\nexport default function List(props: IImageList) {\r\n\tconst {\r\n\t\titems = [],\r\n\t\tgap = 8,\r\n\t\tcolumns,\r\n\t\twrap,\r\n\t\tdirection,\r\n\t\tusePreview: previewable,\r\n\t\tonClick,\r\n\t\t...restProps\r\n\t} = props;\r\n\tconst preview = usePreview();\r\n\r\n\tconst files = useMemo(() => {\r\n\t\treturn items.map((item) => {\r\n\t\t\tconst o: TPreviewItem = {\r\n\t\t\t\tsrc: \"\",\r\n\t\t\t};\r\n\t\t\tif (typeof item === \"string\") {\r\n\t\t\t\to.src = item;\r\n\t\t\t} else {\r\n\t\t\t\tObject.assign(o, item);\r\n\t\t\t}\r\n\r\n\t\t\to.suffix = getSuffixByUrl(o.src) || \"\";\r\n\t\t\to.type = getFileType(o.suffix, item[\"type\"]);\r\n\r\n\t\t\treturn o;\r\n\t\t});\r\n\t}, [items]);\r\n\r\n\tconst handleClick = (e, i) => {\r\n\t\tonClick?.(e);\r\n\r\n\t\tpreviewable &&\r\n\t\t\tpreview({\r\n\t\t\t\titems: files,\r\n\t\t\t\tinitial: i,\r\n\t\t\t});\r\n\t};\r\n\r\n\tif (!files.length) return \"\";\r\n\r\n\treturn (\r\n\t\t<Flex\r\n\t\t\tclassName='i-image-list'\r\n\t\t\tgap={gap}\r\n\t\t\tcolumns={columns}\r\n\t\t\twrap={wrap}\r\n\t\t\tdirection={direction}\r\n\t\t>\r\n\t\t\t{files.map((img, i) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<Image\r\n\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\tsrc={img.src}\r\n\t\t\t\t\t\tusePreview={false}\r\n\t\t\t\t\t\tonClick={(e) => handleClick(e, i)}\r\n\t\t\t\t\t\t{...restProps}\r\n\t\t\t\t\t/>\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t</Flex>\r\n\t);\r\n}\r\n"],"names":["_jsx","Image"],"mappings":";;;;;;;AAQc,SAAU,IAAI,CAAC,KAAiB,EAAA;IAC7C,MAAM,EACL,KAAK,GAAG,EAAE,EACV,GAAG,GAAG,CAAC,EACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,UAAU,EAAE,WAAW,EACvB,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK;AACT,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;AAC1B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AACzB,YAAA,MAAM,CAAC,GAAiB;AACvB,gBAAA,GAAG,EAAE,EAAE;aACP;AACD,YAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC7B,gBAAA,CAAC,CAAC,GAAG,GAAG,IAAI;YACb;iBAAO;AACN,gBAAA,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC;YACvB;YAEA,CAAC,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE;AACtC,YAAA,CAAC,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAE5C,YAAA,OAAO,CAAC;AACT,QAAA,CAAC,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,QAAA,OAAO,GAAG,CAAC,CAAC;QAEZ,WAAW;AACV,YAAA,OAAO,CAAC;AACP,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,OAAO,EAAE,CAAC;AACV,aAAA,CAAC;AACJ,IAAA,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,MAAM;AAAE,QAAA,OAAO,EAAE;AAE5B,IAAA,QACCA,GAAA,CAAC,IAAI,EAAA,EACJ,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACrB,YAAA,QACCA,GAAA,CAACC,SAAK,EAAA,EAEL,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,KAC7B,SAAS,EAAA,EAJR,CAAC,CAKL;QAEJ,CAAC,CAAC,EAAA,CACI;AAET;;;;"}

package/lib/es/components/input/textarea.js

@@ -4,16 +4,19 @@ import { useState, useRef, useEffect, useImperativeHandle } from 'react';
 import InputContainer from './container.js';
 
 const Textarea = (props) => {
-    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, resize, onChange, onEnter, ...restProps } = props;
     const [textareaValue, setTextareaValue] = useState(value);
     const refTextarea = useRef(null);
+    const syncTextareaHeight = () => {
+        const ta = refTextarea.current;
+        if (!autoSize || !ta)
+            return;
+        ta.style.height = "auto";
+        ta.style.height = `${ta.scrollHeight}px`;
+    };
     const handleChange = (e) => {
         const v = e.target.value;
         setTextareaValue(v);
-        const ta = refTextarea.current;
-        if (autoSize && ta) {
-            ta.style.height = `${ta.scrollHeight}px`;
-        }
         onChange?.(v, e);
     };
     const handleKeydown = (e) => {
@@ -25,6 +28,9 @@ const Textarea = (props) => {
     useEffect(() => {
         setTextareaValue(value);
     }, [value]);
+    useEffect(() => {
+        syncTextareaHeight();
+    }, [autoSize, textareaValue]);
     useImperativeHandle(ref, () => {
         return {
             input: refTextarea.current,
@@ -35,6 +41,7 @@ const Textarea = (props) => {
         name,
         value: textareaValue,
         className: "i-input i-textarea",
+        style: resize === false ? { resize: "none" } : undefined,
         onChange: handleChange,
         onKeyDown: handleKeydown,
         ...restProps,

package/lib/es/components/input/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../../../packages/components/input/textarea.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport {\r\n\tChangeEvent,\r\n\tuseEffect,\r\n\tuseImperativeHandle,\r\n\tuseRef,\r\n\tuseState,\r\n\ttype KeyboardEvent,\r\n} from \"react\";\r\nimport \"../../css/input.css\";\r\nimport InputContainer from \"./container\";\r\nimport type { ITextarea } from \"./type\";\r\n\r\nconst Textarea = (props: ITextarea) => {\r\n\tconst {\r\n\t\tref,\r\n\t\tlabel,\r\n\t\tname,\r\n\t\tvalue = \"\",\r\n\t\tlabelInline,\r\n\t\tclassName,\r\n\t\tstatus = \"normal\",\r\n\t\tmessage,\r\n\t\ttip,\r\n\t\tautoSize,\r\n\t\tborder,\r\n\t\twidth,\r\n\t\tstyle,\r\n\t\tonChange,\r\n\t\tonEnter,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst [textareaValue, setTextareaValue] = useState(value);\r\n\tconst refTextarea = useRef<HTMLTextAreaElement>(null);\r\n\r\n\tconst handleChange = (\r\n\t\te: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\r\n\t) => {\r\n\t\tconst v = e.target.value;\r\n\r\n\t\tsetTextareaValue(v);\r\n\r\n\t\tconst ta = refTextarea.current as HTMLElement;\r\n\t\tif (autoSize && ta) {\r\n\t\t\tta.style.height = `${ta.scrollHeight}px`;\r\n\t\t}\r\n\r\n\t\tonChange?.(v, e);\r\n\t};\r\n\r\n\tconst handleKeydown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\r\n\t\tif (e.code !== \"Enter\") return;\r\n\r\n\t\te.stopPropagation();\r\n\t\tonEnter?.(e);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetTextareaValue(value);\r\n\t}, [value]);\r\n\r\n\tuseImperativeHandle(ref, () => {\r\n\t\treturn {\r\n\t\t\tinput: refTextarea.current,\r\n\t\t};\r\n\t});\r\n\r\n\tconst inputProps = {\r\n\t\tref: refTextarea,\r\n\t\tname,\r\n\t\tvalue: textareaValue,\r\n\t\tclassName: \"i-input i-textarea\",\r\n\t\tonChange: handleChange,\r\n\t\tonKeyDown: handleKeydown,\r\n\t\t...restProps,\r\n\t};\r\n\r\n\treturn (\r\n\t\t<InputContainer\r\n\t\t\tlabel={label}\r\n\t\t\tlabelInline={labelInline}\r\n\t\t\tclassName={className}\r\n\t\t\tstyle={{ width, ...style }}\r\n\t\t\ttip={message ?? tip}\r\n\t\t\tstatus={status}\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tclassName={classNames(\"i-input-item\", {\r\n\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\r\n\t\t\t\t\t\"i-input-borderless\": !border,\r\n\t\t\t\t})}\r\n\t\t\t>\r\n\t\t\t\t<textarea {...inputProps} />\r\n\t\t\t</div>\r\n\t\t</InputContainer>\r\n\t);\r\n};\r\n\r\nexport default Textarea;\r\n"],"names":["_jsx"],"mappings":";;;;;AAaA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;AACrC,IAAA,MAAM,EACL,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,WAAW,EACX,SAAS,EACT,MAAM,GAAG,QAAQ,EACjB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK;IAET,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC;AAErD,IAAA,MAAM,YAAY,GAAG,CACpB,CAAsD,KACnD;AACH,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAExB,gBAAgB,CAAC,CAAC,CAAC;AAEnB,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAsB;AAC7C,QAAA,IAAI,QAAQ,IAAI,EAAE,EAAE;YACnB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI;QACzC;AAEA,QAAA,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;AACjB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAqC,KAAI;AAC/D,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;YAAE;QAExB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,OAAO,GAAG,CAAC,CAAC;AACb,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACd,gBAAgB,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,mBAAmB,CAAC,GAAG,EAAE,MAAK;QAC7B,OAAO;YACN,KAAK,EAAE,WAAW,CAAC,OAAO;SAC1B;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG;AAClB,QAAA,GAAG,EAAE,WAAW;QAChB,IAAI;AACJ,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,SAAS,EAAE,oBAAoB;AAC/B,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,GAAG,SAAS;KACZ;AAED,IAAA,QACCA,GAAA,CAAC,cAAc,IACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAC1B,GAAG,EAAE,OAAO,IAAI,GAAG,EACnB,MAAM,EAAE,MAAM,YAEdA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE;AACrC,gBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;gBAC1C,oBAAoB,EAAE,CAAC,MAAM;AAC7B,aAAA,CAAC,YAEFA,GAAA,CAAA,UAAA,EAAA,EAAA,GAAc,UAAU,GAAI,EAAA,CACvB,EAAA,CACU;AAEnB;;;;"}
+{"version":3,"file":"textarea.js","sources":["../../../../packages/components/input/textarea.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport {\r\n    ChangeEvent,\r\n    useEffect,\r\n    useImperativeHandle,\r\n    useRef,\r\n    useState,\r\n    type KeyboardEvent,\r\n} from \"react\";\r\nimport \"../../css/input.css\";\r\nimport InputContainer from \"./container\";\r\nimport type { ITextarea } from \"./type\";\r\n\r\nconst Textarea = (props: ITextarea) => {\r\n    const {\r\n        ref,\r\n        label,\r\n        name,\r\n        value = \"\",\r\n        labelInline,\r\n        className,\r\n        status = \"normal\",\r\n        message,\r\n        tip,\r\n        autoSize,\r\n        border,\r\n        width,\r\n        style,\r\n        resize,\r\n        onChange,\r\n        onEnter,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const [textareaValue, setTextareaValue] = useState(value);\r\n    const refTextarea = useRef<HTMLTextAreaElement>(null);\r\n\r\n    const syncTextareaHeight = () => {\r\n        const ta = refTextarea.current;\r\n        if (!autoSize || !ta) return;\r\n\r\n        ta.style.height = \"auto\";\r\n        ta.style.height = `${ta.scrollHeight}px`;\r\n    };\r\n\r\n    const handleChange = (\r\n        e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\r\n    ) => {\r\n        const v = e.target.value;\r\n\r\n        setTextareaValue(v);\r\n\r\n        onChange?.(v, e);\r\n    };\r\n\r\n    const handleKeydown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\r\n        if (e.code !== \"Enter\") return;\r\n\r\n        e.stopPropagation();\r\n        onEnter?.(e);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setTextareaValue(value);\r\n    }, [value]);\r\n\r\n    useEffect(() => {\r\n        syncTextareaHeight();\r\n    }, [autoSize, textareaValue]);\r\n\r\n    useImperativeHandle(ref, () => {\r\n        return {\r\n            input: refTextarea.current,\r\n        };\r\n    });\r\n\r\n    const inputProps = {\r\n        ref: refTextarea,\r\n        name,\r\n        value: textareaValue,\r\n        className: \"i-input i-textarea\",\r\n        style: resize === false ? { resize: \"none\" as const } : undefined,\r\n        onChange: handleChange,\r\n        onKeyDown: handleKeydown,\r\n        ...restProps,\r\n    };\r\n\r\n    return (\r\n        <InputContainer\r\n            label={label}\r\n            labelInline={labelInline}\r\n            className={className}\r\n            style={{ width, ...style }}\r\n            tip={message ?? tip}\r\n            status={status}\r\n        >\r\n            <div\r\n                className={classNames(\"i-input-item\", {\r\n                    [`i-input-${status}`]: status !== \"normal\",\r\n                    \"i-input-borderless\": !border,\r\n                })}\r\n            >\r\n                <textarea {...inputProps} />\r\n            </div>\r\n        </InputContainer>\r\n    );\r\n};\r\n\r\nexport default Textarea;\r\n"],"names":["_jsx"],"mappings":";;;;;AAaA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;AAClC,IAAA,MAAM,EACF,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,WAAW,EACX,SAAS,EACT,MAAM,GAAG,QAAQ,EACjB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;IAET,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC;IAErD,MAAM,kBAAkB,GAAG,MAAK;AAC5B,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE;YAAE;AAEtB,QAAA,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;QACxB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI;AAC5C,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,CACjB,CAAsD,KACtD;AACA,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAExB,gBAAgB,CAAC,CAAC,CAAC;AAEnB,QAAA,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAqC,KAAI;AAC5D,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;YAAE;QAExB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,OAAO,GAAG,CAAC,CAAC;AAChB,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACX,gBAAgB,CAAC,KAAK,CAAC;AAC3B,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,SAAS,CAAC,MAAK;AACX,QAAA,kBAAkB,EAAE;AACxB,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAE7B,IAAA,mBAAmB,CAAC,GAAG,EAAE,MAAK;QAC1B,OAAO;YACH,KAAK,EAAE,WAAW,CAAC,OAAO;SAC7B;AACL,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,GAAG,EAAE,WAAW;QAChB,IAAI;AACJ,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,SAAS,EAAE,oBAAoB;AAC/B,QAAA,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,EAAE,MAAM,EAAE,MAAe,EAAE,GAAG,SAAS;AACjE,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,GAAG,SAAS;KACf;AAED,IAAA,QACIA,GAAA,CAAC,cAAc,IACX,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAC1B,GAAG,EAAE,OAAO,IAAI,GAAG,EACnB,MAAM,EAAE,MAAM,YAEdA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE;AAClC,gBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;gBAC1C,oBAAoB,EAAE,CAAC,MAAM;AAChC,aAAA,CAAC,YAEFA,GAAA,CAAA,UAAA,EAAA,EAAA,GAAc,UAAU,GAAI,EAAA,CAC1B,EAAA,CACO;AAEzB;;;;"}

package/lib/es/components/modal/hookModal.js

@@ -13,7 +13,7 @@ const HookModal = (props) => {
         },
         close: () => {
             state.visible = false;
-            if (mergedProps.closable)
+            if (mergedProps.closable ?? true)
                 return;
             Promise.resolve().then(() => {
                 state.visible = true;

package/lib/es/components/modal/hookModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"hookModal.js","sources":["../../../../packages/components/modal/hookModal.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\r\nimport { useImperativeHandle } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Modal from \"./modal\";\r\nimport type { IModal, RefHookModal } from \"./type\";\r\n\r\nconst HookModal = (\r\n\tprops: IModal & { ref?: RefObject<RefHookModal | null> }\r\n) => {\r\n\tconst { ref, ...restProps } = props;\r\n\tconst state = useReactive<IModal>({});\r\n\r\n\tconst mergedProps = Object.assign({}, restProps, state);\r\n\r\n\tuseImperativeHandle(ref, () => ({\r\n\t\tupdate: (config: IModal = {}) => {\r\n\t\t\tObject.assign(state, config);\r\n\t\t},\r\n\r\n\t\tclose: () => {\r\n\t\t\tstate.visible = false;\r\n\r\n\t\t\tif (mergedProps.closable) return;\r\n\t\t\tPromise.resolve().then(() => {\r\n\t\t\t\tstate.visible = true;\r\n\t\t\t});\r\n\t\t},\r\n\t}));\r\n\r\n\treturn <Modal {...mergedProps} />;\r\n};\r\n\r\nexport default HookModal;\r\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,SAAS,GAAG,CACjB,KAAwD,KACrD;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACnC,IAAA,MAAM,KAAK,GAAG,WAAW,CAAS,EAAE,CAAC;AAErC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC;AAEvD,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO;AAC/B,QAAA,MAAM,EAAE,CAAC,MAAA,GAAiB,EAAE,KAAI;AAC/B,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;QAC7B,CAAC;QAED,KAAK,EAAE,MAAK;AACX,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;YAErB,IAAI,WAAW,CAAC,QAAQ;gBAAE;AAC1B,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;AAC3B,gBAAA,KAAK,CAAC,OAAO,GAAG,IAAI;AACrB,YAAA,CAAC,CAAC;QACH,CAAC;AACD,KAAA,CAAC,CAAC;AAEH,IAAA,OAAOA,GAAA,CAAC,KAAK,EAAA,EAAA,GAAK,WAAW,GAAI;AAClC;;;;"}
+{"version":3,"file":"hookModal.js","sources":["../../../../packages/components/modal/hookModal.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\r\nimport { useImperativeHandle } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Modal from \"./modal\";\r\nimport type { IModal, RefHookModal } from \"./type\";\r\n\r\nconst HookModal = (\r\n    props: IModal & { ref?: RefObject<RefHookModal | null> },\r\n) => {\r\n    const { ref, ...restProps } = props;\r\n    const state = useReactive<IModal>({});\r\n\r\n    const mergedProps = Object.assign({}, restProps, state);\r\n\r\n    useImperativeHandle(ref, () => ({\r\n        update: (config: IModal = {}) => {\r\n            Object.assign(state, config);\r\n        },\r\n\r\n        close: () => {\r\n            state.visible = false;\r\n\r\n            if (mergedProps.closable ?? true) return;\r\n            Promise.resolve().then(() => {\r\n                state.visible = true;\r\n            });\r\n        },\r\n    }));\r\n\r\n    return <Modal {...mergedProps} />;\r\n};\r\n\r\nexport default HookModal;\r\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,SAAS,GAAG,CACd,KAAwD,KACxD;IACA,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACnC,IAAA,MAAM,KAAK,GAAG,WAAW,CAAS,EAAE,CAAC;AAErC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC;AAEvD,IAAA,mBAAmB,CAAC,GAAG,EAAE,OAAO;AAC5B,QAAA,MAAM,EAAE,CAAC,MAAA,GAAiB,EAAE,KAAI;AAC5B,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;QAChC,CAAC;QAED,KAAK,EAAE,MAAK;AACR,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;AAErB,YAAA,IAAI,WAAW,CAAC,QAAQ,IAAI,IAAI;gBAAE;AAClC,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;AACxB,gBAAA,KAAK,CAAC,OAAO,GAAG,IAAI;AACxB,YAAA,CAAC,CAAC;QACN,CAAC;AACJ,KAAA,CAAC,CAAC;AAEH,IAAA,OAAOA,GAAA,CAAC,KAAK,EAAA,EAAA,GAAK,WAAW,GAAI;AACrC;;;;"}

package/lib/es/components/picker/colors/footer.js

@@ -27,7 +27,7 @@ function Footer(props) {
         setInputValue(value);
         setColorType(type);
     }, [value, type]);
-    return (jsxs("div", { className: 'i-colorpicker-footer', children: [jsx(Select, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange }), jsx(Input, { placeholder: 'color', value: inputValue, onChange: handleChange }), jsx(Button, { square: true, onClick: onOk, children: jsx(Icon, { icon: jsx(CheckRound, {}) }) })] }));
+    return (jsxs("div", { className: "i-colorpicker-footer", children: [jsx(Select, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange, popupProps: { fitSize: false } }), jsx(Input, { placeholder: "color", value: inputValue, onChange: handleChange }), jsx(Button, { square: true, onClick: onOk, children: jsx(Icon, { icon: jsx(CheckRound, {}) }) })] }));
 }
 
 export { ColorMethods, Footer as default };

package/lib/es/components/picker/colors/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../../../../../packages/components/picker/colors/footer.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\r\nimport { useEffect, useState } from \"react\";\r\nimport Button from \"../../button\";\r\nimport Icon from \"../../icon\";\r\nimport Input from \"../../input\";\r\nimport Select from \"../../select\";\r\n\r\nexport const ColorMethods = {\r\n\tHEX: \"toHexString\",\r\n\tRGB: \"toRgbString\",\r\n\tHSB: \"toHsbString\",\r\n};\r\n\r\nexport default function Footer(props) {\r\n\tconst { value, type, onTypeChange, onChange, onOk } = props;\r\n\tconst [inputValue, setInputValue] = useState(value);\r\n\tconst [colorType, setColorType] = useState(type);\r\n\r\n\tconst handleChange = (v) => {\r\n\t\tsetInputValue(v);\r\n\t\tonChange(v);\r\n\t};\r\n\r\n\tconst handleTypeChange = (t) => {\r\n\t\tsetColorType(t);\r\n\t\tonTypeChange(t);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetInputValue(value);\r\n\t\tsetColorType(type);\r\n\t}, [value, type]);\r\n\r\n\treturn (\r\n\t\t<div className='i-colorpicker-footer'>\r\n\t\t\t<Select\r\n\t\t\t\treadOnly\r\n\t\t\t\thideClear\r\n\t\t\t\thideArrow\r\n\t\t\t\tstyle={{ width: \"5.6em\" }}\r\n\t\t\t\toptions={[\"RGB\", \"HEX\", \"HSB\"]}\r\n\t\t\t\tvalue={colorType}\r\n\t\t\t\tonChange={handleTypeChange}\r\n\t\t\t/>\r\n\t\t\t<Input\r\n\t\t\t\tplaceholder='color'\r\n\t\t\t\tvalue={inputValue}\r\n\t\t\t\tonChange={handleChange}\r\n\t\t\t/>\r\n\t\t\t<Button square onClick={onOk}>\r\n\t\t\t\t<Icon icon={<CheckRound />} />\r\n\t\t\t</Button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOO,MAAM,YAAY,GAAG;AAC3B,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;;AAGL,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,aAAa,CAAC,CAAC,CAAC;QAChB,QAAQ,CAAC,CAAC,CAAC;AACZ,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAI;QAC9B,YAAY,CAAC,CAAC,CAAC;QACf,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACd,aAAa,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC;AACnB,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEjB,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,aACpCC,GAAA,CAAC,MAAM,EAAA,EACN,QAAQ,QACR,SAAS,EAAA,IAAA,EACT,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC9B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAAA,CACzB,EACFA,GAAA,CAAC,KAAK,EAAA,EACL,WAAW,EAAC,OAAO,EACnB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EAAA,CACrB,EACFA,GAAA,CAAC,MAAM,EAAA,EAAC,MAAM,QAAC,OAAO,EAAE,IAAI,EAAA,QAAA,EAC3BA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAEA,IAAC,UAAU,EAAA,EAAA,CAAG,GAAI,EAAA,CACtB,CAAA,EAAA,CACJ;AAER;;;;"}
+{"version":3,"file":"footer.js","sources":["../../../../../packages/components/picker/colors/footer.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\r\nimport { useEffect, useState } from \"react\";\r\nimport Button from \"../../button\";\r\nimport Icon from \"../../icon\";\r\nimport Input from \"../../input\";\r\nimport Select from \"../../select\";\r\n\r\nexport const ColorMethods = {\r\n    HEX: \"toHexString\",\r\n    RGB: \"toRgbString\",\r\n    HSB: \"toHsbString\",\r\n};\r\n\r\nexport default function Footer(props) {\r\n    const { value, type, onTypeChange, onChange, onOk } = props;\r\n    const [inputValue, setInputValue] = useState(value);\r\n    const [colorType, setColorType] = useState(type);\r\n\r\n    const handleChange = (v: string) => {\r\n        setInputValue(v);\r\n        onChange(v);\r\n    };\r\n\r\n    const handleTypeChange = (t: string) => {\r\n        setColorType(t);\r\n        onTypeChange(t);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setInputValue(value);\r\n        setColorType(type);\r\n    }, [value, type]);\r\n\r\n    return (\r\n        <div className=\"i-colorpicker-footer\">\r\n            <Select\r\n                readOnly\r\n                hideClear\r\n                hideArrow\r\n                style={{ width: \"5.6em\" }}\r\n                options={[\"RGB\", \"HEX\", \"HSB\"]}\r\n                value={colorType}\r\n                onChange={handleTypeChange}\r\n                popupProps={{ fitSize: false }}\r\n            />\r\n            <Input\r\n                placeholder=\"color\"\r\n                value={inputValue}\r\n                onChange={handleChange}\r\n            />\r\n            <Button square onClick={onOk}>\r\n                <Icon icon={<CheckRound />} />\r\n            </Button>\r\n        </div>\r\n    );\r\n}\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOO,MAAM,YAAY,GAAG;AACxB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;;AAGR,SAAU,MAAM,CAAC,KAAK,EAAA;AAChC,IAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAS,KAAI;QAC/B,aAAa,CAAC,CAAC,CAAC;QAChB,QAAQ,CAAC,CAAC,CAAC;AACf,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAS,KAAI;QACnC,YAAY,CAAC,CAAC,CAAC;QACf,YAAY,CAAC,CAAC,CAAC;AACnB,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACX,aAAa,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC;AACtB,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEjB,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CACjCC,IAAC,MAAM,EAAA,EACH,QAAQ,EAAA,IAAA,EACR,SAAS,EAAA,IAAA,EACT,SAAS,QACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC9B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,GAChC,EACFA,GAAA,CAAC,KAAK,EAAA,EACF,WAAW,EAAC,OAAO,EACnB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EAAA,CACxB,EACFA,GAAA,CAAC,MAAM,IAAC,MAAM,EAAA,IAAA,EAAC,OAAO,EAAE,IAAI,YACxBA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAEA,IAAC,UAAU,EAAA,EAAA,CAAG,GAAI,EAAA,CACzB,CAAA,EAAA,CACP;AAEd;;;;"}

package/lib/es/components/popconfirm/popconfirm.js

@@ -11,10 +11,10 @@ const defaultOk = {
 };
 const defaultCancel = {
     children: "取消",
-    secondary: true,
+    flat: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error', size: '1.2em' }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: "error", size: "1.2em" }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
     const state = useReactive({
         loading: false,
         visible,
@@ -45,7 +45,7 @@ const Popconfirm = (props) => {
         await onClose?.();
         state.visible = false;
     };
-    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: '.5em', children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    const popconfirmContent = (jsxs("div", { className: "i-popconfirm", children: [jsxs(Flex, { gap: ".5em", children: [icon, jsx("div", { className: "i-popconfirm-content", children: content })] }), jsxs(Flex, { gap: 12, justify: "flex-end", className: "i-popconfirm-footer", children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
     return (jsx(Popup, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
 };
 

package/lib/es/components/popconfirm/popconfirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\r\nimport { MouseEvent } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Button from \"../button\";\r\nimport { IButton } from \"../button/type\";\r\nimport Flex from \"../flex\";\r\nimport Icon from \"../icon\";\r\nimport Popup from \"../popup\";\r\nimport \"./index.css\";\r\nimport { IPopconfirm } from \"./type\";\r\n\r\nconst defaultOk = {\r\n\tchildren: \"确定\",\r\n};\r\n\r\nconst defaultCancel = {\r\n\tchildren: \"取消\",\r\n\tsecondary: true,\r\n};\r\n\r\nconst Popconfirm = (props: IPopconfirm) => {\r\n\tconst {\r\n\t\ttrigger = \"click\",\r\n\t\tvisible,\r\n\t\ticon = <Icon icon={<InfoOutlined />} className='error' size='1.2em' />,\r\n\t\tcontent,\r\n\t\tokButtonProps,\r\n\t\tcancelButtonProps,\r\n\t\tchildren,\r\n\t\talign,\r\n\t\tposition = \"top\",\r\n\t\toffset = 12,\r\n\t\textra,\r\n\t\tonOk,\r\n\t\tonClose,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst state = useReactive({\r\n\t\tloading: false,\r\n\t\tvisible,\r\n\t});\r\n\r\n\tconst ok: IButton = okButtonProps\r\n\t\t? Object.assign({}, defaultOk, okButtonProps)\r\n\t\t: defaultOk;\r\n\tconst cancel: IButton = cancelButtonProps\r\n\t\t? Object.assign({}, defaultCancel, cancelButtonProps)\r\n\t\t: defaultCancel;\r\n\r\n\tconst handleVisibleChange = (v: boolean) => {\r\n\t\tstate.visible = v;\r\n\t\trestProps.onVisibleChange?.(v);\r\n\t};\r\n\r\n\tconst handleOk = async (e: MouseEvent<HTMLElement>) => {\r\n\t\tstate.loading = true;\r\n\t\tok.onClick?.(e);\r\n\t\ttry {\r\n\t\t\tawait onOk?.();\r\n\t\t\tstate.visible = false;\r\n\t\t} finally {\r\n\t\t\tstate.loading = false;\r\n\t\t}\r\n\t};\r\n\r\n\tconst handleCancel = async (e: MouseEvent<HTMLElement>) => {\r\n\t\tcancel.onClick?.(e);\r\n\t\tawait onClose?.();\r\n\t\tstate.visible = false;\r\n\t};\r\n\r\n\tconst popconfirmContent = (\r\n\t\t<div className='i-popconfirm'>\r\n\t\t\t<Flex gap='.5em'>\r\n\t\t\t\t{icon}\r\n\t\t\t\t<div className='i-popconfirm-content'>{content}</div>\r\n\t\t\t</Flex>\r\n\r\n\t\t\t<Flex gap={12} justify='flex-end' className='i-popconfirm-footer'>\r\n\t\t\t\t{cancelButtonProps !== null && (\r\n\t\t\t\t\t<Button {...cancel} onClick={handleCancel} />\r\n\t\t\t\t)}\r\n\t\t\t\t{extra}\r\n\t\t\t\t{okButtonProps !== null && (\r\n\t\t\t\t\t<Button\r\n\t\t\t\t\t\tloading={state.loading}\r\n\t\t\t\t\t\t{...ok}\r\n\t\t\t\t\t\tonClick={handleOk}\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\t\t\t</Flex>\r\n\t\t</div>\r\n\t);\r\n\r\n\treturn (\r\n\t\t<Popup\r\n\t\t\tcontent={popconfirmContent}\r\n\t\t\t{...restProps}\r\n\t\t\ttrigger={trigger}\r\n\t\t\tvisible={state.visible}\r\n\t\t\talign={align}\r\n\t\t\toffset={offset}\r\n\t\t\tposition={position}\r\n\t\t\tonVisibleChange={handleVisibleChange}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</Popup>\r\n\t);\r\n};\r\n\r\nexport default Popconfirm;\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\r\nimport { MouseEvent } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Button from \"../button\";\r\nimport { IButton } from \"../button/type\";\r\nimport Flex from \"../flex\";\r\nimport Icon from \"../icon\";\r\nimport Popup from \"../popup\";\r\nimport \"./index.css\";\r\nimport { IPopconfirm } from \"./type\";\r\n\r\nconst defaultOk = {\r\n    children: \"确定\",\r\n};\r\n\r\nconst defaultCancel = {\r\n    children: \"取消\",\r\n    flat: true,\r\n};\r\n\r\nconst Popconfirm = (props: IPopconfirm) => {\r\n    const {\r\n        trigger = \"click\",\r\n        visible,\r\n        icon = <Icon icon={<InfoOutlined />} className=\"error\" size=\"1.2em\" />,\r\n        content,\r\n        okButtonProps,\r\n        cancelButtonProps,\r\n        children,\r\n        align,\r\n        position = \"top\",\r\n        offset = 12,\r\n        extra,\r\n        onOk,\r\n        onClose,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const state = useReactive({\r\n        loading: false,\r\n        visible,\r\n    });\r\n\r\n    const ok: IButton = okButtonProps\r\n        ? Object.assign({}, defaultOk, okButtonProps)\r\n        : defaultOk;\r\n    const cancel: IButton = cancelButtonProps\r\n        ? Object.assign({}, defaultCancel, cancelButtonProps)\r\n        : defaultCancel;\r\n\r\n    const handleVisibleChange = (v: boolean) => {\r\n        state.visible = v;\r\n        restProps.onVisibleChange?.(v);\r\n    };\r\n\r\n    const handleOk = async (e: MouseEvent<HTMLElement>) => {\r\n        state.loading = true;\r\n        ok.onClick?.(e);\r\n        try {\r\n            await onOk?.();\r\n            state.visible = false;\r\n        } finally {\r\n            state.loading = false;\r\n        }\r\n    };\r\n\r\n    const handleCancel = async (e: MouseEvent<HTMLElement>) => {\r\n        cancel.onClick?.(e);\r\n        await onClose?.();\r\n        state.visible = false;\r\n    };\r\n\r\n    const popconfirmContent = (\r\n        <div className=\"i-popconfirm\">\r\n            <Flex gap=\".5em\">\r\n                {icon}\r\n                <div className=\"i-popconfirm-content\">{content}</div>\r\n            </Flex>\r\n\r\n            <Flex gap={12} justify=\"flex-end\" className=\"i-popconfirm-footer\">\r\n                {cancelButtonProps !== null && (\r\n                    <Button {...cancel} onClick={handleCancel} />\r\n                )}\r\n                {extra}\r\n                {okButtonProps !== null && (\r\n                    <Button\r\n                        loading={state.loading}\r\n                        {...ok}\r\n                        onClick={handleOk}\r\n                    />\r\n                )}\r\n            </Flex>\r\n        </div>\r\n    );\r\n\r\n    return (\r\n        <Popup\r\n            content={popconfirmContent}\r\n            {...restProps}\r\n            trigger={trigger}\r\n            visible={state.visible}\r\n            align={align}\r\n            offset={offset}\r\n            position={position}\r\n            onVisibleChange={handleVisibleChange}\r\n        >\r\n            {children}\r\n        </Popup>\r\n    );\r\n};\r\n\r\nexport default Popconfirm;\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}