parent
							
								
									ebea007b48
								
							
						
					
					
						commit
						651bec5f07
					
				
				 10 changed files with 814 additions and 389 deletions
			
			
		| @ -1,147 +1,160 @@ | |||||||
| import React from "react"; | import React from "react"; | ||||||
| import Swal from "sweetalert2"; |  | ||||||
| import "./SweetAlert.css"; | import "./SweetAlert.css"; | ||||||
|  | import { toastAlert } from "../../redux/actions/modalActions"; | ||||||
|  | import { connect } from "react-redux"; | ||||||
|  | import Swal from "sweetalert2"; | ||||||
| 
 | 
 | ||||||
| const SweetToast = () => { | function SweetToast(props) { | ||||||
|   const sweetAlert1 = () => { |   return ( | ||||||
|     Swal.fire({ |     <div className="mt-5"> | ||||||
|  |       {/* toast1 */} | ||||||
|  |       <button | ||||||
|  |         className="btn btn-danger btn-lg" | ||||||
|  |         onClick={() => | ||||||
|  |           props.customAlert({ | ||||||
|             icon: "error", |             icon: "error", | ||||||
|             title: "ارور شماره 1", |             title: "ارور شماره 1", | ||||||
|             showCloseButton: true, |             showCloseButton: true, | ||||||
|             toast: true, |             toast: true, | ||||||
|             position: "top-end", |             position: "top-end", | ||||||
|  |             showConfirmButton: false, | ||||||
|  |             timer: false, | ||||||
|  |             timerProgressBar: false, | ||||||
|             customClass: { |             customClass: { | ||||||
|               title: "error-toast-title", |               title: "error-toast-title", | ||||||
|               closeButton: "error-toast-closeButton", |               closeButton: "error-toast-closeButton", | ||||||
|               popup: "error-toast-modalBox", |               popup: "error-toast-modalBox", | ||||||
|               iconColor: "icon-color", |               iconColor: "icon-color", | ||||||
|             }, |             }, | ||||||
|       showConfirmButton: false, |           }) | ||||||
|       timer: 3000, |         } | ||||||
|       timerProgressBar: true, |       > | ||||||
|       didOpen: (toast) => { |         toast1 | ||||||
|         toast.addEventListener("mouseenter", Swal.stopTimer); |       </button> | ||||||
|         toast.addEventListener("mouseleave", Swal.resumeTimer); |       {/* toast2 */} | ||||||
|       }, |       <button | ||||||
|     }); |         className="btn btn-danger btn-lg" | ||||||
|   }; |         onClick={() => | ||||||
| 
 |           props.customAlert({ | ||||||
|   const sweetAlert2 = () => { |  | ||||||
|     Swal.fire({ |  | ||||||
|             icon: "success", |             icon: "success", | ||||||
|             title: "ارور شماره 2", |             title: "ارور شماره 2", | ||||||
|             showCloseButton: true, |             showCloseButton: true, | ||||||
|             toast: true, |             toast: true, | ||||||
|             position: "top-end", |             position: "top-end", | ||||||
|  |             showConfirmButton: false, | ||||||
|  |             timer: false, | ||||||
|  |             timerProgressBar: false, | ||||||
|             customClass: { |             customClass: { | ||||||
|               title: "success-toast-title", |               title: "success-toast-title", | ||||||
|               closeButton: "success-toast-closeButton", |               closeButton: "success-toast-closeButton", | ||||||
|               popup: "success-toast-modalBox", |               popup: "success-toast-modalBox", | ||||||
|             }, |             }, | ||||||
|       showConfirmButton: false, |           }) | ||||||
|       timer: 3000, |         } | ||||||
|       timerProgressBar: true, |       > | ||||||
|       didOpen: (toast) => { |         toast2 | ||||||
|         toast.addEventListener("mouseenter", Swal.stopTimer); |       </button> | ||||||
|         toast.addEventListener("mouseleave", Swal.resumeTimer); |       {/* toast3 */} | ||||||
|       }, |       <button | ||||||
|     }); |         className="btn btn-danger btn-lg" | ||||||
|   }; |         onClick={() => | ||||||
| 
 |           props.customAlert({ | ||||||
|   const sweetAlert3 = () => { |             icon: false, | ||||||
|     Swal.fire({ |  | ||||||
|             title: "ارور شماره 1", |             title: "ارور شماره 1", | ||||||
|             showCloseButton: true, |             showCloseButton: true, | ||||||
|             toast: true, |             toast: true, | ||||||
|             position: "top-end", |             position: "top-end", | ||||||
|  |             showConfirmButton: false, | ||||||
|  |             timer: false, | ||||||
|  |             timerProgressBar: false, | ||||||
|             customClass: { |             customClass: { | ||||||
|               title: "error-toast-title", |               title: "error-toast-title", | ||||||
|               closeButton: "error-toast-closeButton", |               closeButton: "error-toast-closeButton", | ||||||
|               popup: "error-toast-modalBox", |               popup: "error-toast-modalBox", | ||||||
|  |               iconColor: "icon-color", | ||||||
|             }, |             }, | ||||||
|       showConfirmButton: false, |           }) | ||||||
|     }); |         } | ||||||
|   }; |       > | ||||||
| 
 |         toast3 | ||||||
|   const sweetAlert4 = () => { |       </button> | ||||||
|     Swal.fire({ |       {/* toast4 */} | ||||||
|  |       <button | ||||||
|  |         className="btn btn-danger btn-lg" | ||||||
|  |         onClick={() => | ||||||
|  |           props.customAlert({ | ||||||
|  |             icon: false, | ||||||
|             title: "ارور شماره 2", |             title: "ارور شماره 2", | ||||||
|             showCloseButton: true, |             showCloseButton: true, | ||||||
|             toast: true, |             toast: true, | ||||||
|             position: "top-end", |             position: "top-end", | ||||||
|  |             showConfirmButton: false, | ||||||
|  |             timer: false, | ||||||
|  |             timerProgressBar: false, | ||||||
|             customClass: { |             customClass: { | ||||||
|               title: "success-toast-title", |               title: "success-toast-title", | ||||||
|               closeButton: "success-toast-closeButton", |               closeButton: "success-toast-closeButton", | ||||||
|               popup: "success-toast-modalBox", |               popup: "success-toast-modalBox", | ||||||
|             }, |             }, | ||||||
|       showConfirmButton: false, |           }) | ||||||
|     }); |         } | ||||||
|   }; |       > | ||||||
| 
 |         toast4 | ||||||
|   const sweetAlert5 = () => { |       </button> | ||||||
|     Swal.fire({ |       {/* toast5 */} | ||||||
|       title: "ارور شماره 1", |       <button | ||||||
|  |         className="btn btn-danger btn-lg" | ||||||
|  |         onClick={() => | ||||||
|  |           props.customAlert({ | ||||||
|  |             icon: false, | ||||||
|  |             title: "ارور شماره 2", | ||||||
|             showCloseButton: true, |             showCloseButton: true, | ||||||
|             toast: true, |             toast: true, | ||||||
|             position: "top-end", |             position: "top-end", | ||||||
|  |             showConfirmButton: false, | ||||||
|  |             timer: 3000, | ||||||
|  |             timerProgressBar: true, | ||||||
|             customClass: { |             customClass: { | ||||||
|               title: "error-toast-title", |               title: "error-toast-title", | ||||||
|               closeButton: "error-toast-closeButton", |               closeButton: "error-toast-closeButton", | ||||||
|               popup: "error-toast-modalBox", |               popup: "error-toast-modalBox", | ||||||
|             }, |             }, | ||||||
|       showConfirmButton: false, |           }) | ||||||
|       timer: 3000, |         } | ||||||
|       timerProgressBar: true, |       > | ||||||
|       didOpen: (toast) => { |         toast5 | ||||||
|         toast.addEventListener("mouseenter", Swal.stopTimer); |       </button> | ||||||
|         toast.addEventListener("mouseleave", Swal.resumeTimer); |       {/* toast6 */} | ||||||
|       }, |       <button | ||||||
|     }); |         className="btn btn-danger btn-lg" | ||||||
|   }; |         onClick={() => | ||||||
| 
 |           props.customAlert({ | ||||||
|   const sweetAlert6 = () => { |             icon: false, | ||||||
|     Swal.fire({ |  | ||||||
|             title: "ارور شماره 2", |             title: "ارور شماره 2", | ||||||
|             showCloseButton: true, |             showCloseButton: true, | ||||||
|             toast: true, |             toast: true, | ||||||
|             position: "top-end", |             position: "top-end", | ||||||
|  |             showConfirmButton: false, | ||||||
|  |             timer: 3000, | ||||||
|  |             timerProgressBar: true, | ||||||
|             customClass: { |             customClass: { | ||||||
|               title: "success-toast-title", |               title: "success-toast-title", | ||||||
|               closeButton: "success-toast-closeButton", |               closeButton: "success-toast-closeButton", | ||||||
|               popup: "success-toast-modalBox", |               popup: "success-toast-modalBox", | ||||||
|             }, |             }, | ||||||
|       showConfirmButton: false, |           }) | ||||||
|       timer: 3000, |         } | ||||||
|       timerProgressBar: true, |       > | ||||||
|       didOpen: (toast) => { |         toast6 | ||||||
|         toast.addEventListener("mouseenter", Swal.stopTimer); |  | ||||||
|         toast.addEventListener("mouseleave", Swal.resumeTimer); |  | ||||||
|       }, |  | ||||||
|     }); |  | ||||||
|   }; |  | ||||||
| 
 |  | ||||||
|   return ( |  | ||||||
|     <div className="my-5"> |  | ||||||
|       <button className="bg-primary" onClick={sweetAlert1}> |  | ||||||
|         error sweet alert TOAST 1 |  | ||||||
|       </button> |  | ||||||
|       <button className="bg-primary" onClick={sweetAlert2}> |  | ||||||
|         success sweet alert TOAST 1 |  | ||||||
|       </button> |  | ||||||
|       <button className="bg-primary" onClick={sweetAlert3}> |  | ||||||
|         error sweet alert TOAST 3 |  | ||||||
|       </button> |  | ||||||
|       <button className="bg-primary" onClick={sweetAlert4}> |  | ||||||
|         success sweet alert TOAST 4 |  | ||||||
|       </button> |  | ||||||
|       <button className="bg-primary" onClick={sweetAlert5}> |  | ||||||
|         error sweet alert TOAST 5 |  | ||||||
|       </button> |  | ||||||
|       <button className="bg-primary" onClick={sweetAlert6}> |  | ||||||
|         success sweet alert TOAST 6 |  | ||||||
|       </button> |       </button> | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | const mapStateToProps = (state) => { | ||||||
|  |   return {}; | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| export default SweetToast; | export default connect(mapStateToProps, { customAlert: toastAlert })( | ||||||
|  |   SweetToast | ||||||
|  | ); | ||||||
|  | |||||||
| @ -1,18 +0,0 @@ | |||||||
| let initialState = { |  | ||||||
|   alert: null, |  | ||||||
| }; |  | ||||||
| 
 |  | ||||||
| const PublicApi = (state = initialState, payload) => { |  | ||||||
|   const { type, data } = payload; |  | ||||||
|   switch (type) { |  | ||||||
|     case "alert": |  | ||||||
|       return { |  | ||||||
|         ...state, |  | ||||||
|         alert: { title: data.title, message: data.message, type: data.type }, |  | ||||||
|       }; |  | ||||||
|     default: |  | ||||||
|       return { ...state }; |  | ||||||
|   } |  | ||||||
| }; |  | ||||||
| 
 |  | ||||||
| export default PublicApi; |  | ||||||
| @ -1 +1,2 @@ | |||||||
| export const INFO_ALERT = "INFO_ALERT"; | export const INFO_ALERT = "INFO_ALERT"; | ||||||
|  | export const TOAST_ALERT = "TOAST_ALERT"; | ||||||
|  | |||||||
| @ -1,6 +1,10 @@ | |||||||
| import modalReducer from "./modalReducer"; | import modalReducer from "./modalReducer"; | ||||||
|  | import toastReducer from "./toastReducer"; | ||||||
| import { combineReducers } from "redux"; | import { combineReducers } from "redux"; | ||||||
| 
 | 
 | ||||||
| const rootReducer = combineReducers({ modalReducer: modalReducer }); | const rootReducer = combineReducers({ | ||||||
|  |   modalReducer: modalReducer, | ||||||
|  |   toastReducer: toastReducer, | ||||||
|  | }); | ||||||
| 
 | 
 | ||||||
| export default rootReducer; | export default rootReducer; | ||||||
|  | |||||||
| @ -0,0 +1,34 @@ | |||||||
|  | import { INFO_ALERT, TOAST_ALERT } from "../actions/types"; | ||||||
|  | import Swal from "sweetalert2"; | ||||||
|  | 
 | ||||||
|  | const initialState = {}; | ||||||
|  | 
 | ||||||
|  | const toastReducer = (state = initialState, action) => { | ||||||
|  |   const { type, data } = action; | ||||||
|  |   switch (type) { | ||||||
|  |     case TOAST_ALERT: | ||||||
|  |       Swal.fire({ | ||||||
|  |         icon: data.icon, | ||||||
|  |         title: data.title, | ||||||
|  |         showCloseButton: data.showCloseButton, | ||||||
|  |         toast: data.toast, | ||||||
|  |         position: data.position, | ||||||
|  |         showConfirmButton: data.showConfirmButton, | ||||||
|  |         timer: data.timer, | ||||||
|  |         timerProgressBar: data.timerProgressBar, | ||||||
|  |         customClass: { | ||||||
|  |           title: data.customClass.title, | ||||||
|  |           closeButton: data.customClass.closeButton, | ||||||
|  |           popup: data.customClass.popup, | ||||||
|  |           footer: data.customClass.footer, | ||||||
|  |         }, | ||||||
|  |       }); | ||||||
|  |       return { | ||||||
|  |         ...state, | ||||||
|  |       }; | ||||||
|  |     default: | ||||||
|  |       return state; | ||||||
|  |   } | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default toastReducer; | ||||||
					Loading…
					
					
				
		Reference in new issue