61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import Block from './Block'
|
|
import Text from './Text'
|
|
|
|
type ModalProps = {
|
|
onOk?: () => void
|
|
onCancel?: () => void
|
|
renderIcon?: () => React.ReactNode
|
|
renderSubtitle?: () => React.ReactNode
|
|
subTitle?: string
|
|
title?: string
|
|
okText?: string
|
|
cancelText?: string
|
|
}
|
|
|
|
/**
|
|
*
|
|
* 全局 modal 组件
|
|
* @export
|
|
* @param {ModalProps} { onOk, onCancel, renderIcon, subTitle, title, renderSubtitle, okText = '确定', cancelText = '取消' }
|
|
* @return {*}
|
|
*/
|
|
|
|
export default function Modal({ onOk, onCancel, renderIcon, subTitle, title, renderSubtitle, okText = '确定', cancelText = '取消' }: ModalProps) {
|
|
const handleConfirm = () => {
|
|
onOk?.()
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
onCancel?.()
|
|
}
|
|
|
|
return (
|
|
<Block className="mx-[60px] mt-[-60px] items-center rounded-[20px] bg-[#16181B] p-[12px]">
|
|
<Block className="center mt-[12px] px-[16px]">
|
|
{renderIcon?.()}
|
|
|
|
{!!title && <Text className="text-center text-[15px] font-bold text-[#F5F5F5]">{title}</Text>}
|
|
{!!subTitle && (
|
|
<Block className="mt-[6px]">
|
|
<Text className="text-center text-[13px] text-[#8A8A8A]">{subTitle}</Text>
|
|
</Block>
|
|
)}
|
|
{renderSubtitle?.()}
|
|
</Block>
|
|
<Block className="mt-[20px] w-full flex-row gap-x-[12px]">
|
|
<Block className="flex-1">
|
|
<Block onClick={handleCancel} className="items-center justify-center rounded-[8px] bg-[#333538] py-[12px]">
|
|
<Text className="text-[13px] text-[#CCCCCC]">{cancelText}</Text>
|
|
</Block>
|
|
</Block>
|
|
<Block className="flex-1">
|
|
<Block onClick={handleConfirm} className="items-center justify-center rounded-[8px] bg-[#FA3F2C] py-[12px]">
|
|
<Text className="text-[13px] text-[#CCCCCC]">{okText}</Text>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
}
|