Some checks failed
CI Check / check (push) Has been cancelled
- 替换所有浏览器原生弹窗(confirm/alert/prompt) - 创建 ConfirmDialog、AlertDialog、PromptDialog 组件 - 创建 DialogProvider 和 useDialog Hook - 替换所有 admin 组件、首页、分享页面中的原生弹窗 - 素材预览面板统一 - 创建 MaterialPreviewModal 组件 - 使用统一弹窗组件,统一退出逻辑 - 首页UI统一到三层架构 - 迁移主要按钮和输入框样式 - 迁移筛选弹窗中的所有按钮样式 - 使用 useThemeStyles() Hook - 更新文档 - 更新优化记录、优化计划、后续修改、更新日志
98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useCallback } from 'react'
|
|
|
|
interface ConfirmOptions {
|
|
title?: string
|
|
message: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
variant?: 'default' | 'danger'
|
|
}
|
|
|
|
interface PromptOptions {
|
|
title?: string
|
|
message: string
|
|
defaultValue?: string
|
|
placeholder?: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
}
|
|
|
|
export function useConfirm() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [options, setOptions] = useState<ConfirmOptions>({ message: '' })
|
|
const [resolveCallback, setResolveCallback] = useState<((value: boolean) => void) | null>(null)
|
|
|
|
const confirm = useCallback((opts: ConfirmOptions): Promise<boolean> => {
|
|
return new Promise((resolve) => {
|
|
setOptions(opts)
|
|
setIsOpen(true)
|
|
setResolveCallback(() => resolve)
|
|
})
|
|
}, [])
|
|
|
|
const handleConfirm = useCallback(() => {
|
|
setIsOpen(false)
|
|
if (resolveCallback) {
|
|
resolveCallback(true)
|
|
setResolveCallback(null)
|
|
}
|
|
}, [resolveCallback])
|
|
|
|
const handleCancel = useCallback(() => {
|
|
setIsOpen(false)
|
|
if (resolveCallback) {
|
|
resolveCallback(false)
|
|
setResolveCallback(null)
|
|
}
|
|
}, [resolveCallback])
|
|
|
|
return {
|
|
isOpen,
|
|
options,
|
|
confirm,
|
|
handleConfirm,
|
|
handleCancel,
|
|
}
|
|
}
|
|
|
|
export function usePrompt() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [options, setOptions] = useState<PromptOptions>({ message: '' })
|
|
const [resolveCallback, setResolveCallback] = useState<((value: string | null) => void) | null>(null)
|
|
|
|
const prompt = useCallback((opts: PromptOptions): Promise<string | null> => {
|
|
return new Promise((resolve) => {
|
|
setOptions(opts)
|
|
setIsOpen(true)
|
|
setResolveCallback(() => resolve)
|
|
})
|
|
}, [])
|
|
|
|
const handleConfirm = useCallback((value: string) => {
|
|
setIsOpen(false)
|
|
if (resolveCallback) {
|
|
resolveCallback(value)
|
|
setResolveCallback(null)
|
|
}
|
|
}, [resolveCallback])
|
|
|
|
const handleCancel = useCallback(() => {
|
|
setIsOpen(false)
|
|
if (resolveCallback) {
|
|
resolveCallback(null)
|
|
setResolveCallback(null)
|
|
}
|
|
}, [resolveCallback])
|
|
|
|
return {
|
|
isOpen,
|
|
options,
|
|
prompt,
|
|
handleConfirm,
|
|
handleCancel,
|
|
}
|
|
}
|
|
|