cozy-ui 60.3.0 → 60.4.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [60.4.0](https://github.com/cozy/cozy-ui/compare/v60.3.0...v60.4.0) (2022-01-20)
+
+
+### Features
+
+* Add new BottomSheet component ([7064202](https://github.com/cozy/cozy-ui/commit/7064202))
+* Replace the Viewer BottomSheet by the new one ([184b5af](https://github.com/cozy/cozy-ui/commit/184b5af))
+
 # [60.3.0](https://github.com/cozy/cozy-ui/compare/v60.2.0...v60.3.0) (2022-01-19)
 
 

package/package.json

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

package/react/BottomSheet/BottomSheet.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
+
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+
+const makeStyles = ({ isTopPosition }) => ({
+  root: {
+    borderTopLeftRadius: '1rem',
+    borderTopRightRadius: '1rem',
+    transition: 'border-radius 0.5s',
+    zIndex: 'var(--zIndex-drawer)',
+    boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)',
+    backgroundColor: 'var(--paperBackgroundColor)',
+    ...(isTopPosition && {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      boxShadow: '0 0 1px 0 rgba(0, 0, 0, 0.5)'
+    })
+  },
+  indicator: {
+    width: '4rem',
+    height: '0.25rem',
+    borderRadius: '99px',
+    backgroundColor: 'var(--secondaryTextColor)'
+  },
+  stack: {
+    backgroundColor: 'var(--defaultBackgroundColor)'
+  }
+})
+
+export const defaultBottomSheetSpringConfig = {
+  tension: 165,
+  friction: 17,
+  clamp: true
+}
+
+const defaultSettings = {
+  mediumHeightRatio: 0.33
+}
+
+const computeMaxHeight = toolbarProps => {
+  const { ref, height } = toolbarProps
+  let computedToolbarHeight = 1
+
+  if (height) {
+    computedToolbarHeight = height
+  } else if (ref && ref.current) {
+    computedToolbarHeight = ref.current.offsetHeight
+  }
+
+  return window.innerHeight - computedToolbarHeight
+}
+
+const BottomSheet = ({ toolbarProps, settings, children }) => {
+  const innerContentRef = useRef()
+  const headerRef = useRef()
+  const headerContentRef = useRef()
+  const [isTopPosition, setIsTopPosition] = useState(false)
+  const [peekHeights, setPeekHeights] = useState(null)
+  const [initPos, setInitPos] = useState(null)
+  const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
+
+  const { mediumHeightRatio } = useMemo(() => settings || defaultSettings, [
+    settings
+  ])
+  const styles = useMemo(() => makeStyles({ isTopPosition }), [isTopPosition])
+
+  // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
+  // Needed for iOS Safari
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = 'auto'
+    }
+  }, [])
+
+  useEffect(() => {
+    const headerContent = headerContentRef.current
+    const maxHeight = computeMaxHeight(toolbarProps)
+    const mediumHeight = Math.round(maxHeight * mediumHeightRatio)
+
+    const actionButtonsHeight = headerContent
+      ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
+      : 0
+    const actionButtonsBottomMargin = headerContent
+      ? parseFloat(
+          getComputedStyle(headerContent).getPropertyValue('padding-bottom')
+        )
+      : 0
+    const minHeight =
+      headerRef.current.offsetHeight +
+      actionButtonsHeight +
+      actionButtonsBottomMargin
+
+    // Used so that the bottomSheet can be opened to the top,
+    // without stopping at the content height
+    const bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight
+
+    setPeekHeights([minHeight, mediumHeight, maxHeight])
+    setInitPos(mediumHeight)
+    setBottomSpacerHeight(bottomSpacerHeight)
+  }, [
+    innerContentRef,
+    headerContentRef.current,
+    toolbarProps,
+    mediumHeightRatio
+  ])
+
+  const handleOnIndexChange = snapIndex => {
+    const maxHeightSnapIndex = peekHeights.length - 1
+
+    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
+      setIsTopPosition(true)
+    }
+    if (snapIndex !== maxHeightSnapIndex && isTopPosition) {
+      setIsTopPosition(false)
+    }
+  }
+
+  const overriddenChildren = React.Children.map(children, child => {
+    if (child.type.name === 'BottomSheetHeader') {
+      return React.cloneElement(child, { headerContentRef })
+    }
+    return child
+  })
+
+  return (
+    <MuiBottomSheet
+      peekHeights={peekHeights}
+      defaultHeight={initPos}
+      backdrop={false}
+      fullHeight={false}
+      onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
+      styles={{ root: styles.root }}
+      threshold={0}
+      // springConfig doc : https://www.react-spring.io/docs/hooks/api
+      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>
+  )
+}
+
+BottomSheet.defaultProps = {
+  classes: {},
+  toolbarProps: {}
+}
+
+BottomSheet.propTypes = {
+  /** Toolbar properties */
+  toolbarProps: PropTypes.shape({
+    /** React reference of the toolbar node */
+    ref: PropTypes.bool,
+    /** Toolbar height value */
+    height: PropTypes.func
+  }),
+  /** Settings that can be modified */
+  settings: PropTypes.shape({
+    /** Height of the middle snap point, expressed as a percentage of the viewport height */
+    mediumHeightRatio: PropTypes.number
+  })
+}
+
+export default React.memo(BottomSheet)

package/react/BottomSheet/BottomSheetHeader.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import cx from 'classnames'
+
+import Paper from 'cozy-ui/transpiled/react/Paper'
+
+const BottomSheetHeader = ({ className, headerContentRef, children }) => {
+  return (
+    <Paper
+      ref={headerContentRef}
+      className={cx('u-flex u-flex-items-center', className)}
+      elevation={0}
+      square
+    >
+      {children}
+    </Paper>
+  )
+}
+
+BottomSheetHeader.defaultProps = {
+  classes: {}
+}
+
+export default BottomSheetHeader

package/react/BottomSheet/BottomSheetItem.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import Paper from 'cozy-ui/transpiled/react/Paper'
+
+const BottomSheetItem = ({
+  children,
+  disableGutters,
+  disableElevation,
+  className,
+  ...props
+}) => {
+  return (
+    <Paper
+      elevation={disableElevation ? 0 : 0} // need to set correct shadow values before setting a real elevation value
+      square
+      className={cx({ 'u-p-1': !disableGutters }, className)}
+      {...props}
+    >
+      {children}
+    </Paper>
+  )
+}
+
+BottomSheetItem.propTypes = {
+  /** CSS classes */
+  className: PropTypes.string,
+  /** Disables default padding */
+  disableGutters: PropTypes.bool,
+  /** Disables default paper elevation */
+  disableElevation: PropTypes.bool
+}
+
+export default React.memo(BottomSheetItem)

package/react/BottomSheet/README.md

@@ -0,0 +1,33 @@
+Displays content coming up from the bottom of the screen. The pane can be swiped to the top of the screen.
+
+```jsx
+import BottomSheet, { BottomSheetItem, BottomSheetHeader } from 'cozy-ui/transpiled/react/BottomSheet'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+// <-- only usefull for the documentation
+initialState = { isBottomSheetDisplayed: isTesting() }
+const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
+
+const settings = { mediumHeightRatio: isTesting() ? 0.90 : 0.33 }
+// -->
+
+;
+
+<>
+  <Button label="Open BottomSheet" onClick={showBottomSheet} />
+  {state.isBottomSheetDisplayed && (
+    <BottomSheet settings={settings}>
+      <BottomSheetHeader className="u-ph-1 u-pb-1">
+        <Button className="u-mr-half" variant="secondary" label="Button 1" fullWidth />
+        <Button variant="secondary" label="Button 2" fullWidth />
+      </BottomSheetHeader>
+      <BottomSheetItem>
+        {content.ada.short}
+      </BottomSheetItem>
+      <BottomSheetItem disableElevation>
+        {content.ada.long}
+      </BottomSheetItem>
+    </BottomSheet>
+  )}
+</>
+```

package/react/BottomSheet/index.jsx

@@ -0,0 +1,3 @@
+export { default } from './BottomSheet'
+export { default as BottomSheetItem } from './BottomSheetItem'
+export { default as BottomSheetHeader } from './BottomSheetHeader'

package/react/Viewer/Footer/BottomSheetContent.jsx

@@ -1,64 +1,26 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 
-import { isMobileApp } from 'cozy-device-helper'
+import { BottomSheetItem } from '../../BottomSheet'
 
-import Paper from '../../Paper'
-import Typography from '../../Typography'
-import Stack from '../../Stack'
-
-import Sharing from './Sharing'
-import ForwardButton from './ForwardButton'
-import DownloadButton from './DownloadButton'
 import getPanelBlocks, { panelBlocksSpecs } from '../Panel/getPanelBlocks'
 
-const useStyles = makeStyles(theme => ({
-  stack: {
-    backgroundColor: theme.palette.background.default
-  }
-}))
-
-const BottomSheetContent = forwardRef(
-  ({ file, disableSharing, contactsFullname }, ref) => {
-    const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file })
-    const FileActionButton = isMobileApp() ? ForwardButton : DownloadButton
-    const styles = useStyles()
-
-    return (
-      <Stack
-        spacing="s"
-        className={cx('u-flex u-flex-column u-ov-hidden', styles.stack)}
-      >
-        <Paper
-          className={'u-flex u-ph-1 u-pb-1'}
-          elevation={2}
-          square
-          ref={ref}
-        >
-          {!disableSharing && <Sharing file={file} />}
-          <FileActionButton file={file} />
-        </Paper>
-        {panelBlocks.map((PanelBlock, index) => (
-          <Paper
-            key={index}
-            elevation={index === panelBlocks.length - 1 ? 0 : 2}
-            square
-          >
-            <Typography variant="h4" className={'u-pv-1 u-ph-1'}>
-              <PanelBlock file={file} contactsFullname={contactsFullname} />
-            </Typography>
-          </Paper>
-        ))}
-      </Stack>
-    )
-  }
-)
+const BottomSheetContent = ({ file, contactsFullname }) => {
+  const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file })
+
+  return panelBlocks.map((PanelBlock, index) => (
+    <BottomSheetItem
+      key={index}
+      disableElevation={index === panelBlocks.length - 1}
+    >
+      <PanelBlock file={file} contactsFullname={contactsFullname} />
+    </BottomSheetItem>
+  ))
+}
 
 BottomSheetContent.propTypes = {
   file: PropTypes.object.isRequired,
-  disableSharing: PropTypes.bool
+  contactsFullname: PropTypes.string
 }
 
 export default BottomSheetContent

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,16 +1,17 @@
-import React, { useRef } from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 
 import { isMobileApp } from 'cozy-device-helper'
 import { getReferencedBy, useQuery, models } from 'cozy-client'
 
+import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
+
 import { buildContactByIdsQuery } from '../queries'
 import { isValidForPanel } from '../helpers'
 import Sharing from './Sharing'
 import ForwardButton from './ForwardButton'
 import DownloadButton from './DownloadButton'
-import BottomSheetWrapper from './BottomSheetWrapper'
 import BottomSheetContent from './BottomSheetContent'
 
 const {
@@ -32,7 +33,7 @@ const useStyles = makeStyles(theme => ({
 const FooterContent = ({ file, toolbarRef, disableSharing }) => {
   const styles = useStyles()
   const FileActionButton = isMobileApp() ? ForwardButton : DownloadButton
-  const actionButtonsRef = useRef()
+  const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
   const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
     ref => ref.id
@@ -52,18 +53,13 @@ const FooterContent = ({ file, toolbarRef, disableSharing }) => {
     (contactsFullname || contactIds.length === 0)
   ) {
     return (
-      <BottomSheetWrapper
-        file={file}
-        actionButtonsRef={actionButtonsRef}
-        toolbarRef={toolbarRef}
-      >
-        <BottomSheetContent
-          file={file}
-          disableSharing={disableSharing}
-          contactsFullname={contactsFullname}
-          ref={actionButtonsRef}
-        />
-      </BottomSheetWrapper>
+      <BottomSheet toolbarProps={toolbarProps}>
+        <BottomSheetHeader className="u-ph-1 u-pb-1">
+          {!disableSharing && <Sharing file={file} />}
+          <FileActionButton file={file} />
+        </BottomSheetHeader>
+        <BottomSheetContent file={file} contactsFullname={contactsFullname} />
+      </BottomSheet>
     )
   }
 

package/react/Viewer/Readme.md

@@ -31,7 +31,6 @@ import Overlay from 'cozy-ui/transpiled/react/Overlay';
 import Button from 'cozy-ui/transpiled/react/Button';
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download';
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';
-import BottomSheetWrapper from 'cozy-ui/transpiled/react/Viewer/Footer/BottomSheetWrapper';
 import { isValidForPanel } from 'cozy-ui/transpiled/react/Viewer/helpers';
 import getPanelBlocks, { panelBlocksSpecs } from 'cozy-ui/transpiled/react/Viewer/Panel/getPanelBlocks';
 

package/react/index.js

@@ -99,3 +99,4 @@ export { default as Fab } from './Fab'
 export { default as SquareAppIcon } from './SquareAppIcon'
 export { default as FileImageLoader } from './FileImageLoader'
 export { default as Radios } from './Radios'
+export { default as BottomSheet, BottomSheetItem } from './BottomSheet'

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -0,0 +1,202 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet';
+import Stack from 'cozy-ui/transpiled/react/Stack';
+import Paper from 'cozy-ui/transpiled/react/Paper';
+
+var makeStyles = function makeStyles(_ref) {
+  var isTopPosition = _ref.isTopPosition;
+  return {
+    root: _objectSpread({
+      borderTopLeftRadius: '1rem',
+      borderTopRightRadius: '1rem',
+      transition: 'border-radius 0.5s',
+      zIndex: 'var(--zIndex-drawer)',
+      boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)',
+      backgroundColor: 'var(--paperBackgroundColor)'
+    }, isTopPosition && {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      boxShadow: '0 0 1px 0 rgba(0, 0, 0, 0.5)'
+    }),
+    indicator: {
+      width: '4rem',
+      height: '0.25rem',
+      borderRadius: '99px',
+      backgroundColor: 'var(--secondaryTextColor)'
+    },
+    stack: {
+      backgroundColor: 'var(--defaultBackgroundColor)'
+    }
+  };
+};
+
+export var defaultBottomSheetSpringConfig = {
+  tension: 165,
+  friction: 17,
+  clamp: true
+};
+var defaultSettings = {
+  mediumHeightRatio: 0.33
+};
+
+var computeMaxHeight = function computeMaxHeight(toolbarProps) {
+  var ref = toolbarProps.ref,
+      height = toolbarProps.height;
+  var computedToolbarHeight = 1;
+
+  if (height) {
+    computedToolbarHeight = height;
+  } else if (ref && ref.current) {
+    computedToolbarHeight = ref.current.offsetHeight;
+  }
+
+  return window.innerHeight - computedToolbarHeight;
+};
+
+var BottomSheet = function BottomSheet(_ref2) {
+  var toolbarProps = _ref2.toolbarProps,
+      settings = _ref2.settings,
+      children = _ref2.children;
+  var innerContentRef = useRef();
+  var headerRef = useRef();
+  var headerContentRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isTopPosition = _useState2[0],
+      setIsTopPosition = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      peekHeights = _useState4[0],
+      setPeekHeights = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      initPos = _useState6[0],
+      setInitPos = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      bottomSpacerHeight = _useState8[0],
+      setBottomSpacerHeight = _useState8[1];
+
+  var _useMemo = useMemo(function () {
+    return settings || defaultSettings;
+  }, [settings]),
+      mediumHeightRatio = _useMemo.mediumHeightRatio;
+
+  var styles = useMemo(function () {
+    return makeStyles({
+      isTopPosition: isTopPosition
+    });
+  }, [isTopPosition]); // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
+  // Needed for iOS Safari
+
+  useEffect(function () {
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+  useEffect(function () {
+    var headerContent = headerContentRef.current;
+    var maxHeight = computeMaxHeight(toolbarProps);
+    var mediumHeight = Math.round(maxHeight * mediumHeightRatio);
+    var actionButtonsHeight = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height')) : 0;
+    var actionButtonsBottomMargin = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('padding-bottom')) : 0;
+    var minHeight = headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin; // Used so that the bottomSheet can be opened to the top,
+    // without stopping at the content height
+
+    var bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight;
+    setPeekHeights([minHeight, mediumHeight, maxHeight]);
+    setInitPos(mediumHeight);
+    setBottomSpacerHeight(bottomSpacerHeight);
+  }, [innerContentRef, headerContentRef.current, toolbarProps, mediumHeightRatio]);
+
+  var handleOnIndexChange = function handleOnIndexChange(snapIndex) {
+    var maxHeightSnapIndex = peekHeights.length - 1;
+
+    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
+      setIsTopPosition(true);
+    }
+
+    if (snapIndex !== maxHeightSnapIndex && isTopPosition) {
+      setIsTopPosition(false);
+    }
+  };
+
+  var overriddenChildren = React.Children.map(children, function (child) {
+    if (child.type.name === 'BottomSheetHeader') {
+      return React.cloneElement(child, {
+        headerContentRef: headerContentRef
+      });
+    }
+
+    return child;
+  });
+  return React.createElement(MuiBottomSheet, {
+    peekHeights: peekHeights,
+    defaultHeight: initPos,
+    backdrop: false,
+    fullHeight: false,
+    onIndexChange: function onIndexChange(snapIndex) {
+      return handleOnIndexChange(snapIndex);
+    },
+    styles: {
+      root: styles.root
+    },
+    threshold: 0 // springConfig doc : https://www.react-spring.io/docs/hooks/api
+    ,
+    springConfig: {
+      tension: defaultBottomSheetSpringConfig.tension,
+      friction: defaultBottomSheetSpringConfig.friction,
+      clamp: defaultBottomSheetSpringConfig.clamp
+    },
+    disabledClosing: true,
+    snapPointSeekerMode: "next"
+  }, React.createElement("div", {
+    ref: innerContentRef
+  }, React.createElement(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: true
+  }, React.createElement("div", {
+    style: styles.indicator
+  })), React.createElement(Stack, {
+    style: styles.stack,
+    className: "u-flex u-flex-column u-ov-hidden",
+    spacing: "s"
+  }, overriddenChildren)), React.createElement("div", {
+    style: {
+      height: bottomSpacerHeight
+    }
+  }));
+};
+
+BottomSheet.defaultProps = {
+  classes: {},
+  toolbarProps: {}
+};
+BottomSheet.propTypes = {
+  /** Toolbar properties */
+  toolbarProps: PropTypes.shape({
+    /** React reference of the toolbar node */
+    ref: PropTypes.bool,
+
+    /** Toolbar height value */
+    height: PropTypes.func
+  }),
+
+  /** Settings that can be modified */
+  settings: PropTypes.shape({
+    /** Height of the middle snap point, expressed as a percentage of the viewport height */
+    mediumHeightRatio: PropTypes.number
+  })
+};
+export default React.memo(BottomSheet);

package/transpiled/react/BottomSheet/BottomSheetHeader.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import cx from 'classnames';
+import Paper from 'cozy-ui/transpiled/react/Paper';
+
+var BottomSheetHeader = function BottomSheetHeader(_ref) {
+  var className = _ref.className,
+      headerContentRef = _ref.headerContentRef,
+      children = _ref.children;
+  return React.createElement(Paper, {
+    ref: headerContentRef,
+    className: cx('u-flex u-flex-items-center', className),
+    elevation: 0,
+    square: true
+  }, children);
+};
+
+BottomSheetHeader.defaultProps = {
+  classes: {}
+};
+export default BottomSheetHeader;

package/transpiled/react/BottomSheet/BottomSheetItem.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Paper from 'cozy-ui/transpiled/react/Paper';
+
+var BottomSheetItem = function BottomSheetItem(_ref) {
+  var children = _ref.children,
+      disableGutters = _ref.disableGutters,
+      disableElevation = _ref.disableElevation,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, ["children", "disableGutters", "disableElevation", "className"]);
+
+  return React.createElement(Paper, _extends({
+    elevation: disableElevation ? 0 : 0 // need to set correct shadow values before setting a real elevation value
+    ,
+    square: true,
+    className: cx({
+      'u-p-1': !disableGutters
+    }, className)
+  }, props), children);
+};
+
+BottomSheetItem.propTypes = {
+  /** CSS classes */
+  className: PropTypes.string,
+
+  /** Disables default padding */
+  disableGutters: PropTypes.bool,
+
+  /** Disables default paper elevation */
+  disableElevation: PropTypes.bool
+};
+export default React.memo(BottomSheetItem);

package/transpiled/react/BottomSheet/index.js

@@ -0,0 +1,3 @@
+export { default } from './BottomSheet';
+export { default as BottomSheetItem } from './BottomSheetItem';
+export { default as BottomSheetHeader } from './BottomSheetHeader';

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

@@ -1,60 +1,28 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { isMobileApp } from 'cozy-device-helper';
-import Paper from "cozy-ui/transpiled/react/Paper";
-import Typography from "cozy-ui/transpiled/react/Typography";
-import Stack from "cozy-ui/transpiled/react/Stack";
-import Sharing from "cozy-ui/transpiled/react/Viewer/Footer/Sharing";
-import ForwardButton from "cozy-ui/transpiled/react/Viewer/Footer/ForwardButton";
-import DownloadButton from "cozy-ui/transpiled/react/Viewer/Footer/DownloadButton";
+import { BottomSheetItem } from "cozy-ui/transpiled/react/BottomSheet";
 import getPanelBlocks, { panelBlocksSpecs } from "cozy-ui/transpiled/react/Viewer/Panel/getPanelBlocks";
-var useStyles = makeStyles(function (theme) {
-  return {
-    stack: {
-      backgroundColor: theme.palette.background.default
-    }
-  };
-});
-var BottomSheetContent = forwardRef(function (_ref, ref) {
+
+var BottomSheetContent = function BottomSheetContent(_ref) {
   var file = _ref.file,
-      disableSharing = _ref.disableSharing,
       contactsFullname = _ref.contactsFullname;
   var panelBlocks = getPanelBlocks({
     panelBlocksSpecs: panelBlocksSpecs,
     file: file
   });
-  var FileActionButton = isMobileApp() ? ForwardButton : DownloadButton;
-  var styles = useStyles();
-  return React.createElement(Stack, {
-    spacing: "s",
-    className: cx('u-flex u-flex-column u-ov-hidden', styles.stack)
-  }, React.createElement(Paper, {
-    className: 'u-flex u-ph-1 u-pb-1',
-    elevation: 2,
-    square: true,
-    ref: ref
-  }, !disableSharing && React.createElement(Sharing, {
-    file: file
-  }), React.createElement(FileActionButton, {
-    file: file
-  })), panelBlocks.map(function (PanelBlock, index) {
-    return React.createElement(Paper, {
+  return panelBlocks.map(function (PanelBlock, index) {
+    return React.createElement(BottomSheetItem, {
       key: index,
-      elevation: index === panelBlocks.length - 1 ? 0 : 2,
-      square: true
-    }, React.createElement(Typography, {
-      variant: "h4",
-      className: 'u-pv-1 u-ph-1'
+      disableElevation: index === panelBlocks.length - 1
     }, React.createElement(PanelBlock, {
       file: file,
       contactsFullname: contactsFullname
-    })));
-  }));
-});
+    }));
+  });
+};
+
 BottomSheetContent.propTypes = {
   file: PropTypes.object.isRequired,
-  disableSharing: PropTypes.bool
+  contactsFullname: PropTypes.string
 };
 export default BottomSheetContent;

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

@@ -1,15 +1,15 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import React, { useRef } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { isMobileApp } from 'cozy-device-helper';
 import { getReferencedBy, useQuery, models } from 'cozy-client';
+import BottomSheet, { BottomSheetHeader } from "cozy-ui/transpiled/react/BottomSheet";
 import { buildContactByIdsQuery } from "cozy-ui/transpiled/react/Viewer/queries";
 import { isValidForPanel } from "cozy-ui/transpiled/react/Viewer/helpers";
 import Sharing from "cozy-ui/transpiled/react/Viewer/Footer/Sharing";
 import ForwardButton from "cozy-ui/transpiled/react/Viewer/Footer/ForwardButton";
 import DownloadButton from "cozy-ui/transpiled/react/Viewer/Footer/DownloadButton";
-import BottomSheetWrapper from "cozy-ui/transpiled/react/Viewer/Footer/BottomSheetWrapper";
 import BottomSheetContent from "cozy-ui/transpiled/react/Viewer/Footer/BottomSheetContent";
 var getDisplayName = models.contact.getDisplayName;
 var useStyles = makeStyles(function (theme) {
@@ -32,7 +32,11 @@ var FooterContent = function FooterContent(_ref) {
       disableSharing = _ref.disableSharing;
   var styles = useStyles();
   var FileActionButton = isMobileApp() ? ForwardButton : DownloadButton;
-  var actionButtonsRef = useRef();
+  var toolbarProps = useMemo(function () {
+    return {
+      ref: toolbarRef
+    };
+  }, [toolbarRef]);
   var contactIds = getReferencedBy(file, 'io.cozy.contacts').map(function (ref) {
     return ref.id;
   });
@@ -50,15 +54,17 @@ var FooterContent = function FooterContent(_ref) {
   if (isValidForPanel({
     file: file
   }) && (contactsFullname || contactIds.length === 0)) {
-    return React.createElement(BottomSheetWrapper, {
+    return React.createElement(BottomSheet, {
+      toolbarProps: toolbarProps
+    }, React.createElement(BottomSheetHeader, {
+      className: "u-ph-1 u-pb-1"
+    }, !disableSharing && React.createElement(Sharing, {
+      file: file
+    }), React.createElement(FileActionButton, {
+      file: file
+    })), React.createElement(BottomSheetContent, {
       file: file,
-      actionButtonsRef: actionButtonsRef,
-      toolbarRef: toolbarRef
-    }, React.createElement(BottomSheetContent, {
-      file: file,
-      disableSharing: disableSharing,
-      contactsFullname: contactsFullname,
-      ref: actionButtonsRef
+      contactsFullname: contactsFullname
     }));
   }
 

package/transpiled/react/index.js

@@ -76,4 +76,5 @@ export { default as ProgressionBanner } from './ProgressionBanner';
 export { default as Fab } from './Fab';
 export { default as SquareAppIcon } from './SquareAppIcon';
 export { default as FileImageLoader } from './FileImageLoader';
-export { default as Radios } from './Radios';
+export { default as Radios } from './Radios';
+export { default as BottomSheet, BottomSheetItem } from './BottomSheet';

package/react/Viewer/Footer/BottomSheetWrapper.jsx

@@ -1,121 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { BottomSheet } from 'mui-bottom-sheet'
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = ({ isTopPosition }) => ({
-  root: {
-    borderTopLeftRadius: isTopPosition ? 0 : '1rem',
-    borderTopRightRadius: isTopPosition ? 0 : '1rem',
-    transition: 'border-radius 0.5s',
-    boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)'
-  }
-})
-
-const useClasses = makeStyles(theme => ({
-  header: {
-    height: '2.5rem',
-    width: '100%',
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  indicator: {
-    width: '4rem',
-    height: '0.25rem',
-    borderRadius: '99px',
-    backgroundColor: theme.palette.text.secondary
-  }
-}))
-
-export const defaultBottomSheetSpringConfig = {
-  tension: 165,
-  friction: 17,
-  clamp: true
-}
-
-const BottomSheetWrapper = ({
-  file,
-  actionButtonsRef,
-  toolbarRef,
-  children
-}) => {
-  const [isTopPosition, setIsTopPosition] = useState(false)
-  const [peekHeights, setPeekHeights] = useState(null)
-  const [initPos, setInitPos] = useState(null)
-  const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
-  const classes = useClasses()
-  const styles = useStyles({ isTopPosition })
-  const innerContentRef = useRef()
-  const headerRef = useRef()
-
-  const toolbar = toolbarRef.current
-
-  useEffect(() => {
-    const maxHeight = toolbar
-      ? window.innerHeight - toolbar.offsetHeight
-      : window.innerHeight
-    const mediumHeight = Math.round(maxHeight * 0.33)
-    const actionButtonsHeight = parseFloat(
-      getComputedStyle(actionButtonsRef.current).getPropertyValue('height')
-    )
-    const actionButtonsBottomMargin = 16
-    const minHeight =
-      headerRef.current.offsetHeight +
-      actionButtonsHeight +
-      actionButtonsBottomMargin
-
-    // Used so that the bottomSheet can be opened to the top,
-    // without stopping at the content height
-    const bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight
-
-    setPeekHeights([minHeight, mediumHeight, maxHeight])
-    setInitPos(mediumHeight)
-    setBottomSpacerHeight(bottomSpacerHeight)
-  }, [toolbar, innerContentRef, file, actionButtonsRef])
-
-  const handleOnIndexChange = snapIndex => {
-    const maxHeightSnapIndex = peekHeights.length - 1
-
-    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
-      setIsTopPosition(true)
-    }
-    if (snapIndex !== maxHeightSnapIndex && isTopPosition) {
-      setIsTopPosition(false)
-    }
-  }
-
-  return (
-    <BottomSheet
-      peekHeights={peekHeights}
-      defaultHeight={initPos}
-      backdrop={false}
-      fullHeight={false}
-      onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
-      styles={{ root: styles.root }}
-      threshold={0}
-      // springConfig doc : https://react-spring.io/common/configs
-      springConfig={{
-        tension: defaultBottomSheetSpringConfig.tension,
-        friction: defaultBottomSheetSpringConfig.friction,
-        clamp: defaultBottomSheetSpringConfig.clamp
-      }}
-      disabledClosing={true}
-      snapPointSeekerMode="next"
-    >
-      <div ref={innerContentRef}>
-        <div
-          data-testid="bottomSheet-header"
-          className={classes.header}
-          ref={headerRef}
-        >
-          <div className={classes.indicator} />
-        </div>
-        {children}
-      </div>
-      <div style={{ height: bottomSpacerHeight }} />
-    </BottomSheet>
-  )
-}
-
-export default BottomSheetWrapper

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

@@ -1,136 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useEffect, useRef } from 'react';
-import { BottomSheet } from 'mui-bottom-sheet';
-import { makeStyles } from '@material-ui/core/styles';
-
-var useStyles = function useStyles(_ref) {
-  var isTopPosition = _ref.isTopPosition;
-  return {
-    root: {
-      borderTopLeftRadius: isTopPosition ? 0 : '1rem',
-      borderTopRightRadius: isTopPosition ? 0 : '1rem',
-      transition: 'border-radius 0.5s',
-      boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)'
-    }
-  };
-};
-
-var useClasses = makeStyles(function (theme) {
-  return {
-    header: {
-      height: '2.5rem',
-      width: '100%',
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    indicator: {
-      width: '4rem',
-      height: '0.25rem',
-      borderRadius: '99px',
-      backgroundColor: theme.palette.text.secondary
-    }
-  };
-});
-export var defaultBottomSheetSpringConfig = {
-  tension: 165,
-  friction: 17,
-  clamp: true
-};
-
-var BottomSheetWrapper = function BottomSheetWrapper(_ref2) {
-  var file = _ref2.file,
-      actionButtonsRef = _ref2.actionButtonsRef,
-      toolbarRef = _ref2.toolbarRef,
-      children = _ref2.children;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isTopPosition = _useState2[0],
-      setIsTopPosition = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      peekHeights = _useState4[0],
-      setPeekHeights = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      initPos = _useState6[0],
-      setInitPos = _useState6[1];
-
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      bottomSpacerHeight = _useState8[0],
-      setBottomSpacerHeight = _useState8[1];
-
-  var classes = useClasses();
-  var styles = useStyles({
-    isTopPosition: isTopPosition
-  });
-  var innerContentRef = useRef();
-  var headerRef = useRef();
-  var toolbar = toolbarRef.current;
-  useEffect(function () {
-    var maxHeight = toolbar ? window.innerHeight - toolbar.offsetHeight : window.innerHeight;
-    var mediumHeight = Math.round(maxHeight * 0.33);
-    var actionButtonsHeight = parseFloat(getComputedStyle(actionButtonsRef.current).getPropertyValue('height'));
-    var actionButtonsBottomMargin = 16;
-    var minHeight = headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin; // Used so that the bottomSheet can be opened to the top,
-    // without stopping at the content height
-
-    var bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight;
-    setPeekHeights([minHeight, mediumHeight, maxHeight]);
-    setInitPos(mediumHeight);
-    setBottomSpacerHeight(bottomSpacerHeight);
-  }, [toolbar, innerContentRef, file, actionButtonsRef]);
-
-  var handleOnIndexChange = function handleOnIndexChange(snapIndex) {
-    var maxHeightSnapIndex = peekHeights.length - 1;
-
-    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
-      setIsTopPosition(true);
-    }
-
-    if (snapIndex !== maxHeightSnapIndex && isTopPosition) {
-      setIsTopPosition(false);
-    }
-  };
-
-  return React.createElement(BottomSheet, {
-    peekHeights: peekHeights,
-    defaultHeight: initPos,
-    backdrop: false,
-    fullHeight: false,
-    onIndexChange: function onIndexChange(snapIndex) {
-      return handleOnIndexChange(snapIndex);
-    },
-    styles: {
-      root: styles.root
-    },
-    threshold: 0 // springConfig doc : https://react-spring.io/common/configs
-    ,
-    springConfig: {
-      tension: defaultBottomSheetSpringConfig.tension,
-      friction: defaultBottomSheetSpringConfig.friction,
-      clamp: defaultBottomSheetSpringConfig.clamp
-    },
-    disabledClosing: true,
-    snapPointSeekerMode: "next"
-  }, React.createElement("div", {
-    ref: innerContentRef
-  }, React.createElement("div", {
-    "data-testid": "bottomSheet-header",
-    className: classes.header,
-    ref: headerRef
-  }, React.createElement("div", {
-    className: classes.indicator
-  })), children), React.createElement("div", {
-    style: {
-      height: bottomSpacerHeight
-    }
-  }));
-};
-
-export default BottomSheetWrapper;