jsx import { jsx , Interpolation , Theme } from "@emotion/react" ; import React from "react" ; import { style , LoadingHide } from "./style" ; import { Indicator , IndicatorProps } from "../Indicator" ; import { RowCenter } from "../Flex/Row" ; import { Overlay , OverlayProps } from "../Overlay" ; export interface LoadingWrapperProps { status ? : "show" | "hide" ; hint ? : React . ReactNode ; overlay ? : OverlayProps ; indicator ? : IndicatorProps ; onHide ? : ( ) => void ; containerStyle ? : Interpolation < Theme > ; } export function Wrapper ( props ) { const { status = "show" , hint , overlay , indicator , onHide , containerStyle , } = props ; let overlayProps = { centerContent : true , fullScreen : true , maskColor : "transparent" , } ; if ( typeof overlay === "object" ) { overlayProps = { ... overlayProps , ... overlay } ; } let indicatorProps = { barWidth : 5 , barHeight : 25 , barCount : 14 , } ; if ( typeof indicator === "object" ) { indicatorProps = { ... indicatorProps , ... indicator } ; } const animation = status === "show" ? style . boxShow : style . boxHide ; const animationEnd = ( event ) => { if ( event . animationName === LoadingHide . name ) { onHide ?. ( ) ; } } ; let box ; if ( hint && typeof hint === "string" ) { box = ( < RowCenter css = { [ style . boxCommon , style . boxWithExtra , animation , containerStyle ] } onAnimationEnd = { animationEnd } > < Indicator { ... indicatorProps } / > < div css = { style . hint } > { hint } < /div> < /RowCenter>); } else { box = ( < RowCenter css = { [ style . boxCommon , style . box , animation , containerStyle ] } onAnimationEnd = { animationEnd } > < Indicator { ... indicatorProps } / > < /RowCenter>); } return < Overlay { ... overlayProps } > { box } < /Overlay>; }