feat(Viewer): Add ToolbarButtons component

to be able to add buttons in viewer toolbar

Author: JF-Cozy

react/Viewer/Footer/FooterContent.jsx

@@ -1,10 +1,11 @@
-import React, { useMemo, Children, cloneElement, isValidElement } from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 import { makeStyles } from '../../styles'
 import { isValidForPanel } from '../helpers'
+import { extractChildrenCompByName } from './helpers'
 import BottomSheetContent from './BottomSheetContent'
 
 const useStyles = makeStyles(theme => ({
@@ -28,19 +29,11 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
 
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
-  const FooterActionButtons =
-    Children.toArray(children).find(child => {
-      return (
-        child.type.name === 'FooterActionButtons' ||
-        child.type.displayName === 'FooterActionButtons'
-      )
-    }) || null
-
-  const FooterActionButtonsWithFile = isValidElement(FooterActionButtons)
-    ? cloneElement(FooterActionButtons, {
-        file
-      })
-    : null
+  const FooterActionButtonsWithFile = extractChildrenCompByName({
+    children,
+    file,
+    name: 'FooterActionButtons'
+  })
 
   if (isValidForPanel({ file })) {
     return (
@@ -60,7 +53,7 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
   }
 
   // If `FooterActionButtons` hasn't children
-  if (!FooterActionButtons) return null
+  if (!FooterActionButtonsWithFile) return null
 
   return <div className={styles.footer}>{FooterActionButtonsWithFile}</div>
 }

react/Viewer/Footer/helpers.js

@@ -89,3 +89,18 @@ export const mapToAllChildren = (children, cb) => {
     return cb(child)
   })
 }
+
+export const extractChildrenCompByName = ({ children, file, name }) => {
+  const ChildrenComp =
+    Children.toArray(children).find(child => {
+      return child.type.name === name || child.type.displayName === name
+    }) || null
+
+  const ChildrenCompWithFile = isValidElement(ChildrenComp)
+    ? cloneElement(ChildrenComp, {
+        file
+      })
+    : null
+
+  return ChildrenCompWithFile
+}

react/Viewer/Viewer.jsx

@@ -70,6 +70,7 @@ class Viewer extends Component {
       showNavigation,
       renderFallbackExtraContent,
       validForPanel,
+      children,
       componentsProps
     } = this.props
 
@@ -90,6 +91,7 @@ class Viewer extends Component {
           showNavigation={showNavigation}
           showInfoPanel={validForPanel}
         >
+          {children}
           <ViewerByFile
             file={currentFile}
             onClose={this.onClose}

react/Viewer/ViewerContainer.jsx

@@ -63,7 +63,9 @@ const ViewerContainer = props => {
               hasNext={hasNext}
               validForPanel={validForPanel}
               toolbarRef={toolbarRef}
-            />
+            >
+              {children}
+            </Viewer>
           </EncryptedProvider>
           <ViewerInformationsWrapper
             isPublic={isPublic}

react/Viewer/components/Toolbar.jsx

@@ -17,6 +17,7 @@ import { withViewerLocales } from '../hoc/withViewerLocales'
 import { downloadFile } from '../helpers'
 import { useEncrypted } from '../providers/EncryptedProvider'
 import { ToolbarFilePath } from './ToolbarFilePath'
+import { extractChildrenCompByName } from '../Footer/helpers'
 
 import styles from './styles.styl'
 import MidEllipsis from '../../MidEllipsis'
@@ -38,13 +39,20 @@ const Toolbar = ({
   t,
   toolbarRef,
   breakpoints: { isDesktop },
+  children,
   showFilePath
 }) => {
   const client = useClient()
   const classes = useClasses()
 
   const { url } = useEncrypted()
 
+  const ToolbarButtons = extractChildrenCompByName({
+    children,
+    file,
+    name: 'ToolbarButtons'
+  })
+
   return (
     <div
       ref={toolbarRef}
@@ -76,13 +84,16 @@ const Toolbar = ({
 
       <div className="u-flex">
         {isDesktop && (
-          <IconButton
-            className="u-white"
-            aria-label={t('Viewer.download')}
-            onClick={() => downloadFile({ client, file, url })}
-          >
-            <Icon icon={DownloadIcon} />
-          </IconButton>
+          <>
+            {ToolbarButtons}
+            <IconButton
+              className="u-white"
+              aria-label={t('Viewer.download')}
+              onClick={() => downloadFile({ client, file, url })}
+            >
+              <Icon icon={DownloadIcon} />
+            </IconButton>
+          </>
         )}
       </div>
     </div>

react/Viewer/components/ToolbarButtons.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import FooterActionButtons from '../Footer/FooterActionButtons'
+
+const ToolbarButtons = props => {
+  return <FooterActionButtons {...props} />
+}
+
+ToolbarButtons.displayName = 'ToolbarButtons'
+
+export default ToolbarButtons

react/Viewer/components/ViewerByFile.jsx

@@ -52,44 +52,46 @@ export const getViewerComponentName = ({
   }
 }
 
-const ViewerByFile = ({
-  file,
-  onClose,
-  renderFallbackExtraContent,
-  gestures,
-  gesturesRef,
-  onSwipe,
-  breakpoints: { isDesktop },
-  componentsProps
-}) => {
-  const isOnlyOfficeEnabled = componentsProps?.OnlyOfficeViewer?.isEnabled
-  const onlyOfficeOpener = componentsProps?.OnlyOfficeViewer?.opener
+const ViewerByFile = withBreakpoints()(
+  ({
+    file,
+    onClose,
+    renderFallbackExtraContent,
+    gestures,
+    gesturesRef,
+    onSwipe,
+    breakpoints: { isDesktop },
+    componentsProps
+  }) => {
+    const isOnlyOfficeEnabled = componentsProps?.OnlyOfficeViewer?.isEnabled
+    const onlyOfficeOpener = componentsProps?.OnlyOfficeViewer?.opener
 
-  const { url } = useEncrypted()
+    const { url } = useEncrypted()
 
-  const ComponentName = useMemo(
-    () =>
-      getViewerComponentName({
-        file,
-        isDesktop,
-        isOnlyOfficeEnabled
-      }),
-    [file, isDesktop, isOnlyOfficeEnabled]
-  )
+    const ComponentName = useMemo(
+      () =>
+        getViewerComponentName({
+          file,
+          isDesktop,
+          isOnlyOfficeEnabled
+        }),
+      [file, isDesktop, isOnlyOfficeEnabled]
+    )
 
-  return (
-    <ComponentName
-      file={file}
-      url={url}
-      onClose={onClose}
-      renderFallbackExtraContent={renderFallbackExtraContent}
-      gestures={gestures}
-      gesturesRef={gesturesRef}
-      onSwipe={onSwipe}
-      onlyOfficeOpener={onlyOfficeOpener}
-    />
-  )
-}
+    return (
+      <ComponentName
+        file={file}
+        url={url}
+        onClose={onClose}
+        renderFallbackExtraContent={renderFallbackExtraContent}
+        gestures={gestures}
+        gesturesRef={gesturesRef}
+        onSwipe={onSwipe}
+        onlyOfficeOpener={onlyOfficeOpener}
+      />
+    )
+  }
+)
 
 ViewerByFile.propTypes = {
   file: FileDoctype.isRequired,
@@ -102,4 +104,6 @@ ViewerByFile.propTypes = {
   componentsProps: PropTypes.object
 }
 
-export default withBreakpoints()(ViewerByFile)
+ViewerByFile.displayName = 'ViewerByFile'
+
+export default ViewerByFile

react/Viewer/components/ViewerControls.jsx

@@ -92,10 +92,18 @@ class ViewerControls extends Component {
 
   renderChildren(children) {
     if (!children) return null
-    return React.cloneElement(children, {
-      gestures: this.state.gestures,
-      gesturesRef: this.wrapped,
-      onSwipe: this.onSwipe
+
+    return React.Children.map(children, child => {
+      if (
+        child.type.name === 'ViewerByFile' ||
+        child.type.displayName === 'ViewerByFile'
+      ) {
+        return React.cloneElement(child, {
+          gestures: this.state.gestures,
+          gesturesRef: this.wrapped,
+          onSwipe: this.onSwipe
+        })
+      }
     })
   }
 
@@ -137,11 +145,13 @@ class ViewerControls extends Component {
           <Toolbar
             toolbarRef={toolbarRef}
             file={file}
-            onClose={showClose && onClose}
+            showFilePath={showFilePath}
             onMouseEnter={this.showControls}
             onMouseLeave={this.hideControls}
-            showFilePath={showFilePath}
-          />
+            onClose={showClose && onClose}
+          >
+            {children}
+          </Toolbar>
         )}
         {showNavigation && isDesktop && hasPrevious && (
           <Navigation