@clicoh/orion-library 1.2.0-beta.25 → 1.2.0-beta.26
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/components/01-atoms/MultiSelect/MultiSelect.d.ts +25 -4
- package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx +39 -5
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map +1 -1
- package/dist/components/01-atoms/MultiSelect/index.d.ts +1 -1
- package/dist/components/01-atoms/MultiSelect/index.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/Select.d.ts +1 -1
- package/dist/components/01-atoms/Select/Select.jsx +1 -1
- package/dist/components/01-atoms/Select/SelectList.d.ts +4 -0
- package/dist/components/01-atoms/Select/SelectList.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/SelectList.jsx +8 -2
- package/dist/components/01-atoms/Select/SelectList.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts +17 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx +46 -5
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts +14 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +18 -5
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts +45 -4
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx +106 -52
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.d.ts +16 -5
- package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.d.ts.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.jsx +30 -13
- package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.jsx.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageViewerDocument.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageViewerDocument.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,MAAM,0BAA0B,GAAG;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1D,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,aAAa,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,0BAA0B,CAAC;IACnC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,GAAG,EACH,KAAK,EACL,UAAU,EACV,MAAM,EACN,cAAc,EACd,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA0FtC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { createPortal } from 'react-dom';
|
|
2
3
|
import { MdChevronLeft, MdChevronRight, MdPictureAsPdf } from 'react-icons/md';
|
|
3
4
|
import { IconButton, Paragraph, Spinner } from '../../01-atoms';
|
|
4
5
|
import { ImageViewerImage } from './ImageViewerImage';
|
|
@@ -10,9 +11,12 @@ import { usePdfPages } from './usePdfPages';
|
|
|
10
11
|
*
|
|
11
12
|
* A document with several pages gets a pager over the page, when
|
|
12
13
|
* `labels.previousPage` and `labels.nextPage` are given; without them only
|
|
13
|
-
* the first page is reachable, since the buttons would have no name.
|
|
14
|
+
* the first page is reachable, since the buttons would have no name. With
|
|
15
|
+
* `pagerContainer` the pager is rendered inside that element instead, such as
|
|
16
|
+
* the viewer's toolbar.
|
|
14
17
|
*
|
|
15
|
-
* While the document or the page loads it shows a spinner
|
|
18
|
+
* While the document or the page loads it shows a spinner; the pager stays
|
|
19
|
+
* while another page loads, so the focus does not leave it. When the file
|
|
16
20
|
* cannot be fetched or parsed it shows the description and, with
|
|
17
21
|
* `labels.openDocument`, a link that opens the file in a new tab.
|
|
18
22
|
*
|
|
@@ -25,7 +29,12 @@ import { usePdfPages } from './usePdfPages';
|
|
|
25
29
|
* alt="Insurance policy"
|
|
26
30
|
* style={{ transform: 'translate(0px, 0px) rotate(0deg) scale(1)' }}
|
|
27
31
|
* isAnimated
|
|
28
|
-
* labels={{
|
|
32
|
+
* labels={{
|
|
33
|
+
* openDocument: 'Open PDF',
|
|
34
|
+
* previousPage: 'Previous page',
|
|
35
|
+
* nextPage: 'Next page',
|
|
36
|
+
* pageStatus: (page, pageCount) => `Page ${page} of ${pageCount}`,
|
|
37
|
+
* }}
|
|
29
38
|
* />
|
|
30
39
|
*
|
|
31
40
|
* @param {Object} props - The properties of the ImageViewerDocument component.
|
|
@@ -33,12 +42,13 @@ import { usePdfPages } from './usePdfPages';
|
|
|
33
42
|
* @param {string} props.alt - Accessible description of the document.
|
|
34
43
|
* @param {CSSProperties} props.style - Pan, zoom and rotation computed by the viewer.
|
|
35
44
|
* @param {boolean} props.isAnimated - Eases the transform; off while the user drags.
|
|
36
|
-
* @param {TImageViewerDocumentLabels} props.labels - `openDocument` names the fallback link; `previousPage` and `nextPage` name the pager buttons.
|
|
45
|
+
* @param {TImageViewerDocumentLabels} props.labels - `openDocument` names the fallback link; `previousPage` and `nextPage` name the pager buttons; `pageStatus(page, pageCount)` writes the pager text, `page / pageCount` without it.
|
|
46
|
+
* @param {HTMLElement | null} [props.pagerContainer] - Element that receives the pager instead of the page. `null` while that element mounts, which renders no pager yet.
|
|
37
47
|
* @param {() => void} [props.onPageChange] - Called after the user moves to another page, so the viewer can recenter.
|
|
38
48
|
*
|
|
39
49
|
* @returns {ReactNode} The rendered document.
|
|
40
50
|
*/
|
|
41
|
-
export function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPageChange, }) {
|
|
51
|
+
export function ImageViewerDocument({ src, alt, style, isAnimated, labels, pagerContainer, onPageChange, }) {
|
|
42
52
|
const { status, pageCount, pageIndex, pageSrc, goToPage } = usePdfPages(src);
|
|
43
53
|
if (status === 'error') {
|
|
44
54
|
return (<div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center">
|
|
@@ -51,7 +61,7 @@ export function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPag
|
|
|
51
61
|
</a>)}
|
|
52
62
|
</div>);
|
|
53
63
|
}
|
|
54
|
-
if (!pageSrc)
|
|
64
|
+
if (!pageSrc && pageCount === 0)
|
|
55
65
|
return <Spinner label={alt}/>;
|
|
56
66
|
const hasSeveralPages = pageCount > 1;
|
|
57
67
|
const pagerLabels = hasSeveralPages && labels.previousPage && labels.nextPage
|
|
@@ -60,19 +70,26 @@ export function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPag
|
|
|
60
70
|
const pageAlt = hasSeveralPages
|
|
61
71
|
? `${alt} · ${pageIndex + 1}/${pageCount}`
|
|
62
72
|
: alt;
|
|
73
|
+
const pageStatus = labels.pageStatus?.(pageIndex + 1, pageCount) ??
|
|
74
|
+
`${pageIndex + 1} / ${pageCount}`;
|
|
75
|
+
const isPagerOutside = pagerContainer !== undefined;
|
|
63
76
|
const changePage = (index) => {
|
|
64
77
|
goToPage(index);
|
|
65
78
|
onPageChange?.();
|
|
66
79
|
};
|
|
80
|
+
const pager = pagerLabels ? (<>
|
|
81
|
+
<IconButton icon={<MdChevronLeft />} label={pagerLabels.previous} disabled={pageIndex === 0} onClick={() => changePage(pageIndex - 1)} className="rounded-full"/>
|
|
82
|
+
<Paragraph size="body-2" aria-live="polite" className="min-w-10 text-center whitespace-nowrap tabular-nums dark:text-white">
|
|
83
|
+
{pageStatus}
|
|
84
|
+
</Paragraph>
|
|
85
|
+
<IconButton icon={<MdChevronRight />} label={pagerLabels.next} disabled={pageIndex === pageCount - 1} onClick={() => changePage(pageIndex + 1)} className="rounded-full"/>
|
|
86
|
+
</>) : null;
|
|
67
87
|
return (<div className="relative flex h-full w-full items-center justify-center">
|
|
68
|
-
<ImageViewerImage src={pageSrc} alt={pageAlt} style={style} isAnimated={isAnimated}/>
|
|
69
|
-
{!!
|
|
70
|
-
|
|
71
|
-
<Paragraph size="body-2" aria-live="polite" className="min-w-10 text-center tabular-nums dark:text-white">
|
|
72
|
-
{`${pageIndex + 1} / ${pageCount}`}
|
|
73
|
-
</Paragraph>
|
|
74
|
-
<IconButton icon={<MdChevronRight />} label={pagerLabels.next} disabled={pageIndex === pageCount - 1} onClick={() => changePage(pageIndex + 1)} className="rounded-full"/>
|
|
88
|
+
{pageSrc ? (<ImageViewerImage src={pageSrc} alt={pageAlt} style={style} isAnimated={isAnimated}/>) : (<Spinner label={pageAlt}/>)}
|
|
89
|
+
{!!pager && !isPagerOutside && (<div className="border-gray-5 dark:border-gray-1 dark:bg-black-1/90 absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full border bg-white/90 px-1.5 py-1 shadow-md backdrop-blur-sm">
|
|
90
|
+
{pager}
|
|
75
91
|
</div>)}
|
|
92
|
+
{!!pager && !!pagerContainer && createPortal(pager, pagerContainer)}
|
|
76
93
|
</div>);
|
|
77
94
|
}
|
|
78
95
|
//# sourceMappingURL=ImageViewerDocument.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageViewerDocument.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageViewerDocument.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"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"}
|