react-native-chating-ui-kit/lib/shared/views/CometChatBottomSheet/CometChatBottomSheet.js

CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly

import React, { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';
import { Animated, BackHandler, Dimensions, Easing, PanResponder, TouchableOpacity, View, Modal, } from 'react-native';
import { Styles } from './style';
import { CometChatContext } from '../../CometChatContext';
const CometChatBottomSheet = forwardRef((props, ref) => {
    const { theme } = useContext(CometChatContext);
    const { sliderMaxHeight, animationDuration, animation, sliderMinHeight, children, isOpen, onOpen, onClose, style, } = props;
    const [contentHeight, setContentHeight] = useState(null);
    const panelHeightValue = new Animated.Value(0);
    const togglePanel = () => {
        Animated.timing(panelHeightValue, {
            duration: animationDuration,
            easing: animation,
            toValue: 
            //@ts-ignore
            panelHeightValue._value === 0 ? contentHeight - sliderMinHeight : 0,
            useNativeDriver: false,
        }).start(() => {
            onClose();
        });
        return true;
    };
    useImperativeHandle(ref, () => {
        return {
            togglePanel
        };
    });
    const _onBackPress = () => {
        isOpen && togglePanel();
        return isOpen;
    };
    const _handleScrollEndDrag = ({ nativeEvent }) => {
        nativeEvent.contentOffset.y === 0 && togglePanel();
    };
    const _setSize = ({ nativeEvent }) => {
        setContentHeight(nativeEvent.layout.height);
    };
    let _parentPanResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: () => !isOpen,
        onPanResponderRelease: () => togglePanel(),
    });
    let _childPanResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: (_, gestureState) => gestureState.dy > 15,
        onPanResponderRelease: (_, gestureState) => gestureState.dy > 0 && togglePanel(),
    });
    useEffect(() => {
        BackHandler.addEventListener('hardwareBackPress', _onBackPress);
        // onOpen ? onOpen() : () => {};
        return () => {
            BackHandler.removeEventListener('hardwareBackPress', _onBackPress);
        };
    }, []);
    return (<Modal transparent={true} visible={isOpen} onRequestClose={() => togglePanel()}>
      <View style={Styles.wrapperStyle}>
        <View style={Styles.greyWrapperStyle} onStartShouldSetResponder={() => togglePanel()}/>
        <Animated.View onLayout={_setSize} {..._parentPanResponder?.panHandlers} style={{
            ...Styles.containerStyle,
            backgroundColor: style?.backgroundColor ?? theme.palette.getBackgroundColor(),
            shadowColor: style?.shadowColor ?? theme.palette.getAccent(),
            maxHeight: sliderMaxHeight,
            transform: [
                { translateY: panelHeightValue },
                { scale: isOpen ? 1 : 0 },
            ],
        }}>
          <View style={Styles.outerContentStyle} {..._childPanResponder?.panHandlers}>
            <TouchableOpacity onPress={togglePanel.bind(this)} activeOpacity={1} style={{ height: 30 }}>
              <View style={Styles.lineContainerStyle}>
                <View style={[
            Styles.lineStyle,
            {
                backgroundColor: style?.lineColor ?? theme.palette.getAccent200(),
            },
        ]}/>
              </View>
            </TouchableOpacity>
            <View style={Styles.innerContentStyle}>
              {typeof children === 'function'
            ? children(_handleScrollEndDrag)
            : children}
            </View>
          </View>
        </Animated.View>
      </View>
    </Modal>);
});
CometChatBottomSheet.defaultProps = {
    children: <View />,
    isOpen: true,
    sliderMaxHeight: Dimensions.get('screen').height * 0.5,
    sliderMinHeight: 50,
    animation: Easing.quad,
    animationDuration: 200,
    onOpen: null,
    onClose: null,
    style: {},
};
export { CometChatBottomSheet };
//# sourceMappingURL=CometChatBottomSheet.js.map