@ioca/react 1.3.83 → 1.3.85

package/lib/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, pick, title } from 'radash';
 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 { 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, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { useReactive, useCreation, useSize } from 'ahooks';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
@@ -1122,7 +1122,7 @@ const List$1 = (props) => {
 };
 List$1.Item = Item$4;
 
-const Content$1 = (props) => {
+const Content$2 = (props) => {
     const { ref, getContainer = (trigger) => {
         if (typeof document === "undefined")
             return null;
@@ -1366,7 +1366,7 @@ function Popup(props) {
                     ...restProps,
                     ...eventMaps[trigger],
                 });
-            }), state.show && (jsx(Content$1, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
+            }), state.show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
 }
 
 const { Item: ListItem } = List$1;
@@ -1816,6 +1816,32 @@ Form.useForm = useForm;
 Form.Field = Field;
 Form.useConfig = useConfig;
 
+function Content$1(props) {
+    const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose, } = props;
+    const showHeader = title || !hideCloseButton;
+    const handleOk = async () => {
+        const ret = await onOk?.();
+        if (ret === false)
+            return;
+        onClose?.();
+    };
+    const renderFooter = useMemo(() => {
+        if (footer || footer === null)
+            return footer;
+        const propsOk = Object.assign({
+            children: "确定",
+            onClick: handleOk,
+        }, okButtonProps);
+        const propsCancel = Object.assign({
+            secondary: true,
+            children: "关闭",
+            onClick: onClose,
+        }, cancelButtonProps);
+        return (jsxs(Fragment, { children: [footerLeft, jsx(Button, { ...propsOk }), jsx(Button, { ...propsCancel })] }));
+    }, [footer, okButtonProps, cancelButtonProps]);
+    return (jsxs(Fragment, { children: [showHeader && (jsxs("header", { className: 'i-modal-header', children: [title && jsx("b", { children: title }), jsx(Helpericon, { active: !hideCloseButton, className: 'i-modal-close', onClick: onClose })] })), jsx("div", { className: 'i-modal-content', children: children }), jsx("footer", { className: 'i-modal-footer', children: renderFooter })] }));
+}
+
 function useModal() {
     const ref = useRef(null);
     const handleOpen = (props) => {
@@ -1843,38 +1869,13 @@ function useModal() {
     };
 }
 
-function DefaultContent(props) {
-    const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose, } = props;
-    const showHeader = title || !hideCloseButton;
-    const handleOk = async () => {
-        const ret = await onOk?.();
-        if (ret === false)
-            return;
-        onClose?.();
-    };
-    const renderFooter = useMemo(() => {
-        if (footer || footer === null)
-            return footer;
-        const propsOk = Object.assign({
-            children: "确定",
-            onClick: handleOk,
-        }, okButtonProps);
-        const propsCancel = Object.assign({
-            secondary: true,
-            children: "关闭",
-            onClick: onClose,
-        }, cancelButtonProps);
-        return (jsxs(Fragment, { children: [footerLeft, jsx(Button, { ...propsOk }), jsx(Button, { ...propsCancel })] }));
-    }, [footer, okButtonProps, cancelButtonProps]);
-    return (jsxs(Fragment, { children: [showHeader && (jsxs("header", { className: 'i-modal-header', children: [title && jsx("b", { children: title }), jsx(Helpericon, { active: !hideCloseButton, className: 'i-modal-close', onClick: onClose })] })), jsx("div", { className: 'i-modal-content', children: children }), jsx("footer", { className: 'i-modal-footer', children: renderFooter })] }));
-}
 function Modal(props) {
     const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, disableEsc, width, height, customized, fixed, hideShadow, children, style, className, keepDOM, footerLeft, onClick, onVisibleChange, onClose, onOk, ...restProps } = props;
     const [show, setShow] = useState(visible);
     const [active, setActive] = useState(false);
     const [bounced, setBounced] = useState(false);
     const toggable = useRef(true);
-    const handleShow = () => {
+    const handleShow = async () => {
         if (!toggable.current)
             return;
         (!keepDOM || !show) && setShow(true);
@@ -1938,7 +1939,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 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);
+            }, ...restProps, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document?.body ?? null);
 }
 Modal.useModal = useModal;
 
@@ -2495,7 +2496,6 @@ const Image = (props) => {
         status: "loading",
     });
     const ref = useRef(null);
-    const wh = fit ? "100%" : undefined;
     const { observe, unobserve } = useIntersectionObserver();
     const preview = usePreview();
     const handleError = (err) => {
@@ -2510,7 +2510,9 @@ const Image = (props) => {
         onClick?.(e);
         if (!previewable || !src)
             return;
+        const previewConfigs = typeof previewable === "boolean" ? {} : previewable;
         preview({
+            ...previewConfigs,
             items: [
                 {
                     src,
@@ -2520,7 +2522,7 @@ const Image = (props) => {
         });
     };
     useEffect(() => {
-        if (!src)
+        if (!src || typeof window === "undefined")
             return;
         if (!ref.current?.complete && observe && lazyload) {
             state.status = "loading";
@@ -2547,7 +2549,7 @@ const Image = (props) => {
         }, className: classNames("i-image", className, {
             rounded: round,
             [`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 }))] })) }));
+        }), children: state.status === "error" ? (fallback) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit }, ...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 }))] })) }));
 };
 Image.List = List;
 
@@ -2561,7 +2563,7 @@ function InputContainer(props) {
 }
 
 const Number = (props) => {
-    const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
+    const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, disabled, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const state = useReactive({
         value,
     });
@@ -2592,6 +2594,7 @@ const Number = (props) => {
     const inputProps = {
         ref,
         name,
+        disabled,
         value: state.value,
         className: "i-input i-input-number",
         onChange: handleChange,
@@ -2600,7 +2603,7 @@ const Number = (props) => {
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, 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 }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && !disabled && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && !disabled && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 };
 
 const Range = (props) => {
@@ -2709,7 +2712,7 @@ const Textarea = (props) => {
 };
 
 const Input = ((props) => {
-    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
+    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, required, maxLength, onChange, onEnter, style, ...restProps } = props;
     const state = useReactive({
         value,
         type,
@@ -2748,6 +2751,7 @@ const Input = ((props) => {
         type: state.type,
         name,
         value: state.value,
+        maxLength,
         className: classNames("i-input", `i-input-${type}`),
         onChange: handleChange,
         onKeyDown: handleKeydown,
@@ -2758,7 +2762,7 @@ const Input = ((props) => {
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...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 })] }) }));
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), maxLength && state.value?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [state.value.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 });
 Input.Textarea = Textarea;
 Input.Number = Number;
@@ -3477,7 +3481,7 @@ const defaultCancel = {
     secondary: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error' }), content, okButtonProps, cancelButtonProps, children, align = "end", 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 = "end", position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
     const state = useReactive({
         loading: false,
         visible,
@@ -3508,7 +3512,7 @@ const Popconfirm = (props) => {
         await onClose?.();
         state.visible = false;
     };
-    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: 12, children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'mt-8 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: 'mt-8 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 }));
 };
 
@@ -4329,7 +4333,7 @@ const FileListItem = (props) => {
 };
 
 const Upload = (props) => {
-    const { ref, label, labelInline, value, files = [], initialFiles, placeholder, status = "normal", message, className, style, children, defaultText = "Upload", mode = "default", cardSize = "4em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
+    const { ref, label, labelInline, value, files = [], initialFiles, placeholder, status = "normal", message, className, style, children, defaultButtonProps, mode = "default", cardSize = "4em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
     const state = useReactive({
         files,
         value,
@@ -4338,6 +4342,9 @@ const Upload = (props) => {
     });
     const inputRef = useRef(null);
     const preview = usePreview();
+    const defBtnProps = Object.assign({
+        children: (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
+    }, defaultButtonProps);
     const trigger = useMemo(() => {
         if (children)
             return children;
@@ -4345,7 +4352,7 @@ const Upload = (props) => {
             case "card":
                 return (jsx(Button, { className: 'i-upload-card-btn color-5', square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
             default:
-                return (jsx(Button, { className: 'i-upload-btn', disabled: disabled, children: defaultText }));
+                return (jsx(Button, { ...defBtnProps, className: classNames("i-upload-btn", defBtnProps.className), disabled: disabled }));
         }
     }, [mode, children]);
     const handleChange = (e) => {

package/lib/types/components/image/type.d.ts

@@ -1,5 +1,5 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
-import { TPreviewItem } from '../../js/usePreview/type.js';
+import { IPreview } from '../../js/usePreview/type.js';
 import List from './list.js';
 
 interface IImage extends HTMLAttributes<HTMLImageElement> {
@@ -17,7 +17,7 @@ interface IImage extends HTMLAttributes<HTMLImageElement> {
     ratio?: number;
     cover?: ReactNode;
     coverClass?: string;
-    usePreview?: boolean | TPreviewItem;
+    usePreview?: boolean | IPreview;
 }
 interface IImageList extends Omit<IImage, "src" | "alt"> {
     items: string[] | IImage[];

package/lib/types/components/upload/type.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, RefObject, ReactNode, ChangeEvent } from 'react';
 import { BaseInput } from '../../type/index.js';
+import { IButton } from '../button/type.js';
 
 interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
     ref?: RefObject<RefUpload | null>;
@@ -13,7 +14,7 @@ interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLI
     mode?: "default" | "card";
     droppable?: boolean;
     cardSize?: string;
-    defaultText?: ReactNode;
+    defaultButtonProps?: IButton;
     shouldUpload?: (file: IFile) => boolean;
     uploader?: (file: IFile) => Promise<IFile>;
     renderItem?: (file: IFile, i: number) => ReactNode;

package/package.json

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