@canlooks/can-ui 0.0.18 → 0.0.20

package/dist/cjs/components/image/imagePreview.d.ts

@@ -3,6 +3,9 @@ import { ModalProps } from '../modal';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 export interface ImagePreviewProps extends ModalProps {
     src?: string | string[];
+    defaultIndex?: number;
+    index?: number;
+    onIndexChange?(index: number): void;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
     /** 是否渲染旋转按钮{@default true} */

package/dist/cjs/components/image/imagePreview.js

@@ -10,22 +10,22 @@ const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 const tooltip_1 = require("../tooltip");
-exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
-    const srcArr = Array.isArray(src) ? src : [src];
+exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
+    const srcArr = (0, utils_1.toArray)(src);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
     const innerTransformWrapperRef = (0, react_1.useRef)(null);
     const imgLoaded = () => {
         innerTransformWrapperRef.current.centerView();
     };
     const prev = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o - 1 + srcArr.length) % srcArr.length);
+        setInnerIndex(o => (o - 1 + srcArr.length) % srcArr.length);
         innerTransformWrapperRef.current?.resetTransform();
     };
     const next = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o + 1) % srcArr.length);
+        setInnerIndex(o => (o + 1) % srcArr.length);
         innerTransformWrapperRef.current?.resetTransform();
     };
     const [rotate, setRotate] = (0, react_1.useState)(0);
@@ -42,7 +42,7 @@ exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], de
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateLeftOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) })] }), showZoom &&
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomOutOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomInOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) })] }), showClose &&
                                 (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }), srcArr.length > 1 &&
-                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: prev, children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: next, children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.counter, children: [activeIndex + 1, " / ", srcArr.length] })] })] }))
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: prev, children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: next, children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
         }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: (0, utils_1.cloneRef)(transformWrapperRef, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
                 transformWrapperProps?.onPanning?.(ref, e);
                 isPanning.current = true;
@@ -51,5 +51,5 @@ exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], de
                 isPanning.current && setTimeout(() => isPanning.current = false);
             }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: imagePreview_style_1.classes.imageWrapper, contentClass: imagePreview_style_1.classes.image, wrapperProps: {
                     onClick: () => !isPanning.current && setInnerOpen(false)
-                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[activeIndex], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
 }));

package/dist/cjs/components/popper/popper.js

@@ -371,18 +371,14 @@ exports.Popper = (0, react_1.forwardRef)(({ popperRef, anchorElement, container
     // click
     const onClick = (0, react_1.useCallback)((e) => {
         children?.props.onClick?.(e);
-        setInnerOpen(openHolding.current = true);
-    }, [children?.props.onClick]);
-    const allowClickAway = (() => {
-        let allow = false;
-        for (const trigger of triggersSet) {
-            if (trigger === 'click' || trigger === 'enter' || trigger === 'contextMenu') {
-                allow = true;
-                break;
-            }
+        if (triggersSet.has('click')) {
+            setInnerOpen(openHolding.current = true);
         }
-        return allow;
-    })();
+        else {
+            // trigger中不包含"click"，则无需保持打开状态，否则会与focus冲突
+            openHolding.current = false;
+        }
+    }, [children?.props.onClick]);
     const onClickAway = () => {
         setInnerOpen(openHolding.current = false);
     };
@@ -413,11 +409,12 @@ exports.Popper = (0, react_1.forwardRef)(({ popperRef, anchorElement, container
                     ref: (0, react_1.useCallback)((0, utils_1.cloneRef)(children.ref, anchorRef, ref), [children.ref]),
                     ...hoverable && { onPointerEnter, onPointerLeave },
                     ...triggersSet.has('click') && { onClick },
-                    ...triggersSet.has('focus') && { onFocus, onBlur },
+                    // 通常点击会触发focus，因此这里需要处理点击事件
+                    ...triggersSet.has('focus') && { onClick, onFocus, onBlur },
                     ...triggersSet.has('enter') && { onKeyDown },
                     ...triggersSet.has('contextMenu') && { onContextMenu }
                 })
-                : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !allowClickAway, 
+                : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !triggersSet.has('click') && !triggersSet.has('enter') && !triggersSet.has('contextMenu'), 
                 // 非右键菜单不能点击anchor关闭
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.classnames)(popper_style_1.classes.root, props?.className), style: {
                         ...popperSize,

package/dist/esm/components/image/imagePreview.d.ts

@@ -3,6 +3,9 @@ import { ModalProps } from '../modal';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 export interface ImagePreviewProps extends ModalProps {
     src?: string | string[];
+    defaultIndex?: number;
+    index?: number;
+    onIndexChange?(index: number): void;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
     /** 是否渲染旋转按钮{@default true} */

package/dist/esm/components/image/imagePreview.js

@@ -1,28 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { forwardRef, memo, useRef, useState } from 'react';
 import { Modal } from '../modal';
-import { classnames, cloneRef, useControlled } from '../../utils';
+import { classnames, cloneRef, toArray, useControlled } from '../../utils';
 import { classes, style } from './imagePreview.style';
 import { CloseOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { Button } from '../button';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { Tooltip } from '../tooltip';
-export const ImagePreview = memo(forwardRef(({ src = [], defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
-    const srcArr = Array.isArray(src) ? src : [src];
+export const ImagePreview = memo(forwardRef(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
+    const srcArr = toArray(src);
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const [activeIndex, setActiveIndex] = useState(0);
+    const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
     const innerTransformWrapperRef = useRef(null);
     const imgLoaded = () => {
         innerTransformWrapperRef.current.centerView();
     };
     const prev = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o - 1 + srcArr.length) % srcArr.length);
+        setInnerIndex(o => (o - 1 + srcArr.length) % srcArr.length);
         innerTransformWrapperRef.current?.resetTransform();
     };
     const next = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o + 1) % srcArr.length);
+        setInnerIndex(o => (o + 1) % srcArr.length);
         innerTransformWrapperRef.current?.resetTransform();
     };
     const [rotate, setRotate] = useState(0);
@@ -39,7 +39,7 @@ export const ImagePreview = memo(forwardRef(({ src = [], defaultOpen = false, op
                                 _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) })] }), showZoom &&
                                 _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) })] }), showClose &&
                                 _jsx(Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: _jsx(CloseOutlined, {}) })] }), srcArr.length > 1 &&
-                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: prev, children: _jsx(LeftOutlined, {}) }), _jsx(Button, { ...commonControlProps, onClick: next, children: _jsx(RightOutlined, {}) })] }), _jsxs("div", { className: classes.counter, children: [activeIndex + 1, " / ", srcArr.length] })] })] }))
+                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: prev, children: _jsx(LeftOutlined, {}) }), _jsx(Button, { ...commonControlProps, onClick: next, children: _jsx(RightOutlined, {}) })] }), _jsxs("div", { className: classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
         }, children: _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: cloneRef(transformWrapperRef, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
                 transformWrapperProps?.onPanning?.(ref, e);
                 isPanning.current = true;
@@ -48,5 +48,5 @@ export const ImagePreview = memo(forwardRef(({ src = [], defaultOpen = false, op
                 isPanning.current && setTimeout(() => isPanning.current = false);
             }, children: _jsx(TransformComponent, { wrapperClass: classes.imageWrapper, contentClass: classes.image, wrapperProps: {
                     onClick: () => !isPanning.current && setInnerOpen(false)
-                }, children: _jsx("img", { src: srcArr[activeIndex], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
+                }, children: _jsx("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
 }));

package/dist/esm/components/popper/popper.js

@@ -368,18 +368,14 @@ export const Popper = forwardRef(({ popperRef, anchorElement, container = docume
     // click
     const onClick = useCallback((e) => {
         children?.props.onClick?.(e);
-        setInnerOpen(openHolding.current = true);
-    }, [children?.props.onClick]);
-    const allowClickAway = (() => {
-        let allow = false;
-        for (const trigger of triggersSet) {
-            if (trigger === 'click' || trigger === 'enter' || trigger === 'contextMenu') {
-                allow = true;
-                break;
-            }
+        if (triggersSet.has('click')) {
+            setInnerOpen(openHolding.current = true);
         }
-        return allow;
-    })();
+        else {
+            // trigger中不包含"click"，则无需保持打开状态，否则会与focus冲突
+            openHolding.current = false;
+        }
+    }, [children?.props.onClick]);
     const onClickAway = () => {
         setInnerOpen(openHolding.current = false);
     };
@@ -410,11 +406,12 @@ export const Popper = forwardRef(({ popperRef, anchorElement, container = docume
                     ref: useCallback(cloneRef(children.ref, anchorRef, ref), [children.ref]),
                     ...hoverable && { onPointerEnter, onPointerLeave },
                     ...triggersSet.has('click') && { onClick },
-                    ...triggersSet.has('focus') && { onFocus, onBlur },
+                    // 通常点击会触发focus，因此这里需要处理点击事件
+                    ...triggersSet.has('focus') && { onClick, onFocus, onBlur },
                     ...triggersSet.has('enter') && { onKeyDown },
                     ...triggersSet.has('contextMenu') && { onContextMenu }
                 })
-                : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !allowClickAway, 
+                : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !triggersSet.has('click') && !triggersSet.has('enter') && !triggersSet.has('contextMenu'), 
                 // 非右键菜单不能点击anchor关闭
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: classnames(classes.root, props?.className), style: {
                         ...popperSize,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",