100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons'
|
||
import React, { type ReactNode } from 'react'
|
||
|
||
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
|
||
/** 确认按钮是否处于加载状态 */
|
||
confirmLoading?: boolean
|
||
}
|
||
|
||
const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
||
title = '确认支付?',
|
||
badge = 'SYSTEM_MSG',
|
||
content,
|
||
confirmText = '确认',
|
||
cancelText = '取消',
|
||
onConfirm,
|
||
onCancel,
|
||
confirmLoading = false,
|
||
}) => {
|
||
const handleCancel = () => {
|
||
if (confirmLoading) return
|
||
if (onCancel) {
|
||
onCancel()
|
||
} else {
|
||
Toast.hideModal()
|
||
}
|
||
}
|
||
|
||
const handleConfirm = () => {
|
||
if (confirmLoading) return
|
||
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-4 border-black bg-white p-[24px] shadow-[10px_10px_0px_#e61e25]">
|
||
<Block className="absolute left-[-12px] top-[-12px] skew-x-3 border-[3px] border-black bg-accent 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 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 className="flex flex-1 border-[3px] border-black py-[12px]" onClick={handleCancel}>
|
||
<Text className="text-center text-black">{cancelText}</Text>
|
||
</Block>
|
||
|
||
<Block
|
||
className="flex flex-1 flex-row items-center justify-center border-[3px] border-black bg-accent py-[12px] shadow-[4px_4px_0px_#000]"
|
||
onClick={handleConfirm}
|
||
style={{ opacity: confirmLoading ? 0.6 : 1 }}
|
||
>
|
||
{confirmLoading ? (
|
||
<>
|
||
<Ionicons color="#000" name="sync" size={16} style={{ marginRight: 4 }} />
|
||
<Text className="text-black">{confirmText}</Text>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Text className="text-black">{confirmText}</Text>
|
||
{title==='确认支付?' && (
|
||
<Ionicons color="#000" name="flash" size={16} style={{ marginLeft: 4 }} />
|
||
)}
|
||
</>
|
||
)}
|
||
</Block>
|
||
</Block>
|
||
</Block>
|
||
</Block>
|
||
)
|
||
}
|
||
|
||
export default ConfirmModal
|