cozy-ui 62.11.0 → 62.12.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [62.12.0](https://github.com/cozy/cozy-ui/compare/v62.11.0...v62.12.0) (2022-04-26)
+
+
+### Bug Fixes
+
+* Hide bottom of screen in immersive mode ([65fcc5f](https://github.com/cozy/cozy-ui/commit/65fcc5f))
+* Revert icons to white in immersive mode ([43bc925](https://github.com/cozy/cozy-ui/commit/43bc925))
+* Upgrade cozy-intent and cozy-device-helper ([44904b4](https://github.com/cozy/cozy-ui/commit/44904b4))
+
+
+### Features
+
+* Use new caller API in components ([10742b0](https://github.com/cozy/cozy-ui/commit/10742b0))
+
 # [62.11.0](https://github.com/cozy/cozy-ui/compare/v62.10.0...v62.11.0) (2022-04-22)
 
 

package/CODEOWNERS

@@ -0,0 +1,2 @@
+# General code owners
+*       @JF-Cozy @Merkur39 @trollepierre @Ldoppea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.11.0",
+  "version": "62.12.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -43,7 +43,6 @@
     "prebuild:css:kss": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
     "prebuild:doc:kss": "run-s clean:doc:kss build:css:kss",
     "prepare": "yarn release",
-    "prepush": "[[ $(git rev-parse --abbrev-ref HEAD) != 'gh-pages' ]] && yarn lint || true",
     "release": "npm-run-all --parallel sprite palette && yarn build",
     "semantic-release": "semantic-release",
     "sprite": "scripts/make-icon-sprite.sh",
@@ -92,10 +91,10 @@
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.4.1",
     "cozy-client": "27.19.1",
-    "cozy-device-helper": "^1.16.1",
+    "cozy-device-helper": "1.18.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "1.13.0",
+    "cozy-intent": "1.16.1",
     "cozy-sharing": "^3.10.0",
     "cozy-stack-client": "27.19.1",
     "css-loader": "0.28.11",

package/react/ActionMenu/index.jsx

@@ -121,7 +121,8 @@ const ActionMenu = ({
       topOverlay: 'transparent',
       topBackground: theme.palette.background.paper,
       topTheme: 'dark'
-    }
+    },
+    'cozy-ui/ActionMenu'
   )
 
   if (placement)

package/react/BottomSheet/BottomSheet.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 
+import { flagshipMetadata } from 'cozy-device-helper'
+
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
@@ -27,6 +29,15 @@ const makeStyles = ({ isTopPosition }) => ({
   },
   stack: {
     backgroundColor: 'var(--defaultBackgroundColor)'
+  },
+  flagshipImmersive: {
+    backgroundColor: 'var(--paperBackgroundColor)',
+    bottom: 0,
+    content: '',
+    height: 'var(--flagship-bottom-height)',
+    position: 'fixed',
+    width: '100%',
+    zIndex: 'var(--zIndex-modal)'
   }
 })
 
@@ -97,18 +108,11 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
         )
       : 0
 
-    // Will return 0 if the variable is not set
-    const flagshipBottomOffset = Number(
-      getComputedStyle(document.body)
-        .getPropertyValue('--flagship-bottom-height')
-        .replace('px', '')
-    )
-
     const minHeight =
       headerRef.current.offsetHeight +
       actionButtonsHeight +
       actionButtonsBottomMargin +
-      flagshipBottomOffset
+      (flagshipMetadata.navbarHeight || 0)
 
     // Used so that the bottomSheet can be opened to the top,
     // without stopping at the content height
@@ -149,43 +153,47 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
   })
 
   return (
-    <MuiBottomSheet
-      peekHeights={peekHeights}
-      defaultHeight={initPos}
-      backdrop={false}
-      fullHeight={false}
-      onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
-      styles={{ root: styles.root }}
-      threshold={0}
-      // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
-      springConfig={{
-        tension: defaultBottomSheetSpringConfig.tension,
-        friction: defaultBottomSheetSpringConfig.friction,
-        clamp: defaultBottomSheetSpringConfig.clamp
-      }}
-      disabledClosing={true}
-      snapPointSeekerMode="next"
-    >
-      <div ref={innerContentRef}>
-        <Paper
-          data-testid="bottomSheet-header"
-          className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
-          ref={headerRef}
-          elevation={0}
-          square
-        >
-          <div style={styles.indicator} />
-        </Paper>
-        <Stack
-          style={styles.stack}
-          className="u-flex u-flex-column u-ov-hidden"
-          spacing="s"
-        >
-          {overriddenChildren}
-        </Stack>
-      </div>
-      <div style={{ height: bottomSpacerHeight }} />
-    </MuiBottomSheet>
+    <>
+      {flagshipMetadata.immersive && <span style={styles.flagshipImmersive} />}
+
+      <MuiBottomSheet
+        peekHeights={peekHeights}
+        defaultHeight={initPos}
+        backdrop={false}
+        fullHeight={false}
+        onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
+        styles={{ root: styles.root }}
+        threshold={0}
+        // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
+        springConfig={{
+          tension: defaultBottomSheetSpringConfig.tension,
+          friction: defaultBottomSheetSpringConfig.friction,
+          clamp: defaultBottomSheetSpringConfig.clamp
+        }}
+        disabledClosing={true}
+        snapPointSeekerMode="next"
+      >
+        <div ref={innerContentRef}>
+          <Paper
+            data-testid="bottomSheet-header"
+            className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
+            ref={headerRef}
+            elevation={0}
+            square
+          >
+            <div style={styles.indicator} />
+          </Paper>
+          <Stack
+            style={styles.stack}
+            className="u-flex u-flex-column u-ov-hidden"
+            spacing="s"
+          >
+            {overriddenChildren}
+          </Stack>
+        </div>
+        <div style={{ height: bottomSpacerHeight }} />
+      </MuiBottomSheet>
+    </>
   )
 }
 

package/react/Dialog/index.jsx

@@ -3,6 +3,8 @@ import { RemoveScroll } from 'react-remove-scroll'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
 import { useTheme } from '@material-ui/core'
 
+import { flagshipMetadata } from 'cozy-device-helper'
+
 import useBreakpoints from '../hooks/useBreakpoints'
 import { useCozyTheme } from '../CozyTheme'
 import themesStyles from '../../stylus/settings/palette.styl'
@@ -47,16 +49,18 @@ const Dialog = props => {
         },
     {
       bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
-      bottomTheme: 'dark',
+      bottomTheme: flagshipMetadata.immersive ? 'light' : 'dark',
       bottomOverlay: 'transparent',
       topOverlay: 'transparent',
       topBackground:
         cozBar && getComputedStyle(cozBar).getPropertyValue('background-color'),
       topTheme:
-        cozBar && cozBar.classList.contains('coz-theme-primary')
+        flagshipMetadata.immersive ||
+        (cozBar && cozBar.classList.contains('coz-theme-primary'))
           ? 'light'
           : 'dark'
-    }
+    },
+    'cozy-ui/Dialog'
   )
 
   return (

package/react/SelectionBar/index.jsx

@@ -66,10 +66,14 @@ const SelectionBar = ({ actions, selected, hideSelectionBar }) => {
     return () =>
       webviewIntent &&
       theme &&
-      webviewIntent.call('setFlagshipUI', {
-        bottomBackground: theme.palette.background.default,
-        bottomTheme: 'dark'
-      })
+      webviewIntent.call(
+        'setFlagshipUI',
+        {
+          bottomBackground: theme.palette.background.default,
+          bottomTheme: 'dark'
+        },
+        'cozy-ui/SelectionBar'
+      )
     // TODO: validate the deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedCount, webviewIntent])

package/react/Sidebar/index.jsx

@@ -15,7 +15,8 @@ const Sidebar = ({ children, className, ...restProps }) => {
     },
     {
       bottomBackground: theme.palette.background.paper
-    }
+    },
+    'cozy-ui/Sidebar'
   )
 
   return (

package/react/Viewer/Viewer.jsx

@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { FileDoctype } from '../proptypes'
+
+import ViewerControls from './ViewerControls'
+import ViewerByFile from './ViewerByFile'
+import { toolbarPropsPropType } from './index'
+
+const KEY_CODE_LEFT = 37
+const KEY_CODE_RIGHT = 39
+const KEY_CODE_ESCAPE = 27
+
+class Viewer extends Component {
+  constructor() {
+    super()
+  }
+  componentDidMount() {
+    document.addEventListener('keyup', this.onKeyUp, false)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keyup', this.onKeyUp, false)
+  }
+
+  onKeyUp = e => {
+    if (e.keyCode === KEY_CODE_LEFT) this.onPrevious()
+    else if (e.keyCode === KEY_CODE_RIGHT) this.onNext()
+    else if (e.keyCode === KEY_CODE_ESCAPE) this.onClose()
+  }
+
+  onNext = () => {
+    const { files, currentIndex } = this.props
+    if (currentIndex === files.length - 1) {
+      return
+    }
+    const nextIndex = currentIndex + 1
+    const nextFile = files[nextIndex]
+    this.onChange(nextFile, nextIndex)
+  }
+
+  onPrevious = () => {
+    const { files, currentIndex } = this.props
+    if (currentIndex === 0) {
+      return
+    }
+    const prevIndex = currentIndex - 1
+    const prevFile = files[prevIndex]
+    this.onChange(prevFile, prevIndex)
+  }
+
+  onClose = () => {
+    if (this.props.onCloseRequest) {
+      this.props.onCloseRequest()
+    }
+  }
+
+  onChange(nextFile, nextIndex) {
+    if (this.props.onChangeRequest) {
+      this.props.onChangeRequest(nextFile, nextIndex)
+    }
+  }
+
+  render() {
+    const {
+      currentFile,
+      hasPrevious,
+      hasNext,
+      toolbarProps,
+      toolbarRef,
+      showNavigation,
+      renderFallbackExtraContent,
+      validForPanel,
+      onlyOfficeProps
+    } = this.props
+
+    // this `expanded` property makes the next/previous controls cover the displayed image
+    const expanded = currentFile && currentFile.class === 'image'
+
+    return (
+      <>
+        <ViewerControls
+          file={currentFile}
+          onClose={this.onClose}
+          hasPrevious={hasPrevious}
+          hasNext={hasNext}
+          onPrevious={this.onPrevious}
+          onNext={this.onNext}
+          expanded={expanded}
+          toolbarProps={{ ...toolbarProps, toolbarRef }}
+          showNavigation={showNavigation}
+          showInfoPanel={validForPanel}
+        >
+          <ViewerByFile
+            file={currentFile}
+            onClose={this.onClose}
+            renderFallbackExtraContent={renderFallbackExtraContent}
+            onlyOfficeProps={onlyOfficeProps}
+          />
+        </ViewerControls>
+      </>
+    )
+  }
+}
+
+Viewer.propTypes = {
+  /** One `io.cozy.files` to display */
+  currentFile: FileDoctype.isRequired,
+  hasNext: PropTypes.bool,
+  hasPrevious: PropTypes.bool,
+  /** Called when the user wants to leave the Viewer */
+  onCloseRequest: PropTypes.func,
+  /** Called with (nextFile, nextIndex) when the user requests to navigate to another file */
+  onChangeRequest: PropTypes.func,
+  toolbarProps: PropTypes.shape(toolbarPropsPropType),
+  toolbarRef: PropTypes.object,
+  /** Whether to show left and right arrows to navigate between files */
+  showNavigation: PropTypes.bool,
+  /** A render prop that is called when a file can't be displayed */
+  renderFallbackExtraContent: PropTypes.func,
+  /** Used to open an Only Office file */
+  onlyOfficeProps: PropTypes.shape({
+    /** Whether Only Office is enabled on the server */
+    isEnabled: PropTypes.bool,
+    /** To open the Only Office file */
+    opener: PropTypes.func
+  }),
+  validForPanel: PropTypes.bool
+}
+
+export default Viewer

package/react/Viewer/ViewerContainer.jsx

@@ -0,0 +1,88 @@
+import React, { createRef } from 'react'
+import PropTypes from 'prop-types'
+
+import useBreakpoints from '../hooks/useBreakpoints'
+import { FileDoctype } from '../proptypes'
+
+import { toolbarPropsPropType } from './proptypes'
+import { isValidForPanel } from './helpers'
+import ViewerWrapper from './ViewerWrapper'
+import Viewer from './Viewer'
+import ViewerInformationsWrapper from './ViewerInformationsWrapper'
+
+const ViewerContainer = props => {
+  const {
+    className,
+    disableFooter,
+    disablePanel,
+    disableSharing,
+    ...rest
+  } = props
+  const { currentIndex, files } = props
+  const toolbarRef = createRef()
+  const { isDesktop } = useBreakpoints()
+  const currentFile = files[currentIndex]
+  const fileCount = files.length
+  const hasPrevious = currentIndex > 0
+  const hasNext = currentIndex < fileCount - 1
+  const validForPanel =
+    isValidForPanel({ file: currentFile }) && isDesktop && !disablePanel
+
+  return (
+    <ViewerWrapper className={className}>
+      <Viewer
+        {...rest}
+        currentFile={currentFile}
+        hasPrevious={hasPrevious}
+        hasNext={hasNext}
+        validForPanel={validForPanel}
+        toolbarRef={toolbarRef}
+      />
+      <ViewerInformationsWrapper
+        disableFooter={disableFooter}
+        disableSharing={disableSharing}
+        validForPanel={validForPanel}
+        currentFile={currentFile}
+        toolbarRef={toolbarRef}
+      />
+    </ViewerWrapper>
+  )
+}
+
+ViewerContainer.propTypes = {
+  /** One or more `io.cozy.files` to display */
+  files: PropTypes.arrayOf(FileDoctype).isRequired,
+  /** Index of the file to show */
+  currentIndex: PropTypes.number,
+  className: PropTypes.string,
+  /** Called when the user wants to leave the Viewer */
+  onCloseRequest: PropTypes.func,
+  /** Called with (nextFile, nextIndex) when the user requests to navigate to another file */
+  onChangeRequest: PropTypes.func,
+  toolbarProps: PropTypes.shape(toolbarPropsPropType),
+  /** Whether to show left and right arrows to navigate between files */
+  showNavigation: PropTypes.bool,
+  /** A render prop that is called when a file can't be displayed */
+  renderFallbackExtraContent: PropTypes.func,
+  /** Used to open an Only Office file */
+  onlyOfficeProps: PropTypes.shape({
+    /** Whether Only Office is enabled on the server */
+    isEnabled: PropTypes.bool,
+    /** To open the Only Office file */
+    opener: PropTypes.func
+  }),
+  /** 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,
+  /** Show/Hide cozy share button  */
+  disableSharing: PropTypes.bool
+}
+
+ViewerContainer.defaultProps = {
+  currentIndex: 0,
+  toolbarProps: { showToolbar: true, showClose: true },
+  showNavigation: true
+}
+
+export default ViewerContainer

package/react/Viewer/ViewerInformationsWrapper.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useTheme } from '@material-ui/core'
+
+import { FileDoctype } from '../proptypes'
+
+import InformationPanel from './InformationPanel'
+import Footer from './Footer'
+import PanelContent from './Panel/PanelContent'
+import FooterContent from './Footer/FooterContent'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+
+const ViewerInformationsWrapper = ({
+  currentFile,
+  disableFooter,
+  disableSharing,
+  validForPanel,
+  toolbarRef
+}) => {
+  const theme = useTheme()
+  const sidebar = document.querySelector('[class*="sidebar"]')
+
+  useSetFlagshipUI(
+    {
+      bottomBackground: theme.palette.background.paper,
+      bottomTheme: 'dark'
+    },
+    {
+      bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper']
+    }
+  )
+
+  return (
+    <>
+      {!disableFooter && (
+        <Footer>
+          <FooterContent
+            file={currentFile}
+            toolbarRef={toolbarRef}
+            disableSharing={disableSharing}
+          />
+        </Footer>
+      )}
+      {validForPanel && (
+        <InformationPanel>
+          <PanelContent file={currentFile} />
+        </InformationPanel>
+      )}
+    </>
+  )
+}
+
+ViewerInformationsWrapper.propTypes = {
+  currentFile: FileDoctype.isRequired,
+  disableFooter: PropTypes.bool,
+  disableSharing: PropTypes.bool,
+  validForPanel: PropTypes.bool,
+  toolbarRef: PropTypes.object
+}
+
+export default ViewerInformationsWrapper

package/react/Viewer/ViewerWithCustomPanelAndFooter.jsx

@@ -0,0 +1,52 @@
+import React, { createRef } from 'react'
+
+import useBreakpoints from '../hooks/useBreakpoints'
+
+import ViewerWrapper from './ViewerWrapper'
+import InformationPanel from './InformationPanel'
+import Footer from './Footer'
+import Viewer from './Viewer'
+
+const ViewerWithCustomPanelAndFooter = props => {
+  console.warn(
+    'Warning: Please do not use the "ViewerWithCustomPanelAndFooter" Component, replace it with the default export component'
+  )
+  const { footerProps, panelInfoProps, ...rest } = props
+  const { files, currentIndex } = props
+  const fileCount = files.length
+  const hasPrevious = currentIndex > 0
+  const hasNext = currentIndex < fileCount - 1
+  const { isDesktop } = useBreakpoints()
+  const toolbarRef = createRef()
+  const currentFile = files[currentIndex]
+
+  const showInfoPanel =
+    isDesktop &&
+    panelInfoProps &&
+    panelInfoProps.showPanel({ file: currentFile })
+
+  return (
+    <ViewerWrapper>
+      <Viewer
+        {...rest}
+        disablePanel={true}
+        disableFooter={true}
+        currentFile={currentFile}
+        hasPrevious={hasPrevious}
+        hasNext={hasNext}
+        validForPanel={showInfoPanel}
+        toolbarRef={toolbarRef}
+      />
+      <Footer>
+        <footerProps.FooterContent file={currentFile} toolbarRef={toolbarRef} />
+      </Footer>
+      {showInfoPanel && (
+        <InformationPanel>
+          <panelInfoProps.PanelContent file={currentFile} />
+        </InformationPanel>
+      )}
+    </ViewerWrapper>
+  )
+}
+
+export default ViewerWithCustomPanelAndFooter