cozy-ui 60.10.1 → 60.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [60.11.0](https://github.com/cozy/cozy-ui/compare/v60.10.1...v60.11.0) (2022-02-02)
+
+
+### Features
+
+* BottomSheet settings accept `mediumHeight` new prop ([0e2b254](https://github.com/cozy/cozy-ui/commit/0e2b254))
+
 ## [60.10.1](https://github.com/cozy/cozy-ui/compare/v60.10.0...v60.10.1) (2022-02-02)
 
 

package/package.json

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

package/react/BottomSheet/BottomSheet.jsx

@@ -37,7 +37,8 @@ export const defaultBottomSheetSpringConfig = {
 }
 
 const defaultSettings = {
-  mediumHeightRatio: 0.33
+  mediumHeightRatio: 0.33,
+  mediumHeight: null
 }
 
 const computeMaxHeight = toolbarProps => {
@@ -54,17 +55,22 @@ const computeMaxHeight = toolbarProps => {
 }
 
 const BottomSheet = ({ toolbarProps, settings, children }) => {
+  const { mediumHeightRatio, mediumHeight } = useMemo(
+    () => ({
+      ...defaultSettings,
+      ...settings
+    }),
+    [settings]
+  )
+
   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 [initPos, setInitPos] = useState(mediumHeight)
 
-  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.
@@ -79,7 +85,8 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
   useEffect(() => {
     const headerContent = headerContentRef.current
     const maxHeight = computeMaxHeight(toolbarProps)
-    const mediumHeight = Math.round(maxHeight * mediumHeightRatio)
+    const computedMediumHeight =
+      mediumHeight || Math.round(maxHeight * mediumHeightRatio)
 
     const actionButtonsHeight = headerContent
       ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
@@ -98,14 +105,15 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
     // without stopping at the content height
     const bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight
 
-    setPeekHeights([minHeight, mediumHeight, maxHeight])
-    setInitPos(mediumHeight)
+    setPeekHeights([minHeight, computedMediumHeight, maxHeight])
+    setInitPos(computedMediumHeight)
     setBottomSpacerHeight(bottomSpacerHeight)
   }, [
     innerContentRef,
     headerContentRef.current,
     toolbarProps,
-    mediumHeightRatio
+    mediumHeightRatio,
+    mediumHeight
   ])
 
   const handleOnIndexChange = snapIndex => {

package/react/BottomSheet/README.md

@@ -1,4 +1,4 @@
-Displays content coming up from the bottom of the screen. The pane can be swiped to the top of the screen.
+Displays content coming up from the bottom of the screen. The pane can be swiped to the top of the screen. [API documentation is here](https://github.com/cozy/mui-bottom-sheet#props-options)
 
 ```jsx
 import BottomSheet, { BottomSheetItem, BottomSheetHeader } from 'cozy-ui/transpiled/react/BottomSheet'
@@ -8,7 +8,7 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 initialState = { isBottomSheetDisplayed: isTesting() }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 
-const settings = { mediumHeightRatio: isTesting() ? 0.90 : 0.33 }
+const settings = isTesting() ? { mediumHeight: 450 } : undefined
 // -->
 
 ;

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -39,7 +39,8 @@ export var defaultBottomSheetSpringConfig = {
   clamp: true
 };
 var defaultSettings = {
-  mediumHeightRatio: 0.33
+  mediumHeightRatio: 0.33,
+  mediumHeight: null
 };
 
 var computeMaxHeight = function computeMaxHeight(toolbarProps) {
@@ -60,6 +61,13 @@ var BottomSheet = function BottomSheet(_ref2) {
   var toolbarProps = _ref2.toolbarProps,
       settings = _ref2.settings,
       children = _ref2.children;
+
+  var _useMemo = useMemo(function () {
+    return _objectSpread({}, defaultSettings, settings);
+  }, [settings]),
+      mediumHeightRatio = _useMemo.mediumHeightRatio,
+      mediumHeight = _useMemo.mediumHeight;
+
   var innerContentRef = useRef();
   var headerRef = useRef();
   var headerContentRef = useRef();
@@ -74,20 +82,15 @@ var BottomSheet = function BottomSheet(_ref2) {
       peekHeights = _useState4[0],
       setPeekHeights = _useState4[1];
 
-  var _useState5 = useState(null),
+  var _useState5 = useState(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      initPos = _useState6[0],
-      setInitPos = _useState6[1];
+      bottomSpacerHeight = _useState6[0],
+      setBottomSpacerHeight = _useState6[1];
 
-  var _useState7 = useState(0),
+  var _useState7 = useState(mediumHeight),
       _useState8 = _slicedToArray(_useState7, 2),
-      bottomSpacerHeight = _useState8[0],
-      setBottomSpacerHeight = _useState8[1];
-
-  var _useMemo = useMemo(function () {
-    return settings || defaultSettings;
-  }, [settings]),
-      mediumHeightRatio = _useMemo.mediumHeightRatio;
+      initPos = _useState8[0],
+      setInitPos = _useState8[1];
 
   var styles = useMemo(function () {
     return makeStyles({
@@ -105,17 +108,17 @@ var BottomSheet = function BottomSheet(_ref2) {
   useEffect(function () {
     var headerContent = headerContentRef.current;
     var maxHeight = computeMaxHeight(toolbarProps);
-    var mediumHeight = Math.round(maxHeight * mediumHeightRatio);
+    var computedMediumHeight = 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);
+    setPeekHeights([minHeight, computedMediumHeight, maxHeight]);
+    setInitPos(computedMediumHeight);
     setBottomSpacerHeight(bottomSpacerHeight);
-  }, [innerContentRef, headerContentRef.current, toolbarProps, mediumHeightRatio]);
+  }, [innerContentRef, headerContentRef.current, toolbarProps, mediumHeightRatio, mediumHeight]);
 
   var handleOnIndexChange = function handleOnIndexChange(snapIndex) {
     var maxHeightSnapIndex = peekHeights.length - 1;