@alveole/components 1.8.0 → 1.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/generated/version.d.ts +1 -1
- package/dist/generated/version.js +1 -1
- package/dist/ui/DocumentViewer/DocumentViewer.d.ts +1 -0
- package/dist/ui/DocumentViewer/DocumentViewer.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewer.js +2 -2
- package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts +11 -0
- package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewer.stories.js +3 -2
- package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.d.ts +2 -0
- package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewer.stories.sources.js +4 -2
- package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts +10 -0
- package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewer.styles.js +6 -0
- package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts +1 -0
- package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewerPDF.js +20 -13
- package/dist/ui/DocumentViewer/DocumentViewerPDF.native.d.ts +1 -0
- package/dist/ui/DocumentViewer/DocumentViewerPDF.native.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts +1 -0
- package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts.map +1 -1
- package/dist/ui/DocumentViewer/DocumentViewerPDF.web.js +43 -21
- package/dist/ui/FilterDate/FilterDate.stories.d.ts +3 -1
- package/dist/ui/FilterDate/FilterDate.stories.d.ts.map +1 -1
- package/dist/ui/FilterDate/FilterDate.styles.d.ts +3 -1
- package/dist/ui/FilterDate/FilterDate.styles.d.ts.map +1 -1
- package/dist/ui/FilterDate/FilterDate.styles.js +3 -1
- package/dist/ui/LucideIcon/LucideIcon.props.d.ts +186 -0
- package/dist/ui/LucideIcon/LucideIcon.props.d.ts.map +1 -1
- package/dist/ui/LucideIcon/LucideIcon.stories.d.ts +93 -0
- package/dist/ui/LucideIcon/LucideIcon.stories.d.ts.map +1 -1
- package/package.json +10 -10
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.
|
|
1
|
+
export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.2";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const ALVEOLE_COMPONENTS_VERSION = "1.8.
|
|
1
|
+
export const ALVEOLE_COMPONENTS_VERSION = "1.8.2";
|
|
@@ -8,6 +8,7 @@ export type DocumentViewerProps = BoxProps & {
|
|
|
8
8
|
source: string;
|
|
9
9
|
height?: BoxProps['height'];
|
|
10
10
|
ChildrenProps?: Omit<BoxProps, 'children'>;
|
|
11
|
+
pdfErrorLabel?: string;
|
|
11
12
|
};
|
|
12
13
|
export declare const DocumentViewer: (props: DocumentViewerProps) => React.JSX.Element;
|
|
13
14
|
//# sourceMappingURL=DocumentViewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,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;
|
|
1
|
+
{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,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;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAoFxD,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { DocumentViewerPDF } from './DocumentViewerPDF';
|
|
|
7
7
|
import { DocumentViewerToolbar } from './DocumentViewerToolbar';
|
|
8
8
|
export const isDocumentViewerRotation = (value) => [0, 90, 180, 270].includes(value);
|
|
9
9
|
export const DocumentViewer = (props) => {
|
|
10
|
-
const { children, title, source, type, height = '100%', ChildrenProps, ...boxProps } = props;
|
|
10
|
+
const { children, title, source, type, height = '100%', ChildrenProps, pdfErrorLabel, ...boxProps } = props;
|
|
11
11
|
const styles = useStyles();
|
|
12
12
|
const [rotation, setRotation] = React.useState(0);
|
|
13
13
|
const [page, setPage] = React.useState(1);
|
|
@@ -42,5 +42,5 @@ export const DocumentViewer = (props) => {
|
|
|
42
42
|
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: {
|
|
43
43
|
...styles.viewerContainer,
|
|
44
44
|
...(children ? { borderBottomRightRadius: 0 } : {}),
|
|
45
|
-
}, 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 }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", ...ChildrenProps, style: [styles.children, ChildrenProps?.style], children: children }))] }));
|
|
45
|
+
}, 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 }))] }));
|
|
46
46
|
};
|
|
@@ -147,11 +147,22 @@ declare const _default: {
|
|
|
147
147
|
justifyContent: "center";
|
|
148
148
|
backgroundColor: string;
|
|
149
149
|
};
|
|
150
|
+
viewerPdfErrorLabel: {
|
|
151
|
+
color: string;
|
|
152
|
+
userSelect: "none";
|
|
153
|
+
textAlign: "center";
|
|
154
|
+
fontSize: 14;
|
|
155
|
+
lineHeight: 20;
|
|
156
|
+
letterSpacing: 0;
|
|
157
|
+
fontFamily: string;
|
|
158
|
+
fontWeight?: import("react-native").TextStyle["fontWeight"];
|
|
159
|
+
};
|
|
150
160
|
};
|
|
151
161
|
};
|
|
152
162
|
export default _default;
|
|
153
163
|
export declare const DocumentImageEx: () => import("react").JSX.Element;
|
|
154
164
|
export declare const DocumentPdf: () => import("react").JSX.Element;
|
|
165
|
+
export declare const DocumentPdfError: () => import("react").JSX.Element;
|
|
155
166
|
export declare const WithChildren: () => import("react").JSX.Element;
|
|
156
167
|
export * as Sources from './DocumentViewer.stories.sources';
|
|
157
168
|
//# sourceMappingURL=DocumentViewer.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -12,6 +12,7 @@ export default {
|
|
|
12
12
|
styleFn: useStyles,
|
|
13
13
|
};
|
|
14
14
|
export const DocumentImageEx = () => (_jsx(Box, { maxW: 500, height: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", source: "https://picsum.photos/1000/2000", height: "100%" }) }));
|
|
15
|
-
export const DocumentPdf = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://
|
|
16
|
-
export const
|
|
15
|
+
export const DocumentPdf = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf", height: "100%" }) }));
|
|
16
|
+
export const DocumentPdfError = () => (_jsx(Box, { height: 400, maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF en erreur", type: "pdf", source: "https://example.com/document-inexistant.pdf", height: "100%" }) }));
|
|
17
|
+
export const WithChildren = () => (_jsx(Box, { height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf", height: "100%", children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
|
|
17
18
|
export * as Sources from './DocumentViewer.stories.sources';
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
export declare const DocumentImageEx: () => string;
|
|
2
2
|
export declare const DocumentPdf: () => string;
|
|
3
|
+
export declare const DocumentPdfError: () => string;
|
|
3
4
|
export declare const WithChildren: () => string;
|
|
4
5
|
export declare const storySources: {
|
|
5
6
|
readonly DocumentImageEx: () => string;
|
|
6
7
|
readonly DocumentPdf: () => string;
|
|
8
|
+
readonly DocumentPdfError: () => string;
|
|
7
9
|
readonly WithChildren: () => string;
|
|
8
10
|
};
|
|
9
11
|
export type StorySourceName = keyof typeof storySources;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA2N,CAAC;AAExP,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"DocumentViewer.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA2N,CAAC;AAExP,eAAO,MAAM,WAAW,cAA2R,CAAC;AAEpT,eAAO,MAAM,gBAAgB,cAA+Q,CAAC;AAE7S,eAAO,MAAM,YAAY,cAAuY,CAAC;AAEja,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
// This file is generated. Do not edit manually.
|
|
2
2
|
// Source: src/ui/DocumentViewer/DocumentViewer.stories.tsx
|
|
3
3
|
export const DocumentImageEx = () => "export const DocumentImageEx = () => (\n <Box maxW={500} height={500}>\n <DocumentViewer title=\"Document image\" type=\"image\" source=\"https://picsum.photos/1000/2000\" height=\"100%\" />\n </Box>\n);";
|
|
4
|
-
export const DocumentPdf = () => "export const DocumentPdf = () => (\n <Box height={400} maxW={500}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://
|
|
5
|
-
export const
|
|
4
|
+
export const DocumentPdf = () => "export const DocumentPdf = () => (\n <Box height={400} maxW={500}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf\"\n height=\"100%\"\n />\n </Box>\n);";
|
|
5
|
+
export const DocumentPdfError = () => "export const DocumentPdfError = () => (\n <Box height={400} maxW={500}>\n <DocumentViewer\n title=\"Document PDF en erreur\"\n type=\"pdf\"\n source=\"https://example.com/document-inexistant.pdf\"\n height=\"100%\"\n />\n </Box>\n);";
|
|
6
|
+
export const WithChildren = () => "export const WithChildren = () => (\n <Box height={600}>\n <DocumentViewer\n title=\"Document PDF\"\n type=\"pdf\"\n source=\"https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf\"\n height=\"100%\"\n >\n <Box p={'2W'} minW={600}>\n <Typography>Contenu enfant</Typography>\n </Box>\n </DocumentViewer>\n </Box>\n);";
|
|
6
7
|
export const storySources = {
|
|
7
8
|
DocumentImageEx,
|
|
8
9
|
DocumentPdf,
|
|
10
|
+
DocumentPdfError,
|
|
9
11
|
WithChildren,
|
|
10
12
|
};
|
|
@@ -140,5 +140,15 @@ export declare const useStyles: () => {
|
|
|
140
140
|
justifyContent: "center";
|
|
141
141
|
backgroundColor: string;
|
|
142
142
|
};
|
|
143
|
+
viewerPdfErrorLabel: {
|
|
144
|
+
color: string;
|
|
145
|
+
userSelect: "none";
|
|
146
|
+
textAlign: "center";
|
|
147
|
+
fontSize: 14;
|
|
148
|
+
lineHeight: 20;
|
|
149
|
+
letterSpacing: 0;
|
|
150
|
+
fontFamily: string;
|
|
151
|
+
fontWeight?: import("react-native").TextStyle["fontWeight"];
|
|
152
|
+
};
|
|
143
153
|
};
|
|
144
154
|
//# sourceMappingURL=DocumentViewer.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4InB,CAAC"}
|
|
@@ -133,4 +133,10 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
|
|
|
133
133
|
justifyContent: 'center',
|
|
134
134
|
backgroundColor: color.light.background['default-grey'],
|
|
135
135
|
},
|
|
136
|
+
viewerPdfErrorLabel: {
|
|
137
|
+
...text['Corps de texte'].SM.Regular,
|
|
138
|
+
color: color.light.text['default-error'],
|
|
139
|
+
userSelect: 'none',
|
|
140
|
+
textAlign: 'center',
|
|
141
|
+
},
|
|
136
142
|
}));
|
|
@@ -10,6 +10,7 @@ export type DocumentViewerPDFProps = {
|
|
|
10
10
|
rotation: DocumentViewerRotation;
|
|
11
11
|
scale?: number;
|
|
12
12
|
onReady?: (state: PDFDocumentProxy) => void;
|
|
13
|
+
errorLabel?: string;
|
|
13
14
|
};
|
|
14
15
|
export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => React.JSX.Element;
|
|
15
16
|
//# sourceMappingURL=DocumentViewerPDF.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,
|
|
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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Box } from '@alveole/components';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Typography } from '@alveole/components';
|
|
3
3
|
import * as pdfjs from 'pdfjs-dist';
|
|
4
4
|
import 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
|
|
5
5
|
import React from 'react';
|
|
@@ -8,14 +8,20 @@ import { useStyles } from './DocumentViewer.styles';
|
|
|
8
8
|
const isPdfCancellationError = (error) => {
|
|
9
9
|
if (!(error instanceof Error))
|
|
10
10
|
return false;
|
|
11
|
-
return (['RenderingCancelledException', 'AbortException'
|
|
11
|
+
return (['RenderingCancelledException', 'AbortException'].includes(error.name) ||
|
|
12
12
|
error.message.includes('Worker was terminated') ||
|
|
13
13
|
error.message.includes("Cannot read properties of null (reading 'sendWithPromise')"));
|
|
14
14
|
};
|
|
15
15
|
export const DocumentViewerPDF = (props) => {
|
|
16
|
-
const { source, page, rotation, height = '100%', scale = 1, onReady } = props;
|
|
16
|
+
const { source, page, rotation, height = '100%', scale = 1, onReady, errorLabel = 'Le PDF ne peut pas être affiché', } = props;
|
|
17
17
|
const styles = useStyles();
|
|
18
18
|
const [pdf, setPdf] = React.useState(null);
|
|
19
|
+
const [hasError, setHasError] = React.useState(false);
|
|
20
|
+
const [prevSource, setPrevSource] = React.useState(source);
|
|
21
|
+
if (prevSource !== source) {
|
|
22
|
+
setPrevSource(source);
|
|
23
|
+
setHasError(false);
|
|
24
|
+
}
|
|
19
25
|
const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
|
|
20
26
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
21
27
|
const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
|
|
@@ -36,6 +42,7 @@ export const DocumentViewerPDF = (props) => {
|
|
|
36
42
|
if (!active)
|
|
37
43
|
return;
|
|
38
44
|
setPdf(null);
|
|
45
|
+
setHasError(true);
|
|
39
46
|
};
|
|
40
47
|
const onPageLoadedSuccess = React.useCallback((pagePdf, active) => {
|
|
41
48
|
if (!active || !canvasRef.current)
|
|
@@ -117,13 +124,13 @@ export const DocumentViewerPDF = (props) => {
|
|
|
117
124
|
const y = ((event.clientY - rect.top) / rect.height) * 100;
|
|
118
125
|
setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
|
|
119
126
|
}, []);
|
|
120
|
-
return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children:
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [Platform.OS === 'web' && (_jsx(Box, { style: [
|
|
128
|
+
styles.viewerPdfCanvasWrapper,
|
|
129
|
+
{
|
|
130
|
+
width: renderedPageSize.width,
|
|
131
|
+
height: renderedPageSize.height,
|
|
132
|
+
transformOrigin,
|
|
133
|
+
transform: [{ scale: hoveredScale }],
|
|
134
|
+
},
|
|
135
|
+
], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) })), hasError && (_jsx(Box, { style: styles.viewerPdfOverlay, children: _jsx(Typography, { style: styles.viewerPdfErrorLabel, children: errorLabel }) }))] }) }));
|
|
129
136
|
};
|
|
@@ -9,6 +9,7 @@ export type DocumentViewerPDFProps = {
|
|
|
9
9
|
onReady?: (_state: {
|
|
10
10
|
numPages: number;
|
|
11
11
|
}) => void;
|
|
12
|
+
errorLabel?: string;
|
|
12
13
|
};
|
|
13
14
|
export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => import("react").JSX.Element;
|
|
14
15
|
//# sourceMappingURL=DocumentViewerPDF.native.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewerPDF.native.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AACrE,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,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"DocumentViewerPDF.native.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AACrE,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,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,gCAsB9D,CAAC"}
|
|
@@ -33,6 +33,7 @@ export type DocumentViewerPDFProps = {
|
|
|
33
33
|
rotation: DocumentViewerRotation;
|
|
34
34
|
scale?: number;
|
|
35
35
|
onReady?: (state: PDFDocumentProxyLike) => void;
|
|
36
|
+
errorLabel?: string;
|
|
36
37
|
};
|
|
37
38
|
export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => React.JSX.Element;
|
|
38
39
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QACjC,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,sBAAsB,CAAA;SAAE,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACjH,MAAM,EAAE,CAAC,OAAO,EAAE;YAChB,aAAa,EAAE,wBAAwB,CAAC;YACxC,QAAQ,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAC;YAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SAC9D,KAAK;YAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;QAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAUF,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,oBAAoB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA4M9D,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Box } from '@alveole/components';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Typography } from '@alveole/components';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { useStyles } from './DocumentViewer.styles';
|
|
5
5
|
const isPdfCancellationError = (error) => {
|
|
6
6
|
if (!(error instanceof Error))
|
|
7
7
|
return false;
|
|
8
|
-
return (['RenderingCancelledException', 'AbortException'
|
|
8
|
+
return (['RenderingCancelledException', 'AbortException'].includes(error.name) ||
|
|
9
9
|
error.message.includes('Worker was terminated') ||
|
|
10
10
|
error.message.includes("Cannot read properties of null (reading 'sendWithPromise')"));
|
|
11
11
|
};
|
|
@@ -34,14 +34,21 @@ const loadPdfJs = (() => {
|
|
|
34
34
|
};
|
|
35
35
|
})();
|
|
36
36
|
export const DocumentViewerPDF = (props) => {
|
|
37
|
-
const { source, page, rotation, height = '100%', scale = 1, onReady } = props;
|
|
37
|
+
const { source, page, rotation, height = '100%', scale = 1, onReady, errorLabel = 'Le PDF ne peut pas être affiché', } = props;
|
|
38
38
|
const styles = useStyles();
|
|
39
39
|
const [pdf, setPdf] = React.useState(null);
|
|
40
|
+
const [hasError, setHasError] = React.useState(false);
|
|
41
|
+
const [prevSource, setPrevSource] = React.useState(source);
|
|
42
|
+
if (prevSource !== source) {
|
|
43
|
+
setPrevSource(source);
|
|
44
|
+
setHasError(false);
|
|
45
|
+
}
|
|
40
46
|
const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
|
|
41
47
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
42
48
|
const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
|
|
43
49
|
const [renderedPageSize, setRenderedPageSize] = React.useState({ width: 0, height: 0 });
|
|
44
50
|
const canvasRef = React.useRef(null);
|
|
51
|
+
const measureRef = React.useRef(null);
|
|
45
52
|
const onReadyRef = React.useRef(onReady);
|
|
46
53
|
const hoveredScale = isHovered ? 2 : 1;
|
|
47
54
|
React.useEffect(() => {
|
|
@@ -60,6 +67,7 @@ export const DocumentViewerPDF = (props) => {
|
|
|
60
67
|
if (!active)
|
|
61
68
|
return;
|
|
62
69
|
setPdf(null);
|
|
70
|
+
setHasError(true);
|
|
63
71
|
}, []);
|
|
64
72
|
const onPageLoadedSuccess = React.useCallback(async (pagePdf, active) => {
|
|
65
73
|
if (!active || !canvasRef.current)
|
|
@@ -85,6 +93,27 @@ export const DocumentViewerPDF = (props) => {
|
|
|
85
93
|
transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
|
|
86
94
|
});
|
|
87
95
|
}, [rotation, scale, viewerSize.height, viewerSize.width]);
|
|
96
|
+
// ResizeObserver pour mesurer le conteneur — onLayout React Native for Web
|
|
97
|
+
// ne fonctionne pas avec les custom HTML tags (tag="document-viewer-pdf").
|
|
98
|
+
React.useEffect(() => {
|
|
99
|
+
const el = measureRef.current;
|
|
100
|
+
if (!el)
|
|
101
|
+
return;
|
|
102
|
+
const update = (width, height) => {
|
|
103
|
+
if (width > 0 && height > 0) {
|
|
104
|
+
setViewerSize({ width, height });
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
const observer = new ResizeObserver(entries => {
|
|
108
|
+
const entry = entries[0];
|
|
109
|
+
if (entry)
|
|
110
|
+
update(entry.contentRect.width, entry.contentRect.height);
|
|
111
|
+
});
|
|
112
|
+
observer.observe(el);
|
|
113
|
+
const rect = el.getBoundingClientRect();
|
|
114
|
+
update(rect.width, rect.height);
|
|
115
|
+
return () => observer.disconnect();
|
|
116
|
+
}, []);
|
|
88
117
|
React.useEffect(() => {
|
|
89
118
|
let isActive = true;
|
|
90
119
|
let loadingTask = null;
|
|
@@ -92,7 +121,7 @@ export const DocumentViewerPDF = (props) => {
|
|
|
92
121
|
.then(pdfjs => {
|
|
93
122
|
if (!isActive)
|
|
94
123
|
return;
|
|
95
|
-
loadingTask = pdfjs.getDocument(source);
|
|
124
|
+
loadingTask = pdfjs.getDocument({ url: source });
|
|
96
125
|
return loadingTask.promise
|
|
97
126
|
.then(nextPdf => onPdfLoadedSuccess(nextPdf, isActive))
|
|
98
127
|
.catch(error => {
|
|
@@ -136,13 +165,6 @@ export const DocumentViewerPDF = (props) => {
|
|
|
136
165
|
renderTask?.cancel?.();
|
|
137
166
|
};
|
|
138
167
|
}, [pdf, page, rotation, scale, viewerSize, onPageLoadedSuccess, onPdfLoadedError]);
|
|
139
|
-
const handleLayout = React.useCallback((event) => {
|
|
140
|
-
const nextWidth = event?.nativeEvent?.layout?.width;
|
|
141
|
-
const nextHeight = event?.nativeEvent?.layout?.height;
|
|
142
|
-
if (typeof nextWidth === 'number' && nextWidth > 0 && typeof nextHeight === 'number' && nextHeight > 0) {
|
|
143
|
-
setViewerSize({ width: nextWidth, height: nextHeight });
|
|
144
|
-
}
|
|
145
|
-
}, []);
|
|
146
168
|
const handlePointerMove = React.useCallback((event) => {
|
|
147
169
|
const rect = event.currentTarget?.getBoundingClientRect?.();
|
|
148
170
|
if (!rect)
|
|
@@ -152,13 +174,13 @@ export const DocumentViewerPDF = (props) => {
|
|
|
152
174
|
setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
|
|
153
175
|
}, []);
|
|
154
176
|
React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
|
|
155
|
-
return (
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
177
|
+
return (_jsxs(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: [styles.viewerPdfContent, { position: 'relative' }], children: [_jsx("div", { ref: measureRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }), _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [_jsx(Box, { style: [
|
|
178
|
+
styles.viewerPdfCanvasWrapper,
|
|
179
|
+
{
|
|
180
|
+
width: renderedPageSize.width,
|
|
181
|
+
height: renderedPageSize.height,
|
|
182
|
+
transformOrigin,
|
|
183
|
+
transform: [{ scale: hoveredScale }],
|
|
184
|
+
},
|
|
185
|
+
], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) }), hasError && (_jsx(Box, { style: styles.viewerPdfOverlay, children: _jsx(Typography, { style: styles.viewerPdfErrorLabel, children: errorLabel }) }))] })] }));
|
|
164
186
|
};
|
|
@@ -10,6 +10,8 @@ declare const _default: {
|
|
|
10
10
|
display: "flex";
|
|
11
11
|
flexDirection: "column";
|
|
12
12
|
gap: string | number;
|
|
13
|
+
paddingTop: string | number;
|
|
14
|
+
paddingBottom: string | number;
|
|
13
15
|
};
|
|
14
16
|
partContainer: {
|
|
15
17
|
display: "flex";
|
|
@@ -20,7 +22,7 @@ declare const _default: {
|
|
|
20
22
|
};
|
|
21
23
|
partTitle: {
|
|
22
24
|
color: string;
|
|
23
|
-
fontSize:
|
|
25
|
+
fontSize: 14;
|
|
24
26
|
lineHeight: 20;
|
|
25
27
|
letterSpacing: 0;
|
|
26
28
|
fontFamily: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC
|
|
1
|
+
{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
|
|
@@ -3,6 +3,8 @@ export declare const useStyles: () => {
|
|
|
3
3
|
display: "flex";
|
|
4
4
|
flexDirection: "column";
|
|
5
5
|
gap: string | number;
|
|
6
|
+
paddingTop: string | number;
|
|
7
|
+
paddingBottom: string | number;
|
|
6
8
|
};
|
|
7
9
|
partContainer: {
|
|
8
10
|
display: "flex";
|
|
@@ -13,7 +15,7 @@ export declare const useStyles: () => {
|
|
|
13
15
|
};
|
|
14
16
|
partTitle: {
|
|
15
17
|
color: string;
|
|
16
|
-
fontSize:
|
|
18
|
+
fontSize: 14;
|
|
17
19
|
lineHeight: 20;
|
|
18
20
|
letterSpacing: 0;
|
|
19
21
|
fontFamily: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDate.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"FilterDate.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCnB,CAAC"}
|
|
@@ -4,6 +4,8 @@ export const useStyles = makeStyles(({ spacing, spacingValue, color, text }) =>
|
|
|
4
4
|
display: 'flex',
|
|
5
5
|
flexDirection: 'column',
|
|
6
6
|
gap: spacing('3W'),
|
|
7
|
+
paddingTop: spacing('3V'),
|
|
8
|
+
paddingBottom: spacing('3V'),
|
|
7
9
|
},
|
|
8
10
|
partContainer: {
|
|
9
11
|
display: 'flex',
|
|
@@ -15,7 +17,7 @@ export const useStyles = makeStyles(({ spacing, spacingValue, color, text }) =>
|
|
|
15
17
|
partTitle: {
|
|
16
18
|
paddingLeft: spacing('2W'),
|
|
17
19
|
paddingRight: spacing('2W'),
|
|
18
|
-
...text['Corps de texte'].
|
|
20
|
+
...text['Corps de texte'].SM.Medium,
|
|
19
21
|
color: color.light.text['mention-grey'],
|
|
20
22
|
},
|
|
21
23
|
filtersHorizontalScroll: {
|