import React, { useMemo, memo, useRef } from 'react'; import { Text, TouchableOpacity } from 'react-native'; import Animated, { round } from 'react-native-reanimated'; import { useValues, get } from 'react-native-redash'; import { styles } from './styles'; import type { CloseButtonProps } from '../../types'; export const CloseButtonComponent = ({ data, safeInsets, animatedIndex, closeButton, closeButtonText, closeButtonTextStyle: textStyleOverride, onCloseButtonPress, }: CloseButtonProps) => { const containerRef = useRef<Animated.View>(null); //#region animations const animatedShowButtonOpacityValues = useValues( ...data.map((item, index) => index === data.length - 1 || item.showCloseButton ? 1 : 0 ) ); const animatedShowButtonPointerEventValues = useValues( ...data.map((item, index) => index === data.length - 1 || item.showCloseButton ? 'auto' : 'none' ) ); const defaultShowButtonOpacity = new Animated.Value(0); const defaultShowButtonPointerEvent = new Animated.Value('none'); const animatedShowButtonOpacity = get( animatedShowButtonOpacityValues, round(animatedIndex), defaultShowButtonOpacity ); const animatedShowButtonPointerEvent = get( // @ts-ignore animatedShowButtonPointerEventValues, round(animatedIndex), defaultShowButtonPointerEvent ) as any as Animated.Value<'auto' | 'none'>; //#endregion //#region styles const containerStyle: any = useMemo( () => [ styles.container, { opacity: animatedShowButtonOpacity, top: safeInsets.top, }, ], // eslint-disable-next-line react-hooks/exhaustive-deps [safeInsets] ); const textStyle = useMemo( () => [styles.text, textStyleOverride], [textStyleOverride] ); //#endregion return ( <Animated.View ref={containerRef} pointerEvents={animatedShowButtonPointerEvent} style={containerStyle} > {closeButton ? ( typeof closeButton === 'function' ? ( closeButton() ) : ( closeButton ) ) : ( <TouchableOpacity onPress={onCloseButtonPress}> <Text style={textStyle}>{closeButtonText}</Text> </TouchableOpacity> )} </Animated.View> ); }; const CloseButton = memo(CloseButtonComponent); export default CloseButton;