web2468/src/components/SubScreen/index.jsx

import PropTypes from "prop-types";
import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import {animated,easings} from "@react-spring/web";
import {useState,useEffect} from "react";
import {useSpring, useSpringRef} from "@react-spring/core";
import {useLocation} from "react-router";
const i18n=global.i18n;

const SubScreen=({open,onClose,children,route,renderComp})=>{
    const [subOpen,setSubOpen]=useState(open);
    const {pathname,hash} = useLocation();
    const duration=200;
    const spref = useSpringRef()

    const delayClose=()=>{
        if (onClose)onClose();
    }
    const close=()=>{
        setSubOpen(false);
        // spref.start({
        //     transform:'translateX(100%) translateZ(0px)',
        // })
        setTimeout(function () {
            delayClose();
        },duration);
    }
    // useEffect(()=>{
    //     // extra.close=close;
    //     // spref.start();
    //     spref.start({
    //         from: {transform: 'translateX(100%) translateZ(0px)'},
    //         transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
    //     })
    // },[pathname])

    const showAni=useSpring({
        // ref: spref,
        from: {transform: 'translateX(100%) translateZ(0px)'},
        transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
        config: {
            easing: easings.linear,
            duration:duration
        },
    });
    const renderHeader=()=>{
        let title=route?route.title:"";
        return (
            <div className={styles.header}>
                <button className={styles.close} onClick={()=>{
                    close();
                }}>
                    <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
                </button>
                <div className={styles.hcontent}>
                    {i18n.t(title)}
                </div>
            </div>
        )
    }
    const renderBar=()=>{
        return (
            <div id={'subbar'} className={styles.appbar}>
                {renderHeader()}
            </div>
        )
    }
    const renderContent=()=>{
        // addExtraChildProps(children);
        // let list=children.length==null?[children]:children;
        // // {children}
        return (
            <div className={styles.content}>
                {/*{children}*/}
                {renderComp({close})}
            </div>
        )
    }
    return (
        <animated.div className={styles.subscreen} style={showAni}>
            {renderBar()}
            {renderContent()}
        </animated.div>
    )
}
SubScreen.propTypes = {
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
    // children: PropTypes.node.isRequired
}

export default SubScreen