cozy-viewer 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2024-09-11)
+
+### Features
+
+- Add cozy-viewer ([d960ea6](https://github.com/cozy/cozy-libs/commit/d960ea6724afd6b036e0afda31f1742103a149ac))

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Cozy.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -0,0 +1,44 @@
+# Cozy Viewer
+
+Cozy-Viewer provides a component to show files in a viewer.
+
+## Installation
+
+- You must `import 'cozy-viewer/dist/stylesheet.css'` somewhere in your app
+- You must have [WebviewIntent Provider](https://github.com/cozy/cozy-libs/blob/b1ad6f5933b463878f641d9fbb63eddd4c45b0d0/packages/cozy-intent/src/view/components/WebviewIntentProvider.tsx#L89)
+- You must have [CozySharing Provider](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-sharing)
+- In order to download and display the files, it will need a `cozy-client` instance in the React context.
+- To have the panels, the app need to have [cozy-harvest-lib](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-harvest-lib) installed
+- See peer dependencies to be sure to not miss anything
+
+## Usage
+
+`import Viewer from 'cozy-viewer'`
+
+## Props
+
+- **files** : `<array>` – One or more `io.cozy.files` to display
+- **currentIndex** : `<number>` – Index of the file to show
+- **currentURL** : `<string>` – Optionnal URL of the file
+- **className** : `<string>` – CSS classes
+- **showNavigation** : `<boolean>` – Whether to show left and right arrows to navigate between files
+- **renderFallbackExtraContent** : `<function>` – A render prop that is called when a file can't be displayed
+- **disablePanel** : `<boolean>` – Show/Hide the panel containing more information about the file only on Desktop
+- **disableFooter** : `<boolean>` – Show/Hide the panel containing more information about the file only on Phone & Tablet devices
+- **disableModal** : `<boolean>` – To avoid wrapping the Viewer with a Modal component (wrapper of Viewer)
+- **editPathByModelProps** : `<object>` – Edit path by model properties
+  - **information** : `<string>` – URL used to edit the file when editing a `information` type metadata (text, date)
+  - **page** : `<string>` – URL used to edit the file when editing a `page` type metadata (side of the document)
+- **onChangeRequest** : `<function>` - Called with (nextFile, nextIndex) when the user requests to navigate to another file
+- **onCloseRequest** : `<function>` - Called when the user wants to leave the Viewer
+- **isPublic**: `<boolean>` - Whether the viewer is used in a public page or not
+- **componentsProps** : `<object>` – Props passed to components with the same name
+  - **modalProps** : `<object>` – Props passed to Modal component
+  - **OnlyOfficeViewer** : `<object>` – Used to open an Only Office file
+    - **isEnabled** : `<boolean>` – Whether Only Office is enabled on the server
+    - **opener** : `<function>` – To open the Only Office file
+  - **toolbarProps** : `<object>` – Toolbar properties
+    - **toolbarRef** : `<object>` – React reference of the toolbar node
+    - **showToolbar** : `<boolean>` – Whether to show the toolbar or not. Note that the built-in close button is in the toolbar
+    - **showClose** : `<boolean>` – Whether to show close button in toolbar
+    - **showFilePath** : `<boolean>` – Whether to show file path below his name

package/babel.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  presets: ['cozy-app'],
+  env: {
+    transpilation: {
+      ignore: ['**/*.spec.jsx', '**/*.spec.js', '**/*.spec.tsx', '**/*.spec.ts']
+    }
+  },
+  plugins: [
+    [
+      'css-modules-transform',
+      {
+        extensions: ['.styl'],
+        preprocessCss: './preprocess',
+        extractCss: './dist/stylesheet.css',
+        generateScopedName:
+          process.env['NODE_ENV'] == 'test'
+            ? '[local]'
+            : '[name]__[local]___[hash:base64:5]'
+      }
+    ]
+  ],
+  ignore: ['examples/**/*', '**/*.md', '**/*.styl', '**/*.json', '**/*.snap']
+}

package/dist/Footer/BottomSheetContent.d.ts

@@ -0,0 +1,12 @@
+export default BottomSheetContent;
+declare function BottomSheetContent({ file, isPublic }: {
+    file: any;
+    isPublic: any;
+}): JSX.Element[];
+declare namespace BottomSheetContent {
+    namespace propTypes {
+        const file: PropTypes.Validator<object>;
+        const isPublic: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/Footer/BottomSheetContent.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BottomSheet = require("cozy-ui/transpiled/react/BottomSheet");
+
+var _getPanelBlocks = _interopRequireWildcard(require("../Panel/getPanelBlocks"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var BottomSheetContent = function BottomSheetContent(_ref) {
+  var file = _ref.file,
+      isPublic = _ref.isPublic;
+  var panelBlocks = (0, _getPanelBlocks.default)({
+    panelBlocksSpecs: (0, _getPanelBlocks.getPanelBlocksSpecs)(isPublic),
+    file: file
+  });
+  return panelBlocks.map(function (PanelBlock, index) {
+    return /*#__PURE__*/_react.default.createElement(_BottomSheet.BottomSheetItem, {
+      key: index,
+      disableGutters: true,
+      disableElevation: index === panelBlocks.length - 1
+    }, /*#__PURE__*/_react.default.createElement(PanelBlock, {
+      file: file
+    }));
+  });
+};
+
+BottomSheetContent.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  isPublic: _propTypes.default.bool
+};
+var _default = BottomSheetContent;
+exports.default = _default;

package/dist/Footer/DownloadButton.d.ts

@@ -0,0 +1,16 @@
+export default DownloadButton;
+declare function DownloadButton({ file, variant }: {
+    file: any;
+    variant: any;
+}): JSX.Element;
+declare namespace DownloadButton {
+    namespace propTypes {
+        const file: PropTypes.Requireable<object>;
+        const variant: PropTypes.Requireable<string>;
+    }
+    namespace defaultProptypes {
+        const variant_1: string;
+        export { variant_1 as variant };
+    }
+}
+import PropTypes from "prop-types";

package/dist/Footer/DownloadButton.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Download = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Download"));
+
+var _Alerter = _interopRequireDefault(require("cozy-ui/transpiled/react/deprecated/Alerter"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var DownloadButton = function DownloadButton(_ref) {
+  var file = _ref.file,
+      variant = _ref.variant;
+  var client = (0, _cozyClient.useClient)();
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var icon = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Download.default
+  });
+
+  var label = t('Viewer.download');
+
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return client.collection('io.cozy.files').download(file);
+
+            case 3:
+              _context.next = 8;
+              break;
+
+            case 5:
+              _context.prev = 5;
+              _context.t0 = _context["catch"](0);
+
+              _Alerter.default.info('Viewer.error.generic');
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 5]]);
+    }));
+
+    return function handleClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (variant === 'iconButton') {
+    return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      className: "u-white",
+      "aria-label": label,
+      onClick: handleClick
+    }, icon);
+  }
+
+  if (variant === 'buttonIcon') {
+    return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      variant: "secondary",
+      label: icon,
+      "aria-label": label,
+      onClick: handleClick
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    fullWidth: true,
+    variant: "secondary",
+    startIcon: icon,
+    label: label,
+    onClick: handleClick
+  });
+};
+
+DownloadButton.propTypes = {
+  file: _propTypes.default.object,
+  variant: _propTypes.default.oneOf(['default', 'iconButton', 'buttonIcon'])
+};
+DownloadButton.defaultProptypes = {
+  variant: 'default'
+};
+var _default = DownloadButton;
+exports.default = _default;

package/dist/Footer/FooterActionButtons.d.ts

@@ -0,0 +1,13 @@
+export default FooterActionButtons;
+declare function FooterActionButtons({ children, file }: {
+    children: any;
+    file: any;
+}): any;
+declare namespace FooterActionButtons {
+    const displayName: string;
+    namespace propTypes {
+        const children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const file: PropTypes.Requireable<object>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/Footer/FooterActionButtons.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = require("react");
+
+var _helpers = require("./helpers");
+
+var FooterActionButtons = function FooterActionButtons(_ref) {
+  var children = _ref.children,
+      file = _ref.file;
+  if (!children) return null;
+  return (0, _helpers.mapToAllChildren)(children, function (child) {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      file: file
+    });
+  });
+};
+
+FooterActionButtons.displayName = 'FooterActionButtons';
+FooterActionButtons.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
+  file: _propTypes.default.object
+};
+var _default = FooterActionButtons;
+exports.default = _default;

package/dist/Footer/FooterActionButtons.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Footer/FooterContent.d.ts

@@ -0,0 +1,16 @@
+export default FooterContent;
+declare function FooterContent({ file, toolbarRef, children, isPublic }: {
+    file: any;
+    toolbarRef: any;
+    children: any;
+    isPublic: any;
+}): JSX.Element | null;
+declare namespace FooterContent {
+    namespace propTypes {
+        const file: PropTypes.Validator<object>;
+        const toolbarRef: PropTypes.Requireable<object>;
+        const isPublic: PropTypes.Requireable<boolean>;
+        const children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/Footer/FooterContent.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _BottomSheet = _interopRequireWildcard(require("cozy-ui/transpiled/react/BottomSheet"));
+
+var _styles = require("cozy-ui/transpiled/react/styles");
+
+var _BottomSheetContent = _interopRequireDefault(require("./BottomSheetContent"));
+
+var _helpers = require("./helpers");
+
+var _PrintButton = _interopRequireDefault(require("../components/PrintButton"));
+
+var _helpers2 = require("../helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FooterButtons = function FooterButtons(_ref) {
+  var file = _ref.file,
+      _ref$FooterActionButt = _ref.FooterActionButtonsWithFile,
+      FooterActionButtonsWithFile = _ref$FooterActionButt === void 0 ? {
+    FooterActionButtonsWithFile: FooterActionButtonsWithFile
+  } : _ref$FooterActionButt;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, FooterActionButtonsWithFile, /*#__PURE__*/_react.default.createElement(_PrintButton.default, {
+    file: file,
+    variant: "button"
+  }));
+};
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      width: 'calc(100% - 2rem)',
+      height: '100%',
+      paddingLeft: '1rem',
+      paddingRight: '1rem',
+      borderTop: "1px solid ".concat(theme.palette.divider),
+      columnGap: '0.5rem'
+    },
+    bottomSheetHeader: {
+      columnGap: '0.5rem'
+    }
+  };
+});
+
+var FooterContent = function FooterContent(_ref2) {
+  var file = _ref2.file,
+      toolbarRef = _ref2.toolbarRef,
+      children = _ref2.children,
+      isPublic = _ref2.isPublic;
+  var styles = useStyles();
+  var toolbarProps = (0, _react.useMemo)(function () {
+    return {
+      ref: toolbarRef
+    };
+  }, [toolbarRef]);
+  var FooterActionButtonsWithFile = (0, _helpers.extractChildrenCompByName)({
+    children: children,
+    file: file,
+    name: 'FooterActionButtons'
+  });
+  var bottomSheetSettings = {
+    isOpenMin: isPublic ? true : false,
+    mediumHeightRatio: isPublic ? undefined : 0.5
+  };
+
+  if ((0, _helpers2.isValidForPanel)({
+    file: file
+  })) {
+    return /*#__PURE__*/_react.default.createElement(_BottomSheet.default, {
+      toolbarProps: toolbarProps,
+      portalProps: {
+        disablePortal: true
+      },
+      settings: bottomSheetSettings
+    }, /*#__PURE__*/_react.default.createElement(_BottomSheet.BottomSheetHeader, {
+      className: (0, _classnames.default)('u-ph-1 u-pb-1', styles.bottomSheetHeader)
+    }, /*#__PURE__*/_react.default.createElement(FooterButtons, {
+      file: file,
+      FooterActionButtonsWithFile: FooterActionButtonsWithFile
+    })), /*#__PURE__*/_react.default.createElement(_BottomSheetContent.default, {
+      file: file,
+      isPublic: isPublic
+    }));
+  } // If `FooterActionButtons` hasn't children
+
+
+  if (!FooterActionButtonsWithFile) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/_react.default.createElement(FooterButtons, {
+    file: file,
+    FooterActionButtonsWithFile: FooterActionButtonsWithFile
+  }));
+};
+
+FooterContent.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  toolbarRef: _propTypes.default.object,
+  isPublic: _propTypes.default.bool,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
+};
+var _default = FooterContent;
+exports.default = _default;

package/dist/Footer/ForwardButton.d.ts

@@ -0,0 +1,20 @@
+export { exportFilesNative };
+export default ForwardButton;
+import { exportFilesNative } from "./helpers";
+declare function ForwardButton({ file, variant, onClick }: {
+    file: any;
+    variant: any;
+    onClick: any;
+}): JSX.Element;
+declare namespace ForwardButton {
+    namespace propTypes {
+        const file: PropTypes.Validator<object>;
+        const variant: PropTypes.Requireable<string>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProptypes {
+        const variant_1: string;
+        export { variant_1 as variant };
+    }
+}
+import PropTypes from "prop-types";

package/dist/Footer/ForwardButton.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "exportFilesNative", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.exportFilesNative;
+  }
+});
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _sharing = require("cozy-client/dist/models/sharing");
+
+var _cozyDeviceHelper = require("cozy-device-helper");
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Reply = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Reply"));
+
+var _ShareIos = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/ShareIos"));
+
+var _Alerter = _interopRequireDefault(require("cozy-ui/transpiled/react/deprecated/Alerter"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _helpers = require("./helpers");
+
+var ForwardIcon = (0, _cozyDeviceHelper.isIOS)() ? _ShareIos.default : _Reply.default;
+
+var ForwardButton = function ForwardButton(_ref) {
+  var file = _ref.file,
+      variant = _ref.variant,
+      onClick = _ref.onClick;
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var client = (0, _cozyClient.useClient)();
+
+  var icon = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: ForwardIcon
+  });
+
+  var label = t('Viewer.actions.forward');
+
+  var onFileOpen = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {
+      var url, shareData;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(0, _cozyDeviceHelper.isMobileApp)()) {
+                _context.next = 11;
+                break;
+              }
+
+              _context.prev = 1;
+              _context.next = 4;
+              return (0, _helpers.exportFilesNative)(client, [file]);
+
+            case 4:
+              _context.next = 9;
+              break;
+
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](1);
+
+              _Alerter.default.info("Viewer.error.".concat(_context.t0), {
+                fileMime: file.mime
+              });
+
+            case 9:
+              _context.next = 22;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.next = 14;
+              return (0, _sharing.getSharingLink)(client, [file.id]);
+
+            case 14:
+              url = _context.sent;
+              shareData = {
+                title: t('Viewer.share.title', {
+                  name: file.name
+                }),
+                text: t('Viewer.share.text', {
+                  name: file.name
+                }),
+                url: url
+              };
+              navigator.share(shareData);
+              _context.next = 22;
+              break;
+
+            case 19:
+              _context.prev = 19;
+              _context.t1 = _context["catch"](11);
+
+              _Alerter.default.error('Viewer.share.error', {
+                error: _context.t1
+              });
+
+            case 22:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 6], [11, 19]]);
+    }));
+
+    return function onFileOpen(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleClick = function handleClick() {
+    if (onClick) onClick();else onFileOpen(file);
+  };
+
+  if (variant === 'iconButton') {
+    return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      className: "u-white",
+      "aria-label": label,
+      onClick: handleClick
+    }, icon);
+  }
+
+  if (variant === 'buttonIcon') {
+    return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      variant: "secondary",
+      label: icon,
+      "aria-label": label,
+      onClick: handleClick
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    fullWidth: true,
+    variant: "secondary",
+    startIcon: icon,
+    "data-testid": "openFileButton",
+    label: label,
+    onClick: handleClick
+  });
+};
+
+ForwardButton.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'iconButton', 'buttonIcon']),
+  onClick: _propTypes.default.func
+};
+ForwardButton.defaultProptypes = {
+  variant: 'default'
+};
+var _default = ForwardButton;
+exports.default = _default;