@react-pdf-viewer/full-screen - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

lib/cjs/full-screen.js

@@ -66,6 +66,7 @@ 'use strict';
 var EnterFullScreenButton = function (_a) {
-    var onClick = _a.onClick;
+    var enableShortcuts = _a.enableShortcuts, onClick = _a.onClick;
     var l10n = React__namespace.useContext(core.LocalizationContext).l10n;
     var label = l10n && l10n.fullScreen ? l10n.fullScreen.enterFullScreen : 'Full screen';
-    return (React__namespace.createElement(core.Tooltip, { ariaControlsSuffix: "full-screen-enter", position: core.Position.BottomCenter, target: React__namespace.createElement(core.MinimalButton, { ariaLabel: label, onClick: onClick },
+    var ariaKeyShortcuts = enableShortcuts ? (core.isMac() ? 'Meta+Ctrl+F' : 'F11') : '';
+    return (React__namespace.createElement(core.Tooltip, { ariaControlsSuffix: "full-screen-enter", position: core.Position.BottomCenter, target: React__namespace.createElement(core.MinimalButton, { ariaKeyShortcuts: ariaKeyShortcuts, ariaLabel: label, onClick: onClick },
             React__namespace.createElement(FullScreenIcon, null)), content: function () { return label; }, offset: TOOLTIP_OFFSET }));
@@ -130,4 +131,3 @@ };
 
-var EnterFullScreen = function (_a) {
-    var children = _a.children, store = _a.store, onEnterFullScreen = _a.onEnterFullScreen, onExitFullScreen = _a.onExitFullScreen;
+var useEnterFullScreen = function (store, onEnterFullScreen, onExitFullScreen) {
     var pagesRef = React__namespace.useRef(store.get('getPagesContainer') ? store.get('getPagesContainer')() : null);
@@ -170,3 +170,11 @@ var closeOtherFullScreen = function () {
     }, []);
-    var defaultChildren = function (props) { return React__namespace.createElement(EnterFullScreenButton, { onClick: props.onClick }); };
+    return {
+        enterFullScreen: enterFullScreen,
+    };
+};
+
+var EnterFullScreen = function (_a) {
+    var children = _a.children, enableShortcuts = _a.enableShortcuts, store = _a.store, onEnterFullScreen = _a.onEnterFullScreen, onExitFullScreen = _a.onExitFullScreen;
+    var enterFullScreen = useEnterFullScreen(store, onEnterFullScreen, onExitFullScreen).enterFullScreen;
+    var defaultChildren = function (props) { return (React__namespace.createElement(EnterFullScreenButton, { enableShortcuts: enableShortcuts, onClick: props.onClick })); };
     var render = children || defaultChildren;
@@ -233,8 +241,40 @@ return render({
 
+var ShortcutHandler = function (_a) {
+    var containerRef = _a.containerRef, store = _a.store, onEnterFullScreen = _a.onEnterFullScreen, onExitFullScreen = _a.onExitFullScreen;
+    var enterFullScreen = useEnterFullScreen(store, onEnterFullScreen, onExitFullScreen).enterFullScreen;
+    var keydownHandler = function (e) {
+        if (e.shiftKey || e.altKey) {
+            return;
+        }
+        var areShortcutsPressed = core.isMac() ? e.metaKey && e.ctrlKey && e.key === 'f' : e.key === 'F11';
+        if (!areShortcutsPressed) {
+            return;
+        }
+        var containerEle = containerRef.current;
+        if (!containerEle || !document.activeElement || !containerEle.contains(document.activeElement)) {
+            return;
+        }
+        e.preventDefault();
+        enterFullScreen();
+    };
+    React__namespace.useEffect(function () {
+        var containerEle = containerRef.current;
+        if (!containerEle) {
+            return;
+        }
+        document.addEventListener('keydown', keydownHandler);
+        return function () {
+            document.removeEventListener('keydown', keydownHandler);
+        };
+    }, [containerRef.current]);
+    return React__namespace.createElement(React__namespace.Fragment, null);
+};
+
 var fullScreenPlugin = function (props) {
+    var fullScreenPluginProps = React__namespace.useMemo(function () {
+        return Object.assign({}, { enableShortcuts: true, onEnterFullScreen: function () { }, onExitFullScreen: function () { } }, props);
+    }, []);
     var store = React__namespace.useMemo(function () { return core.createStore({}); }, []);
-    var onEnterFullScreen = props && props.onEnterFullScreen ? props.onEnterFullScreen : function () { };
-    var onExitFullScreen = props && props.onExitFullScreen ? props.onExitFullScreen : function () { };
-    var EnterFullScreenDecorator = function (props) { return (React__namespace.createElement(EnterFullScreen, __assign({}, props, { store: store, onEnterFullScreen: onEnterFullScreen, onExitFullScreen: onExitFullScreen }))); };
-    var EnterFullScreenButtonDecorator = function () { return (React__namespace.createElement(EnterFullScreenDecorator, null, function (renderProps) { return React__namespace.createElement(EnterFullScreenButton, __assign({}, renderProps)); })); };
+    var EnterFullScreenDecorator = function (props) { return (React__namespace.createElement(EnterFullScreen, __assign({}, props, { enableShortcuts: fullScreenPluginProps.enableShortcuts, store: store, onEnterFullScreen: fullScreenPluginProps.onEnterFullScreen, onExitFullScreen: fullScreenPluginProps.onExitFullScreen }))); };
+    var EnterFullScreenButtonDecorator = function () { return (React__namespace.createElement(EnterFullScreenDecorator, null, function (renderProps) { return (React__namespace.createElement(EnterFullScreenButton, __assign({ enableShortcuts: fullScreenPluginProps.enableShortcuts }, renderProps))); })); };
     var EnterFullScreenMenuItemDecorator = function (props) { return (React__namespace.createElement(EnterFullScreenDecorator, null, function (p) { return (React__namespace.createElement(EnterFullScreenMenuItem, { onClick: function () {
@@ -249,2 +289,3 @@ p.onClick();
             currentSlot.subSlot.children = (React__namespace.createElement(React__namespace.Fragment, null,
+                fullScreenPluginProps.enableShortcuts && (React__namespace.createElement(ShortcutHandler, { containerRef: props.containerRef, store: store, onEnterFullScreen: fullScreenPluginProps.onEnterFullScreen, onExitFullScreen: fullScreenPluginProps.onExitFullScreen })),
                 React__namespace.createElement(ExitFullScreenDecorator, null),
@@ -251,0 +292,0 @@ currentSlot.subSlot.children));

lib/cjs/full-screen.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@react-pdf-viewer/core");function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,l.get?l:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l,r=t(e),u=function(){return(u=Object.assign||function(e){for(var n,t=1,l=arguments.length;t<l;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},c=function(){return r.createElement(n.Icon,{size:16},r.createElement("path",{d:"M0.5 12L23.5 12"}),r.createElement("path",{d:"M11.5 1L11.5 23"}),r.createElement("path",{d:"M8.5 4L11.5 1 14.5 4"}),r.createElement("path",{d:"M20.5 9L23.5 12 20.5 15"}),r.createElement("path",{d:"M3.5 15L0.5 12 3.5 9"}),r.createElement("path",{d:"M14.5 20L11.5 23 8.5 20"}))},o={left:0,top:8},i=function(e){var t=e.onClick,l=r.useContext(n.LocalizationContext).l10n,u=l&&l.fullScreen?l.fullScreen.enterFullScreen:"Full screen";return r.createElement(n.Tooltip,{ariaControlsSuffix:"full-screen-enter",position:n.Position.BottomCenter,target:r.createElement(n.MinimalButton,{ariaLabel:u,onClick:t},r.createElement(c,null)),content:function(){return u},offset:o})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@react-pdf-viewer/core");function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var r,l=t(e),c=function(){return(c=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var l in n=arguments[t])Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);return e}).apply(this,arguments)},u=function(){return l.createElement(n.Icon,{size:16},l.createElement("path",{d:"M0.5 12L23.5 12"}),l.createElement("path",{d:"M11.5 1L11.5 23"}),l.createElement("path",{d:"M8.5 4L11.5 1 14.5 4"}),l.createElement("path",{d:"M20.5 9L23.5 12 20.5 15"}),l.createElement("path",{d:"M3.5 15L0.5 12 3.5 9"}),l.createElement("path",{d:"M14.5 20L11.5 23 8.5 20"}))},o={left:0,top:8},a=function(e){var t=e.enableShortcuts,r=e.onClick,c=l.useContext(n.LocalizationContext).l10n,a=c&&c.fullScreen?c.fullScreen.enterFullScreen:"Full screen",i=t?n.isMac()?"Meta+Ctrl+F":"F11":"";return l.createElement(n.Tooltip,{ariaControlsSuffix:"full-screen-enter",position:n.Position.BottomCenter,target:l.createElement(n.MinimalButton,{ariaKeyShortcuts:i,ariaLabel:a,onClick:r},l.createElement(u,null)),content:function(){return a},offset:o})};
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */!function(e){e[e.ExitFullScreen=0]="ExitFullScreen",e[e.FullScreenChange=1]="FullScreenChange",e[e.FullScreenElement=2]="FullScreenElement",e[e.FullScreenEnabled=3]="FullScreenEnabled",e[e.RequestFullScreen=4]="RequestFullScreen"}(l||(l={}));var a={ExitFullScreen:"exitFullscreen",FullScreenChange:"fullscreenchange",FullScreenElement:"fullscreenElement",FullScreenEnabled:"fullscreenEnabled",RequestFullScreen:"requestFullscreen"},s={ExitFullScreen:"webkitExitFullscreen",FullScreenChange:"webkitfullscreenchange",FullScreenElement:"webkitFullscreenElement",FullScreenEnabled:"webkitFullscreenEnabled",RequestFullScreen:"webkitRequestFullscreen"},f={ExitFullScreen:"msExitFullscreen",FullScreenChange:"MSFullscreenChange",FullScreenElement:"msFullscreenElement",FullScreenEnabled:"msFullscreenEnabled",RequestFullScreen:"msRequestFullscreen"},E="undefined"!=typeof window,m=E&&(l.FullScreenEnabled in document&&a||s.FullScreenEnabled in document&&s||f.FullScreenEnabled in document&&f)||a,F=function(e){return E?e[m.ExitFullScreen]():Promise.resolve({})},S=function(){return E?document[m.FullScreenElement]:null},d=function(e){var n=e.children,t=e.store,l=e.onEnterFullScreen,u=e.onExitFullScreen,c=r.useRef(t.get("getPagesContainer")?t.get("getPagesContainer")():null),o=function(){var e=S()===c.current;t.update("isFullScreen",e);var n=t.get("zoom");n&&(e?l(n):u(n))},a=function(e){var n;c.current=e(),n=o,E&&document.addEventListener(m.FullScreenChange,n)};r.useEffect((function(){return t.subscribe("getPagesContainer",a),function(){t.unsubscribe("getPagesContainer",a)}}),[]);return(n||function(e){return r.createElement(i,{onClick:e.onClick})})({onClick:function(){var e=c.current;e&&function(){var e=c.current;if(!e)return Promise.resolve();var n=S();return n&&n!==e?F(n):Promise.resolve()}().then((function(){var n;n=e,E&&n[m.RequestFullScreen]()}))}})},b=function(e){var t=e.onClick,l=r.useContext(n.LocalizationContext).l10n,u=l&&l.fullScreen?l.fullScreen.enterFullScreen:"Full screen";return r.createElement(n.MenuItem,{icon:r.createElement(c,null),onClick:t},u)},g=function(){return r.createElement(n.Icon,{size:16},r.createElement("path",{d:"M11.5 23.499L11.5 14.499"}),r.createElement("path",{d:"M7.5 18.499L11.5 14.499 15.5 18.499"}),r.createElement("path",{d:"M11.5 1.499L11.5 10.499"}),r.createElement("path",{d:"M7.5 6.499L11.5 10.499 15.5 6.499"}),r.createElement("path",{d:"M20.5 12.499L1.5 12.499"}))},p=function(e){var t=e.store,l=r.useState(!1),u=l[0],c=l[1],o=r.useContext(n.LocalizationContext).l10n,i=r.useContext(n.ThemeContext).direction===n.TextDirection.RightToLeft,a=o&&o.fullScreen?o.fullScreen.exitFullScreen:"Exit full screen",s=function(e){c(e)};return r.useEffect((function(){return t.subscribe("isFullScreen",s),function(){t.unsubscribe("isFullScreen",s)}}),[]),r.createElement(r.Fragment,null,u&&r.createElement("div",{className:n.classNames({"rpv-full-screen__exit-button":!0,"rpv-full-screen__exit-button--ltr":!i,"rpv-full-screen__exit-button--rtl":i})},r.createElement("div",{className:"rpv-full-screen__exit-button-content"},r.createElement(n.MinimalButton,{ariaLabel:a,onClick:function(){c(!1);var e=t.get("getPagesContainer");if(e){var n=e();if(n){var l=S();l&&l===n&&F(document)}}}},r.createElement(g,null)))))};exports.ExitFullScreenIcon=g,exports.FullScreenIcon=c,exports.fullScreenPlugin=function(e){var t=r.useMemo((function(){return n.createStore({})}),[]),l=e&&e.onEnterFullScreen?e.onEnterFullScreen:function(){},c=e&&e.onExitFullScreen?e.onExitFullScreen:function(){},o=function(e){return r.createElement(d,u({},e,{store:t,onEnterFullScreen:l,onExitFullScreen:c}))},a=function(){return r.createElement(p,{store:t})};return{install:function(e){t.update("getPagesContainer",e.getPagesContainer),t.update("zoom",e.zoom)},renderViewer:function(e){var n=e.slot;return n.subSlot&&(n.subSlot.children=r.createElement(r.Fragment,null,r.createElement(a,null),n.subSlot.children)),n},EnterFullScreen:o,EnterFullScreenButton:function(){return r.createElement(o,null,(function(e){return r.createElement(i,u({},e))}))},EnterFullScreenMenuItem:function(e){return r.createElement(o,null,(function(n){return r.createElement(b,{onClick:function(){n.onClick(),e.onClick()}})}))}}};
+***************************************************************************** */!function(e){e[e.ExitFullScreen=0]="ExitFullScreen",e[e.FullScreenChange=1]="FullScreenChange",e[e.FullScreenElement=2]="FullScreenElement",e[e.FullScreenEnabled=3]="FullScreenEnabled",e[e.RequestFullScreen=4]="RequestFullScreen"}(r||(r={}));var i={ExitFullScreen:"exitFullscreen",FullScreenChange:"fullscreenchange",FullScreenElement:"fullscreenElement",FullScreenEnabled:"fullscreenEnabled",RequestFullScreen:"requestFullscreen"},s={ExitFullScreen:"webkitExitFullscreen",FullScreenChange:"webkitfullscreenchange",FullScreenElement:"webkitFullscreenElement",FullScreenEnabled:"webkitFullscreenEnabled",RequestFullScreen:"webkitRequestFullscreen"},f={ExitFullScreen:"msExitFullscreen",FullScreenChange:"MSFullscreenChange",FullScreenElement:"msFullscreenElement",FullScreenEnabled:"msFullscreenEnabled",RequestFullScreen:"msRequestFullscreen"},E="undefined"!=typeof window,S=E&&(r.FullScreenEnabled in document&&i||s.FullScreenEnabled in document&&s||f.FullScreenEnabled in document&&f)||i,m=function(e){return E?e[S.ExitFullScreen]():Promise.resolve({})},F=function(){return E?document[S.FullScreenElement]:null},d=function(e,n,t){var r=l.useRef(e.get("getPagesContainer")?e.get("getPagesContainer")():null),c=function(){var l=F()===r.current;e.update("isFullScreen",l);var c=e.get("zoom");c&&(l?n(c):t(c))},u=function(e){var n;r.current=e(),n=c,E&&document.addEventListener(S.FullScreenChange,n)};return l.useEffect((function(){return e.subscribe("getPagesContainer",u),function(){e.unsubscribe("getPagesContainer",u)}}),[]),{enterFullScreen:function(){var e=r.current;e&&function(){var e=r.current;if(!e)return Promise.resolve();var n=F();return n&&n!==e?m(n):Promise.resolve()}().then((function(){var n;n=e,E&&n[S.RequestFullScreen]()}))}}},b=function(e){var n=e.children,t=e.enableShortcuts,r=e.store,c=e.onEnterFullScreen,u=e.onExitFullScreen;return(n||function(e){return l.createElement(a,{enableShortcuts:t,onClick:e.onClick})})({onClick:d(r,c,u).enterFullScreen})},v=function(e){var t=e.onClick,r=l.useContext(n.LocalizationContext).l10n,c=r&&r.fullScreen?r.fullScreen.enterFullScreen:"Full screen";return l.createElement(n.MenuItem,{icon:l.createElement(u,null),onClick:t},c)},h=function(){return l.createElement(n.Icon,{size:16},l.createElement("path",{d:"M11.5 23.499L11.5 14.499"}),l.createElement("path",{d:"M7.5 18.499L11.5 14.499 15.5 18.499"}),l.createElement("path",{d:"M11.5 1.499L11.5 10.499"}),l.createElement("path",{d:"M7.5 6.499L11.5 10.499 15.5 6.499"}),l.createElement("path",{d:"M20.5 12.499L1.5 12.499"}))},g=function(e){var t=e.store,r=l.useState(!1),c=r[0],u=r[1],o=l.useContext(n.LocalizationContext).l10n,a=l.useContext(n.ThemeContext).direction===n.TextDirection.RightToLeft,i=o&&o.fullScreen?o.fullScreen.exitFullScreen:"Exit full screen",s=function(e){u(e)};return l.useEffect((function(){return t.subscribe("isFullScreen",s),function(){t.unsubscribe("isFullScreen",s)}}),[]),l.createElement(l.Fragment,null,c&&l.createElement("div",{className:n.classNames({"rpv-full-screen__exit-button":!0,"rpv-full-screen__exit-button--ltr":!a,"rpv-full-screen__exit-button--rtl":a})},l.createElement("div",{className:"rpv-full-screen__exit-button-content"},l.createElement(n.MinimalButton,{ariaLabel:i,onClick:function(){u(!1);var e=t.get("getPagesContainer");if(e){var n=e();if(n){var r=F();r&&r===n&&m(document)}}}},l.createElement(h,null)))))},p=function(e){var t=e.containerRef,r=e.store,c=e.onEnterFullScreen,u=e.onExitFullScreen,o=d(r,c,u).enterFullScreen,a=function(e){if(!e.shiftKey&&!e.altKey&&(n.isMac()?e.metaKey&&e.ctrlKey&&"f"===e.key:"F11"===e.key)){var r=t.current;r&&document.activeElement&&r.contains(document.activeElement)&&(e.preventDefault(),o())}};return l.useEffect((function(){if(t.current)return document.addEventListener("keydown",a),function(){document.removeEventListener("keydown",a)}}),[t.current]),l.createElement(l.Fragment,null)};exports.ExitFullScreenIcon=h,exports.FullScreenIcon=u,exports.fullScreenPlugin=function(e){var t=l.useMemo((function(){return Object.assign({},{enableShortcuts:!0,onEnterFullScreen:function(){},onExitFullScreen:function(){}},e)}),[]),r=l.useMemo((function(){return n.createStore({})}),[]),u=function(e){return l.createElement(b,c({},e,{enableShortcuts:t.enableShortcuts,store:r,onEnterFullScreen:t.onEnterFullScreen,onExitFullScreen:t.onExitFullScreen}))},o=function(){return l.createElement(g,{store:r})};return{install:function(e){r.update("getPagesContainer",e.getPagesContainer),r.update("zoom",e.zoom)},renderViewer:function(e){var n=e.slot;return n.subSlot&&(n.subSlot.children=l.createElement(l.Fragment,null,t.enableShortcuts&&l.createElement(p,{containerRef:e.containerRef,store:r,onEnterFullScreen:t.onEnterFullScreen,onExitFullScreen:t.onExitFullScreen}),l.createElement(o,null),n.subSlot.children)),n},EnterFullScreen:u,EnterFullScreenButton:function(){return l.createElement(u,null,(function(e){return l.createElement(a,c({enableShortcuts:t.enableShortcuts},e))}))},EnterFullScreenMenuItem:function(e){return l.createElement(u,null,(function(n){return l.createElement(v,{onClick:function(){n.onClick(),e.onClick()}})}))}}};

lib/index.d.ts

@@ -36,2 +36,3 @@ /**
 export interface FullScreenPluginProps {
+    enableShortcuts?: boolean;
     onEnterFullScreen?(zoom: Zoom): void;
@@ -38,0 +39,0 @@ onExitFullScreen?(zoom: Zoom): void;

package.json

 {
     "name": "@react-pdf-viewer/full-screen",
-    "version": "2.8.0",
+    "version": "2.9.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": "2.8.0"
+        "@react-pdf-viewer/core": "2.9.0"
     },
@@ -50,5 +50,5 @@ "peerDependencies": {
         "js": "cp src/index.d.ts lib && cp dist/index.js lib && rollup -c ../../rollup.config.js",
-        "css": "lessc src/styles/index.less lib/styles/index.temp.css && postcss lib/styles/index.temp.css > lib/styles/index.css && rm -rf lib/styles/index.temp.css"
+        "css": "sass --no-source-map src/styles/index.scss lib/styles/index.temp.css && postcss lib/styles/index.temp.css > lib/styles/index.css && rm -rf lib/styles/index.temp.css"
     },
-    "gitHead": "5a7ff547bbdcf8b51c10907ad706e4edc397fc4f"
+    "gitHead": "d806534f490b6d1cb8c582cdcc9b0a8ac38a8cad"
 }

No alert changes

Improved metrics

Total package byte prevSize

25336

increased by14.53%

Lines of code

375

increased by13.98%

Dependency changes

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

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

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