@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/DocumentViewer/DocumentViewer.js

@@ -1,46 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@alveole/components';
-import React from 'react';
+import { Box } from '../../core/Box';
 import { useStyles } from './DocumentViewer.styles';
 import { DocumentViewerImage } from './DocumentViewerImage';
 import { DocumentViewerPDF } from './DocumentViewerPDF';
 import { DocumentViewerToolbar } from './DocumentViewerToolbar';
-export const isDocumentViewerRotation = (value) => [0, 90, 180, 270].includes(value);
+import { usePilotageDeDocument } from './usePilotageDeDocument';
 export const DocumentViewer = (props) => {
     const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, ...boxProps } = props;
     const styles = useStyles();
-    const [rotation, setRotation] = React.useState(0);
-    const [page, setPage] = React.useState(1);
-    const [totalPages, setTotalPages] = React.useState(type === 'image' ? 1 : 1);
-    const state = React.useMemo(() => {
-        return {
-            fileType: type,
-            rotation,
-            page,
-            totalPages,
-        };
-    }, [type, rotation, page, totalPages]);
-    const handleRotate = React.useCallback((direction) => {
-        let newRotation = direction === 'right' ? rotation + 90 : rotation - 90;
-        if (newRotation < 0)
-            newRotation = 270;
-        if (newRotation > 270)
-            newRotation = 0;
-        if (isDocumentViewerRotation(newRotation))
-            setRotation(newRotation);
-    }, [rotation]);
-    const handleNextPage = React.useCallback(() => {
-        setPage(currentPage => Math.min(currentPage + 1, totalPages));
-    }, [totalPages]);
-    const handlePreviousPage = React.useCallback(() => {
-        setPage(currentPage => Math.max(currentPage - 1, 1));
-    }, []);
-    const handlePdfReady = React.useCallback((proxy) => {
-        setTotalPages(proxy.numPages);
-        setPage(currentPage => Math.min(currentPage, proxy.numPages));
-    }, []);
-    return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: () => handleRotate('left'), onRotateRight: () => handleRotate('right'), onNextPage: handleNextPage, onPreviousPage: handlePreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
+    const { rotation, page, state, onPdfReady, onRotateLeft, onRotateRight, onNextPage, onPreviousPage } = usePilotageDeDocument(type);
+    return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: onRotateLeft, onRotateRight: onRotateRight, onNextPage: onNextPage, onPreviousPage: onPreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
                             ...styles.viewerContainer,
                             ...(children ? { borderBottomRightRadius: 0 } : {}),
-                        }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: handlePdfReady, errorLabel: pdfErrorLabel }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
+                        }, children: _jsxs(Box, { flex: 1, children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: onPdfReady, errorLabel: pdfErrorLabel }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
 };

package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts

@@ -4,55 +4,74 @@ declare const _default: {
     experimental: false;
     webOnly: true;
     description: string;
-    component: (props: import("@alveole/components").DocumentViewerProps) => import("react").JSX.Element;
+    component: (props: import("./DocumentViewer.types").DocumentViewerProps) => import("react").JSX.Element;
     styleFn: () => {
-        toolbar: {
-            padding: string | number;
-            borderColor: string;
-            borderWidth: number;
-            borderStyle: "solid";
-            borderTopLeftRadius: import("@alveole/theme").Radius;
-            borderTopRightRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+        viewerPdfContent: {
             display: "flex";
             flexDirection: "row";
-            gap: string | number;
-            justifyContent: "space-between";
+            justifyContent: "center";
+            alignItems: "center";
+            overflow: "hidden";
+            cursor: "crosshair";
+            userSelect: "none";
         };
-        toolbarAction: {
+        viewerPdfStage: {
+            position: "relative";
             display: "flex";
             flexDirection: "row";
-            gap: string | number;
-            justifyContent: "flex-end";
+            justifyContent: "center";
+            alignItems: "center";
+            overflow: "hidden";
+            width: "100%";
+            height: "100%";
         };
-        toolbarTitle: {
-            color: string;
-            paddingLeft: string | number;
-            marginTop: string;
-            marginBottom: string;
-            userSelect: "none";
-            fontSize: 16;
-            lineHeight: 24;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        viewerPdfCanvasWrapper: {
+            display: "flex";
+            justifyContent: "center";
+            alignItems: "center";
+            transitionProperty: "transform";
+            transitionDuration: "120ms";
+            transitionTimingFunction: "ease-out";
+            transitionDelay: "0ms";
         };
-        toolbarState: {
+        viewerPdfCanvas: {
+            display: "block";
+            maxWidth: string;
+        };
+        viewerPdfOverlay: {
+            position: "absolute";
+            inset: number;
+            display: "flex";
+            alignItems: "center";
+            justifyContent: "center";
+            backgroundColor: string;
+        };
+        viewerPdfErrorLabel: {
             color: string;
             userSelect: "none";
-            fontVariant: "tabular-nums";
+            textAlign: "center";
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        toolbarDivider: {
-            width: number;
-            height: "50%";
-            backgroundColor: string;
-            marginTop: string;
-            marginBottom: string;
+        viewerImageContent: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "center";
+            alignItems: "center";
+            overflow: "hidden";
+            cursor: "crosshair";
+            userSelect: "none";
+        };
+        viewerImageZoomLayer: {
+            width: "100%";
+            height: "100%";
+            transitionProperty: "transform";
+            transitionDuration: "120ms";
+            transitionTimingFunction: "ease-out";
+            transitionDelay: "0ms";
         };
         viewerWrapper: {
             display: "flex";
@@ -90,73 +109,54 @@ declare const _default: {
             backgroundColor: string;
             overflow: "auto";
         };
-        viewerImageContent: {
-            display: "flex";
-            flexDirection: "row";
-            justifyContent: "center";
-            alignItems: "center";
-            overflow: "hidden";
-            cursor: "crosshair";
-            userSelect: "none";
-        };
-        viewerImageZoomLayer: {
-            width: "100%";
-            height: "100%";
-            transitionProperty: "transform";
-            transitionDuration: "120ms";
-            transitionTimingFunction: "ease-out";
-            transitionDelay: "0ms";
-        };
-        viewerPdfContent: {
+        toolbar: {
+            padding: string | number;
+            borderColor: string;
+            borderWidth: number;
+            borderStyle: "solid";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            backgroundColor: string;
             display: "flex";
             flexDirection: "row";
-            justifyContent: "center";
-            alignItems: "center";
-            overflow: "hidden";
-            cursor: "crosshair";
-            userSelect: "none";
+            gap: string | number;
+            justifyContent: "space-between";
         };
-        viewerPdfStage: {
-            position: "relative";
+        toolbarAction: {
             display: "flex";
             flexDirection: "row";
-            justifyContent: "center";
-            alignItems: "center";
-            overflow: "hidden";
-            width: "100%";
-            height: "100%";
-        };
-        viewerPdfCanvasWrapper: {
-            display: "flex";
-            justifyContent: "center";
-            alignItems: "center";
-            transitionProperty: "transform";
-            transitionDuration: "120ms";
-            transitionTimingFunction: "ease-out";
-            transitionDelay: "0ms";
-        };
-        viewerPdfCanvas: {
-            display: "block";
-            maxWidth: string;
+            gap: string | number;
+            justifyContent: "flex-end";
         };
-        viewerPdfOverlay: {
-            position: "absolute";
-            inset: number;
-            display: "flex";
-            alignItems: "center";
-            justifyContent: "center";
-            backgroundColor: string;
+        toolbarTitle: {
+            color: string;
+            paddingLeft: string | number;
+            marginTop: string;
+            marginBottom: string;
+            userSelect: "none";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        viewerPdfErrorLabel: {
+        toolbarState: {
             color: string;
             userSelect: "none";
-            textAlign: "center";
+            fontVariant: "tabular-nums";
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
+        toolbarDivider: {
+            width: number;
+            height: "50%";
+            backgroundColor: string;
+            marginTop: string;
+            marginBottom: string;
+        };
     };
 };
 export default _default;

package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,eAAe,mCAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAaxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,eAAe,mCAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAaxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '@alveole/components';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { DocumentViewer } from './DocumentViewer';
 import { useStyles } from './DocumentViewer.styles';
 export default {

package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts

@@ -1,51 +1,70 @@
 export declare const useStyles: () => {
-    toolbar: {
-        padding: string | number;
-        borderColor: string;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderTopLeftRadius: import("@alveole/theme").Radius;
-        borderTopRightRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+    viewerPdfContent: {
         display: "flex";
         flexDirection: "row";
-        gap: string | number;
-        justifyContent: "space-between";
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+        cursor: "crosshair";
+        userSelect: "none";
     };
-    toolbarAction: {
+    viewerPdfStage: {
+        position: "relative";
         display: "flex";
         flexDirection: "row";
-        gap: string | number;
-        justifyContent: "flex-end";
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+        width: "100%";
+        height: "100%";
     };
-    toolbarTitle: {
-        color: string;
-        paddingLeft: string | number;
-        marginTop: string;
-        marginBottom: string;
-        userSelect: "none";
-        fontSize: 16;
-        lineHeight: 24;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    viewerPdfCanvasWrapper: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        transitionProperty: "transform";
+        transitionDuration: "120ms";
+        transitionTimingFunction: "ease-out";
+        transitionDelay: "0ms";
     };
-    toolbarState: {
+    viewerPdfCanvas: {
+        display: "block";
+        maxWidth: string;
+    };
+    viewerPdfOverlay: {
+        position: "absolute";
+        inset: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        backgroundColor: string;
+    };
+    viewerPdfErrorLabel: {
         color: string;
         userSelect: "none";
-        fontVariant: "tabular-nums";
+        textAlign: "center";
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    toolbarDivider: {
-        width: number;
-        height: "50%";
-        backgroundColor: string;
-        marginTop: string;
-        marginBottom: string;
+    viewerImageContent: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+        cursor: "crosshair";
+        userSelect: "none";
+    };
+    viewerImageZoomLayer: {
+        width: "100%";
+        height: "100%";
+        transitionProperty: "transform";
+        transitionDuration: "120ms";
+        transitionTimingFunction: "ease-out";
+        transitionDelay: "0ms";
     };
     viewerWrapper: {
         display: "flex";
@@ -83,72 +102,53 @@ export declare const useStyles: () => {
         backgroundColor: string;
         overflow: "auto";
     };
-    viewerImageContent: {
-        display: "flex";
-        flexDirection: "row";
-        justifyContent: "center";
-        alignItems: "center";
-        overflow: "hidden";
-        cursor: "crosshair";
-        userSelect: "none";
-    };
-    viewerImageZoomLayer: {
-        width: "100%";
-        height: "100%";
-        transitionProperty: "transform";
-        transitionDuration: "120ms";
-        transitionTimingFunction: "ease-out";
-        transitionDelay: "0ms";
-    };
-    viewerPdfContent: {
+    toolbar: {
+        padding: string | number;
+        borderColor: string;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
         display: "flex";
         flexDirection: "row";
-        justifyContent: "center";
-        alignItems: "center";
-        overflow: "hidden";
-        cursor: "crosshair";
-        userSelect: "none";
+        gap: string | number;
+        justifyContent: "space-between";
     };
-    viewerPdfStage: {
-        position: "relative";
+    toolbarAction: {
         display: "flex";
         flexDirection: "row";
-        justifyContent: "center";
-        alignItems: "center";
-        overflow: "hidden";
-        width: "100%";
-        height: "100%";
-    };
-    viewerPdfCanvasWrapper: {
-        display: "flex";
-        justifyContent: "center";
-        alignItems: "center";
-        transitionProperty: "transform";
-        transitionDuration: "120ms";
-        transitionTimingFunction: "ease-out";
-        transitionDelay: "0ms";
-    };
-    viewerPdfCanvas: {
-        display: "block";
-        maxWidth: string;
+        gap: string | number;
+        justifyContent: "flex-end";
     };
-    viewerPdfOverlay: {
-        position: "absolute";
-        inset: number;
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        backgroundColor: string;
+    toolbarTitle: {
+        color: string;
+        paddingLeft: string | number;
+        marginTop: string;
+        marginBottom: string;
+        userSelect: "none";
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    viewerPdfErrorLabel: {
+    toolbarState: {
         color: string;
         userSelect: "none";
-        textAlign: "center";
+        fontVariant: "tabular-nums";
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
+    toolbarDivider: {
+        width: number;
+        height: "50%";
+        backgroundColor: string;
+        marginTop: string;
+        marginBottom: string;
+    };
 };
 //# sourceMappingURL=DocumentViewer.styles.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4InB,CAAC"}
+{"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAoKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }) => ({
+const barreDOutils = ({ text, color, spacing, radius }) => ({
     toolbar: {
         padding: spacing('1W'),
         borderColor: color.light.border['default-grey'],
@@ -40,6 +40,8 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
         marginTop: 'auto',
         marginBottom: 'auto',
     },
+});
+const cadre = ({ color, spacing, radius, isVariant }) => ({
     viewerWrapper: {
         display: 'flex',
         flexDirection: 'row',
@@ -76,6 +78,8 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
         backgroundColor: color.light.background['default-grey'],
         overflow: 'auto',
     },
+});
+const apercuImage = () => ({
     viewerImageContent: {
         display: 'flex',
         flexDirection: 'row',
@@ -93,6 +97,8 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
         transitionTimingFunction: 'ease-out',
         transitionDelay: '0ms',
     },
+});
+const apercuPdf = ({ text, color }) => ({
     viewerPdfContent: {
         display: 'flex',
         flexDirection: 'row',
@@ -139,4 +145,10 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
         userSelect: 'none',
         textAlign: 'center',
     },
+});
+export const useStyles = makeStyles(theme => ({
+    ...barreDOutils(theme),
+    ...cadre(theme),
+    ...apercuImage(),
+    ...apercuPdf(theme),
 }));

package/dist/ui/DocumentViewer/DocumentViewer.types.d.ts

@@ -0,0 +1,12 @@
+import type { BoxProps } from '../../core/Box';
+export type DocumentViewerRotation = 0 | 90 | 180 | 270;
+export declare const isDocumentViewerRotation: (value: number) => value is DocumentViewerRotation;
+export type DocumentViewerProps = BoxProps & {
+    type: 'image' | 'pdf';
+    title: string;
+    source: string;
+    height?: BoxProps['height'];
+    ChildrenProps?: Omit<BoxProps, 'children'>;
+    pdfErrorLabel?: string;
+};
+//# sourceMappingURL=DocumentViewer.types.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentViewer.types.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAExD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.types.js

@@ -0,0 +1 @@
+export const isDocumentViewerRotation = (value) => [0, 90, 180, 270].includes(value);

package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts

@@ -1,6 +1,6 @@
-import { BoxProps } from '@alveole/components';
 import React from 'react';
-import { DocumentViewerRotation } from './DocumentViewer';
+import { BoxProps } from '../../core/Box';
+import { DocumentViewerRotation } from './DocumentViewer.types';
 export type DocumentViewerImageProps = {
     source: string;
     height?: BoxProps['height'];

package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAS,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,sBA8ClE,CAAC"}
+{"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIhE,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,sBA6ClE,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerImage.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Image } from '@alveole/components';
 import React from 'react';
+import { Box } from '../../core/Box';
+import { Image } from '../../core/Image';
 import { useStyles } from './DocumentViewer.styles';
+import { positionEnPourcentage } from './documentViewerPdfCalculs';
+import { lirePointeurWeb } from './pointeurWeb';
 export const DocumentViewerImage = (props) => {
     const { source, rotation, height, scale = 1 } = props;
     const styles = useStyles();
@@ -9,17 +12,15 @@ export const DocumentViewerImage = (props) => {
     const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
     const hoveredScale = isHovered ? 2 : 1;
     const handlePointerMove = React.useCallback((event) => {
-        const rect = event.currentTarget?.getBoundingClientRect?.();
-        if (!rect)
+        const pointeur = lirePointeurWeb(event);
+        if (!pointeur)
             return;
-        const x = ((event.clientX - rect.left) / rect.width) * 100;
-        const y = ((event.clientY - rect.top) / rect.height) * 100;
+        const { x, y } = positionEnPourcentage(pointeur);
         const origin = getRotatedTransformOrigin(x, y, rotation);
-        setTransformOrigin(`${clampPercent(origin.x)}% ${clampPercent(origin.y)}%`);
+        setTransformOrigin(`${origin.x}% ${origin.y}%`);
     }, [rotation]);
     return (_jsx(Box, { tag: "document-viewer-image", width: '100%', height: height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerImageContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', children: _jsx(Box, { width: '100%', height: '100%', style: { transform: [{ rotate: `${rotation}deg` }] }, children: _jsx(Box, { width: '100%', height: '100%', style: [styles.viewerImageZoomLayer, { transformOrigin }, { transform: [{ scale: scale * hoveredScale }] }], children: _jsx(Image, { source: { uri: source }, contentFit: "contain", width: '100%', height: '100%', pointerEvents: "none" }) }) }) }) }));
 };
-const clampPercent = (value) => Math.max(0, Math.min(100, value));
 const getRotatedTransformOrigin = (x, y, rotation) => {
     switch (rotation) {
         case 90:

package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts

@@ -1,16 +1,2 @@
-import { BoxProps } from '@alveole/components';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
-import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
-import React from 'react';
-import { DocumentViewerRotation } from './DocumentViewer';
-export type DocumentViewerPDFProps = {
-    source: string;
-    page: number;
-    height?: BoxProps['height'];
-    rotation: DocumentViewerRotation;
-    scale?: number;
-    onReady?: (state: PDFDocumentProxy) => void;
-    errorLabel?: string;
-};
-export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => React.JSX.Element;
+export * from './DocumentViewerPDF.web';
 //# sourceMappingURL=DocumentViewerPDF.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6K9D,CAAC"}
+{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAKA,cAAc,yBAAyB,CAAC"}