81 lines
5.6 KiB
JavaScript
81 lines
5.6 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState } from 'react';
|
|
const Icons = {
|
|
info: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16v-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M12 8h.01", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] })),
|
|
success: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M8 12l2.5 2.5L15.5 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })),
|
|
warning: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })] })),
|
|
error: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
|
|
};
|
|
const defaultProps = {
|
|
title: 'Thông báo',
|
|
type: 'info',
|
|
confirmButtonText: 'OK',
|
|
cancelButtonText: 'Hủy',
|
|
};
|
|
export const NotificationModal = ({ isOpen, title = defaultProps.title, message, onConfirm, onCancel, type = defaultProps.type, confirmButtonText = defaultProps.confirmButtonText, cancelButtonText = defaultProps.cancelButtonText, }) => {
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
const getTypeStyles = () => {
|
|
switch (type) {
|
|
case 'success':
|
|
return { bg: '#d4edda', border: '#c3e6cb', text: '#155724' };
|
|
case 'warning':
|
|
return { bg: '#fff3cd', border: '#ffeeba', text: '#856404' };
|
|
case 'error':
|
|
return { bg: '#f8d7da', border: '#f5c6cb', text: '#721c24' };
|
|
default:
|
|
return { bg: '#e2e3e5', border: '#d6d8db', text: '#383d41' };
|
|
}
|
|
};
|
|
const styles = getTypeStyles();
|
|
const getAnimationClass = () => {
|
|
if (!isOpen)
|
|
return 'opacity-0 translate-y-4';
|
|
if (isAnimating && onCancel)
|
|
return 'animate-fade-out';
|
|
return 'animate-fade-in';
|
|
};
|
|
const handleConfirm = () => {
|
|
setIsAnimating(true);
|
|
onConfirm?.();
|
|
setTimeout(() => setIsAnimating(false), 300);
|
|
};
|
|
const handleCancel = () => {
|
|
setIsAnimating(true);
|
|
onCancel?.();
|
|
setTimeout(() => setIsAnimating(false), 300);
|
|
};
|
|
if (!isOpen)
|
|
return null;
|
|
return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4", children: _jsxs("div", { className: `bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 ${getAnimationClass()}`, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-message", children: [_jsx("div", { className: `p-6 border-b ${styles.border}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [type === 'success' && _jsx(Icons.success, { className: "w-5 h-5 text-green-600" }), type === 'warning' && _jsx(Icons.warning, { className: "w-5 h-5 text-yellow-600" }), type === 'error' && _jsx(Icons.error, { className: "w-5 h-5 text-red-600" }), type === 'info' && _jsx(Icons.info, { className: "w-5 h-5 text-blue-600" }), _jsx("h2", { id: "modal-title", className: `text-xl font-semibold ${styles.text}`, children: title })] }) }), _jsx("div", { className: "p-6", children: _jsx("p", { id: "modal-message", className: "text-gray-700 leading-relaxed", children: message }) }), _jsxs("div", { className: `px-6 py-4 flex justify-end gap-3 border-t ${styles.border}`, children: [onCancel && (_jsx("button", { onClick: handleCancel, className: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors", children: cancelButtonText })), onConfirm && (_jsx("button", { onClick: handleConfirm, className: `px-4 py-2 text-white rounded-md font-medium transition-colors ${type === 'error'
|
|
? 'bg-red-600 hover:bg-red-700'
|
|
: 'bg-blue-600 hover:bg-blue-700'}`, children: confirmButtonText }))] })] }) }));
|
|
};
|
|
export const useNotificationModal = () => {
|
|
const [modalState, setModalState] = useState(null);
|
|
const openModal = (title, message, type = 'info', onConfirm, onCancel) => {
|
|
setModalState({
|
|
isOpen: true,
|
|
title,
|
|
message,
|
|
type,
|
|
onConfirm,
|
|
onCancel,
|
|
});
|
|
const timer = setTimeout(() => {
|
|
if (onCancel) {
|
|
setModalState((prev) => ({ ...prev, isOpen: false }));
|
|
}
|
|
}, 5000);
|
|
return () => clearTimeout(timer);
|
|
};
|
|
const closeModal = () => {
|
|
setModalState((prev) => prev ? { ...prev, isOpen: false } : null);
|
|
};
|
|
return {
|
|
modalState,
|
|
openModal,
|
|
closeModal,
|
|
};
|
|
};
|
|
export default NotificationModal;
|
|
//# sourceMappingURL=NotificationModal.js.map
|