@canlooks/can-ui 0.0.17 → 0.0.19

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

@@ -1,10 +1,22 @@
+import { Ref, ReactNode } from 'react';
 import { ModalProps } from '../modal';
-import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+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;
-    closable?: boolean;
-    transformWrapper?: ReactZoomPanPinchProps;
+    /** 是否渲染旋转按钮{@default true} */
+    showRotate?: boolean;
+    /** 是否渲染放大缩小按钮{@default true} */
+    showZoom?: boolean;
+    /** 是否渲染关闭按钮{@default true }*/
+    showClose?: boolean;
+    /** 自定义右上角控制按钮 */
+    renderControl?: ReactNode;
+    transformWrapperProps?: ReactZoomPanPinchProps;
+    transformWrapperRef?: Ref<ReactZoomPanPinchContentRef>;
 }
 export declare const ImagePreview: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImagePreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -10,23 +10,23 @@ 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, closable = true, transformWrapper, ...props }, ref) => {
+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 [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
-    const transformWrapperRef = (0, react_1.useRef)(null);
+    const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
+    const innerTransformWrapperRef = (0, react_1.useRef)(null);
     const imgLoaded = () => {
-        transformWrapperRef.current.centerView();
+        innerTransformWrapperRef.current.centerView();
     };
     const prev = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o - 1 + srcArr.length) % srcArr.length);
-        transformWrapperRef.current?.resetTransform();
+        setInnerIndex(o => (o - 1 + srcArr.length) % srcArr.length);
+        innerTransformWrapperRef.current?.resetTransform();
     };
     const next = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o + 1) % srcArr.length);
-        transformWrapperRef.current?.resetTransform();
+        setInnerIndex(o => (o + 1) % srcArr.length);
+        innerTransformWrapperRef.current?.resetTransform();
     };
     const [rotate, setRotate] = (0, react_1.useState)(0);
     const isPanning = (0, react_1.useRef)(false);
@@ -37,10 +37,19 @@ exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], de
         color: 'text'
     };
     return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: ref, css: imagePreview_style_1.style, className: (0, utils_1.classnames)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
-            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, 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, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => transformWrapperRef.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: () => transformWrapperRef.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: () => transformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) }), closable &&
+            ...props.maskProps,
+            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, children: [renderControl, showRotate &&
+                                (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] })] })] }))
-        }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapper, ref: transformWrapperRef, minScale: .2, onPanning: () => isPanning.current = true, onPanningStop: () => 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: {
+                        (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;
+            }, onPanningStop: (ref, e) => {
+                transformWrapperProps?.onPanningStop?.(ref, e);
+                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 }) }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
 }));

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

@@ -1 +1,2 @@
 export * from './image';
+export * from './imagePreview';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./image"), exports);
+tslib_1.__exportStar(require("./imagePreview"), exports);

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -64,7 +64,7 @@ exports.DocumentViewer = (0, react_1.memo)((0, react_1.forwardRef)(({ src, filen
     }
     // image
     if (mimeType.includes('image/')) {
-        return (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: src, open: true, closable: false });
+        return (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: src, open: true, showClose: false });
     }
     return empty;
 }));

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

@@ -1,10 +1,22 @@
+import { Ref, ReactNode } from 'react';
 import { ModalProps } from '../modal';
-import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+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;
-    closable?: boolean;
-    transformWrapper?: ReactZoomPanPinchProps;
+    /** 是否渲染旋转按钮{@default true} */
+    showRotate?: boolean;
+    /** 是否渲染放大缩小按钮{@default true} */
+    showZoom?: boolean;
+    /** 是否渲染关闭按钮{@default true }*/
+    showClose?: boolean;
+    /** 自定义右上角控制按钮 */
+    renderControl?: ReactNode;
+    transformWrapperProps?: ReactZoomPanPinchProps;
+    transformWrapperRef?: Ref<ReactZoomPanPinchContentRef>;
 }
 export declare const ImagePreview: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImagePreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -1,29 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+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, useControlled } from '../../utils';
+import { classnames, cloneRef, 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, closable = true, transformWrapper, ...props }, ref) => {
+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 [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const [activeIndex, setActiveIndex] = useState(0);
-    const transformWrapperRef = useRef(null);
+    const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
+    const innerTransformWrapperRef = useRef(null);
     const imgLoaded = () => {
-        transformWrapperRef.current.centerView();
+        innerTransformWrapperRef.current.centerView();
     };
     const prev = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o - 1 + srcArr.length) % srcArr.length);
-        transformWrapperRef.current?.resetTransform();
+        setInnerIndex(o => (o - 1 + srcArr.length) % srcArr.length);
+        innerTransformWrapperRef.current?.resetTransform();
     };
     const next = (e) => {
         e.stopPropagation();
-        setActiveIndex(o => (o + 1) % srcArr.length);
-        transformWrapperRef.current?.resetTransform();
+        setInnerIndex(o => (o + 1) % srcArr.length);
+        innerTransformWrapperRef.current?.resetTransform();
     };
     const [rotate, setRotate] = useState(0);
     const isPanning = useRef(false);
@@ -34,10 +34,19 @@ export const ImagePreview = memo(forwardRef(({ src = [], defaultOpen = false, op
         color: 'text'
     };
     return (_jsx(Modal, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, maskProps: {
-            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, 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, {}) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) }), closable &&
+            ...props.maskProps,
+            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotate &&
+                                _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] })] })] }))
-        }, children: _jsx(TransformWrapper, { smooth: false, ...transformWrapper, ref: transformWrapperRef, minScale: .2, onPanning: () => isPanning.current = true, onPanningStop: () => isPanning.current && setTimeout(() => isPanning.current = false), children: _jsx(TransformComponent, { wrapperClass: classes.imageWrapper, contentClass: classes.image, wrapperProps: {
+                        _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;
+            }, onPanningStop: (ref, e) => {
+                transformWrapperProps?.onPanningStop?.(ref, e);
+                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 }) }) }) }));
+                }, children: _jsx("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
 }));

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

@@ -1 +1,2 @@
 export * from './image';
+export * from './imagePreview';

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

@@ -1 +1,2 @@
 export * from './image';
+export * from './imagePreview';

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -58,7 +58,7 @@ export const DocumentViewer = memo(forwardRef(({ src, filename, onError, type, e
     }
     // image
     if (mimeType.includes('image/')) {
-        return _jsx(ImagePreview, { src: src, open: true, closable: false });
+        return _jsx(ImagePreview, { src: src, open: true, showClose: false });
     }
     return empty;
 }));

package/package.json

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