You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.8 KiB
69 lines
1.8 KiB
import {FC, ReactNode, useEffect, useState} from "react";
|
|
import {View} from "@tarojs/components";
|
|
import Icon from "@/components/icon";
|
|
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
|
|
import Img from "@/components/image/image";
|
|
|
|
interface Props {
|
|
height?: number | string
|
|
title: string
|
|
content?: string | ReactNode
|
|
chevron?: boolean
|
|
image?: string
|
|
isProp?: boolean
|
|
children?: ReactNode
|
|
show?: boolean
|
|
onClick?: () => void
|
|
no_border?: boolean
|
|
leftImage?: string
|
|
}
|
|
|
|
const PopPut: FC<Props> = ({title, chevron, content, image, isProp, children, show, ...opt}: Props) => {
|
|
const [PageShow, setShow] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (PageShow) {
|
|
setShow(false)
|
|
}
|
|
}, [show])
|
|
|
|
function click() {
|
|
setShow(true)
|
|
opt.onClick?.()
|
|
}
|
|
|
|
const style = (): string => {
|
|
let css = ''
|
|
if (opt.height) {
|
|
css += ` height:${opt.height}px;font-size:16px`
|
|
}
|
|
if (opt.no_border) {
|
|
css += ` border:none`
|
|
}
|
|
return css
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View className='card' onClick={click} style={style()}>
|
|
<View className='flex align-center'>
|
|
{opt.leftImage != null && <Img width={68} height={68} src={opt.leftImage} className='mr-3' mode='aspectFit'/>}
|
|
<View>{title}</View>
|
|
</View>
|
|
<View className='card-content'>
|
|
<View>{content}</View>
|
|
{!chevron && <Icon name='chevron-right'/>}
|
|
{image && <Img src={image} mode='scaleToFill' className='image' width={68} height={68}/>}
|
|
</View>
|
|
</View>
|
|
{
|
|
isProp
|
|
&& <CustomPageContainer show={PageShow} position='bottom' round onClickOverlay={() => setShow(false)}>
|
|
{children}
|
|
</CustomPageContainer>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PopPut
|
|
|