@react-pdf-viewer/open - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

lib/cjs/open.js

@@ -62,17 +62,40 @@ 'use strict';
 
-var TOOLTIP_OFFSET = { left: 0, top: 8 };
-var OpenButton = function (_a) {
-    var onClick = _a.onClick;
-    var l10n = React__namespace.useContext(core.LocalizationContext).l10n;
-    var label = l10n && l10n.open ? l10n.open.openFile : 'Open file';
-    var inputRef = React__namespace.createRef();
-    var openFileDialog = function () {
+var useTriggerOpen = function (store) {
+    var inputRef = React__namespace.useRef();
+    var openFile = function () {
         var inputEle = inputRef.current;
         if (inputEle) {
             inputEle.click();
+            if (store.get('triggerOpenFile')) {
+                store.update('triggerOpenFile', false);
+            }
         }
     };
+    var handleOpenFileTriggered = function (trigger) {
+        if (trigger) {
+            openFile();
+        }
+    };
+    React__namespace.useEffect(function () {
+        store.subscribe('triggerOpenFile', handleOpenFileTriggered);
+        return function () {
+            store.unsubscribe('triggerOpenFile', handleOpenFileTriggered);
+        };
+    }, []);
+    return {
+        inputRef: inputRef,
+        openFile: openFile,
+    };
+};
+
+var TOOLTIP_OFFSET = { left: 0, top: 8 };
+var OpenButton = function (_a) {
+    var enableShortcuts = _a.enableShortcuts, store = _a.store, onClick = _a.onClick;
+    var l10n = React__namespace.useContext(core.LocalizationContext).l10n;
+    var label = l10n && l10n.open ? l10n.open.openFile : 'Open file';
+    var _b = useTriggerOpen(store), inputRef = _b.inputRef, openFile = _b.openFile;
+    var ariaKeyShortcuts = enableShortcuts ? (core.isMac() ? 'Meta+O' : 'Ctrl+O') : '';
     return (React__namespace.createElement(core.Tooltip, { ariaControlsSuffix: "open", position: core.Position.BottomCenter, target: React__namespace.createElement("div", { className: "rpv-open__input-wrapper" },
             React__namespace.createElement("input", { ref: inputRef, className: "rpv-open__input", multiple: false, tabIndex: -1, title: "", type: "file", onChange: onClick }),
-            React__namespace.createElement(core.MinimalButton, { ariaLabel: label, onClick: openFileDialog },
+            React__namespace.createElement(core.MinimalButton, { ariaKeyShortcuts: ariaKeyShortcuts, ariaLabel: label, onClick: openFile },
                 React__namespace.createElement(OpenFileIcon, null))), content: function () { return label; }, offset: TOOLTIP_OFFSET }));
@@ -82,3 +105,3 @@ };
 var Open = function (_a) {
-    var store = _a.store, children = _a.children;
+    var children = _a.children, enableShortcuts = _a.enableShortcuts, store = _a.store;
     var handleOpenFiles = function (e) {
@@ -94,3 +117,3 @@ var files = e.target.files;
     };
-    var defaultChildren = function (props) { return React__namespace.createElement(OpenButton, { onClick: props.onClick }); };
+    var defaultChildren = function (props) { return (React__namespace.createElement(OpenButton, { enableShortcuts: enableShortcuts, store: store, onClick: props.onClick })); };
     var render = children || defaultChildren;
@@ -103,13 +126,7 @@ return render({
 var OpenMenuItem = function (_a) {
-    var onClick = _a.onClick;
+    var store = _a.store, onClick = _a.onClick;
     var l10n = React__namespace.useContext(core.LocalizationContext).l10n;
     var label = l10n && l10n.open ? l10n.open.openFile : 'Open file';
-    var inputRef = React__namespace.createRef();
-    var openFileDialog = function () {
-        var inputEle = inputRef.current;
-        if (inputEle) {
-            inputEle.click();
-        }
-    };
-    return (React__namespace.createElement(core.MenuItem, { icon: React__namespace.createElement(OpenFileIcon, null), onClick: openFileDialog },
+    var _b = useTriggerOpen(store), inputRef = _b.inputRef, openFile = _b.openFile;
+    return (React__namespace.createElement(core.MenuItem, { icon: React__namespace.createElement(OpenFileIcon, null), onClick: openFile },
         React__namespace.createElement("div", { className: "rpv-open__input-wrapper" },
@@ -120,7 +137,47 @@ React__namespace.createElement("input", { ref: inputRef, className: "rpv-open__input", multiple: false, tabIndex: -1, title: "", type: "file", onChange: onClick }),
 
-var openPlugin = function () {
+var ShortcutHandler = function (_a) {
+    var containerRef = _a.containerRef, store = _a.store;
+    var keydownHandler = function (e) {
+        if (e.shiftKey || e.altKey || e.key !== 'o') {
+            return;
+        }
+        var isCommandPressed = core.isMac() ? e.metaKey : e.ctrlKey;
+        if (!isCommandPressed) {
+            return;
+        }
+        var containerEle = containerRef.current;
+        if (!containerEle || !document.activeElement || !containerEle.contains(document.activeElement)) {
+            return;
+        }
+        e.preventDefault();
+        store.update('triggerOpenFile', true);
+    };
+    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 openPlugin = function (props) {
+    var openPluginProps = React__namespace.useMemo(function () { return Object.assign({}, { enableShortcuts: true }, props); }, []);
     var store = React__namespace.useMemo(function () { return core.createStore({}); }, []);
-    var OpenDecorator = function (props) { return React__namespace.createElement(Open, __assign({}, props, { store: store })); };
+    var OpenDecorator = function (props) { return (React__namespace.createElement(Open, __assign({ enableShortcuts: openPluginProps.enableShortcuts }, props, { store: store }))); };
     var OpenButtonDecorator = function () { return React__namespace.createElement(OpenDecorator, null); };
-    var OpenMenuItemDecorator = function () { return React__namespace.createElement(OpenDecorator, null, function (p) { return React__namespace.createElement(OpenMenuItem, { onClick: p.onClick }); }); };
+    var OpenMenuItemDecorator = function () { return (React__namespace.createElement(OpenDecorator, null, function (p) { return React__namespace.createElement(OpenMenuItem, { store: store, onClick: p.onClick }); })); };
+    var renderViewer = function (props) {
+        var slot = props.slot;
+        var updateSlot = {
+            children: (React__namespace.createElement(React__namespace.Fragment, null,
+                openPluginProps.enableShortcuts && (React__namespace.createElement(ShortcutHandler, { containerRef: props.containerRef, store: store })),
+                slot.children)),
+        };
+        return __assign(__assign({}, slot), updateSlot);
+    };
     return {
@@ -130,2 +187,3 @@ install: function (pluginFunctions) {
         },
+        renderViewer: renderViewer,
         Open: OpenDecorator,
@@ -132,0 +190,0 @@ OpenButton: OpenButtonDecorator,

lib/cjs/open.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-pdf-viewer/core");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(e),o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},i=function(){return r.createElement(t.Icon,{size:16},r.createElement("path",{d:"M12.5 4.5L12.5 19.5"}),r.createElement("path",{d:"M18 10L12.5 4.5 7 10"}),r.createElement("path",{d:"M17.5.5h5a1,1,0,0,1,1,1v21a1,1,0,0,1-1,1h-5"}),r.createElement("path",{d:"M6.5.5h-5a1,1,0,0,0-1,1v21a1,1,0,0,0,1,1h5"}))},c={left:0,top:8},l=function(e){var n=e.onClick,o=r.useContext(t.LocalizationContext).l10n,l=o&&o.open?o.open.openFile:"Open file",a=r.createRef();return r.createElement(t.Tooltip,{ariaControlsSuffix:"open",position:t.Position.BottomCenter,target:r.createElement("div",{className:"rpv-open__input-wrapper"},r.createElement("input",{ref:a,className:"rpv-open__input",multiple:!1,tabIndex:-1,title:"",type:"file",onChange:n}),r.createElement(t.MinimalButton,{ariaLabel:l,onClick:function(){var e=a.current;e&&e.click()}},r.createElement(i,null))),content:function(){return l},offset:c})},a=function(e){var t=e.store;return(e.children||function(e){return r.createElement(l,{onClick:e.onClick})})({onClick:function(e){var n=e.target.files;if(n&&n.length){var r=t.get("openFile");r&&r(n[0])}}})},u=function(e){var n=e.onClick,o=r.useContext(t.LocalizationContext).l10n,c=o&&o.open?o.open.openFile:"Open file",l=r.createRef();return r.createElement(t.MenuItem,{icon:r.createElement(i,null),onClick:function(){var e=l.current;e&&e.click()}},r.createElement("div",{className:"rpv-open__input-wrapper"},r.createElement("input",{ref:l,className:"rpv-open__input",multiple:!1,tabIndex:-1,title:"",type:"file",onChange:n}),c))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-pdf-viewer/core");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(e),o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},i=function(){return r.createElement(t.Icon,{size:16},r.createElement("path",{d:"M12.5 4.5L12.5 19.5"}),r.createElement("path",{d:"M18 10L12.5 4.5 7 10"}),r.createElement("path",{d:"M17.5.5h5a1,1,0,0,1,1,1v21a1,1,0,0,1-1,1h-5"}),r.createElement("path",{d:"M6.5.5h-5a1,1,0,0,0-1,1v21a1,1,0,0,0,1,1h5"}))},c=function(e){var t=r.useRef(),n=function(){var n=t.current;n&&(n.click(),e.get("triggerOpenFile")&&e.update("triggerOpenFile",!1))},o=function(e){e&&n()};return r.useEffect((function(){return e.subscribe("triggerOpenFile",o),function(){e.unsubscribe("triggerOpenFile",o)}}),[]),{inputRef:t,openFile:n}},u={left:0,top:8},a=function(e){var n=e.enableShortcuts,o=e.store,a=e.onClick,l=r.useContext(t.LocalizationContext).l10n,p=l&&l.open?l.open.openFile:"Open file",f=c(o),s=f.inputRef,m=f.openFile,v=n?t.isMac()?"Meta+O":"Ctrl+O":"";return r.createElement(t.Tooltip,{ariaControlsSuffix:"open",position:t.Position.BottomCenter,target:r.createElement("div",{className:"rpv-open__input-wrapper"},r.createElement("input",{ref:s,className:"rpv-open__input",multiple:!1,tabIndex:-1,title:"",type:"file",onChange:a}),r.createElement(t.MinimalButton,{ariaKeyShortcuts:v,ariaLabel:p,onClick:m},r.createElement(i,null))),content:function(){return p},offset:u})},l=function(e){var t=e.children,n=e.enableShortcuts,o=e.store;return(t||function(e){return r.createElement(a,{enableShortcuts:n,store:o,onClick:e.onClick})})({onClick:function(e){var t=e.target.files;if(t&&t.length){var n=o.get("openFile");n&&n(t[0])}}})},p=function(e){var n=e.store,o=e.onClick,u=r.useContext(t.LocalizationContext).l10n,a=u&&u.open?u.open.openFile:"Open file",l=c(n),p=l.inputRef,f=l.openFile;return r.createElement(t.MenuItem,{icon:r.createElement(i,null),onClick:f},r.createElement("div",{className:"rpv-open__input-wrapper"},r.createElement("input",{ref:p,className:"rpv-open__input",multiple:!1,tabIndex:-1,title:"",type:"file",onChange:o}),a))},f=function(e){var n=e.containerRef,o=e.store,i=function(e){if(!e.shiftKey&&!e.altKey&&"o"===e.key&&(t.isMac()?e.metaKey:e.ctrlKey)){var r=n.current;r&&document.activeElement&&r.contains(document.activeElement)&&(e.preventDefault(),o.update("triggerOpenFile",!0))}};return r.useEffect((function(){if(n.current)return document.addEventListener("keydown",i),function(){document.removeEventListener("keydown",i)}}),[n.current]),r.createElement(r.Fragment,null)};
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */exports.OpenFileIcon=i,exports.openPlugin=function(){var e=r.useMemo((function(){return t.createStore({})}),[]),n=function(t){return r.createElement(a,o({},t,{store:e}))};return{install:function(t){e.update("openFile",t.openFile)},Open:n,OpenButton:function(){return r.createElement(n,null)},OpenMenuItem:function(){return r.createElement(n,null,(function(e){return r.createElement(u,{onClick:e.onClick})}))}}};
+***************************************************************************** */exports.OpenFileIcon=i,exports.openPlugin=function(e){var n=r.useMemo((function(){return Object.assign({},{enableShortcuts:!0},e)}),[]),i=r.useMemo((function(){return t.createStore({})}),[]),c=function(e){return r.createElement(l,o({enableShortcuts:n.enableShortcuts},e,{store:i}))};return{install:function(e){i.update("openFile",e.openFile)},renderViewer:function(e){var t=e.slot,c={children:r.createElement(r.Fragment,null,n.enableShortcuts&&r.createElement(f,{containerRef:e.containerRef,store:i}),t.children)};return o(o({},t),c)},Open:c,OpenButton:function(){return r.createElement(c,null)},OpenMenuItem:function(){return r.createElement(c,null,(function(e){return r.createElement(p,{store:i,onClick:e.onClick})}))}}};

lib/index.d.ts

@@ -28,5 +28,9 @@ /**
 
-export function openPlugin(): OpenPlugin;
+export interface OpenPluginProps {
+    enableShortcuts?: boolean;
+}
 
+export function openPlugin(props?: OpenPluginProps): OpenPlugin;
+
 // Components
 export class OpenFileIcon extends React.Component {}

package.json

 {
     "name": "@react-pdf-viewer/open",
-    "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

16161

increased by31.37%

Lines of code

242

increased by35.96%

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