Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: removed ContentWrapper from BottomSheet #156

Merged
merged 2 commits into from
Jan 7, 2021
Merged

refactor: removed ContentWrapper from BottomSheet #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
827faed
chore: remove contentwrapper!
gorhom Jan 6, 2021
e98aeeb
chore: rename basic example to Dev
gorhom Jan 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 18 additions & 7 deletions example/src/screens/basic/BasicExample.tsx → example/src/Dev.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { View, StyleSheet, Dimensions, StatusBar } from 'react-native';
import {
View,
StyleSheet,
Dimensions,
StatusBar,
Button as RNButton,
} from 'react-native';
import Animated, {
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated';
import { useSafeArea } from 'react-native-safe-area-context';
import BottomSheet from '@gorhom/bottom-sheet';
import Button from '../../components/button';
import ContactList from '../../components/contactList';
import Button from './components/button';
import ContactList from './components/contactList';

const { height: windowHeight } = Dimensions.get('window');

Expand Down Expand Up @@ -119,13 +126,17 @@ const BasicExample = () => {
topInset={StatusBar.currentHeight || topSafeArea}
onChange={handleSheetChanges}
>
<ContactList type="ScrollView" count={15} />
{/* <View
{/* <ContactList type="ScrollView" count={15} /> */}
<View
style={{
height: dynamicSnapPoint,
backgroundColor: 'red',
backgroundColor: 'black',
}}
>
<RNButton
onPress={() => console.log('Pressed !')}
title="Press Me!"
/>
<View
pointerEvents="none"
style={{
Expand All @@ -138,7 +149,7 @@ const BasicExample = () => {
backgroundColor: 'white',
}}
/>
</View> */}
</View>
</BottomSheet>
<Animated.View pointerEvents="none" style={sheetLineStyle} />
<View pointerEvents="none" style={secondSnapPointLineStyle} />
Expand Down
101 changes: 36 additions & 65 deletions src/components/bottomSheet/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,9 @@ import Animated, {
Extrapolate,
runOnUI,
useWorkletCallback,
useAnimatedProps,
withTiming,
} from 'react-native-reanimated';
import { State, TapGestureHandler } from 'react-native-gesture-handler';
import { State } from 'react-native-gesture-handler';
import {
useInteractivePanGestureHandler,
useScrollable,
Expand All @@ -40,7 +39,6 @@ import BottomSheetContainer from '../bottomSheetContainer';
import BottomSheetBackdropContainer from '../bottomSheetBackdropContainer';
import BottomSheetHandleContainer from '../bottomSheetHandleContainer';
import BottomSheetBackgroundContainer from '../bottomSheetBackgroundContainer';
import BottomSheetContentWrapper from '../bottomSheetContentWrapper';
import BottomSheetDraggableView from '../bottomSheetDraggableView';
// import BottomSheetDebugView from '../bottomSheetDebugView';
import { GESTURE, ANIMATION_STATE, WINDOW_HEIGHT } from '../../constants';
Expand Down Expand Up @@ -117,10 +115,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
} = props;
//#endregion

//#region component refs
const contentWrapperGestureRef = useRef<TapGestureHandler>(null);
//#endregion

//#region layout variables
// state
const [containerHeight, setContainerHeight] = useState(
Expand Down Expand Up @@ -199,21 +193,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
: snapPoints[currentIndexRef.current];
}, [snapPoints, animateOnMount, safeContainerHeight, topInset]);

//content wrapper
const contentWrapperMaxDeltaY = useSharedValue(0);
const contentWrapperGestureState = useSharedValue<State>(
State.UNDETERMINED
);
//#endregion

//#region private methods
const refreshUIElements = useCallback(() => {
const currentPositionIndex = Math.max(currentIndexRef.current, 0);

contentWrapperMaxDeltaY.value = Math.abs(
snapPoints[snapPoints.length - 1] - snapPoints[currentPositionIndex]
);

if (
enableFlashScrollableIndicatorOnExpand &&
currentPositionIndex === snapPoints.length - 1
Expand All @@ -222,7 +207,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
}
}, [
snapPoints,
contentWrapperMaxDeltaY,
flashScrollableIndicators,
enableFlashScrollableIndicatorOnExpand,
]);
Expand Down Expand Up @@ -354,11 +338,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
enableOverDrag,
overDragResistanceFactor
);

// content wrapper
const contentWrapperAnimatedProps = useAnimatedProps(() => ({
maxDeltaY: contentWrapperMaxDeltaY.value,
}));
//#endregion

//#region layout callbacks
Expand Down Expand Up @@ -413,7 +392,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
animatedIndex,
animatedPosition,
animationState,
contentWrapperGestureRef,
contentPanGestureHandler,
scrollableContentOffsetY,
scrollableDecelerationRate,
Expand Down Expand Up @@ -614,49 +592,42 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
shouldMeasureHeight={shouldMeasureContainerHeight}
onMeasureHeight={handleOnContainerMeasureHeight}
>
<BottomSheetContentWrapper
ref={contentWrapperGestureRef}
gestureState={contentWrapperGestureState}
animatedProps={contentWrapperAnimatedProps}
<Animated.View
accessible={true}
accessibilityRole="adjustable"
accessibilityLabel="Bottom Sheet"
style={containerStyle}
>
<Animated.View
accessible={true}
accessibilityRole="adjustable"
accessibilityLabel="Bottom Sheet"
style={containerStyle}
>
<BottomSheetInternalProvider value={internalContextVariables}>
<BottomSheetBackgroundContainer
key="BottomSheetBackgroundContainer"
animatedIndex={animatedIndex}
animatedPosition={animatedPosition}
backgroundComponent={backgroundComponent}
/>
{isLayoutCalculated && (
<BottomSheetDraggableView
key="BottomSheetRootDraggableView"
style={contentContainerStyle}
>
{typeof children === 'function'
? (children as Function)()
: children}
</BottomSheetDraggableView>
)}
<BottomSheetHandleContainer
key="BottomSheetHandleContainer"
animatedIndex={animatedIndex}
animatedPosition={animatedPosition}
simultaneousHandlers={contentWrapperGestureRef}
shouldMeasureHeight={shouldMeasureHandleHeight}
enableHandlePanningGesture={enableHandlePanningGesture}
handlePanGestureHandler={handlePanGestureHandler}
handleComponent={handleComponent}
snapPoints={snapPoints}
onMeasureHeight={handleOnHandleMeasureHeight}
/>
</BottomSheetInternalProvider>
</Animated.View>
</BottomSheetContentWrapper>
<BottomSheetInternalProvider value={internalContextVariables}>
<BottomSheetBackgroundContainer
key="BottomSheetBackgroundContainer"
animatedIndex={animatedIndex}
animatedPosition={animatedPosition}
backgroundComponent={backgroundComponent}
/>
{isLayoutCalculated && (
<BottomSheetDraggableView
key="BottomSheetRootDraggableView"
style={contentContainerStyle}
>
{typeof children === 'function'
? (children as Function)()
: children}
</BottomSheetDraggableView>
)}
<BottomSheetHandleContainer
key="BottomSheetHandleContainer"
animatedIndex={animatedIndex}
animatedPosition={animatedPosition}
shouldMeasureHeight={shouldMeasureHandleHeight}
enableHandlePanningGesture={enableHandlePanningGesture}
handlePanGestureHandler={handlePanGestureHandler}
handleComponent={handleComponent}
snapPoints={snapPoints}
onMeasureHeight={handleOnHandleMeasureHeight}
/>
</BottomSheetInternalProvider>
</Animated.View>
{/* <BottomSheetDebugView
values={{
tapState: contentWrapperGestureState,
Expand Down
37 changes: 0 additions & 37 deletions src/components/bottomSheetContentWrapper/BottomSheetContentWrapper.android.tsx
View file
Open in desktop

This file was deleted.

39 changes: 0 additions & 39 deletions src/components/bottomSheetContentWrapper/BottomSheetContentWrapper.ios.tsx
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions src/components/bottomSheetContentWrapper/index.ts
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions src/components/bottomSheetContentWrapper/styles.ts
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions src/components/bottomSheetContentWrapper/types.d.ts
View file
Open in desktop

This file was deleted.

9 changes: 2 additions & 7 deletions src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ const BottomSheetDraggableViewComponent = ({
// hooks
const {
enableContentPanningGesture,
contentWrapperGestureRef,
contentPanGestureHandler,
simultaneousHandlers: _providedSimultaneousHandlers,
waitFor,
Expand All @@ -30,7 +29,7 @@ const BottomSheetDraggableViewComponent = ({

// variables
const simultaneousHandlers = useMemo(() => {
const refs = [contentWrapperGestureRef];
const refs = [];

if (nativeGestureRef) {
refs.push(nativeGestureRef);
Expand All @@ -45,11 +44,7 @@ const BottomSheetDraggableViewComponent = ({
}

return refs;
}, [
_providedSimultaneousHandlers,
contentWrapperGestureRef,
nativeGestureRef,
]);
}, [_providedSimultaneousHandlers, nativeGestureRef]);

// styles
const containerStyle = useMemo(
Expand Down
Loading