parent
ebea007b48
commit
651bec5f07
10 changed files with 814 additions and 389 deletions
@ -1,147 +1,160 @@ |
||||
import React from "react"; |
||||
import Swal from "sweetalert2"; |
||||
import "./SweetAlert.css"; |
||||
import { toastAlert } from "../../redux/actions/modalActions"; |
||||
import { connect } from "react-redux"; |
||||
import Swal from "sweetalert2"; |
||||
|
||||
const SweetToast = () => { |
||||
const sweetAlert1 = () => { |
||||
Swal.fire({ |
||||
function SweetToast(props) { |
||||
return ( |
||||
<div className="mt-5"> |
||||
{/* toast1 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: "error", |
||||
title: "ارور شماره 1", |
||||
showCloseButton: true, |
||||
toast: true, |
||||
position: "top-end", |
||||
showConfirmButton: false, |
||||
timer: false, |
||||
timerProgressBar: false, |
||||
customClass: { |
||||
title: "error-toast-title", |
||||
closeButton: "error-toast-closeButton", |
||||
popup: "error-toast-modalBox", |
||||
iconColor: "icon-color", |
||||
}, |
||||
showConfirmButton: false, |
||||
timer: 3000, |
||||
timerProgressBar: true, |
||||
didOpen: (toast) => { |
||||
toast.addEventListener("mouseenter", Swal.stopTimer); |
||||
toast.addEventListener("mouseleave", Swal.resumeTimer); |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
const sweetAlert2 = () => { |
||||
Swal.fire({ |
||||
}) |
||||
} |
||||
> |
||||
toast1 |
||||
</button> |
||||
{/* toast2 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: "success", |
||||
title: "ارور شماره 2", |
||||
showCloseButton: true, |
||||
toast: true, |
||||
position: "top-end", |
||||
showConfirmButton: false, |
||||
timer: false, |
||||
timerProgressBar: false, |
||||
customClass: { |
||||
title: "success-toast-title", |
||||
closeButton: "success-toast-closeButton", |
||||
popup: "success-toast-modalBox", |
||||
}, |
||||
showConfirmButton: false, |
||||
timer: 3000, |
||||
timerProgressBar: true, |
||||
didOpen: (toast) => { |
||||
toast.addEventListener("mouseenter", Swal.stopTimer); |
||||
toast.addEventListener("mouseleave", Swal.resumeTimer); |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
const sweetAlert3 = () => { |
||||
Swal.fire({ |
||||
}) |
||||
} |
||||
> |
||||
toast2 |
||||
</button> |
||||
{/* toast3 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: false, |
||||
title: "ارور شماره 1", |
||||
showCloseButton: true, |
||||
toast: true, |
||||
position: "top-end", |
||||
showConfirmButton: false, |
||||
timer: false, |
||||
timerProgressBar: false, |
||||
customClass: { |
||||
title: "error-toast-title", |
||||
closeButton: "error-toast-closeButton", |
||||
popup: "error-toast-modalBox", |
||||
iconColor: "icon-color", |
||||
}, |
||||
showConfirmButton: false, |
||||
}); |
||||
}; |
||||
|
||||
const sweetAlert4 = () => { |
||||
Swal.fire({ |
||||
}) |
||||
} |
||||
> |
||||
toast3 |
||||
</button> |
||||
{/* toast4 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: false, |
||||
title: "ارور شماره 2", |
||||
showCloseButton: true, |
||||
toast: true, |
||||
position: "top-end", |
||||
showConfirmButton: false, |
||||
timer: false, |
||||
timerProgressBar: false, |
||||
customClass: { |
||||
title: "success-toast-title", |
||||
closeButton: "success-toast-closeButton", |
||||
popup: "success-toast-modalBox", |
||||
}, |
||||
showConfirmButton: false, |
||||
}); |
||||
}; |
||||
|
||||
const sweetAlert5 = () => { |
||||
Swal.fire({ |
||||
title: "ارور شماره 1", |
||||
}) |
||||
} |
||||
> |
||||
toast4 |
||||
</button> |
||||
{/* toast5 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: false, |
||||
title: "ارور شماره 2", |
||||
showCloseButton: true, |
||||
toast: true, |
||||
position: "top-end", |
||||
showConfirmButton: false, |
||||
timer: 3000, |
||||
timerProgressBar: true, |
||||
customClass: { |
||||
title: "error-toast-title", |
||||
closeButton: "error-toast-closeButton", |
||||
popup: "error-toast-modalBox", |
||||
}, |
||||
showConfirmButton: false, |
||||
timer: 3000, |
||||
timerProgressBar: true, |
||||
didOpen: (toast) => { |
||||
toast.addEventListener("mouseenter", Swal.stopTimer); |
||||
toast.addEventListener("mouseleave", Swal.resumeTimer); |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
const sweetAlert6 = () => { |
||||
Swal.fire({ |
||||
}) |
||||
} |
||||
> |
||||
toast5 |
||||
</button> |
||||
{/* toast6 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: false, |
||||
title: "ارور شماره 2", |
||||
showCloseButton: true, |
||||
toast: true, |
||||
position: "top-end", |
||||
showConfirmButton: false, |
||||
timer: 3000, |
||||
timerProgressBar: true, |
||||
customClass: { |
||||
title: "success-toast-title", |
||||
closeButton: "success-toast-closeButton", |
||||
popup: "success-toast-modalBox", |
||||
}, |
||||
showConfirmButton: false, |
||||
timer: 3000, |
||||
timerProgressBar: true, |
||||
didOpen: (toast) => { |
||||
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 |
||||
}) |
||||
} |
||||
> |
||||
toast6 |
||||
</button> |
||||
</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 TOAST_ALERT = "TOAST_ALERT"; |
||||
|
||||
@ -1,6 +1,10 @@ |
||||
import modalReducer from "./modalReducer"; |
||||
import toastReducer from "./toastReducer"; |
||||
import { combineReducers } from "redux"; |
||||
|
||||
const rootReducer = combineReducers({ modalReducer: modalReducer }); |
||||
const rootReducer = combineReducers({ |
||||
modalReducer: modalReducer, |
||||
toastReducer: toastReducer, |
||||
}); |
||||
|
||||
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