@canlooks/can-ui 0.0.18 → 0.0.19

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) => {
+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 [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/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

@@ -7,22 +7,22 @@ import { CloseOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, RotateL
 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) => {
+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 [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/package.json

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