@alveole/components 0.34.1 → 0.34.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.
Files changed (15) hide show
  1. package/dist/ui/DocumentViewer/DocumentViewer.d.ts +1 -1
  2. package/dist/ui/DocumentViewer/DocumentViewer.d.ts.map +1 -1
  3. package/dist/ui/DocumentViewer/DocumentViewer.js +3 -3
  4. package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts +13 -2
  5. package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map +1 -1
  6. package/dist/ui/DocumentViewer/DocumentViewer.stories.js +3 -3
  7. package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts +12 -1
  8. package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts.map +1 -1
  9. package/dist/ui/DocumentViewer/DocumentViewer.styles.js +12 -1
  10. package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts +2 -1
  11. package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts.map +1 -1
  12. package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts +2 -1
  13. package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map +1 -1
  14. package/dist/ui/DocumentViewer/DocumentViewerPDF.js +1 -1
  15. package/package.json +1 -1
package/dist/ui/DocumentViewer/DocumentViewer.d.ts CHANGED
@@ -5,7 +5,7 @@ export type DocumentViewerProps = BoxProps & {
5
5
  type: 'image' | 'pdf';
6
6
  title: string;
7
7
  source: string;
8
- height: number;
8
+ height?: BoxProps['height'];
9
9
  };
10
10
  export declare const DocumentViewer: (props: DocumentViewerProps) => import("react/jsx-runtime").JSX.Element;
11
11
  //# sourceMappingURL=DocumentViewer.d.ts.map
package/dist/ui/DocumentViewer/DocumentViewer.d.ts.map CHANGED
@@ -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,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAsFxD,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;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAsFxD,CAAC"}
package/dist/ui/DocumentViewer/DocumentViewer.js CHANGED
@@ -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, ...boxProps } = props;
10
+ const { children, title, source, type, height = '100%', ...boxProps } = props;
11
11
  const styles = useStyles();
12
12
  const [rotation, setRotation] = React.useState(0);
13
13
  const [page, setPage] = React.useState(1);
@@ -41,8 +41,8 @@ export const DocumentViewer = (props) => {
41
41
  const handlePdfReady = React.useCallback((proxy) => {
42
42
  setTotalPages(proxy.numPages);
43
43
  }, []);
44
- return (_jsxs(Box, { tag: "document-viewer-wrapper", style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, ...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: {
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, { 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", style: styles.children, children: children }))] }));
48
48
  };
package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts CHANGED
@@ -55,8 +55,12 @@ declare const _default: {
55
55
  viewerWrapper: {
56
56
  display: "flex";
57
57
  flexDirection: "row";
58
+ height: "100%";
58
59
  };
59
60
  viewerContainer: {
61
+ display: "flex";
62
+ flexDirection: "column";
63
+ flex: number;
60
64
  padding: import("@alveole/theme").Spacing;
61
65
  borderColor: "#DEE3EC";
62
66
  borderWidth: number;
@@ -68,6 +72,13 @@ declare const _default: {
68
72
  overflow: "hidden";
69
73
  };
70
74
  children: {
75
+ display: "flex";
76
+ flexDirection: "column";
77
+ height: "100%";
78
+ width: "40%";
79
+ maxWidth: string;
80
+ minWidth: number;
81
+ flexShrink: number;
71
82
  borderColor: "#DEE3EC";
72
83
  borderWidth: number;
73
84
  borderStyle: "solid";
@@ -75,7 +86,7 @@ declare const _default: {
75
86
  borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
76
87
  borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
77
88
  backgroundColor: "#FFFFFF";
78
- overflow: "hidden";
89
+ overflow: "auto";
79
90
  };
80
91
  viewerImageContent: {
81
92
  display: "flex";
@@ -137,7 +148,7 @@ declare const _default: {
137
148
  };
138
149
  };
139
150
  export default _default;
140
- export declare const DocumentImage: () => import("react/jsx-runtime").JSX.Element;
151
+ export declare const DocumentImageEx: () => import("react/jsx-runtime").JSX.Element;
141
152
  export declare const DocumentPdf: () => import("react/jsx-runtime").JSX.Element;
142
153
  export declare const WithChildren: () => import("react/jsx-runtime").JSX.Element;
143
154
  //# sourceMappingURL=DocumentViewer.stories.d.ts.map
package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,aAAa,+CAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,+CASvB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAaxB,CAAC"}
1
+ {"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,eAAe,+CAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,+CASvB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAaxB,CAAC"}
package/dist/ui/DocumentViewer/DocumentViewer.stories.js CHANGED
@@ -11,6 +11,6 @@ export default {
11
11
  component: DocumentViewer,
12
12
  styleFn: useStyles,
13
13
  };
14
- export const DocumentImage = () => (_jsx(Box, { maxW: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", source: "https://picsum.photos/1000/2000", height: 600 }) }));
15
- export const DocumentPdf = () => (_jsx(Box, { maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: 600 }) }));
16
- export const WithChildren = () => (_jsx(Box, { children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: 600, children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
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://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: "100%" }) }));
16
+ export const WithChildren = () => (_jsx(Box, { height: 600, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: "100%", children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts CHANGED
@@ -48,8 +48,12 @@ export declare const useStyles: () => {
48
48
  viewerWrapper: {
49
49
  display: "flex";
50
50
  flexDirection: "row";
51
+ height: "100%";
51
52
  };
52
53
  viewerContainer: {
54
+ display: "flex";
55
+ flexDirection: "column";
56
+ flex: number;
53
57
  padding: import("@alveole/theme").Spacing;
54
58
  borderColor: "#DEE3EC";
55
59
  borderWidth: number;
@@ -61,6 +65,13 @@ export declare const useStyles: () => {
61
65
  overflow: "hidden";
62
66
  };
63
67
  children: {
68
+ display: "flex";
69
+ flexDirection: "column";
70
+ height: "100%";
71
+ width: "40%";
72
+ maxWidth: string;
73
+ minWidth: number;
74
+ flexShrink: number;
64
75
  borderColor: "#DEE3EC";
65
76
  borderWidth: number;
66
77
  borderStyle: "solid";
@@ -68,7 +79,7 @@ export declare const useStyles: () => {
68
79
  borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
69
80
  borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
70
81
  backgroundColor: "#FFFFFF";
71
- overflow: "hidden";
82
+ overflow: "auto";
72
83
  };
73
84
  viewerImageContent: {
74
85
  display: "flex";
package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HnB,CAAC"}
1
+ {"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsInB,CAAC"}
package/dist/ui/DocumentViewer/DocumentViewer.styles.js CHANGED
@@ -43,8 +43,12 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
43
43
  viewerWrapper: {
44
44
  display: 'flex',
45
45
  flexDirection: 'row',
46
+ height: '100%',
46
47
  },
47
48
  viewerContainer: {
49
+ display: 'flex',
50
+ flexDirection: 'column',
51
+ flex: 1,
48
52
  padding: spacing('1W'),
49
53
  borderColor: color.light.border['default-grey'],
50
54
  borderWidth: 1,
@@ -56,6 +60,13 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
56
60
  overflow: 'hidden',
57
61
  },
58
62
  children: {
63
+ display: 'flex',
64
+ flexDirection: 'column',
65
+ height: '100%',
66
+ width: '40%',
67
+ maxWidth: '40%',
68
+ minWidth: 0,
69
+ flexShrink: 1,
59
70
  borderColor: color.light.border['default-grey'],
60
71
  borderWidth: 1,
61
72
  borderStyle: 'solid',
@@ -63,7 +74,7 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
63
74
  borderTopRightRadius: radius('md'),
64
75
  borderBottomRightRadius: radius('md'),
65
76
  backgroundColor: color.light.background['default-grey'],
66
- overflow: 'hidden',
77
+ overflow: 'auto',
67
78
  },
68
79
  viewerImageContent: {
69
80
  display: 'flex',
package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts CHANGED
@@ -1,7 +1,8 @@
1
+ import { BoxProps } from '@alveole/components';
1
2
  import { DocumentViewerRotation } from './DocumentViewer';
2
3
  export type DocumentViewerImageProps = {
3
4
  source: string;
4
- height: number;
5
+ height?: BoxProps['height'];
5
6
  rotation: DocumentViewerRotation;
6
7
  scale?: number;
7
8
  };
package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CA8ClE,CAAC"}
1
+ {"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAS,MAAM,qBAAqB,CAAC;AAE3D,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,4CA8ClE,CAAC"}
package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts CHANGED
@@ -1,10 +1,11 @@
1
+ import { BoxProps } from '@alveole/components';
1
2
  import type { PDFDocumentProxy } from 'pdfjs-dist';
2
3
  import 'pdfjs-dist/build/pdf.worker.entry';
3
4
  import { DocumentViewerRotation } from './DocumentViewer';
4
5
  export type DocumentViewerPDFProps = {
5
6
  source: string;
6
7
  page: number;
7
- height: number;
8
+ height?: BoxProps['height'];
8
9
  rotation: DocumentViewerRotation;
9
10
  scale?: number;
10
11
  onReady?: (state: PDFDocumentProxy) => void;
package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,mCAAmC,CAAC;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAWF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA6J9D,CAAC"}
1
+ {"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,mCAAmC,CAAC;AAG3C,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;CAC7C,CAAC;AAWF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA6J9D,CAAC"}
package/dist/ui/DocumentViewer/DocumentViewerPDF.js CHANGED
@@ -12,7 +12,7 @@ const isPdfCancellationError = (error) => {
12
12
  error.message.includes('Worker was terminated'));
13
13
  };
14
14
  export const DocumentViewerPDF = (props) => {
15
- const { source, page, rotation, height, scale = 1, onReady } = props;
15
+ const { source, page, rotation, height = '100%', scale = 1, onReady } = props;
16
16
  const styles = useStyles();
17
17
  const [pdf, setPdf] = React.useState(null);
18
18
  const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "0.34.1",
3
+ "version": "0.34.2",
4
4
  "description": "Shared UI components.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",