60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { Input, View } from '@tarojs/components'
|
|
import { useEffect, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
|
|
export interface Param {
|
|
show: boolean
|
|
title: string
|
|
onConfirm?: (val: string) => void
|
|
onCancel?: () => void
|
|
defaultValue?: string
|
|
onClose?: () => void
|
|
}
|
|
export default (props: Param) => {
|
|
const { show = false, title = '', onConfirm, onCancel, defaultValue = '', onClose } = props
|
|
const [value, setValue] = useState('')
|
|
const [openStatus, setOpenStatus] = useState(false)
|
|
useEffect(() => {
|
|
if (value !== defaultValue) { setValue(() => defaultValue) }
|
|
}, [defaultValue])
|
|
useEffect(() => {
|
|
if (show !== openStatus) { setOpenStatus(() => show) }
|
|
}, [show])
|
|
|
|
const onInputEven = (e) => {
|
|
const res = e.detail.value
|
|
setValue(res)
|
|
}
|
|
const onCancelEven = () => {
|
|
onCancel?.()
|
|
onCloseEven()
|
|
}
|
|
const onCloseEven = () => {
|
|
onClose?.()
|
|
setOpenStatus(false)
|
|
}
|
|
const onConfirmEven = (val) => {
|
|
onClose?.()
|
|
onConfirm?.(val)
|
|
}
|
|
return (
|
|
<>
|
|
{openStatus && <View className={styles.popup_modal_main}>
|
|
<View className={styles.popup_modal_con}>
|
|
<View className={styles.popup_modal_title}>{title}</View>
|
|
<View className={styles.popup_modal_input}>
|
|
<View className={styles.input}>
|
|
<Input onInput={onInputEven} value={value} />
|
|
</View>
|
|
</View>
|
|
<View className={styles.popup_modal_btn}>
|
|
<View className={styles.popup_modal_btn_item} onClick={onCancelEven}>取消</View>
|
|
<View className={styles.popup_modal_btn_item} onClick={() => onConfirmEven(value)}>确认修改</View>
|
|
</View>
|
|
</View>
|
|
<View className={styles.mask} catchMove onClick={onCloseEven}></View>
|
|
</View>}
|
|
</>
|
|
)
|
|
}
|