@react-pdf-viewer/scroll-mode - npm Package Compare versions

Comparing version 3.9.0 to 3.10.0

lib/cjs/scroll-mode.js

@@ -25,5 +25,17 @@ 'use strict';
 
+var DualPageCoverViewModeIcon = function () { return (React__namespace.createElement(core.Icon, { size: 16 },
+    React__namespace.createElement("rect", { x: "0.5", y: "0.497", width: "22", height: "22", rx: "1", ry: "1" }),
+    React__namespace.createElement("line", { x1: "0.5", y1: "6.497", x2: "22.5", y2: "6.497" }),
+    React__namespace.createElement("line", { x1: "11.5", y1: "6.497", x2: "11.5", y2: "22.497" }))); };
+
+var DualPageViewModeIcon = function () { return (React__namespace.createElement(core.Icon, { size: 16 },
+    React__namespace.createElement("rect", { x: "0.5", y: "0.497", width: "22", height: "22", rx: "1", ry: "1" }),
+    React__namespace.createElement("line", { x1: "11.5", y1: "0.497", x2: "11.5", y2: "22.497" }))); };
+
 var HorizontalScrollingIcon = function () { return (React__namespace.createElement(core.Icon, { size: 16 },
     React__namespace.createElement("path", { d: "M6.5,21.5c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z\n            M14.5,21.5c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z\n            M22.5,21.5 c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z" }))); };
 
+var PageScrollingIcon = function () { return (React__namespace.createElement(core.Icon, { size: 16 },
+    React__namespace.createElement("rect", { x: "0.5", y: "0.497", width: "22", height: "22", rx: "1", ry: "1" }))); };
+
 /******************************************************************************
@@ -55,2 +67,11 @@ Copyright (c) Microsoft Corporation.
 
+var switchScrollMode = function (store, scrollMode) {
+    store.get('switchScrollMode')(scrollMode);
+    var currentViewMode = store.get('viewMode');
+    if ((scrollMode === core.ScrollMode.Horizontal || scrollMode === core.ScrollMode.Wrapped) &&
+        currentViewMode !== core.ViewMode.SinglePage) {
+        store.get('switchViewMode')(core.ViewMode.SinglePage);
+    }
+};
+
 var VerticalScrollingIcon = function () { return (React__namespace.createElement(core.Icon, { size: 16 },
@@ -75,2 +96,9 @@ React__namespace.createElement("path", { d: "M23.5,5.5c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V5.5z\n            M23.5,13.5c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V13.5z\n            M23.5,21.5 c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V21.5z" }))); };
             break;
+        case core.ScrollMode.Page:
+            label =
+                l10n && l10n.scrollMode
+                    ? l10n.scrollMode.pageScrolling
+                    : 'Page scrolling';
+            icon = React__namespace.createElement(PageScrollingIcon, null);
+            break;
         case core.ScrollMode.Wrapped:
@@ -95,5 +123,5 @@ label =
 
-var TOOLTIP_OFFSET = { left: 0, top: 8 };
+var TOOLTIP_OFFSET$1 = { left: 0, top: 8 };
 var SwitchScrollModeButton = function (_a) {
-    var isSelected = _a.isSelected, mode = _a.mode, onClick = _a.onClick;
+    var isDisabled = _a.isDisabled, isSelected = _a.isSelected, mode = _a.mode, onClick = _a.onClick;
     var testId = '';
@@ -104,2 +132,5 @@ switch (mode) {
             break;
+        case core.ScrollMode.Page:
+            testId = 'scroll-mode__page-button';
+            break;
         case core.ScrollMode.Wrapped:
@@ -113,3 +144,3 @@ testId = 'scroll-mode__wrapped-button';
     }
-    return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: mode, onClick: onClick }, function (props) { return (React__namespace.createElement(core.Tooltip, { ariaControlsSuffix: "scroll-mode-switch", position: core.Position.BottomCenter, target: React__namespace.createElement(core.MinimalButton, { ariaLabel: props.label, isSelected: isSelected, testId: testId, onClick: props.onClick }, props.icon), content: function () { return props.label; }, offset: TOOLTIP_OFFSET })); }));
+    return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: mode, onClick: onClick }, function (props) { return (React__namespace.createElement(core.Tooltip, { ariaControlsSuffix: "scroll-mode-switch", position: core.Position.BottomCenter, target: React__namespace.createElement(core.MinimalButton, { ariaLabel: props.label, isDisabled: isDisabled, isSelected: isSelected, testId: testId, onClick: props.onClick }, props.icon), content: function () { return props.label; }, offset: TOOLTIP_OFFSET$1 })); }));
 };
@@ -131,12 +162,29 @@
 
+var useViewMode = function (store) {
+    var _a = React__namespace.useState(store.get('viewMode') || core.ViewMode.SinglePage), viewMode = _a[0], setViewMode = _a[1];
+    var handleViewModeChanged = function (currentViewMode) {
+        setViewMode(currentViewMode);
+    };
+    React__namespace.useEffect(function () {
+        store.subscribe('viewMode', handleViewModeChanged);
+        return function () {
+            store.unsubscribe('viewMode', handleViewModeChanged);
+        };
+    }, []);
+    return { viewMode: viewMode };
+};
+
 var SwitchScrollMode = function (_a) {
     var children = _a.children, mode = _a.mode, store = _a.store;
+    var viewMode = useViewMode(store).viewMode;
     var scrollMode = useScrollMode(store).scrollMode;
     var onClick = function () {
-        store.get('switchScrollMode')(mode);
+        switchScrollMode(store, mode);
     };
     var isSelected = scrollMode === mode;
-    var defaultChildren = function (props) { return (React__namespace.createElement(SwitchScrollModeButton, { isSelected: isSelected, mode: props.mode, onClick: props.onClick })); };
+    var isDisabled = (mode === core.ScrollMode.Horizontal || mode === core.ScrollMode.Wrapped) && viewMode !== core.ViewMode.SinglePage;
+    var defaultChildren = function (props) { return (React__namespace.createElement(SwitchScrollModeButton, { isDisabled: isDisabled, isSelected: isSelected, mode: props.mode, onClick: props.onClick })); };
     var render = children || defaultChildren;
     return render({
+        isDisabled: isDisabled,
         isSelected: isSelected,
@@ -149,3 +197,3 @@ mode: mode,
 var SwitchScrollModeMenuItem = function (_a) {
-    var isSelected = _a.isSelected, mode = _a.mode, onClick = _a.onClick;
+    var isDisabled = _a.isDisabled, isSelected = _a.isSelected, mode = _a.mode, onClick = _a.onClick;
     var testId = '';
@@ -156,2 +204,5 @@ switch (mode) {
             break;
+        case core.ScrollMode.Page:
+            testId = 'scroll-mode__page-menu';
+            break;
         case core.ScrollMode.Wrapped:
@@ -165,5 +216,97 @@ testId = 'scroll-mode__wrapped-menu';
     }
-    return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: mode, onClick: onClick }, function (props) { return (React__namespace.createElement(core.MenuItem, { checked: isSelected, icon: props.icon, testId: testId, onClick: props.onClick }, props.label)); }));
+    return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: mode, onClick: onClick }, function (props) { return (React__namespace.createElement(core.MenuItem, { checked: isSelected, icon: props.icon, isDisabled: isDisabled, testId: testId, onClick: props.onClick }, props.label)); }));
 };
 
+var switchViewMode = function (store, viewMode) {
+    store.get('switchViewMode')(viewMode);
+    var currentScrollMode = store.get('scrollMode');
+    if ((currentScrollMode === core.ScrollMode.Horizontal || currentScrollMode === core.ScrollMode.Wrapped) &&
+        viewMode !== core.ViewMode.SinglePage) {
+        store.get('switchScrollMode')(core.ScrollMode.Vertical);
+    }
+};
+
+var SwitchViewModeDecorator = function (_a) {
+    var children = _a.children, mode = _a.mode, onClick = _a.onClick;
+    var l10n = React__namespace.useContext(core.LocalizationContext).l10n;
+    var label = '';
+    var icon = React__namespace.createElement(PageScrollingIcon, null);
+    switch (mode) {
+        case core.ViewMode.DualPage:
+            label = l10n && l10n.scrollMode ? l10n.scrollMode.dualPage : 'Dual page';
+            icon = React__namespace.createElement(DualPageViewModeIcon, null);
+            break;
+        case core.ViewMode.DualPageWithCover:
+            label =
+                l10n && l10n.scrollMode
+                    ? l10n.scrollMode.dualPageCover
+                    : 'Dual page with cover';
+            icon = React__namespace.createElement(DualPageCoverViewModeIcon, null);
+            break;
+        case core.ViewMode.SinglePage:
+        default:
+            label =
+                l10n && l10n.scrollMode ? l10n.scrollMode.singlePage : 'Single page';
+            icon = React__namespace.createElement(PageScrollingIcon, null);
+            break;
+    }
+    return children({ icon: icon, label: label, onClick: onClick });
+};
+
+var TOOLTIP_OFFSET = { left: 0, top: 8 };
+var SwitchViewModeButton = function (_a) {
+    var isDisabled = _a.isDisabled, isSelected = _a.isSelected, mode = _a.mode, onClick = _a.onClick;
+    var testId = '';
+    switch (mode) {
+        case core.ViewMode.DualPage:
+            testId = 'view-mode__dual-button';
+            break;
+        case core.ViewMode.DualPageWithCover:
+            testId = 'view-mode__dual-cover-button';
+            break;
+        case core.ViewMode.SinglePage:
+        default:
+            testId = 'view-mode__single-button';
+            break;
+    }
+    return (React__namespace.createElement(SwitchViewModeDecorator, { mode: mode, onClick: onClick }, function (props) { return (React__namespace.createElement(core.Tooltip, { ariaControlsSuffix: "view-mode-switch", position: core.Position.BottomCenter, target: React__namespace.createElement(core.MinimalButton, { ariaLabel: props.label, isDisabled: isDisabled, isSelected: isSelected, testId: testId, onClick: props.onClick }, props.icon), content: function () { return props.label; }, offset: TOOLTIP_OFFSET })); }));
+};
+
+var SwitchViewMode = function (_a) {
+    var children = _a.children, mode = _a.mode, store = _a.store;
+    var viewMode = useViewMode(store).viewMode;
+    var scrollMode = useScrollMode(store).scrollMode;
+    var onClick = function () {
+        switchViewMode(store, mode);
+    };
+    var isSelected = viewMode === mode;
+    var isDisabled = (scrollMode === core.ScrollMode.Horizontal || scrollMode === core.ScrollMode.Wrapped) && mode !== core.ViewMode.SinglePage;
+    var defaultChildren = function (props) { return (React__namespace.createElement(SwitchViewModeButton, { isDisabled: isDisabled, isSelected: isSelected, mode: props.mode, onClick: props.onClick })); };
+    var render = children || defaultChildren;
+    return render({
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        mode: mode,
+        onClick: onClick,
+    });
+};
+
+var SwitchViewModeMenuItem = function (_a) {
+    var isDisabled = _a.isDisabled, isSelected = _a.isSelected, mode = _a.mode, onClick = _a.onClick;
+    var testId = '';
+    switch (mode) {
+        case core.ViewMode.DualPage:
+            testId = 'view-mode__dual-menu';
+            break;
+        case core.ViewMode.DualPageWithCover:
+            testId = 'view-mode__dual-cover-menu';
+            break;
+        case core.ViewMode.SinglePage:
+        default:
+            testId = 'view-mode__single-menu';
+            break;
+    }
+    return (React__namespace.createElement(SwitchViewModeDecorator, { mode: mode, onClick: onClick }, function (props) { return (React__namespace.createElement(core.MenuItem, { checked: isSelected, icon: props.icon, isDisabled: isDisabled, testId: testId, onClick: props.onClick }, props.label)); }));
+};
+
 var scrollModePlugin = function () {
@@ -173,34 +316,56 @@ var store = React__namespace.useMemo(function () {
             scrollMode: core.ScrollMode.Vertical,
+            viewMode: core.ViewMode.SinglePage,
             switchScrollMode: function () {
             },
+            switchViewMode: function () {
+            },
         });
     }, []);
     var SwitchScrollModeDecorator = function (props) { return React__namespace.createElement(SwitchScrollMode, __assign({}, props, { store: store })); };
-    var SwitchScrollModeButtonDecorator = function (props) { return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: props.mode }, function (p) { return (React__namespace.createElement(SwitchScrollModeButton, { isSelected: p.isSelected, mode: p.mode, onClick: function () {
+    var SwitchScrollModeButtonDecorator = function (props) { return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: props.mode }, function (p) { return (React__namespace.createElement(SwitchScrollModeButton, { isDisabled: p.isDisabled, isSelected: p.isSelected, mode: p.mode, onClick: function () {
             p.onClick();
         } })); })); };
-    var SwitchScrollModeMenuItemDecorator = function (props) { return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: props.mode }, function (p) { return (React__namespace.createElement(SwitchScrollModeMenuItem, { isSelected: p.isSelected, mode: p.mode, onClick: function () {
+    var SwitchScrollModeMenuItemDecorator = function (props) { return (React__namespace.createElement(SwitchScrollModeDecorator, { mode: props.mode }, function (p) { return (React__namespace.createElement(SwitchScrollModeMenuItem, { isDisabled: p.isDisabled, isSelected: p.isSelected, mode: p.mode, onClick: function () {
             p.onClick();
             props.onClick();
         } })); })); };
+    var SwitchViewModeDecorator = function (props) { return React__namespace.createElement(SwitchViewMode, __assign({}, props, { store: store })); };
+    var SwitchViewModeButtonDecorator = function (props) { return (React__namespace.createElement(SwitchViewModeDecorator, { mode: props.mode }, function (p) { return (React__namespace.createElement(SwitchViewModeButton, { isDisabled: p.isDisabled, isSelected: p.isSelected, mode: p.mode, onClick: function () {
+            p.onClick();
+        } })); })); };
+    var SwitchViewModeMenuItemDecorator = function (props) { return (React__namespace.createElement(SwitchViewModeDecorator, { mode: props.mode }, function (p) { return (React__namespace.createElement(SwitchViewModeMenuItem, { isDisabled: p.isDisabled, isSelected: p.isSelected, mode: p.mode, onClick: function () {
+            p.onClick();
+            props.onClick();
+        } })); })); };
     return {
         install: function (pluginFunctions) {
             store.update('switchScrollMode', pluginFunctions.switchScrollMode);
+            store.update('switchViewMode', pluginFunctions.switchViewMode);
         },
         onViewerStateChange: function (viewerState) {
             store.update('scrollMode', viewerState.scrollMode);
+            store.update('viewMode', viewerState.viewMode);
             return viewerState;
         },
-        switchScrollMode: function (mode) {
-            store.get('switchScrollMode')(mode);
+        switchScrollMode: function (scrollMode) {
+            switchScrollMode(store, scrollMode);
         },
+        switchViewMode: function (viewMode) {
+            switchViewMode(store, viewMode);
+        },
         SwitchScrollMode: SwitchScrollModeDecorator,
         SwitchScrollModeButton: SwitchScrollModeButtonDecorator,
         SwitchScrollModeMenuItem: SwitchScrollModeMenuItemDecorator,
+        SwitchViewMode: SwitchViewModeDecorator,
+        SwitchViewModeButton: SwitchViewModeButtonDecorator,
+        SwitchViewModeMenuItem: SwitchViewModeMenuItemDecorator,
     };
 };
 
+exports.DualPageCoverViewModeIcon = DualPageCoverViewModeIcon;
+exports.DualPageViewModeIcon = DualPageViewModeIcon;
 exports.HorizontalScrollingIcon = HorizontalScrollingIcon;
+exports.PageScrollingIcon = PageScrollingIcon;
 exports.VerticalScrollingIcon = VerticalScrollingIcon;
 exports.WrappedScrollingIcon = WrappedScrollingIcon;
 exports.scrollModePlugin = scrollModePlugin;

lib/cjs/scroll-mode.min.js

@@ -1,1 +0,1 @@
-"use strict";var e=require("@react-pdf-viewer/core");function c(e){var c=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(c,o,t.get?t:{enumerable:!0,get:function(){return e[o]}})}})),c.default=e,Object.freeze(c)}var o=c(require("react")),t=function(){return o.createElement(e.Icon,{size:16},o.createElement("path",{d:"M6.5,21.5c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z\n            M14.5,21.5c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z\n            M22.5,21.5 c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z"}))},l=function(){return l=Object.assign||function(e){for(var c,o=1,t=arguments.length;o<t;o++)for(var l in c=arguments[o])Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);return e},l.apply(this,arguments)},r=function(){return o.createElement(e.Icon,{size:16},o.createElement("path",{d:"M23.5,5.5c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V5.5z\n            M23.5,13.5c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V13.5z\n            M23.5,21.5 c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V21.5z"}))},n=function(){return o.createElement(e.Icon,{size:16},o.createElement("path",{d:"M10.5,9.5c0,0.552-0.448,1-1,1h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V9.5z\n            M23.5,9.5c0,0.552-0.448,1-1,1h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V9.5z\n            M10.5,22.5 c0,0.552-0.448,1-1,1h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V22.5z\n            M23.5,22.5c0,0.552-0.448,1-1,1 h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V22.5z"}))},i=function(c){var l=c.children,i=c.mode,a=c.onClick,u=o.useContext(e.LocalizationContext).l10n,d="",s=o.createElement(r,null);switch(i){case e.ScrollMode.Horizontal:d=u&&u.scrollMode?u.scrollMode.horizontalScrolling:"Horizontal scrolling",s=o.createElement(t,null);break;case e.ScrollMode.Wrapped:d=u&&u.scrollMode?u.scrollMode.wrappedScrolling:"Wrapped scrolling",s=o.createElement(n,null);break;case e.ScrollMode.Vertical:default:d=u&&u.scrollMode?u.scrollMode.verticalScrolling:"Vertical scrolling",s=o.createElement(r,null)}return l({icon:s,label:d,onClick:a})},a={left:0,top:8},u=function(c){var t=c.isSelected,l=c.mode,r=c.onClick,n="";switch(l){case e.ScrollMode.Horizontal:n="scroll-mode__horizontal-button";break;case e.ScrollMode.Wrapped:n="scroll-mode__wrapped-button";break;case e.ScrollMode.Vertical:default:n="scroll-mode__vertical-button"}return o.createElement(i,{mode:l,onClick:r},(function(c){return o.createElement(e.Tooltip,{ariaControlsSuffix:"scroll-mode-switch",position:e.Position.BottomCenter,target:o.createElement(e.MinimalButton,{ariaLabel:c.label,isSelected:t,testId:n,onClick:c.onClick},c.icon),content:function(){return c.label},offset:a})}))},d=function(c){var t=c.children,l=c.mode,r=c.store,n=function(c){var t=o.useState(c.get("scrollMode")||e.ScrollMode.Vertical),l=t[0],r=t[1],n=function(e){r(e)};return o.useEffect((function(){return c.subscribe("scrollMode",n),function(){c.unsubscribe("scrollMode",n)}}),[]),{scrollMode:l}}(r).scrollMode,i=n===l;return(t||function(e){return o.createElement(u,{isSelected:i,mode:e.mode,onClick:e.onClick})})({isSelected:i,mode:l,onClick:function(){r.get("switchScrollMode")(l)}})},s=function(c){var t=c.isSelected,l=c.mode,r=c.onClick,n="";switch(l){case e.ScrollMode.Horizontal:n="scroll-mode__horizontal-menu";break;case e.ScrollMode.Wrapped:n="scroll-mode__wrapped-menu";break;case e.ScrollMode.Vertical:default:n="scroll-mode__vertical-menu"}return o.createElement(i,{mode:l,onClick:r},(function(c){return o.createElement(e.MenuItem,{checked:t,icon:c.icon,testId:n,onClick:c.onClick},c.label)}))};exports.HorizontalScrollingIcon=t,exports.VerticalScrollingIcon=r,exports.WrappedScrollingIcon=n,exports.scrollModePlugin=function(){var c=o.useMemo((function(){return e.createStore({scrollMode:e.ScrollMode.Vertical,switchScrollMode:function(){}})}),[]),t=function(e){return o.createElement(d,l({},e,{store:c}))};return{install:function(e){c.update("switchScrollMode",e.switchScrollMode)},onViewerStateChange:function(e){return c.update("scrollMode",e.scrollMode),e},switchScrollMode:function(e){c.get("switchScrollMode")(e)},SwitchScrollMode:t,SwitchScrollModeButton:function(e){return o.createElement(t,{mode:e.mode},(function(e){return o.createElement(u,{isSelected:e.isSelected,mode:e.mode,onClick:function(){e.onClick()}})}))},SwitchScrollModeMenuItem:function(e){return o.createElement(t,{mode:e.mode},(function(c){return o.createElement(s,{isSelected:c.isSelected,mode:c.mode,onClick:function(){c.onClick(),e.onClick()}})}))}}};
+"use strict";var e=require("@react-pdf-viewer/core");function o(e){var o=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,l.get?l:{enumerable:!0,get:function(){return e[t]}})}})),o.default=e,Object.freeze(o)}var t=o(require("react")),l=function(){return t.createElement(e.Icon,{size:16},t.createElement("rect",{x:"0.5",y:"0.497",width:"22",height:"22",rx:"1",ry:"1"}),t.createElement("line",{x1:"0.5",y1:"6.497",x2:"22.5",y2:"6.497"}),t.createElement("line",{x1:"11.5",y1:"6.497",x2:"11.5",y2:"22.497"}))},c=function(){return t.createElement(e.Icon,{size:16},t.createElement("rect",{x:"0.5",y:"0.497",width:"22",height:"22",rx:"1",ry:"1"}),t.createElement("line",{x1:"11.5",y1:"0.497",x2:"11.5",y2:"22.497"}))},n=function(){return t.createElement(e.Icon,{size:16},t.createElement("path",{d:"M6.5,21.5c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z\n            M14.5,21.5c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z\n            M22.5,21.5 c0,0.552-0.448,1-1,1h-4c-0.552,0-1-0.448-1-1v-20c0-0.552,0.448-1,1-1h4c0.552,0,1,0.448,1,1V21.5z"}))},r=function(){return t.createElement(e.Icon,{size:16},t.createElement("rect",{x:"0.5",y:"0.497",width:"22",height:"22",rx:"1",ry:"1"}))},i=function(){return i=Object.assign||function(e){for(var o,t=1,l=arguments.length;t<l;t++)for(var c in o=arguments[t])Object.prototype.hasOwnProperty.call(o,c)&&(e[c]=o[c]);return e},i.apply(this,arguments)},a=function(o,t){o.get("switchScrollMode")(t);var l=o.get("viewMode");t!==e.ScrollMode.Horizontal&&t!==e.ScrollMode.Wrapped||l===e.ViewMode.SinglePage||o.get("switchViewMode")(e.ViewMode.SinglePage)},d=function(){return t.createElement(e.Icon,{size:16},t.createElement("path",{d:"M23.5,5.5c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V5.5z\n            M23.5,13.5c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V13.5z\n            M23.5,21.5 c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-3c0-0.552,0.448-1,1-1h21c0.552,0,1,0.448,1,1V21.5z"}))},s=function(){return t.createElement(e.Icon,{size:16},t.createElement("path",{d:"M10.5,9.5c0,0.552-0.448,1-1,1h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V9.5z\n            M23.5,9.5c0,0.552-0.448,1-1,1h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V9.5z\n            M10.5,22.5 c0,0.552-0.448,1-1,1h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V22.5z\n            M23.5,22.5c0,0.552-0.448,1-1,1 h-8c-0.552,0-1-0.448-1-1v-8c0-0.552,0.448-1,1-1h8c0.552,0,1,0.448,1,1V22.5z"}))},u=function(o){var l=o.children,c=o.mode,i=o.onClick,a=t.useContext(e.LocalizationContext).l10n,u="",m=t.createElement(d,null);switch(c){case e.ScrollMode.Horizontal:u=a&&a.scrollMode?a.scrollMode.horizontalScrolling:"Horizontal scrolling",m=t.createElement(n,null);break;case e.ScrollMode.Page:u=a&&a.scrollMode?a.scrollMode.pageScrolling:"Page scrolling",m=t.createElement(r,null);break;case e.ScrollMode.Wrapped:u=a&&a.scrollMode?a.scrollMode.wrappedScrolling:"Wrapped scrolling",m=t.createElement(s,null);break;case e.ScrollMode.Vertical:default:u=a&&a.scrollMode?a.scrollMode.verticalScrolling:"Vertical scrolling",m=t.createElement(d,null)}return l({icon:m,label:u,onClick:i})},m={left:0,top:8},M=function(o){var l=o.isDisabled,c=o.isSelected,n=o.mode,r=o.onClick,i="";switch(n){case e.ScrollMode.Horizontal:i="scroll-mode__horizontal-button";break;case e.ScrollMode.Page:i="scroll-mode__page-button";break;case e.ScrollMode.Wrapped:i="scroll-mode__wrapped-button";break;case e.ScrollMode.Vertical:default:i="scroll-mode__vertical-button"}return t.createElement(u,{mode:n,onClick:r},(function(o){return t.createElement(e.Tooltip,{ariaControlsSuffix:"scroll-mode-switch",position:e.Position.BottomCenter,target:t.createElement(e.MinimalButton,{ariaLabel:o.label,isDisabled:l,isSelected:c,testId:i,onClick:o.onClick},o.icon),content:function(){return o.label},offset:m})}))},f=function(o){var l=t.useState(o.get("scrollMode")||e.ScrollMode.Vertical),c=l[0],n=l[1],r=function(e){n(e)};return t.useEffect((function(){return o.subscribe("scrollMode",r),function(){o.unsubscribe("scrollMode",r)}}),[]),{scrollMode:c}},w=function(o){var l=t.useState(o.get("viewMode")||e.ViewMode.SinglePage),c=l[0],n=l[1],r=function(e){n(e)};return t.useEffect((function(){return o.subscribe("viewMode",r),function(){o.unsubscribe("viewMode",r)}}),[]),{viewMode:c}},S=function(o){var l=o.children,c=o.mode,n=o.store,r=w(n).viewMode,i=f(n).scrollMode===c,d=(c===e.ScrollMode.Horizontal||c===e.ScrollMode.Wrapped)&&r!==e.ViewMode.SinglePage;return(l||function(e){return t.createElement(M,{isDisabled:d,isSelected:i,mode:e.mode,onClick:e.onClick})})({isDisabled:d,isSelected:i,mode:c,onClick:function(){a(n,c)}})},g=function(o){var l=o.isDisabled,c=o.isSelected,n=o.mode,r=o.onClick,i="";switch(n){case e.ScrollMode.Horizontal:i="scroll-mode__horizontal-menu";break;case e.ScrollMode.Page:i="scroll-mode__page-menu";break;case e.ScrollMode.Wrapped:i="scroll-mode__wrapped-menu";break;case e.ScrollMode.Vertical:default:i="scroll-mode__vertical-menu"}return t.createElement(u,{mode:n,onClick:r},(function(o){return t.createElement(e.MenuItem,{checked:c,icon:o.icon,isDisabled:l,testId:i,onClick:o.onClick},o.label)}))},h=function(o,t){o.get("switchViewMode")(t);var l=o.get("scrollMode");l!==e.ScrollMode.Horizontal&&l!==e.ScrollMode.Wrapped||t===e.ViewMode.SinglePage||o.get("switchScrollMode")(e.ScrollMode.Vertical)},b=function(o){var n=o.children,i=o.mode,a=o.onClick,d=t.useContext(e.LocalizationContext).l10n,s="",u=t.createElement(r,null);switch(i){case e.ViewMode.DualPage:s=d&&d.scrollMode?d.scrollMode.dualPage:"Dual page",u=t.createElement(c,null);break;case e.ViewMode.DualPageWithCover:s=d&&d.scrollMode?d.scrollMode.dualPageCover:"Dual page with cover",u=t.createElement(l,null);break;case e.ViewMode.SinglePage:default:s=d&&d.scrollMode?d.scrollMode.singlePage:"Single page",u=t.createElement(r,null)}return n({icon:u,label:s,onClick:a})},p={left:0,top:8},v=function(o){var l=o.isDisabled,c=o.isSelected,n=o.mode,r=o.onClick,i="";switch(n){case e.ViewMode.DualPage:i="view-mode__dual-button";break;case e.ViewMode.DualPageWithCover:i="view-mode__dual-cover-button";break;case e.ViewMode.SinglePage:default:i="view-mode__single-button"}return t.createElement(b,{mode:n,onClick:r},(function(o){return t.createElement(e.Tooltip,{ariaControlsSuffix:"view-mode-switch",position:e.Position.BottomCenter,target:t.createElement(e.MinimalButton,{ariaLabel:o.label,isDisabled:l,isSelected:c,testId:i,onClick:o.onClick},o.icon),content:function(){return o.label},offset:p})}))},k=function(o){var l=o.children,c=o.mode,n=o.store,r=w(n).viewMode,i=f(n).scrollMode,a=r===c,d=(i===e.ScrollMode.Horizontal||i===e.ScrollMode.Wrapped)&&c!==e.ViewMode.SinglePage;return(l||function(e){return t.createElement(v,{isDisabled:d,isSelected:a,mode:e.mode,onClick:e.onClick})})({isDisabled:d,isSelected:a,mode:c,onClick:function(){h(n,c)}})},C=function(o){var l=o.isDisabled,c=o.isSelected,n=o.mode,r=o.onClick,i="";switch(n){case e.ViewMode.DualPage:i="view-mode__dual-menu";break;case e.ViewMode.DualPageWithCover:i="view-mode__dual-cover-menu";break;case e.ViewMode.SinglePage:default:i="view-mode__single-menu"}return t.createElement(b,{mode:n,onClick:r},(function(o){return t.createElement(e.MenuItem,{checked:c,icon:o.icon,isDisabled:l,testId:i,onClick:o.onClick},o.label)}))};exports.DualPageCoverViewModeIcon=l,exports.DualPageViewModeIcon=c,exports.HorizontalScrollingIcon=n,exports.PageScrollingIcon=r,exports.VerticalScrollingIcon=d,exports.WrappedScrollingIcon=s,exports.scrollModePlugin=function(){var o=t.useMemo((function(){return e.createStore({scrollMode:e.ScrollMode.Vertical,viewMode:e.ViewMode.SinglePage,switchScrollMode:function(){},switchViewMode:function(){}})}),[]),l=function(e){return t.createElement(S,i({},e,{store:o}))},c=function(e){return t.createElement(k,i({},e,{store:o}))};return{install:function(e){o.update("switchScrollMode",e.switchScrollMode),o.update("switchViewMode",e.switchViewMode)},onViewerStateChange:function(e){return o.update("scrollMode",e.scrollMode),o.update("viewMode",e.viewMode),e},switchScrollMode:function(e){a(o,e)},switchViewMode:function(e){h(o,e)},SwitchScrollMode:l,SwitchScrollModeButton:function(e){return t.createElement(l,{mode:e.mode},(function(e){return t.createElement(M,{isDisabled:e.isDisabled,isSelected:e.isSelected,mode:e.mode,onClick:function(){e.onClick()}})}))},SwitchScrollModeMenuItem:function(e){return t.createElement(l,{mode:e.mode},(function(o){return t.createElement(g,{isDisabled:o.isDisabled,isSelected:o.isSelected,mode:o.mode,onClick:function(){o.onClick(),e.onClick()}})}))},SwitchViewMode:c,SwitchViewModeButton:function(e){return t.createElement(c,{mode:e.mode},(function(e){return t.createElement(v,{isDisabled:e.isDisabled,isSelected:e.isSelected,mode:e.mode,onClick:function(){e.onClick()}})}))},SwitchViewModeMenuItem:function(e){return t.createElement(c,{mode:e.mode},(function(o){return t.createElement(C,{isDisabled:o.isDisabled,isSelected:o.isSelected,mode:o.mode,onClick:function(){o.onClick(),e.onClick()}})}))}}};

lib/index.d.ts

@@ -10,3 +10,3 @@ /**
 import type { Plugin } from '@react-pdf-viewer/core';
-import { ScrollMode } from '@react-pdf-viewer/core';
+import { ScrollMode, ViewMode } from '@react-pdf-viewer/core';
 import * as React from 'react';
@@ -21,2 +21,3 @@
 export interface RenderSwitchScrollModeProps {
+    isDisabled: boolean;
     isSelected: boolean;
@@ -36,2 +37,23 @@ mode: ScrollMode;
 
+export interface SwitchViewModeProps {
+    children?: (props: RenderSwitchViewModeProps) => React.ReactElement;
+    mode: ViewMode;
+}
+
+export interface RenderSwitchViewModeProps {
+    isDisabled: boolean;
+    isSelected: boolean;
+    mode: ViewMode;
+    onClick(): void;
+}
+
+export interface SwitchViewModeButtonProps {
+    mode: ViewMode;
+}
+
+export interface SwitchViewModeMenuItemProps {
+    mode: ViewMode;
+    onClick(): void;
+}
+
 // Plugin
@@ -43,2 +65,7 @@ export interface ScrollModePlugin extends Plugin {
     SwitchScrollModeMenuItem(props: SwitchScrollModeMenuItemProps): React.ReactElement;
+
+    switchViewMode(mode: ViewMode): void;
+    SwitchViewMode(props: SwitchViewModeProps): React.ReactElement;
+    SwitchViewModeButton(props: SwitchViewModeButtonProps): React.ReactElement;
+    SwitchViewModeMenuItem(props: SwitchViewModeMenuItemProps): React.ReactElement;
 }
@@ -49,4 +76,7 @@
 // Components
+export class DualPageViewModeIcon extends React.Component {}
+export class DualPageCoverViewModeIcon extends React.Component {}
 export class HorizontalScrollingIcon extends React.Component {}
+export class PageScrollingIcon extends React.Component {}
 export class VerticalScrollingIcon extends React.Component {}
 export class WrappedScrollingIcon extends React.Component {}

package.json

 {
     "name": "@react-pdf-viewer/scroll-mode",
-    "version": "3.9.0",
+    "version": "3.10.0",
     "description": "A React component to view a PDF document",
@@ -36,3 +36,3 @@ "license": "https://react-pdf-viewer.dev/license",
     "dependencies": {
-        "@react-pdf-viewer/core": "3.9.0"
+        "@react-pdf-viewer/core": "3.10.0"
     },
@@ -51,3 +51,3 @@ "peerDependencies": {
     },
-    "gitHead": "cd870dc8f610be09a7c53883f2d4c4421d3f441e"
+    "gitHead": "bf5c12d9dcac3215cee0f6b9a214dcdf3a67d81d"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32079

increased by77.67%

Lines of code

457

increased by79.22%

Dependency changes

• + Added@react-pdf-viewer/core@3.10.0(transitive)

• - Removed@react-pdf-viewer/core@3.9.0(transitive)

• Updated@react-pdf-viewer/core@3.10.0