@alveole/components 0.34.2 → 0.34.6
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/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 +3 -3
- package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts +3 -3
- package/dist/ui/DocumentViewer/DocumentViewer.styles.js +4 -4
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ export type DocumentViewerProps = BoxProps & {
|
|
|
6
6
|
title: string;
|
|
7
7
|
source: string;
|
|
8
8
|
height?: BoxProps['height'];
|
|
9
|
+
ChildrenProps?: Omit<BoxProps, 'children'>;
|
|
9
10
|
};
|
|
10
11
|
export declare const DocumentViewer: (props: DocumentViewerProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
//# 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;AAOzD,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;
|
|
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;AAOzD,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;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAsFxD,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%', ...boxProps } = props;
|
|
10
|
+
const { children, title, source, type, height = '100%', ChildrenProps, ...boxProps } = props;
|
|
11
11
|
const styles = useStyles();
|
|
12
12
|
const [rotation, setRotation] = React.useState(0);
|
|
13
13
|
const [page, setPage] = React.useState(1);
|
|
@@ -44,5 +44,5 @@ export const DocumentViewer = (props) => {
|
|
|
44
44
|
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: {
|
|
45
45
|
...styles.viewerContainer,
|
|
46
46
|
...(children ? { borderBottomRightRadius: 0 } : {}),
|
|
47
|
-
}, 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", style: styles.children, children: children }))] }));
|
|
47
|
+
}, 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 }))] }));
|
|
48
48
|
};
|
|
@@ -32,8 +32,8 @@ declare const _default: {
|
|
|
32
32
|
marginBottom: string;
|
|
33
33
|
userSelect: "none";
|
|
34
34
|
fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
|
|
35
|
-
fontSize:
|
|
36
|
-
lineHeight:
|
|
35
|
+
fontSize: 16;
|
|
36
|
+
lineHeight: 24;
|
|
37
37
|
letterSpacing: 0;
|
|
38
38
|
};
|
|
39
39
|
toolbarState: {
|
|
@@ -75,7 +75,7 @@ declare const _default: {
|
|
|
75
75
|
display: "flex";
|
|
76
76
|
flexDirection: "column";
|
|
77
77
|
height: "100%";
|
|
78
|
-
width: "40%";
|
|
78
|
+
width: "60%" | "40%";
|
|
79
79
|
maxWidth: string;
|
|
80
80
|
minWidth: number;
|
|
81
81
|
flexShrink: number;
|
|
@@ -25,8 +25,8 @@ export declare const useStyles: () => {
|
|
|
25
25
|
marginBottom: string;
|
|
26
26
|
userSelect: "none";
|
|
27
27
|
fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
|
|
28
|
-
fontSize:
|
|
29
|
-
lineHeight:
|
|
28
|
+
fontSize: 16;
|
|
29
|
+
lineHeight: 24;
|
|
30
30
|
letterSpacing: 0;
|
|
31
31
|
};
|
|
32
32
|
toolbarState: {
|
|
@@ -68,7 +68,7 @@ export declare const useStyles: () => {
|
|
|
68
68
|
display: "flex";
|
|
69
69
|
flexDirection: "column";
|
|
70
70
|
height: "100%";
|
|
71
|
-
width: "40%";
|
|
71
|
+
width: "60%" | "40%";
|
|
72
72
|
maxWidth: string;
|
|
73
73
|
minWidth: number;
|
|
74
74
|
flexShrink: number;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { makeStyles } from '@alveole/theme';
|
|
2
|
-
export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
2
|
+
export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }) => ({
|
|
3
3
|
toolbar: {
|
|
4
4
|
padding: spacing('1W'),
|
|
5
5
|
borderColor: color.light.border['default-grey'],
|
|
@@ -20,7 +20,7 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
|
20
20
|
justifyContent: 'flex-end',
|
|
21
21
|
},
|
|
22
22
|
toolbarTitle: {
|
|
23
|
-
...text['Corps de texte'].
|
|
23
|
+
...text['Corps de texte'].MD.SemiBold,
|
|
24
24
|
color: color.light.text['default-grey'],
|
|
25
25
|
paddingLeft: spacing('1W'),
|
|
26
26
|
marginTop: 'auto',
|
|
@@ -63,8 +63,8 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
|
63
63
|
display: 'flex',
|
|
64
64
|
flexDirection: 'column',
|
|
65
65
|
height: '100%',
|
|
66
|
-
width: '40%',
|
|
67
|
-
maxWidth: '40%',
|
|
66
|
+
width: isVariant('tablet') ? '60%' : '40%',
|
|
67
|
+
maxWidth: isVariant('tablet') ? '60%' : '40%',
|
|
68
68
|
minWidth: 0,
|
|
69
69
|
flexShrink: 1,
|
|
70
70
|
borderColor: color.light.border['default-grey'],
|