@canlooks/can-ui 0.0.67 → 0.0.69

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { memo, useMemo, useRef, useState } from 'react';
 import { classes, svgStyle } from './documentViewer.style';
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { clsx } from '../../utils';
 import { Button } from '../../components/button';
 import { Tooltip } from '../../components/tooltip';
@@ -10,7 +9,7 @@ import { Switch } from '../../components/switch';
 import { ThemeProvider, useTheme } from '../../components/theme';
 import { Loading } from '../../components/loading';
 import { useBlob, useDocumentTitle } from './documentViewer';
-import { Icon } from '../..';
+import { Icon } from '../../components/icon';
 import { faDiagramProject } from '@fortawesome/free-solid-svg-icons/faDiagramProject';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
@@ -20,6 +19,7 @@ import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
 import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
+import { Pinchable } from '../../components/pinchable';
 const commonButtonProps = {
     variant: 'text',
     shape: 'circular'
@@ -27,7 +27,7 @@ const commonButtonProps = {
 export const SvgViewer = memo((props) => {
     return (_jsx(ThemeProvider, { children: _jsx(SvgViewerContent, { ...props }) }));
 });
-function SvgViewerContent({ showDownload = true, themeSwitchable = true, onThemeChange, transformWrapperProps, 
+function SvgViewerContent({ showDownload = true, themeSwitchable = true, onThemeChange, pinchableProps, 
 // 从DocumentViewerBaseProps继承来的属性
 src, filename, onError, setDocumentTitle, ...props }) {
     /**
@@ -57,13 +57,17 @@ src, filename, onError, setDocumentTitle, ...props }) {
             return URL.createObjectURL(file);
         }
         return;
-    }, [blob]);
+    }, [blob, filename]);
     /**
      * ---------------------------------------------------------------
      * 工具栏
      */
-    const transformWrapperRef = useRef(null);
+    const pinchableRef = useRef(null);
     const [rotate, setRotate] = useState(0);
+    const resetHandler = () => {
+        pinchableRef.current.reset();
+        setRotate(0);
+    };
     const downloadHandler = () => {
         if (src) {
             const a = document.createElement('a');
@@ -73,9 +77,9 @@ src, filename, onError, setDocumentTitle, ...props }) {
         }
     };
     const objectOnLoad = () => {
-        transformWrapperRef.current.centerView();
+        // transformWrapperRef.current!.centerView()
     };
-    return (_jsxs(Loading, { ...props, css: svgStyle, className: clsx(classes.svgViewer, props.className), open: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(Icon, { icon: faDiagramProject, className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faRotateRight }) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(Icon, { icon: faExpand }) }) }), themeSwitchable &&
+    return (_jsxs(Loading, { ...props, css: svgStyle, className: clsx(classes.svgViewer, props.className), open: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(Icon, { icon: faDiagramProject, className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faRotateRight }) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => pinchableRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => pinchableRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: resetHandler, children: _jsx(Icon, { icon: faExpand }) }) }), themeSwitchable &&
                                 _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Switch, { checkedLabel: _jsx(Icon, { icon: faSun }), unCheckedLabel: _jsx(Icon, { icon: faMoon }), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
-                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(Icon, { icon: faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: _jsx(TransformComponent, { wrapperClass: classes.svgContainer, contentClass: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
+                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(Icon, { icon: faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(Pinchable, { ...pinchableProps, ref: pinchableRef, className: clsx(classes.svgContainer, pinchableProps?.className), children: _jsx("div", { className: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
 }

package/dist/esm/utils/hooks.d.ts

@@ -1,4 +1,5 @@
 import { RefObject, Dispatch, SetStateAction } from 'react';
+import { DefineElement } from '../types';
 /**
  * 获取渲染前的值
  * @param value
@@ -48,3 +49,10 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
     (...args: A) => Promise<R>,
     Dispatch<SetStateAction<boolean>>
 ];
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;

package/dist/esm/utils/hooks.js

@@ -113,3 +113,24 @@ export function useLoading(fn, referredLoading = false) {
         setLoading
     ];
 }
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+export function useContainer(container, effectContainer, defaultContainer = document.body) {
+    const [containerEl, setContainerEl] = useDerivedState(prev => {
+        if (container) {
+            return typeof container === 'function' ? container() : container;
+        }
+        return prev || defaultContainer;
+    }, [container, defaultContainer]);
+    useEffect(() => {
+        if (effectContainer) {
+            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+            setContainerEl(el);
+        }
+    }, []);
+    return containerEl;
+}