jsx import { Interpolation , jsx , Theme } from "@emotion/react" ; import { Clickable } from "../Clickable" ; import { Row } from "../Flex/Row" ; import { style } from "./style" ; import * as CSS from "csstype" ; export interface AlertWrapperProps { title ? : React . ReactNode ; description ? : React . ReactNode ; confirm ? : React . ReactNode ; confirmColor ? : CSS . Property . Color ; cancel ? : React . ReactNode ; cancelColor ? : CSS . Property . Color ; showCancel ? : boolean ; onConfirm ? : ( ) => void ; onCancel ? : ( ) => void ; titleStyle ? : Interpolation < Theme > ; descStyle ? : Interpolation < Theme > ; btnStyle ? : Interpolation < Theme > ; confirmStyle ? : Interpolation < Theme > ; cancelStyle ? : Interpolation < Theme > ; } export function AlertWrapper ( props ) { const { title = "提示" , description , confirm = "确定" , confirmColor = "#007afe" , cancel = "取消" , cancelColor = "#666" , showCancel = false , onConfirm , onCancel , titleStyle , descStyle , btnStyle , cancelStyle , confirmStyle , } = props ; let titleCss = [ style . title ] ; if ( description ) { titleCss . push ( { paddingBottom : 0 } ) ; } titleCss . push ( titleStyle ) ; let btnBoxCss = [ style . btnBox ] ; if ( showCancel ) { btnBoxCss . push ( style . btnBoxWithCancel ) ; } return ( < div css = { style . container } > < div css = { style . content } > { } < div css = { titleCss } > { title } < /div> { } { description && < div css = { [ style . desc , descStyle ] } > { description } < /div>} < /div> < Row alignItems = "stretch" css = { btnBoxCss } > { } { showCancel && ( < Clickable css = { [ style . btn , btnStyle , cancelStyle , { color : cancelColor } ] } onClick = { onCancel } activeStyle = { { backgroundColor : `#c0c0c022` , } } > { cancel } < /Clickable>)} { } < Clickable css = { [ style . btn , btnStyle , confirmStyle , { color : confirmColor } ] } onClick = { onConfirm } activeStyle = { { backgroundColor : `#c0c0c022` , } } > { confirm } < /Clickable> < /Row> < /div>); }