@zextras/carbonio-ui-preview 1.2.2 → 1.2.4

package/lib/preview/Navigator.js

@@ -1,28 +1,14 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navigator = void 0;
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tposition: absolute;\n\tz-index: 1;\n\tbottom: 1rem;\n\tbackground-color: ", ";\n\talign-self: center;\n\tborder-radius: 0.25rem;\n\tgap: 1rem;\n\tpadding: 0.5rem 1rem;\n"], ["\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tposition: absolute;\n\tz-index: 1;\n\tbottom: 1rem;\n\tbackground-color: ", ";\n\talign-self: center;\n\tborder-radius: 0.25rem;\n\tgap: 1rem;\n\tpadding: 0.5rem 1rem;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.gray0.regular;
-});
-var Navigator = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement(StyledContainer, { onClick: function (ev) { return ev.stopPropagation(); } }, children));
+import React from 'react';
+import { useTheme } from '@zextras/carbonio-design-system';
+import styles from './Navigator.module.css';
+/** Container for the current preview actions (zoom, page) */
+export const Navigator = ({ children }) => {
+    const theme = useTheme();
+    return (React.createElement("div", { className: styles.styledContainer, style: { backgroundColor: theme.palette.gray0.regular }, onClick: (ev) => ev.stopPropagation() }, children));
 };
-exports.Navigator = Navigator;
-var templateObject_1;
 //# sourceMappingURL=Navigator.js.map

package/lib/preview/Navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigator.js","sourceRoot":"","sources":["../../src/preview/Navigator.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;GAIG;AACH,gDAA0B;AAE1B,wEAAuC;AAEvC,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,wTAAA,qJAOb,EAAkD,8FAKtE,KALoB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAe,OAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;AAA3B,CAA2B,CAKtE,CAAC;AAMK,IAAM,SAAS,GAAG,UAAC,EAA4B;QAA1B,QAAQ,cAAA;IAA0C,OAAA,CAC7E,8BAAC,eAAe,IAAC,OAAO,EAAE,UAAC,EAAE,IAAW,OAAA,EAAE,CAAC,eAAe,EAAE,EAApB,CAAoB,IAAG,QAAQ,CAAmB,CAC1F;AAF6E,CAE7E,CAAC;AAFW,QAAA,SAAS,aAEpB"}
+{"version":3,"file":"Navigator.js","sourceRoot":"","sources":["../../src/preview/Navigator.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAM5C,6DAA6D;AAC7D,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAkB,EAAqB,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACN,6BACC,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,EACvD,OAAO,EAAE,CAAC,EAAE,EAAQ,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,IAE1C,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC"}

package/lib/preview/Navigator.module.css

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.styledContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    bottom: 1rem;
+    align-self: center;
+    border-radius: 0.25rem;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+}

package/lib/preview/PageController.d.ts

@@ -1,8 +1,16 @@
 import React from 'react';
 export interface PageControllerProps {
+    /** Label for the page input */
     pageLabel?: string;
+    /** Current page number */
     currentPage: number;
+    /** Total number of pages */
     pagesNumber: number;
+    /** Callback fired to set a new current page */
     onPageChange: (newPage: number) => void;
 }
+/**
+ * Render a controller for the current page.
+ * It defines a minimum set of boundaries for the validation of the user input.
+ */
 export declare const PageController: ({ pageLabel, currentPage, pagesNumber, onPageChange }: PageControllerProps) => React.JSX.Element;

package/lib/preview/PageController.js

@@ -1,77 +1,41 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageController = void 0;
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importStar(require("react"));
-var carbonio_design_system_1 = require("@zextras/carbonio-design-system");
-var styled_components_1 = __importDefault(require("styled-components"));
-var StyledInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: inherit;\n\tborder: none;\n\toutline: none;\n\tmin-width: 0.5rem;\n\tfont-family: inherit;\n\tfont-size: ", ";\n\tcolor: ", ";\n\ttext-align: center;\n\tpadding: 0;\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: underline;\n\t}\n"], ["\n\tbackground-color: inherit;\n\tborder: none;\n\toutline: none;\n\tmin-width: 0.5rem;\n\tfont-family: inherit;\n\tfont-size: ", ";\n\tcolor: ", ";\n\ttext-align: center;\n\tpadding: 0;\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: underline;\n\t}\n"])), function (_a) {
-    var theme = _a.theme, $size = _a.$size;
-    return theme.sizes.font[$size];
-}, function (_a) {
-    var $color = _a.$color, theme = _a.theme;
-    return (0, carbonio_design_system_1.getColor)($color, theme);
-});
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Text, getColor, Container, useTheme } from '@zextras/carbonio-design-system';
+import styles from './PageController.module.css';
 function isInt(value) {
-    var x = parseInt(value, 10);
+    const x = parseInt(value, 10);
     // compare number with string by removing leading zeros
-    return "".concat(x) === value.replace(/^0+/, '').trim();
+    return `${x}` === value.replace(/^0+/, '').trim();
 }
 function resizeInput(ev) {
-    var inputEl = ev.currentTarget;
-    inputEl.style.width = "".concat(inputEl.value.length, "ch");
+    const inputEl = ev.currentTarget;
+    inputEl.style.width = `${inputEl.value.length}ch`;
 }
-var PageController = function (_a) {
-    var _b = _a.pageLabel, pageLabel = _b === void 0 ? 'Page' : _b, currentPage = _a.currentPage, pagesNumber = _a.pagesNumber, onPageChange = _a.onPageChange;
-    var inputRef = (0, react_1.useRef)(null);
-    var setInputValue = (0, react_1.useCallback)(function (value) {
+/**
+ * Render a controller for the current page.
+ * It defines a minimum set of boundaries for the validation of the user input.
+ */
+export const PageController = ({ pageLabel = 'Page', currentPage, pagesNumber, onPageChange }) => {
+    const inputRef = useRef(null);
+    const theme = useTheme();
+    const setInputValue = useCallback((value) => {
         if (inputRef.current) {
-            inputRef.current.value = "".concat(value);
-            inputRef.current.style.width = "".concat(inputRef.current.value.length, "ch");
+            inputRef.current.value = `${value}`;
+            inputRef.current.style.width = `${inputRef.current.value.length}ch`;
         }
     }, []);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         setInputValue(currentPage);
     }, [currentPage, setInputValue]);
-    var onConfirm = (0, react_1.useCallback)(function (e) {
-        var inputElement = e.currentTarget;
+    const onConfirm = useCallback((e) => {
+        const inputElement = e.currentTarget;
         if (inputElement) {
-            var newValue = inputElement.value;
-            var newPage = isInt(newValue) && Number(newValue);
+            const newValue = inputElement.value;
+            const newPage = isInt(newValue) && Number(newValue);
             if (newPage !== false && newPage > 0 && newPage <= pagesNumber) {
                 setInputValue(newPage);
                 onPageChange(newPage);
@@ -81,10 +45,10 @@ var PageController = function (_a) {
             }
         }
     }, [currentPage, onPageChange, pagesNumber, setInputValue]);
-    var onBlur = (0, react_1.useCallback)(function (e) {
+    const onBlur = useCallback((e) => {
         onConfirm(e);
     }, [onConfirm]);
-    var onKeyDown = (0, react_1.useCallback)(function (e) {
+    const onKeyDown = useCallback((e) => {
         if (e.key === 'Escape' ||
             e.key === 'ArrowRight' ||
             e.key === 'ArrowLeft' ||
@@ -101,12 +65,10 @@ var PageController = function (_a) {
             e.currentTarget.blur();
         }
     }, [onConfirm]);
-    return (react_1.default.createElement(carbonio_design_system_1.Container, { orientation: "horizontal", gap: "0.5rem", crossAlignment: "baseline", width: 'fit' },
-        react_1.default.createElement(carbonio_design_system_1.Text, { size: "small", color: "gray6" }, pageLabel),
-        react_1.default.createElement(StyledInput, { "$color": "gray6", "$size": "small", onBlur: onBlur, onKeyDown: onKeyDown, onInput: resizeInput, ref: inputRef, "aria-label": "current page" }),
-        react_1.default.createElement(carbonio_design_system_1.Text, { size: "small", color: "gray6" }, "/"),
-        react_1.default.createElement(carbonio_design_system_1.Text, { size: "small", color: "gray6" }, pagesNumber)));
+    return (React.createElement(Container, { orientation: "horizontal", gap: "0.5rem", crossAlignment: "baseline", width: 'fit' },
+        React.createElement(Text, { size: "small", color: "gray6" }, pageLabel),
+        React.createElement("input", { className: styles.styledInput, style: { color: getColor('gray6', theme), fontSize: theme.sizes.font.small }, onBlur: onBlur, onKeyDown: onKeyDown, onInput: resizeInput, ref: inputRef, "aria-label": "current page" }),
+        React.createElement(Text, { size: "small", color: "gray6" }, "/"),
+        React.createElement(Text, { size: "small", color: "gray6" }, pagesNumber)));
 };
-exports.PageController = PageController;
-var templateObject_1;
 //# sourceMappingURL=PageController.js.map

package/lib/preview/PageController.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageController.js","sourceRoot":"","sources":["../../src/preview/PageController.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageController.js","sourceRoot":"","sources":["../../src/preview/PageController.tsx"],"names":[],"mappings":"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"}

package/lib/preview/PageController.module.css

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.styledInput {
+    background-color: inherit;
+    border: none;
+    outline: none;
+    min-width: 0.5rem;
+    font-family: inherit;
+    text-align: center;
+    padding: 0;
+}
+
+.styledInput:hover, .styledInput:focus {
+    text-decoration: underline;
+}

package/lib/preview/PdfPreview.d.ts

@@ -1,89 +1,41 @@
 import React from 'react';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import { HeaderAction, HeaderProps } from './Header';
-import { PreviewCriteriaAlternativeContentProps } from './PreviewCriteriaAlternativeContent';
-import { type MakeOptional } from '../utils/type-utils';
-type PdfPreviewProps = Partial<Omit<HeaderProps, 'closeAction'>> & {
-    /** Left Action for the preview */
-    closeAction?: MakeOptional<HeaderAction, 'onClick'>;
-    /**
-     * HTML node where to insert the Portal's children.
-     * The default value is 'window.top.document'.
-     * */
-    container?: Element;
-    /** Flag to disable the Portal implementation */
-    disablePortal?: boolean;
-    /** Flag to show or hide Portal's content */
-    show: boolean;
-    /** preview source */
+import 'react-pdf/dist/Page/TextLayer.css';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { PreviewCriteriaAlternativeContentProps } from './PreviewCriteriaAlternativeContent.js';
+import { PreviewNavigatorProps } from './PreviewNavigator.js';
+export interface PdfPreviewProps extends Omit<PreviewNavigatorProps, 'onOverlayClick'>, Omit<PreviewCriteriaAlternativeContentProps, 'downloadSrc'> {
+    /** Preview source */
     src: string | File | Blob | ArrayBuffer;
     /** Whether force cache */
     forceCache?: boolean;
-    /** Callback to hide the preview */
-    onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
-    /** use fallback content if you don't want to view the pdf for some reason; content can be customizable with customContent */
+    /** Use fallback content if you don't want to view the pdf for some reason; content can be customizable with customContent */
     useFallback?: boolean;
-    /** CustomContent */
+    /** Custom component for the fallback */
     customContent?: React.ReactElement;
     /** Whether a text layer should be rendered */
     renderTextLayer?: boolean;
     /** Whether the annotation layer should be rendered */
     renderAnnotationLayer?: boolean;
+    /** Label for the zoom out action */
     zoomOutLabel?: string;
+    /** Label shown when the zoom is at its minimum */
     lowerLimitReachedLabel?: string;
+    /** Label for the reset zoom action */
     resetZoomLabel?: string;
+    /** Label for the fit to width zoom action */
     fitToWidthLabel?: string;
+    /** Label for the zoom in action */
     zoomInLabel?: string;
+    /** Label shown when the zoom is at its maximum */
     upperLimitReachedLabel?: string;
-    /** Callback  */
-    onNextPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
-    /** Callback  */
-    onPreviousPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
+    /** Label for the page controller */
     pageLabel?: string;
+    /** Label shown when the preview cannot be shown */
     errorLabel?: string;
+    /** Label shown while the preview is loading */
     loadingLabel?: string;
+    /** Label for the print action */
     printActionTooltipLabel?: string;
-} & Omit<PreviewCriteriaAlternativeContentProps, 'downloadSrc'>;
-declare const PdfPreview: React.ForwardRefExoticComponent<Partial<Omit<HeaderProps, "closeAction">> & {
-    /** Left Action for the preview */
-    closeAction?: MakeOptional<HeaderAction, "onClick"> | undefined;
-    /**
-     * HTML node where to insert the Portal's children.
-     * The default value is 'window.top.document'.
-     * */
-    container?: Element | undefined;
-    /** Flag to disable the Portal implementation */
-    disablePortal?: boolean | undefined;
-    /** Flag to show or hide Portal's content */
-    show: boolean;
-    /** preview source */
-    src: string | File | Blob | ArrayBuffer;
-    /** Whether force cache */
-    forceCache?: boolean | undefined;
-    /** Callback to hide the preview */
-    onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
-    /** use fallback content if you don't want to view the pdf for some reason; content can be customizable with customContent */
-    useFallback?: boolean | undefined;
-    /** CustomContent */
-    customContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /** Whether a text layer should be rendered */
-    renderTextLayer?: boolean | undefined;
-    /** Whether the annotation layer should be rendered */
-    renderAnnotationLayer?: boolean | undefined;
-    zoomOutLabel?: string | undefined;
-    lowerLimitReachedLabel?: string | undefined;
-    resetZoomLabel?: string | undefined;
-    fitToWidthLabel?: string | undefined;
-    zoomInLabel?: string | undefined;
-    upperLimitReachedLabel?: string | undefined;
-    /** Callback  */
-    onNextPreview?: ((e: React.SyntheticEvent | KeyboardEvent) => void) | undefined;
-    /** Callback  */
-    onPreviousPreview?: ((e: React.SyntheticEvent | KeyboardEvent) => void) | undefined;
-    pageLabel?: string | undefined;
-    errorLabel?: string | undefined;
-    loadingLabel?: string | undefined;
-    printActionTooltipLabel?: string | undefined;
-} & Omit<PreviewCriteriaAlternativeContentProps, "downloadSrc"> & React.RefAttributes<HTMLDivElement>>;
-export { PdfPreview, PdfPreviewProps };
+}
+/** Main component for the preview of a pdf */
+export declare const PdfPreview: React.ForwardRefExoticComponent<PdfPreviewProps & React.RefAttributes<HTMLDivElement>>;