From 20b2dd096a019e31a8d1e19546847b835ebab760 Mon Sep 17 00:00:00 2001 From: JF-Cozy Date: Tue, 16 Mar 2021 15:59:18 +0100 Subject: [PATCH 1/3] feat: Upgrade cozy-ui to 47.0.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 55d7d45dd3..cb194ba945 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "cozy-scripts": "5.1.1", "cozy-sharing": "3.1.0", "cozy-stack-client": "17.6.1", - "cozy-ui": "45.4.0", + "cozy-ui": "47.0.0", "date-fns": "1.30.1", "diacritics": "1.3.0", "fastclick": "1.0.6", diff --git a/yarn.lock b/yarn.lock index 9352d4dd10..eb25f0da75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5384,10 +5384,10 @@ cozy-ui@35.22.0: react-select "2.2.0" react-swipeable-views "0.13.3" -cozy-ui@45.4.0: - version "45.4.0" - resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-45.4.0.tgz#92a702989e2c130402dad18f3196bda1e11e7d1c" - integrity sha512-weGMuaOuifW6a6n3cSIB7Rv2+eQEVLbyirOHENElwLoBovJ9WcZZwtRHNQ8u5hhFEw9SmK+6R3DaHuVlYlKAZw== +cozy-ui@47.0.0: + version "47.0.0" + resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-47.0.0.tgz#f86e8ffaaad7d43b0b390351213a88181755f77a" + integrity sha512-KONTfP33GwwlhRyIRniDqBUmEsC9HJkwmelBCCcUo0dm5eghxIxs4ieAszPe3oXwXQCjks0KzLCNMfez2Lf6hQ== dependencies: "@babel/runtime" "^7.3.4" "@popperjs/core" "^2.4.4" From 131776569e0619ff5934bbd16e5e54b28e79abdd Mon Sep 17 00:00:00 2001 From: JF-Cozy Date: Tue, 16 Mar 2021 16:00:49 +0100 Subject: [PATCH 2/3] feat: Add mui-bottom-sheet v1.0.5 this is a fork from the original mui-bottom-sheet fork needed because of this issue : https://github.com/mayteio/mui-bottom-sheet/issues/1 --- package.json | 1 + yarn.lock | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 147 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index cb194ba945..6cc8ec7c7d 100644 --- a/package.json +++ b/package.json @@ -136,6 +136,7 @@ "lodash": "4.17.19", "log-prefix": "0.1.1", "mime-types": "2.1.24", + "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.5", "node-fetch": "2.6.1", "node-polyglot": "2.4.0", "node-uuid": "1.4.8", diff --git a/yarn.lock b/yarn.lock index eb25f0da75..1dda390b5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@alloc/types@^1.2.1": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@alloc/types/-/types-1.3.0.tgz#904245b8d3260a4b7d8a801c12501968f64fac08" + integrity sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g== + "@babel/code-frame@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9" @@ -1147,6 +1152,11 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@juggle/resize-observer@^3.1.3": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.0.tgz#2e7a2935adbfae46f9efbd1e1455254ee7ea2219" + integrity sha512-P1v2nvK7z2gOLVM/bveIRLG9L99uEahTGgTltyF03zixZAjI9YmKLj5Z9MpS9wBIUt5WDoQORT2lXvLOIF89iA== + "@material-ui/core@4": version "4.11.3" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.3.tgz#f22e41775b0bd075e36a7a093d43951bf7f63850" @@ -1302,6 +1312,86 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.3.tgz#4982b0b66b7a4cf949b86f5d25a8cf757d3cfd9d" integrity sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg== +"@react-spring/animated@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.0.0-rc.3.tgz#e792cb76aacecfc78db2be6020ac11ce96503eb5" + integrity sha512-dAvgtKhkYpzzr+EkmZ4ZuJ5CujxCW0LaT109DvO/2MQNk3EWIxcgl+ik4tSulSbgau1GN8RlkRKyDp0wISdQ3Q== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/shared" "9.0.0-rc.3" + react-layout-effect "^1.0.1" + +"@react-spring/core@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.0.0-rc.3.tgz#c8e697573936c525bd0f6ca0c0869f75c86e8a83" + integrity sha512-3OzsVFxpfMJNkkQj8TwAH3NhUAX76AXu6WkslQF4EgBeEoG5eY3m+VvM9RsAsGWDuBKpscZ/wBpFt5Ih6KdGHA== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/animated" "9.0.0-rc.3" + "@react-spring/shared" "9.0.0-rc.3" + react-layout-effect "^1.0.1" + use-memo-one "^1.1.0" + +"@react-spring/konva@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.0.0-rc.3.tgz#7bad631eb59f141001d668267314ca40546ecf97" + integrity sha512-uampLRgrHIqA3ilnheePUVEUE+fdeipXORI4XZJFsORP01CUJeJCxBwMagaxvsHJAtuNErMI/IebE1T2W8i5qA== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/animated" "9.0.0-rc.3" + "@react-spring/core" "9.0.0-rc.3" + "@react-spring/shared" "9.0.0-rc.3" + +"@react-spring/native@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.0.0-rc.3.tgz#863b8278ea6064385c4fffaaed40316e4a2acaa8" + integrity sha512-7JSixJLfzg8V0IrgyGS3gGr2v8CGh4Kym15Htp3CJq74GFBJMyaQS0KaMjieXnw5alTpQoeGBESfA3v5dPlPYg== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/animated" "9.0.0-rc.3" + "@react-spring/core" "9.0.0-rc.3" + "@react-spring/shared" "9.0.0-rc.3" + +"@react-spring/shared@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.0.0-rc.3.tgz#3f4c9d90accc20fef51a283a7806d78390b84161" + integrity sha512-dd50TxwwMWd+dSB0InjndUN9w17cbnMCPy+0sag6zRxxKIo7eOyWSliOtLKxvufgmdC8Prm4M3GT5dmB1yxKEQ== + dependencies: + "@alloc/types" "^1.2.1" + "@babel/runtime" "^7.3.1" + fluids "^0.1.6" + tslib "^1.11.1" + +"@react-spring/three@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.0.0-rc.3.tgz#bbfa7863c96ed8fa200cbff69222763c00977eef" + integrity sha512-H55T+Dnck+hsJ8WgE+tb89ngX1E1lDOpMBG4mGzNLGok6XgGqN0VBsHRN3QDl+aPfmJI1BPFPR6b6WbhwqRNbw== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/animated" "9.0.0-rc.3" + "@react-spring/core" "9.0.0-rc.3" + "@react-spring/shared" "9.0.0-rc.3" + +"@react-spring/web@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.0.0-rc.3.tgz#da977382f91d9af4c400e4aa7dc37d3db07b87e0" + integrity sha512-rEvipblmihiz8+Eo01zDp5dqWn6XfYk8q2rlN9c18YIOL4o6nuY/VplDoocUMHYfH4liurpO4o1QudKOO1nAiQ== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/animated" "9.0.0-rc.3" + "@react-spring/core" "9.0.0-rc.3" + "@react-spring/shared" "9.0.0-rc.3" + +"@react-spring/zdog@9.0.0-rc.3": + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.0.0-rc.3.tgz#00f611042b3761b984d0ca2c98da7dddcc11f081" + integrity sha512-fl2JI098sfOJ+BaS9xCrnz8NSimL8yPrVwO0lHSpXLn/q3o3MYmRAeJnZQv8yDtT6isTHua6Tfb9vWuZWEXSmA== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/animated" "9.0.0-rc.3" + "@react-spring/core" "9.0.0-rc.3" + "@react-spring/shared" "9.0.0-rc.3" + "@sentry/browser@^6.0.1": version "6.0.2" resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.0.2.tgz#6e886ccd2067291d242adae7d4ba2560a8fa0e08" @@ -5756,6 +5846,11 @@ date-fns@^2.17.0: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.17.0.tgz#afa55daea539239db0a64e236ce716ef3d681ba1" integrity sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA== +debounce@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5" + integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -7558,6 +7653,11 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== +fluids@^0.1.6: + version "0.1.10" + resolved "https://registry.yarnpkg.com/fluids/-/fluids-0.1.10.tgz#0517e7a53dbce1db011dddec301b75178518ba0e" + integrity sha512-66FLmUJOrkvEHIsRVeM+88MG0bjd2TOBuR0BkM0hzyCb68W9drzqeX/AHDNp3ouZALQN7JvBvmKdVhHI+PZsdg== + flush-write-stream@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -11311,6 +11411,16 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== +"mui-bottom-sheet@https://github.com/cozy/mui-bottom-sheet.git#v1.0.5": + version "1.0.5" + resolved "https://github.com/cozy/mui-bottom-sheet.git#6eea2e5bfb0b648bd47c4a09e6fce91348e4a3a2" + dependencies: + "@juggle/resize-observer" "^3.1.3" + jest-environment-jsdom-sixteen "^1.0.3" + react-spring "9.0.0-rc.3" + react-use-gesture "^7.0.8" + react-use-measure "^2.0.0" + multicast-dns-service-types@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901" @@ -13767,6 +13877,11 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react- resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-layout-effect@^1.0.1: + version "1.0.5" + resolved "https://registry.yarnpkg.com/react-layout-effect/-/react-layout-effect-1.0.5.tgz#0dc4e24452aee5de66c93c166f0ec512dfb1be80" + integrity sha512-zdRXHuch+OBHU6bvjTelOGUCM+UDr/iCY+c0wXLEAc+G4/FlcJruD/hUOzlKH5XgO90Y/BUJPNhI/g9kl+VAsA== + react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -13897,6 +14012,19 @@ react-select@2.2.0: react-input-autosize "^2.2.1" react-transition-group "^2.2.1" +react-spring@9.0.0-rc.3: + version "9.0.0-rc.3" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.0.0-rc.3.tgz#0ad7b1e803f4385b7cbb44fff6d26f5be78884d6" + integrity sha512-VX5Gi6svgRzjGvJ7qVRQBhFN+O2IuPvkSWepIg838LNIMqlc42xdIYtoGJYSqYjNO3IocSfkHlh49WVw6hHMUg== + dependencies: + "@babel/runtime" "^7.3.1" + "@react-spring/core" "9.0.0-rc.3" + "@react-spring/konva" "9.0.0-rc.3" + "@react-spring/native" "9.0.0-rc.3" + "@react-spring/three" "9.0.0-rc.3" + "@react-spring/web" "9.0.0-rc.3" + "@react-spring/zdog" "9.0.0-rc.3" + react-style-singleton@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4" @@ -14000,6 +14128,18 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-use-gesture@^7.0.8: + version "7.0.16" + resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-7.0.16.tgz#501985261ef9c815a377b6ff9be6df5a85fbb54f" + integrity sha512-gwgX+E+WQG0T1uFVl3z8j3ZwH3QQGIgVl7VtQEC2m0IscSs668sSps4Ss3CFp3Vns8xx0j9TVK4aBXH6+YrpEg== + +react-use-measure@^2.0.0: + version "2.0.3" + resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.3.tgz#7b56ae3ca19ccf62326933678625a8ff6b3f90a3" + integrity sha512-57O8Os9MbgFEHuOHOXNdPmBHhXjCBIwtB3YxyrM/MgaX44a1o97Mu9YqiOA6cAF8kXIw4fO3XK0r2Taa4SqaqQ== + dependencies: + debounce "^1.2.0" + react-zlib-js@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/react-zlib-js/-/react-zlib-js-1.0.5.tgz#7bb433e1a4ae53a8e6f361b3d36166baf5bbc60f" @@ -16616,7 +16756,7 @@ tryer@^1.0.1: resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA== -tslib@^1.0.0, tslib@^1.9.0, tslib@^1.9.3: +tslib@^1.0.0, tslib@^1.11.1, tslib@^1.9.0, tslib@^1.9.3: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -16979,6 +17119,11 @@ use-callback-ref@^1.2.3: resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c" integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ== +use-memo-one@^1.1.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" + integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== + use-sidecar@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.3.tgz#17a4e567d4830c0c0ee100040e85a7fe68611e0f" From c2d06570eed6bfa2869842d3e34a1fb3c68b5432 Mon Sep 17 00:00:00 2001 From: JF-Cozy Date: Wed, 10 Mar 2021 16:36:10 +0100 Subject: [PATCH 3/3] feat: Add Viewer bottomSheet for mobile --- .../web/modules/viewer/Footer/BottomSheet.jsx | 115 ++++++++++++++++++ .../viewer/Footer/BottomSheetContent.jsx | 55 +++++++++ .../modules/viewer/Footer/FooterContent.jsx | 37 +++++- .../viewer/Footer/FooterContent.spec.jsx | 16 ++- 4 files changed, 216 insertions(+), 7 deletions(-) create mode 100644 src/drive/web/modules/viewer/Footer/BottomSheet.jsx create mode 100644 src/drive/web/modules/viewer/Footer/BottomSheetContent.jsx diff --git a/src/drive/web/modules/viewer/Footer/BottomSheet.jsx b/src/drive/web/modules/viewer/Footer/BottomSheet.jsx new file mode 100644 index 0000000000..72dcdec04c --- /dev/null +++ b/src/drive/web/modules/viewer/Footer/BottomSheet.jsx @@ -0,0 +1,115 @@ +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: '1rem', + borderTopRightRadius: '1rem', + transition: 'border-radius 0.5s', + boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)', + ...(isTopPosition && { + borderTopLeftRadius: 0, + borderTopRightRadius: 0 + }) + } +}) + +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.divider + } +})) + +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 = maxHeight * 0.33 + const actionButtonsHeight = parseFloat( + getComputedStyle(actionButtonsRef.current).getPropertyValue('height') + ) + // this is the margin of action buttons without bottomSheet + const actionButtonsBottomMargin = 7 + 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 ( + handleOnIndexChange(snapIndex)} + styles={{ root: styles.root }} + > +
+
+
+
+ {children} +
+
+ + ) +} + +export default BottomSheetWrapper diff --git a/src/drive/web/modules/viewer/Footer/BottomSheetContent.jsx b/src/drive/web/modules/viewer/Footer/BottomSheetContent.jsx new file mode 100644 index 0000000000..c908b01c8d --- /dev/null +++ b/src/drive/web/modules/viewer/Footer/BottomSheetContent.jsx @@ -0,0 +1,55 @@ +import React, { forwardRef } 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 './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 }, ref) => { + const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file }) + const FileActionButton = isMobileApp() ? ForwardButton : DownloadButton + const styles = useStyles() + + return ( + + + + + + {panelBlocks.map((PanelBlock, index) => ( + + + + + + ))} + + ) +}) + +BottomSheetContent.propTypes = { + file: PropTypes.object.isRequired +} + +export default BottomSheetContent diff --git a/src/drive/web/modules/viewer/Footer/FooterContent.jsx b/src/drive/web/modules/viewer/Footer/FooterContent.jsx index a69830c818..4fe73b4c3d 100644 --- a/src/drive/web/modules/viewer/Footer/FooterContent.jsx +++ b/src/drive/web/modules/viewer/Footer/FooterContent.jsx @@ -1,20 +1,49 @@ -import React from 'react' +import React, { useRef } from 'react' import PropTypes from 'prop-types' +import { makeStyles } from '@material-ui/core/styles' import { isMobileApp } from 'cozy-device-helper' +import { showPanel } from '../helpers' import Sharing from './Sharing' import ForwardButton from './ForwardButton' import DownloadButton from './DownloadButton' +import BottomSheet from './BottomSheet' +import BottomSheetContent from './BottomSheetContent' -const FooterContent = ({ file }) => { +const useStyles = makeStyles(theme => ({ + footer: { + display: 'flex', + alignItems: 'center', + width: 'calc(100% - 2rem)', + height: '100%', + paddingLeft: '1rem', + paddingRight: '1rem', + borderTop: `1px solid ${theme.palette.divider}` + } +})) + +const FooterContent = ({ file, toolbarRef }) => { + const styles = useStyles() const FileActionButton = isMobileApp() ? ForwardButton : DownloadButton + const actionButtonsRef = useRef() + + if (showPanel({ file })) + return ( + + + + ) return ( - <> +
- +
) } diff --git a/src/drive/web/modules/viewer/Footer/FooterContent.spec.jsx b/src/drive/web/modules/viewer/Footer/FooterContent.spec.jsx index a41ceae3ea..c4675241d7 100644 --- a/src/drive/web/modules/viewer/Footer/FooterContent.spec.jsx +++ b/src/drive/web/modules/viewer/Footer/FooterContent.spec.jsx @@ -13,7 +13,7 @@ jest.mock('cozy-device-helper', () => ({ isMobileApp: jest.fn() })) -const file = { +const staticFile = { id: 'fileId', name: 'Demo.pdf' } @@ -23,7 +23,8 @@ const client = createMockClient({}) const setup = ({ byDocId = { fileId: {} }, isOwner = false, - isMobileAppValue = false + isMobileAppValue = false, + file } = {}) => { const mockSharingContext = { byDocId, @@ -35,7 +36,7 @@ const setup = ({ const root = render( - + ) @@ -86,4 +87,13 @@ describe('FooterContent', () => { expect(getByText('Shared')) expect(queryByText('Share')).toBeFalsy() }) + + it('should show bottom sheet for file with certification or konnector', () => { + const { root } = setup({ + file: { metadata: { carbonCopy: true }, ...staticFile } + }) + const { getByTestId } = root + + expect(getByTestId('bottomSheet-header')).toBeTruthy() + }) })