Open tieucoctu opened 5 months ago
export const ModalConfirm = (props: Props) => { const { title, typeColor = 'info', cancelText = 'Huỷ', okText = 'Xác nhận', handleConfirm, content, okButtonProps, ...restProps } = props; return Modal.confirm({ ...restProps, cancelText, className: `wrap-modal-confirm wrap-btn modal-${typeColor}`, title: title, content: content, centered: true, open: false, async onOk(): Promise<void> { await handleConfirm?.(); }, okText, okButtonProps: { ...okButtonProps, className: `btn-${typeColor} ` }, cancelButtonProps: { className: `ant-btn-primary btn-grey` }, }); }; export const InfoPopup = (props: Props) => ModalConfirm({ ...props, icon: <InfoCircleFilled />, typeColor: 'info' }); export const ErrorPopup = (props: Props) => ModalConfirm({ ...props, icon: <WarningFilled />, typeColor: 'error' }); export const WarningPopup = (props: Props) => ModalConfirm({ ...props, icon: <ExclamationCircleFilled />, typeColor: 'primary' }); export const SuccessPopup = (props: Props) => ModalConfirm({ ...props, icon: <CheckCircleFilled />, typeColor: 'success' });
use component
const handleDeleteRole = () => { return ErrorPopup({ title: 'Bạn có chắc chắn muốn xóa?', width: 480, okButtonProps: { htmlType: 'submit', }, content: ( <Form onFinish={SubmitDelete}> <p>Thao tác thực hiện xoá vai trò này khỏi danh sách quản lý các vai trò.</p> <p>vui lòng nhập lý do.</p> <Form.Item name={'note'} rules={[{ required: true, message: 'Vui loại nhap lý do' }]}> <TextArea className="text-area-content" autoSize={{ minRows: 6 }} onChange={(e) => handleOnChangeNode(e.target.value)} placeholder="Nhập lý do..." /> </Form.Item> </Form> ), handleConfirm: () => SubmitDelete({ id: record?.id }), }); };
![Uploading Screenshot 2024-04-25 103247.png…]()
use component
![Uploading Screenshot 2024-04-25 103247.png…]()