feat: tạo hook useConfirm.tsx để dùng chung toàn hệ thống
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
import React, { createContext, useContext, useState, useCallback } from 'react';
|
||||
import { ConfirmModal } from '../components/ConfirmModal';
|
||||
|
||||
interface ConfirmOptions {
|
||||
title?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
const ConfirmContext = createContext<((options: ConfirmOptions) => Promise<boolean>) | undefined>(undefined);
|
||||
|
||||
export const ConfirmProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [state, setState] = useState<{
|
||||
isOpen: boolean;
|
||||
title?: string;
|
||||
message?: string;
|
||||
resolve?: (value: boolean) => void;
|
||||
}>({ isOpen: false });
|
||||
|
||||
const confirm = useCallback((options: ConfirmOptions) => {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
setState({
|
||||
isOpen: true,
|
||||
title: options.title,
|
||||
message: options.message,
|
||||
resolve,
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleConfirm = () => {
|
||||
const resolve = state.resolve;
|
||||
setState({ isOpen: false, resolve: undefined });
|
||||
resolve?.(true);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
const resolve = state.resolve;
|
||||
setState({ isOpen: false, resolve: undefined });
|
||||
resolve?.(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfirmContext.Provider value={confirm}>
|
||||
{children}
|
||||
<ConfirmModal
|
||||
isOpen={state.isOpen}
|
||||
title={state.title}
|
||||
message={state.message}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
</ConfirmContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useConfirm = () => {
|
||||
const confirm = useContext(ConfirmContext);
|
||||
if (!confirm) throw new Error('useConfirm must be used within a ConfirmProvider');
|
||||
return confirm;
|
||||
};
|
||||
Reference in New Issue
Block a user