@canlooks/can-ui 0.0.19 → 0.0.21

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

@@ -11,7 +11,7 @@ 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 = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
-    const srcArr = Array.isArray(src) ? src : [src];
+    const srcArr = (0, utils_1.toArray)(src);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
     const innerTransformWrapperRef = (0, react_1.useRef)(null);

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

@@ -48,8 +48,8 @@ exports.Popper = (0, react_1.forwardRef)(({ popperRef, anchorElement, container
         if (openState || !openHolding.current) {
             // 需要openHolding为false时才能关闭
             _setInnerOpen(openState);
+            setContextMenuEvent(contextMenuEvent);
         }
-        setContextMenuEvent(contextMenuEvent);
     };
     const renderedOnce = (0, react_1.useRef)(!!forceRender);
     if (innerOpen.current) {
@@ -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);
     };
@@ -405,7 +401,11 @@ exports.Popper = (0, react_1.forwardRef)(({ popperRef, anchorElement, container
     const contextValue = (0, react_1.useMemo)(() => ({
         autoClose,
         open: innerOpen.current,
-        setOpen: setInnerOpen,
+        setOpen(open) {
+            // 通过context改变的open状态，需要强制将openHolding置为false
+            openHolding.current = false;
+            setInnerOpen(open);
+        },
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
@@ -413,11 +413,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.js

@@ -1,14 +1,14 @@
 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 = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
-    const srcArr = Array.isArray(src) ? src : [src];
+    const srcArr = toArray(src);
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
     const innerTransformWrapperRef = useRef(null);

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

@@ -45,8 +45,8 @@ export const Popper = forwardRef(({ popperRef, anchorElement, container = docume
         if (openState || !openHolding.current) {
             // 需要openHolding为false时才能关闭
             _setInnerOpen(openState);
+            setContextMenuEvent(contextMenuEvent);
         }
-        setContextMenuEvent(contextMenuEvent);
     };
     const renderedOnce = useRef(!!forceRender);
     if (innerOpen.current) {
@@ -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);
     };
@@ -402,7 +398,11 @@ export const Popper = forwardRef(({ popperRef, anchorElement, container = docume
     const contextValue = useMemo(() => ({
         autoClose,
         open: innerOpen.current,
-        setOpen: setInnerOpen,
+        setOpen(open) {
+            // 通过context改变的open状态，需要强制将openHolding置为false
+            openHolding.current = false;
+            setInnerOpen(open);
+        },
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
     return (_jsxs(_Fragment, { children: [isValidElement(children)
@@ -410,11 +410,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.19",
+  "version": "0.0.21",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",