taro/src/_health/base/new_modal.tsx

import { View, Text, ScrollView } from '@tarojs/components'
import './new_modal.scss'
import React, { useEffect, useRef, useState } from 'react';
import { ModalType } from '@/utils/types';
import Taro from '@tarojs/taro';
import { rpxToPx, vibrate } from '@/utils/tools';
import { MainColorType } from '@/context/themes/color';
import NewButton, { NewButtonType } from './new_button';
import { IconClose } from '@/components/basic/Icons';


let ModalRN, Animated

if (process.env.TARO_ENV == 'rn') {
    ModalRN = require("react-native").Modal
    Animated = require("react-native").Animated
}

export default function NewModal(props: {
    children: React.ReactNode,
    title?: string,
    btnTitle?: string,
    dismiss: Function,
    confirm?: Function,
    themeColor?: string,
    cancelCatchMove?: boolean,
    themeIsWhite?: boolean
}) {

    const [isDismiss, setIsDismiss] = useState(false)
    let animation, animatedStyle;
    if (process.env.TARO_ENV == 'rn') {
        animation = useRef(new Animated.Value(0)).current;
        animatedStyle = {
            transform: [
                {
                    translateY: animation.interpolate({
                        inputRange: [0, 1],
                        outputRange: [300, 0],
                    }),
                },
            ],
        };
    }

    useEffect(() => {
        if (process.env.TARO_ENV == 'rn') {
            startAnimation()
        }
    }, [])

    const startAnimation = () => {
        Animated.spring(animation, {
            toValue: 1,
            duration: 50,
            useNativeDriver: true,
        }).start();
    };

    const endAnimation = () => {
        Animated.spring(animation, {
            toValue: 0,
            duration: 50,
            useNativeDriver: true,
        }).start();
        console.log('end')
    };

    //阻止中间内容点击事件穿透
    function click(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        vibrate()
    }

    function onClick() {
    }

    function longPress(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
    }

    function dismiss() {
        setIsDismiss(true)
        setTimeout(() => {
            props.dismiss()
        }, 250)
    }

    function rndismiss() {
        endAnimation()
        setTimeout(() => {
            props.dismiss()
        }, 250)
    }

    global.dismissModal = dismiss;

    if (process.env.TARO_ENV == 'rn') {
        return <ModalRN transparent
        // animationType="slide"
        // style={{backgroundColor:'red'}}
        >
            <View style={{ flex: 1, backgroundColor: props.themeIsWhite ? '#00000080' : '#00000080' }}>
                <View style={{ flex: 1, backgroundColor: 'transparent' }} onClick={(e) => {
                    rndismiss()
                }}></View>
                <Animated.View className={isDismiss ? 'modal_bottom_content modal_bottom_dismiss' : 'modal_bottom_content'}
                    style={[{ flexShrink: 0 }, animatedStyle]} onClick={onClick}>
                    {
                        props.children
                    }

                </Animated.View>
            </View>
        </ModalRN>
    }


    return <View className={isDismiss ? 'modal modal_dismiss' : 'modal'} catchMove onLongPress={longPress}>
        <View style={{ flex: 1, width: 375, flexShrink: 0 }} onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }; dismiss()
        }}>
        </View>
        <View className={isDismiss ? 'modal_bottom_content modal_bottom_dismiss' : 'modal_bottom_content'} style={{ flexShrink: 0,position:'relative' }} onClick={onClick}>
            <View className='modal_title'>{props.title}
                <View style={{
                    display:'flex',
                    width: rpxToPx(60),
                    height: rpxToPx(60),
                    alignItems:'center',
                    justifyContent:'center',
                    position:'absolute',
                    right:rpxToPx(24),
                    top:rpxToPx(24)
                }}>
                    <NewButton
                        onClick={dismiss}
                        type={NewButtonType.img}>
                        <IconClose color={MainColorType.g03} width={rpxToPx(40)} height={rpxToPx(40)} />
                    </NewButton>
                </View>
            </View>
            {
                props.children
            }
            <View className='modal_footer'>
                <View className='modal_footer_btn'
                    onClick={() => {
                        props.confirm && props.confirm()
                    }}
                    style={{ backgroundColor: props.themeColor ?? MainColorType.fast }}>{props.btnTitle ?? '确定'}</View>
            </View>

        </View>

    </View>
}