cozy-ui 80.1.1 → 80.2.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [80.2.0](https://github.com/cozy/cozy-ui/compare/v80.1.1...v80.2.0) (2023-02-01)
+
+
+### Bug Fixes
+
+* **Viewer:** Add default value to calc to avoid undefined ([fd13e45](https://github.com/cozy/cozy-ui/commit/fd13e45))
+
+
+### Features
+
+* **Viewer:** Add componentsProps and support OnlyOfficeViewer inside ([bf205e1](https://github.com/cozy/cozy-ui/commit/bf205e1))
+* **Viewer:** Display content top when file from konnector ([070ab58](https://github.com/cozy/cozy-ui/commit/070ab58))
+
 ## [80.1.1](https://github.com/cozy/cozy-ui/compare/v80.1.0...v80.1.1) (2023-01-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "80.1.1",
+  "version": "80.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Viewer/Readme.md

@@ -23,7 +23,7 @@ The `Viewer` can display an **information panel** to show additional information
   * **showClose** : `<boolean>` – Whether to show close button in toolbar
 * **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
-* **onlyOfficeProps** : `<object>` – Used to open an Only Office file
+* **onlyOfficeProps** : `<object>` – Used to open an Only Office file (deprecated)
 * **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
 * **editPathByModelProps** : `<object>` – Edit path by model properties
@@ -31,6 +31,10 @@ The `Viewer` can display an **information panel** to show additional information
   * **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
+* **componentsProps** : `<object>` – Props passed to components with the same name
+  * **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
 
 ### Demo
 
@@ -209,16 +213,18 @@ const editPathByModelProps = {
                 currentURL={state.currentURL}
                 showNavigation={variant.navigation}
                 editPathByModelProps={editPathByModelProps}
-                onlyOfficeProps={{
-                  isEnabled: variant.onlyOfficeEnabled,
-                  opener: () => alert('This is a demo, no Only Office opener here')
-                }}
                 toolbarProps={{
                   showToolbar: variant.toolbar,
                   showClose: state.showToolbarCloseButton
                 }}
                 onCloseRequest={toggleViewer}
                 onChangeRequest={onFileChange}
+                componentsProps={{
+                  OnlyOfficeViewer: {
+                    isEnabled: variant.onlyOfficeEnabled,
+                    opener: () => alert('This is a demo, no Only Office opener here')
+                  }
+                }}
               >
                 <FooterActionButtons>
                   <ShareButtonFake />

package/react/Viewer/Viewer.jsx

@@ -71,7 +71,8 @@ class Viewer extends Component {
       showNavigation,
       renderFallbackExtraContent,
       validForPanel,
-      onlyOfficeProps
+      onlyOfficeProps,
+      componentsProps
     } = this.props
 
     // this `expanded` property makes the next/previous controls cover the displayed image
@@ -96,6 +97,7 @@ class Viewer extends Component {
             onClose={this.onClose}
             renderFallbackExtraContent={renderFallbackExtraContent}
             onlyOfficeProps={onlyOfficeProps}
+            componentsProps={componentsProps}
           />
         </ViewerControls>
       </>
@@ -125,7 +127,17 @@ Viewer.propTypes = {
     /** To open the Only Office file */
     opener: PropTypes.func
   }),
-  validForPanel: PropTypes.bool
+  validForPanel: PropTypes.bool,
+  /* Props passed to components with the same name */
+  componentsProps: PropTypes.shape({
+    /** Used to open an Only Office file */
+    OnlyOfficeViewer: PropTypes.shape({
+      /** Whether Only Office is enabled on the server */
+      isEnabled: PropTypes.bool,
+      /** To open the Only Office file */
+      opener: PropTypes.func
+    })
+  })
 }
 
 export default Viewer

package/react/Viewer/ViewerContainer.jsx

@@ -102,7 +102,17 @@ ViewerContainer.propTypes = {
   /** Show/Hide the panel containing more information about the file only on Desktop */
   disablePanel: PropTypes.bool,
   /** Show/Hide the panel containing more information about the file only on Phone & Tablet devices */
-  disableFooter: PropTypes.bool
+  disableFooter: PropTypes.bool,
+  /* Props passed to components with the same name */
+  componentsProps: PropTypes.shape({
+    /** Used to open an Only Office file */
+    OnlyOfficeViewer: PropTypes.shape({
+      /** Whether Only Office is enabled on the server */
+      isEnabled: PropTypes.bool,
+      /** To open the Only Office file */
+      opener: PropTypes.func
+    })
+  })
 }
 
 ViewerContainer.defaultProps = {

package/react/Viewer/ViewersByFile/styles.styl

@@ -83,7 +83,7 @@
 .viewer-pdfMobile
     width 100%
     height 'calc(100% - %s - var(--flagship-top-height))' % $viewerHeightMedium
-    margin-top 'calc(var(--flagship-top-height) + %s)' % $viewerMarginTopMedium
+    margin-top 'calc(var(--flagship-top-height, 0rem) + %s)' % $viewerMarginTopMedium
 
     &--image
         width 100%

package/react/Viewer/components/ViewerByFile.jsx

@@ -19,6 +19,10 @@ import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer'
 
 import { useEncrypted } from '../providers/EncryptedProvider'
 
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+
+const logDepecratedOnlyOfficeProps = createDepreciationLogger()
+
 const { isPlainText } = models.file
 
 export const getViewerComponentName = ({
@@ -60,10 +64,19 @@ const ViewerByFile = ({
   gesturesRef,
   onSwipe,
   onlyOfficeProps,
-  breakpoints: { isDesktop }
+  breakpoints: { isDesktop },
+  componentsProps
 }) => {
-  const isOnlyOfficeEnabled = onlyOfficeProps && onlyOfficeProps.isEnabled
-  const onlyOfficeOpener = onlyOfficeProps && onlyOfficeProps.opener
+  if (onlyOfficeProps) {
+    logDepecratedOnlyOfficeProps(
+      'onlyOfficeProps in Viewer is deprecated. Please use componentsProps.OnlyOfficeViewer instead.'
+    )
+  }
+
+  const isOnlyOfficeEnabled =
+    componentsProps?.OnlyOfficeViewer?.isEnabled || onlyOfficeProps?.isEnabled
+  const onlyOfficeOpener =
+    componentsProps?.OnlyOfficeViewer?.opener || onlyOfficeProps?.opener
 
   const { url } = useEncrypted()
 
@@ -99,7 +112,8 @@ ViewerByFile.propTypes = {
   // gestures, gesturesRef and onSwipe are got from ViewerControls
   gestures: PropTypes.object,
   gesturesRef: PropTypes.object,
-  onSwipe: PropTypes.func
+  onSwipe: PropTypes.func,
+  componentsProps: PropTypes.object
 }
 
 export default withBreakpoints()(ViewerByFile)

package/react/Viewer/components/ViewerControls.jsx

@@ -7,6 +7,7 @@ import Hammer from 'hammerjs'
 import { withStyles } from '../../styles'
 import withBreakpoints from '../../helpers/withBreakpoints'
 
+import { isValidForPanel } from '../helpers'
 import { toolbarPropsPropType } from '../index'
 import { infoWidth } from './InformationPanel'
 import Toolbar from './Toolbar'
@@ -116,10 +117,16 @@ class ViewerControls extends Component {
     } = this.props
     const { showToolbar, showClose, toolbarRef } = toolbarProps
     const { hidden } = this.state
+
+    const shouldDisplayContentTop = isValidForPanel({ file })
+
     return (
       <div
         className={cx(styles['viewer-controls'], {
           [styles['viewer-controls--expanded']]: expanded,
+          [styles[
+            'viewer-controls--display-content-top'
+          ]]: shouldDisplayContentTop,
           [classes.viewerControlsWithInfo]: showInfoPanel
         })}
         ref={wrapped => {

package/react/Viewer/components/styles.styl

@@ -56,6 +56,11 @@
     margin-top 0
     width 40%
 
+.viewer-controls--display-content-top
+    +medium-screen()
+        justify-content flex-start
+        padding-top $toolbarHeightMedium - $viewerMarginTopMedium
+
 .viewer-toolbar
     position absolute
     top 0

package/transpiled/react/Viewer/Viewer.js

@@ -108,7 +108,8 @@ var Viewer = /*#__PURE__*/function (_Component) {
           showNavigation = _this$props3.showNavigation,
           renderFallbackExtraContent = _this$props3.renderFallbackExtraContent,
           validForPanel = _this$props3.validForPanel,
-          onlyOfficeProps = _this$props3.onlyOfficeProps; // this `expanded` property makes the next/previous controls cover the displayed image
+          onlyOfficeProps = _this$props3.onlyOfficeProps,
+          componentsProps = _this$props3.componentsProps; // this `expanded` property makes the next/previous controls cover the displayed image
 
       var expanded = currentFile && currentFile.class === 'image';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ViewerControls, {
@@ -128,7 +129,8 @@ var Viewer = /*#__PURE__*/function (_Component) {
         file: currentFile,
         onClose: this.onClose,
         renderFallbackExtraContent: renderFallbackExtraContent,
-        onlyOfficeProps: onlyOfficeProps
+        onlyOfficeProps: onlyOfficeProps,
+        componentsProps: componentsProps
       })));
     }
   }]);
@@ -164,6 +166,18 @@ Viewer.propTypes = {
     /** To open the Only Office file */
     opener: PropTypes.func
   }),
-  validForPanel: PropTypes.bool
+  validForPanel: PropTypes.bool,
+
+  /* Props passed to components with the same name */
+  componentsProps: PropTypes.shape({
+    /** Used to open an Only Office file */
+    OnlyOfficeViewer: PropTypes.shape({
+      /** Whether Only Office is enabled on the server */
+      isEnabled: PropTypes.bool,
+
+      /** To open the Only Office file */
+      opener: PropTypes.func
+    })
+  })
 };
 export default Viewer;

package/transpiled/react/Viewer/ViewerContainer.js

@@ -113,7 +113,19 @@ ViewerContainer.propTypes = {
   disablePanel: PropTypes.bool,
 
   /** Show/Hide the panel containing more information about the file only on Phone & Tablet devices */
-  disableFooter: PropTypes.bool
+  disableFooter: PropTypes.bool,
+
+  /* Props passed to components with the same name */
+  componentsProps: PropTypes.shape({
+    /** Used to open an Only Office file */
+    OnlyOfficeViewer: PropTypes.shape({
+      /** Whether Only Office is enabled on the server */
+      isEnabled: PropTypes.bool,
+
+      /** To open the Only Office file */
+      opener: PropTypes.func
+    })
+  })
 };
 ViewerContainer.defaultProps = {
   currentIndex: 0,

package/transpiled/react/Viewer/components/Footer.js

@@ -10,6 +10,7 @@ var styles = {
   "viewer-nav--next": "styles__viewer-nav--next___1ah-4",
   "viewer-controls": "styles__viewer-controls___1BYEX",
   "--expanded": "styles__--expanded___2NoA-",
+  "viewer-controls--display-content-top": "styles__viewer-controls--display-content-top___3I1xq",
   "viewer-toolbar": "styles__viewer-toolbar___2zPR7",
   "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___3r3Sj",
   "viewer-footer": "styles__viewer-footer___2ieQS"

package/transpiled/react/Viewer/components/Navigation.js

@@ -14,6 +14,7 @@ var styles = {
   "viewer-nav--next": "styles__viewer-nav--next___1ah-4",
   "viewer-controls": "styles__viewer-controls___1BYEX",
   "--expanded": "styles__--expanded___2NoA-",
+  "viewer-controls--display-content-top": "styles__viewer-controls--display-content-top___3I1xq",
   "viewer-toolbar": "styles__viewer-toolbar___2zPR7",
   "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___3r3Sj",
   "viewer-footer": "styles__viewer-footer___2ieQS"

package/transpiled/react/Viewer/components/Toolbar.js

@@ -25,6 +25,7 @@ var styles = {
   "viewer-nav--next": "styles__viewer-nav--next___1ah-4",
   "viewer-controls": "styles__viewer-controls___1BYEX",
   "--expanded": "styles__--expanded___2NoA-",
+  "viewer-controls--display-content-top": "styles__viewer-controls--display-content-top___3I1xq",
   "viewer-toolbar": "styles__viewer-toolbar___2zPR7",
   "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___3r3Sj",
   "viewer-footer": "styles__viewer-footer___2ieQS"

package/transpiled/react/Viewer/components/ViewerByFile.js

@@ -14,6 +14,8 @@ import NoViewer from "cozy-ui/transpiled/react/Viewer/NoViewer";
 import ShortcutViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/ShortcutViewer";
 import OnlyOfficeViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/OnlyOfficeViewer";
 import { useEncrypted } from "cozy-ui/transpiled/react/Viewer/providers/EncryptedProvider";
+import createDepreciationLogger from "cozy-ui/transpiled/react/helpers/createDepreciationLogger";
+var logDepecratedOnlyOfficeProps = createDepreciationLogger();
 var isPlainText = models.file.isPlainText;
 export var getViewerComponentName = function getViewerComponentName(_ref) {
   var file = _ref.file,
@@ -51,6 +53,8 @@ export var getViewerComponentName = function getViewerComponentName(_ref) {
 };
 
 var ViewerByFile = function ViewerByFile(_ref2) {
+  var _componentsProps$Only, _componentsProps$Only2;
+
   var file = _ref2.file,
       onClose = _ref2.onClose,
       renderFallbackExtraContent = _ref2.renderFallbackExtraContent,
@@ -58,9 +62,15 @@ var ViewerByFile = function ViewerByFile(_ref2) {
       gesturesRef = _ref2.gesturesRef,
       onSwipe = _ref2.onSwipe,
       onlyOfficeProps = _ref2.onlyOfficeProps,
-      isDesktop = _ref2.breakpoints.isDesktop;
-  var isOnlyOfficeEnabled = onlyOfficeProps && onlyOfficeProps.isEnabled;
-  var onlyOfficeOpener = onlyOfficeProps && onlyOfficeProps.opener;
+      isDesktop = _ref2.breakpoints.isDesktop,
+      componentsProps = _ref2.componentsProps;
+
+  if (onlyOfficeProps) {
+    logDepecratedOnlyOfficeProps('onlyOfficeProps in Viewer is deprecated. Please use componentsProps.OnlyOfficeViewer instead.');
+  }
+
+  var isOnlyOfficeEnabled = (componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$Only = componentsProps.OnlyOfficeViewer) === null || _componentsProps$Only === void 0 ? void 0 : _componentsProps$Only.isEnabled) || (onlyOfficeProps === null || onlyOfficeProps === void 0 ? void 0 : onlyOfficeProps.isEnabled);
+  var onlyOfficeOpener = (componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$Only2 = componentsProps.OnlyOfficeViewer) === null || _componentsProps$Only2 === void 0 ? void 0 : _componentsProps$Only2.opener) || (onlyOfficeProps === null || onlyOfficeProps === void 0 ? void 0 : onlyOfficeProps.opener);
 
   var _useEncrypted = useEncrypted(),
       url = _useEncrypted.url;
@@ -92,6 +102,7 @@ ViewerByFile.propTypes = {
   // gestures, gesturesRef and onSwipe are got from ViewerControls
   gestures: PropTypes.object,
   gesturesRef: PropTypes.object,
-  onSwipe: PropTypes.func
+  onSwipe: PropTypes.func,
+  componentsProps: PropTypes.object
 };
 export default withBreakpoints()(ViewerByFile);

package/transpiled/react/Viewer/components/ViewerControls.js

@@ -17,6 +17,7 @@ import cx from 'classnames';
 import Hammer from 'hammerjs';
 import { withStyles } from "cozy-ui/transpiled/react/styles";
 import withBreakpoints from "cozy-ui/transpiled/react/helpers/withBreakpoints";
+import { isValidForPanel } from "cozy-ui/transpiled/react/Viewer/helpers";
 import { toolbarPropsPropType } from "cozy-ui/transpiled/react/Viewer/index";
 import { infoWidth } from "cozy-ui/transpiled/react/Viewer/components/InformationPanel";
 import Toolbar from "cozy-ui/transpiled/react/Viewer/components/Toolbar";
@@ -31,6 +32,7 @@ var styles = {
   "viewer-nav--next": "styles__viewer-nav--next___1ah-4",
   "viewer-controls": "styles__viewer-controls___1BYEX",
   "--expanded": "styles__--expanded___2NoA-",
+  "viewer-controls--display-content-top": "styles__viewer-controls--display-content-top___3I1xq",
   "viewer-toolbar": "styles__viewer-toolbar___2zPR7",
   "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___3r3Sj",
   "viewer-footer": "styles__viewer-footer___2ieQS"
@@ -168,8 +170,11 @@ var ViewerControls = /*#__PURE__*/function (_Component) {
           showClose = toolbarProps.showClose,
           toolbarRef = toolbarProps.toolbarRef;
       var hidden = this.state.hidden;
+      var shouldDisplayContentTop = isValidForPanel({
+        file: file
+      });
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(styles['viewer-controls'], (_cx = {}, _defineProperty(_cx, styles['viewer-controls--expanded'], expanded), _defineProperty(_cx, classes.viewerControlsWithInfo, showInfoPanel), _cx)),
+        className: cx(styles['viewer-controls'], (_cx = {}, _defineProperty(_cx, styles['viewer-controls--expanded'], expanded), _defineProperty(_cx, styles['viewer-controls--display-content-top'], shouldDisplayContentTop), _defineProperty(_cx, classes.viewerControlsWithInfo, showInfoPanel), _cx)),
         ref: function ref(wrapped) {
           _this2.wrapped = wrapped;
         }