@ioca/react 1.5.13 → 1.5.14

package/lib/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle } from 'radash';
-import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, createContext, useContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
+import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useContext, createContext, useImperativeHandle } from 'react';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal } from 'react-dom';
@@ -62,14 +62,15 @@ function createRipple() {
 
 const Loading = (props) => {
     const { icon, text, size, absolute, style, className, ...restProps } = props;
+    const iconSize = size != null
+        ? { fontSize: typeof size === "number" ? `${size}px` : size }
+        : undefined;
     return (jsxs("div", { className: classNames("i-loading-container", {
             absolute,
         }, className), style: {
             ...style,
             inset: absolute ? 0 : "unset",
-        }, ...restProps, children: [icon ?? (jsx("svg", { width: '24', height: '24', stroke: '#000', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'i-loading-icon', style: {
-                    fontSize: size,
-                }, children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
+        }, ...restProps, children: [icon ?? jsx("span", { className: "i-loading-icon", style: iconSize }), text] }));
 };
 
 const os = window.navigator.platform;
@@ -1839,19 +1840,7 @@ function Popup(props) {
     const [show, setShow] = useState(false);
     const showRef = useRef(false);
     showRef.current = show;
-    const latestRef = useRef({
-        disabled,
-        trigger,
-        touchable,
-        showDelay,
-        hideDelay,
-        position,
-        gap,
-        offset,
-        align,
-        fitSize,
-        onVisibleChange,
-    });
+    const latestRef = useRef({});
     latestRef.current = {
         disabled,
         trigger,
@@ -1905,9 +1894,8 @@ function Popup(props) {
     };
     const applyFitSize = () => {
         const o = latestRef.current;
-        const triggerEl = triggerRef.current;
         const contentEl = contentRef.current;
-        if (!triggerEl || !contentEl)
+        if (!contentEl)
             return;
         const vertical = ["top", "bottom"].includes(o.position);
         const key = vertical ? "width" : "height";
@@ -1915,6 +1903,9 @@ function Popup(props) {
             contentEl.style[key] = "";
             return;
         }
+        const triggerEl = triggerRef.current;
+        if (!triggerEl)
+            return;
         const size = triggerEl[vertical ? "offsetWidth" : "offsetHeight"];
         contentEl.style[key] =
             typeof size === "number" ? `${size}px` : "";
@@ -2151,8 +2142,8 @@ function Popup(props) {
                         e.stopPropagation();
                         setTriggerEl(e);
                         pointRef.current = {
-                            pageX: e.pageX,
-                            pageY: e.pageY,
+                            pageX: e.clientX,
+                            pageY: e.clientY,
                         };
                         if (showRef.current) {
                             ensureBaseStyle();
@@ -2309,22 +2300,38 @@ function Popup(props) {
 
 const { Item: ListItem } = List$1;
 const Item$3 = (props) => {
-    const { more, moreProps, onClick, ...restProps } = props;
-    const Li = (jsx(ListItem, { onClick: (e) => {
+    const { more, moreProps, onClick, ref: itemRef, children, ...restProps } = props;
+    const close = useContext(DropdownCloseCtx);
+    const liRef = useRef(null);
+    const [position, setPosition] = useState("right");
+    const { position: morePosition, onVisibleChange: moreOnVisibleChange, width: moreWidth, ...restMoreProps } = moreProps ?? {};
+    const effectivePosition = morePosition ?? position;
+    const handleVisibleChange = (v) => {
+        if (v && liRef.current) {
+            const rect = liRef.current.getBoundingClientRect();
+            setPosition(rect.left > window.innerWidth / 2 ? "left" : "right");
+        }
+        moreOnVisibleChange?.(v);
+    };
+    const Li = (jsx(ListItem, { ref: itemRef ?? liRef, onClick: (e) => {
             e.stopPropagation();
+            if (!more)
+                close?.();
             onClick?.(e);
-        }, ...restProps }));
+        }, ...restProps, children: children }));
     if (!more)
         return Li;
-    return (jsx(Popup, { position: 'right', touchable: true, arrow: false, align: 'start', offset: 10, hideDelay: 240, ...moreProps, content: jsx(List$1, { className: 'i-dropdown-content', onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
+    return (jsx(Popup, { ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset: 11, hideDelay: 240, onVisibleChange: handleVisibleChange, content: jsx(List$1, { className: "i-dropdown-content", style: { minWidth: moreWidth }, onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
 };
 
+const DropdownCloseCtx = createContext(null);
 const Dropdown = (props) => {
     const { visible, width, content, children, ...restProps } = props;
     const [active, setActive] = useState(visible);
     if (!content) {
         return children;
     }
+    const close = () => setActive(false);
     const handleVisibleChange = (v) => {
         setActive(v);
         if (props.onVisibleChange) {
@@ -2334,9 +2341,9 @@ const Dropdown = (props) => {
     useEffect(() => {
         setActive(visible);
     }, [visible]);
-    return (jsx(Popup, { trigger: 'click', position: 'bottom', content: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: typeof content === "function"
-                ? content(() => setActive(false))
-                : content }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
+    return (jsx(Popup, { trigger: 'click', position: 'bottom', content: jsx(DropdownCloseCtx.Provider, { value: close, children: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: typeof content === "function"
+                    ? content(close)
+                    : content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
 };
 Dropdown.Item = Item$3;
 
@@ -2690,7 +2697,13 @@ const Editor = (props) => {
     const [memtionRect, setMemtionRect] = useState(null);
     const [memtionKeyword, setMemtionKeyword] = useState("");
     const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);
-    const memtionOptions = useMemo(() => filterMemtionOptions(memtion?.options ?? [], memtionKeyword), [memtion?.options, memtionKeyword]);
+    const [activeMemtionIndex, setActiveMemtionIndex] = useState(-1);
+    const memtionOptions = useMemo(() => {
+        if (activeMemtionIndex < 0 || !memtion?.length)
+            return [];
+        const active = memtion?.[activeMemtionIndex];
+        return filterMemtionOptions(active?.options ?? [], memtionKeyword);
+    }, [memtion, memtionKeyword, activeMemtionIndex]);
     const sanitizeValue = (nextValue) => {
         if (isPlaintextMode) {
             return nextValue === "\n" ? "" : nextValue;
@@ -2745,18 +2758,20 @@ const Editor = (props) => {
         setMemtionRect(null);
         setMemtionKeyword("");
         setMemtionActiveIndex(0);
+        setActiveMemtionIndex(-1);
     };
     const syncEditorState = () => {
         selectionRef.current = null;
         hideMemtion();
     };
     const insertMemtion = (option) => {
+        const activeMemtion = memtion?.[activeMemtionIndex];
         const replaceRange = getMemtionReplaceRange(memtionTriggerRangeRef.current, selectionRef.current);
         const range = insertMemtionOption({
             editor: editorRef.current,
             range: replaceRange,
             mode,
-            memtion,
+            memtion: activeMemtion,
             option,
             sanitizeValue,
         });
@@ -2792,7 +2807,6 @@ const Editor = (props) => {
             editorRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
             return;
         }
-        const memtionKey = memtion?.key ?? "@";
         if (memtionVisible && e.key === " ") {
             hideMemtion();
         }
@@ -2812,11 +2826,15 @@ const Editor = (props) => {
                     return;
             }
         }
-        if (memtion && e.key === memtionKey) {
-            rememberSelection();
-            memtionTriggerRangeRef.current =
-                selectionRef.current?.cloneRange() ?? null;
-            pendingMemtionRef.current = true;
+        if (memtion?.length) {
+            const matchedIndex = memtion.findIndex((m) => e.key === m.key);
+            if (matchedIndex >= 0) {
+                rememberSelection();
+                memtionTriggerRangeRef.current =
+                    selectionRef.current?.cloneRange() ?? null;
+                pendingMemtionRef.current = true;
+                setActiveMemtionIndex(matchedIndex);
+            }
         }
         switch (e.key) {
             case "Tab":
@@ -2864,8 +2882,13 @@ const Editor = (props) => {
             setEditorValue(nextValue);
         }
         rememberSelection();
-        if (memtion && (pendingMemtionRef.current || memtionVisible)) {
-            const memtionKey = memtion?.key ?? "@";
+        if (activeMemtionIndex >= 0 && (pendingMemtionRef.current || memtionVisible)) {
+            const active = memtion?.[activeMemtionIndex];
+            if (!active) {
+                hideMemtion();
+                return;
+            }
+            const memtionKey = active.key ?? "@";
             const memtionText = getMemtionText(memtionTriggerRangeRef.current, selectionRef.current);
             if (!memtionText.startsWith(memtionKey) || /\s/.test(memtionText)) {
                 hideMemtion();
@@ -2920,7 +2943,7 @@ const Editor = (props) => {
             ...style,
             [autosize ? "minHeight" : "height"]: height,
             width,
-        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion && (jsx(Memtion$1, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: isPlaintextMode ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
+        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion?.length && (jsx(Memtion$1, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: isPlaintextMode ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
 };
 
 const Flex = (props) => {
@@ -5231,6 +5254,70 @@ const River = (props) => {
                     })] }) }));
 };
 
+const Scroll = (props) => {
+    const { style, className, draggable, onScroll, children, ...restProps } = props;
+    const scrollRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const dragState = useRef({ down: false, startX: 0, scrollLeft: 0 });
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            const canScroll = el.scrollWidth > el.clientWidth + 1;
+            if (!canScroll)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY)
+                ? e.deltaX
+                : e.deltaY;
+            el.scrollLeft += delta;
+        };
+        const opts = {
+            passive: false,
+            capture: true,
+        };
+        el.addEventListener("wheel", onWheel, opts);
+        return () => el.removeEventListener("wheel", onWheel, opts);
+    }, []);
+    useEffect(() => {
+        if (!draggable)
+            return;
+        const handleMouseMove = (e) => {
+            if (!dragState.current.down || !scrollRef.current)
+                return;
+            const x = e.clientX - dragState.current.startX;
+            scrollRef.current.scrollLeft =
+                dragState.current.scrollLeft - x;
+        };
+        const handleMouseUp = () => {
+            dragState.current.down = false;
+            setDragging(false);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [draggable]);
+    const handleMouseDown = (e) => {
+        if (!draggable || !scrollRef.current)
+            return;
+        setDragging(true);
+        dragState.current = {
+            down: true,
+            startX: e.clientX,
+            scrollLeft: scrollRef.current.scrollLeft,
+        };
+    };
+    return (jsx("div", { ref: scrollRef, className: classNames("i-scroll", className, {
+            "i-scroll-draggable": draggable,
+            "i-scroll-dragging": dragging,
+        }), style: style, onScroll: onScroll, onMouseDown: handleMouseDown, ...restProps, children: children }));
+};
+
 function Divider() {
     return jsx("i", { className: 'i-step-divider' });
 }
@@ -6151,7 +6238,7 @@ const normalizeFiles = (files) => (files ?? []).map((item) => {
     };
 });
 const Upload = (props) => {
-    const { label, labelInline, value, files, placeholder, status = "normal", message, className, style, children, droppable, dropbox, getDropboxContainer, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
+    const { label, labelInline, value, files, placeholder, status = "normal", message, icon = jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), className, style, children, droppable, dropbox, getDropboxContainer, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
     const [internalFileList, setInternalFileList] = useState([]);
     const isControlled = useMemo(() => value !== undefined || files !== undefined, [value, files]);
     const fileList = isControlled
@@ -6161,7 +6248,7 @@ const Upload = (props) => {
     const inputRef = useRef(null);
     const preview = usePreview();
     const defBtnProps = useMemo(() => ({
-        children: (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
+        children: jsxs(Fragment, { children: [icon, " \u4E0A\u4F20"] }),
         ...defaultButtonProps,
     }), [defaultButtonProps]);
     const trigger = useMemo(() => {
@@ -6169,11 +6256,11 @@ const Upload = (props) => {
             return children;
         switch (mode) {
             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, {}) }) }));
+                return (jsx(Button, { className: "i-upload-card-btn color-5", square: true, flat: true, outline: true, disabled: disabled, children: icon }));
             default:
                 return (jsx(Button, { ...defBtnProps, className: classNames("i-upload-btn", defBtnProps.className), disabled: disabled }));
         }
-    }, [mode, children, disabled, defBtnProps]);
+    }, [mode, children, disabled, defBtnProps, icon]);
     const handleUpload = useCallback(async (files) => {
         if (!uploader)
             return;
@@ -6416,4 +6503,4 @@ const useTheme = (props) => {
     };
 };
 
-export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
+export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };

package/lib/types/components/dropdown/dropdown.d.ts

@@ -1,6 +1,6 @@
 import { IDropdown, IDropItem } from './type.js';
-import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 declare const Dropdown: {
     (props: IDropdown): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode>>;

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

@@ -23,7 +23,7 @@ interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput" | "onCh
     mode?: "rich" | "plaintext" | "plaintextOnMemtion";
     hideControl?: boolean;
     addtionControls?: IEditorAddtionControl[];
-    memtion?: IEditorMemtion;
+    memtion?: IEditorMemtion[];
     border?: boolean;
     onChange?: (value: string, e: SyntheticEvent<HTMLDivElement>) => void;
     onEnter?: (e: KeyboardEvent<HTMLDivElement>) => void;

package/lib/types/components/scroll/index.d.ts

@@ -0,0 +1,5 @@
+import Scroll from './scroll.js';
+
+
+
+export { Scroll as default };

package/lib/types/components/scroll/scroll.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IScroll } from './type.js';
+
+declare const Scroll: (props: IScroll) => react_jsx_runtime.JSX.Element;
+
+export { Scroll as default };

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+
+interface IScroll extends HTMLAttributes<HTMLDivElement> {
+    draggable?: boolean;
+}
+
+export type { IScroll };

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

@@ -14,6 +14,7 @@ interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLI
     dropbox?: (dragging?: boolean) => ReactNode;
     getDropboxContainer?: () => HTMLElement;
     cardSize?: string;
+    icon?: ReactNode;
     defaultButtonProps?: IButton;
     shouldUpload?: (file: IFile) => boolean;
     uploader?: (file: IFile) => Promise<IFile>;

package/lib/types/index.d.ts

@@ -28,6 +28,7 @@ export { default as Progress } from './components/progress/progress.js';
 export { default as Radio } from './components/radio/radio.js';
 export { default as Resizable } from './components/resizable/resizable.js';
 export { default as River } from './components/river/river.js';
+export { default as Scroll } from './components/scroll/scroll.js';
 export { default as Select } from './components/select/select.js';
 export { default as Step } from './components/step/step.js';
 export { default as Swiper } from './components/swiper/swiper.js';

package/package.json

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