78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import React, { ReactNode } from 'react'
|
||
import { Ionicons } from '@expo/vector-icons'
|
||
import Block from './Block'
|
||
import Text from './Text'
|
||
import Toast from './Toast'
|
||
|
||
interface ConfirmModalProps {
|
||
/** 标题，默认为 "确认支付?" */
|
||
title?: string
|
||
/** 徽标文字，默认为 "SYSTEM_MSG" */
|
||
badge?: string
|
||
/** 内容，可以是字符串或React节点 */
|
||
content?: ReactNode
|
||
/** 确认按钮文字，默认为 "确认" */
|
||
confirmText?: string
|
||
/** 取消按钮文字，默认为 "取消" */
|
||
cancelText?: string
|
||
/** 确认回调 */
|
||
onConfirm?: () => void
|
||
/** 取消回调，如果不传则默认关闭Modal */
|
||
onCancel?: () => void
|
||
}
|
||
|
||
const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
||
title = '确认支付?',
|
||
badge = 'SYSTEM_MSG',
|
||
content,
|
||
confirmText = '确认',
|
||
cancelText = '取消',
|
||
onConfirm,
|
||
onCancel,
|
||
}) => {
|
||
const handleCancel = () => {
|
||
if (onCancel) {
|
||
onCancel()
|
||
} else {
|
||
Toast.hideModal()
|
||
}
|
||
}
|
||
|
||
const handleConfirm = () => {
|
||
onConfirm && onConfirm()
|
||
}
|
||
|
||
return (
|
||
<Block className="fixed inset-0 z-[60] items-center justify-center p-[24px]">
|
||
<Block className="relative w-full max-w-[320px] -skew-x-3 border-[4px] border-black bg-white p-[24px] shadow-[10px_10px_0px_#e61e25]">
|
||
<Block className="absolute left-[-12px] top-[-12px] skew-x-3 transform border-[3px] border-black bg-[#FFE500] px-[8px] py-[4px] shadow-[2px_2px_0px_rgba(0,0,0,0.2)]">
|
||
<Text className="text-[12px] font-black tracking-wider">{badge}</Text>
|
||
</Block>
|
||
|
||
<Text className="mb-[8px] mt-[4px] text-[24px] font-black italic tracking-tight text-black">{title}</Text>
|
||
<Block className="mb-[20px] h-[4px] w-full bg-black" />
|
||
|
||
<Block className="mb-[24px]">
|
||
{typeof content === 'string' ? <Text className="text-[14px] font-bold leading-relaxed text-gray-800">{content}</Text> : content}
|
||
</Block>
|
||
|
||
<Block className="w-full flex-row gap-x-[12px]">
|
||
<Block onClick={handleCancel} className="flex flex-1 border-[3px] border-black py-[12px]">
|
||
<Text className="text-center text-black">{cancelText}</Text>
|
||
</Block>
|
||
|
||
<Block
|
||
onClick={handleConfirm}
|
||
className="flex flex-1 flex-row items-center justify-center border-[3px] border-black bg-[#FFE500] py-[12px] shadow-[4px_4px_0px_#000]"
|
||
>
|
||
<Text className="text-black">{confirmText}</Text>
|
||
<Ionicons name="flash" size={16} color="#000" style={{ marginLeft: 4 }} />
|
||
</Block>
|
||
</Block>
|
||
</Block>
|
||
</Block>
|
||
)
|
||
}
|
||
|
||
export default ConfirmModal
|