@fountain-ui/lab 2.0.0-beta.41 → 2.0.0-beta.43

package/src/BottomSheet/BottomSheet.tsx

@@ -1,184 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import {
-    Animated,
-    LayoutChangeEvent,
-    LayoutRectangle,
-    NativeScrollEvent,
-    NativeSyntheticEvent,
-    PanResponder,
-    ScrollView,
-    View,
-} from 'react-native';
-import { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import BottomSheetProps from './BottomSheetProps';
-import useDynamicSnapPoints from './useDynamicSnapPoints';
-
-type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;
-
-const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            justifyContent: 'flex-end',
-            zIndex: theme.zIndex.dialog,
-        },
-        animated: {
-            alignSelf: 'center',
-            maxWidth: 720,
-            width: '100%',
-        },
-        paper: {
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            flexGrow: 1,
-            overflow: 'hidden',
-        },
-        scrollView: {
-            flexGrow: 1,
-        },
-    };
-};
-
-export default function BottomSheet(props: BottomSheetProps) {
-    const {
-        backdropOpacity,
-        children,
-        header,
-        index,
-        onChange,
-        snapPoints: initialSnapPoints,
-    } = props;
-
-    const styles = useStyles();
-
-    const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });
-    const currentScrollY = useRef<number>(0);
-
-    const {
-        snapPoints,
-        handleContentLayout,
-    } = useDynamicSnapPoints({
-        index,
-        initialSnapPoints,
-    });
-
-    const height = snapPoints[snapPoints.length - 1] ?? 0;
-    const translateY = height - (snapPoints[index] ?? 0);
-
-    const animatedY = useAnimatedValue(translateY);
-
-    const isInsideScrollView = (locationX: number, locationY: number): boolean => {
-        const {
-            current: { x, y, width, height },
-        } = contentLayout;
-
-        return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
-    };
-
-    const panResponder = useMemo(() => (
-        PanResponder.create({
-            onMoveShouldSetPanResponder: (event, gestureState) => {
-                const {
-                    nativeEvent: { locationX, locationY },
-                } = event;
-
-                if (isInsideScrollView(locationX, locationY)) {
-                    return gestureState.dy > 0 && currentScrollY.current === 0;
-                }
-
-                return true;
-            },
-            onPanResponderMove: (_, gestureState) => {
-                if (gestureState.dy > 0) {
-                    animatedY.setValue(translateY + gestureState.dy);
-                }
-            },
-            onPanResponderRelease: (_, gestureState) => {
-                if (gestureState.dy > 0 && gestureState.vy > 0.5) {
-                    handleClose();
-                } else {
-                    Animated.timing(animatedY, {
-                        toValue: translateY,
-                        useNativeDriver: false,
-                        duration: 300,
-                    }).start();
-                }
-            },
-        })
-    ), [translateY]);
-
-    useEffect(() => {
-        if (translateY >= 0) {
-            Animated.timing(animatedY, {
-                toValue: translateY,
-                useNativeDriver: false,
-                duration: 300,
-            }).start();
-        }
-    }, [translateY]);
-
-    const handleClose = () => {
-        if (onChange) {
-            onChange(-1);
-        }
-    };
-
-    const handleScrollViewLayout = (event: LayoutChangeEvent) => {
-        contentLayout.current = event.nativeEvent.layout;
-    };
-
-    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        currentScrollY.current = event.nativeEvent.contentOffset.y;
-    };
-
-    const animatedStyles = [
-        styles.animated,
-        { transform: [{ translateY: animatedY }] },
-    ];
-
-    const paperStyles = [
-        styles.paper,
-        { ...(height !== 0 ? { height } : {}) },
-    ];
-
-    const contentStyle = {
-        ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),
-    };
-
-    return (
-        <Modal
-            backdropOpacity={backdropOpacity}
-            onClose={handleClose}
-            visible={index >= 0}
-            style={css([StyleSheet.absoluteFill, styles.root])}
-        >
-            <Animated.View
-                style={animatedStyles}
-                {...panResponder.panHandlers}
-            >
-                <Paper
-                    elevation={12}
-                    style={paperStyles}
-                >
-                    <View
-                        style={contentStyle}
-                        onLayout={handleContentLayout}
-                    >
-                        {header}
-
-                        <ScrollView
-                            onLayout={handleScrollViewLayout}
-                            onScroll={handleScroll}
-                            scrollEventThrottle={300}
-                            style={styles.scrollView}
-                        >
-                            {children}
-                        </ScrollView>
-                    </View>
-                </Paper>
-            </Animated.View>
-        </Modal>
-    );
-}