Fix an issue that caused the shelf menu to show up at random
parent
80e035cede
commit
7328e80825
|
@ -127,6 +127,7 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
const scrollElRef = useRef<FlatList | undefined>()
|
const scrollElRef = useRef<FlatList | undefined>()
|
||||||
const winDim = useWindowDimensions()
|
const winDim = useWindowDimensions()
|
||||||
const [menuSwipingDirection, setMenuSwipingDirection] = useState(0)
|
const [menuSwipingDirection, setMenuSwipingDirection] = useState(0)
|
||||||
|
const constZeroInterp = useAnimatedValue(0)
|
||||||
const swipeGestureInterp = useAnimatedValue(0)
|
const swipeGestureInterp = useAnimatedValue(0)
|
||||||
const minimalShellInterp = useAnimatedValue(0)
|
const minimalShellInterp = useAnimatedValue(0)
|
||||||
const tabMenuInterp = useAnimatedValue(0)
|
const tabMenuInterp = useAnimatedValue(0)
|
||||||
|
@ -279,20 +280,20 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
const swipeTransform = store.nav.tab.canGoBack
|
const swipeTransform = store.nav.tab.canGoBack
|
||||||
? {transform: [{translateX: swipeTranslateX}]}
|
? {transform: [{translateX: swipeTranslateX}]}
|
||||||
: undefined
|
: undefined
|
||||||
|
let shouldRenderMenu = false
|
||||||
let menuTranslateX
|
let menuTranslateX
|
||||||
const menuDrawerWidth = winDim.width - 100
|
const menuDrawerWidth = winDim.width - 100
|
||||||
if (isMenuActive) {
|
if (isMenuActive) {
|
||||||
// menu is active, interpret swipes as closes
|
// menu is active, interpret swipes as closes
|
||||||
menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
|
menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
|
||||||
|
shouldRenderMenu = true
|
||||||
} else if (!store.nav.tab.canGoBack) {
|
} else if (!store.nav.tab.canGoBack) {
|
||||||
// at back of history, interpret swipes as opens
|
// at back of history, interpret swipes as opens
|
||||||
menuTranslateX = Animated.subtract(
|
menuTranslateX = Animated.subtract(
|
||||||
menuDrawerWidth * -1,
|
menuDrawerWidth * -1,
|
||||||
Animated.multiply(swipeGestureInterp, menuDrawerWidth),
|
Animated.multiply(swipeGestureInterp, menuDrawerWidth),
|
||||||
)
|
)
|
||||||
} else {
|
shouldRenderMenu = true
|
||||||
// not at back of history, leave off screen
|
|
||||||
menuTranslateX = menuDrawerWidth * -1
|
|
||||||
}
|
}
|
||||||
const menuSwipeTransform = {
|
const menuSwipeTransform = {
|
||||||
transform: [{translateX: menuTranslateX}],
|
transform: [{translateX: menuTranslateX}],
|
||||||
|
@ -425,12 +426,14 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
<Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
|
<Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
|
||||||
</TouchableWithoutFeedback>
|
</TouchableWithoutFeedback>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
{shouldRenderMenu && (
|
||||||
<Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
|
<Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
|
||||||
<Menu
|
<Menu
|
||||||
visible={isMenuActive}
|
visible={isMenuActive}
|
||||||
onClose={() => store.shell.setMainMenuOpen(false)}
|
onClose={() => store.shell.setMainMenuOpen(false)}
|
||||||
/>
|
/>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
)}
|
||||||
</HorzSwipe>
|
</HorzSwipe>
|
||||||
</View>
|
</View>
|
||||||
{isTabsSelectorActive ? (
|
{isTabsSelectorActive ? (
|
||||||
|
|
Loading…
Reference in New Issue