-
Notifications
You must be signed in to change notification settings - Fork 37
/
helpers.js
115 lines (104 loc) · 2.7 KB
/
helpers.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React from 'react'
import { getFlagshipMetadata } from 'cozy-device-helper'
import { ANIMATION_DURATION } from './constants'
import { getSafeAreaValue } from '../helpers/getSafeArea'
export 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
}
export const computeMediumHeight = ({
backdrop,
maxHeight,
mediumHeight,
mediumHeightRatio,
innerContentHeight
}) => {
const mediumHeightOrWithRatio =
mediumHeight || Math.round(maxHeight * mediumHeightRatio)
if (backdrop) {
if (mediumHeightOrWithRatio < innerContentHeight) {
return mediumHeightOrWithRatio < maxHeight
? mediumHeightOrWithRatio
: maxHeight
}
return innerContentHeight > maxHeight ? maxHeight : innerContentHeight
}
if (innerContentHeight < mediumHeightOrWithRatio) return innerContentHeight
return mediumHeightOrWithRatio > maxHeight
? maxHeight
: mediumHeightOrWithRatio
}
export const computeMinHeight = ({
isClosable,
headerRef,
actionButtonsHeight,
actionButtonsBottomMargin
}) => {
if (isClosable) return 0
return (
headerRef.current.offsetHeight +
actionButtonsHeight +
actionButtonsBottomMargin +
(getFlagshipMetadata().navbarHeight || 0) +
getSafeAreaValue('bottom')
)
}
export const makeOverridenChildren = (children, headerContentRef) => {
return React.Children.map(children, child => {
if (
child?.type?.name === 'BottomSheetHeader' ||
child?.type?.displayName === 'BottomSheetHeader'
) {
return React.cloneElement(child, { headerContentRef })
}
return child
})
}
export const setTopPosition = ({
snapIndex,
maxHeightSnapIndex,
isTopPosition,
setIsTopPosition
}) => {
if (snapIndex > maxHeightSnapIndex) {
setIsTopPosition(true)
}
if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
setIsTopPosition(true)
}
if (snapIndex < maxHeightSnapIndex && isTopPosition) {
setIsTopPosition(false)
}
}
export const setBottomPosition = ({
snapIndex,
isBottomPosition,
setIsBottomPosition
}) => {
if (snapIndex === 0 && !isBottomPosition) {
setIsBottomPosition(true)
}
if (snapIndex !== 0 && isBottomPosition) {
setIsBottomPosition(false)
}
}
export const minimizeAndClose = ({
backdrop,
setCurrentIndex,
setIsTopPosition,
setIsBottomPosition,
handleClose
}) => {
if (backdrop) {
setCurrentIndex(0)
setIsTopPosition(false)
setIsBottomPosition(true)
setTimeout(handleClose, ANIMATION_DURATION)
}
}