feat(Viewer): Add componentsProps and support OnlyOfficeViewer inside

onlyOfficeProps is now deprecated

react/Viewer/Readme.md

@@ -23,15 +23,18 @@ 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
   * **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
-
+* **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
 
 ```jsx
@@ -209,16 +212,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 />

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

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 = {

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)