parent
505c87e9f1
commit
d7344da484
13 changed files with 1063 additions and 21 deletions
@ -0,0 +1,248 @@ |
||||
import React from "react"; |
||||
import "./index.scss"; |
||||
|
||||
import { infoAlert } from "../../redux/actions/modalActions"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
function Alert(props) { |
||||
return ( |
||||
<div className=""> |
||||
{/* 1 */} |
||||
<button |
||||
className="bg-red-600 p-4 rounded text-white " |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "متوجه شدم", |
||||
showCloseButton: true, |
||||
showCancelButton: false, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-1", |
||||
confirmButton: "confirm-button-1", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert1 |
||||
</button> |
||||
{/* 2 */} |
||||
<button |
||||
className="bg-red-600" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
showCloseButton: true, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-1", |
||||
confirmButton: "confirm-button-1", |
||||
cancelButton: "cancle-button1", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert2 |
||||
</button> |
||||
{/* 3 */} |
||||
<button |
||||
className="bg-red-600" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: true, |
||||
showCloseButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-2", |
||||
closeButton: "close-button-2", |
||||
confirmButton: "confirm-button-2", |
||||
cancelButton: "cancle-button2", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert3 |
||||
</button> |
||||
{/* 4 */} |
||||
<button |
||||
className="bg-red-600" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: "success", |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: true, |
||||
showCloseButton: false, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-4", |
||||
confirmButton: "confirm-button-2", |
||||
cancelButton: "cancle-button2", |
||||
popup: "alert-popup4", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert4 |
||||
</button> |
||||
{/* 5 */} |
||||
<button |
||||
className="bg-red-600" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
input: "email", |
||||
inputPlaceholder: "ایمیل خود را اینجا بنویسید", |
||||
imageUrl: "https://unsplash.it/400/200", |
||||
imageAlt: "Custom image", |
||||
imageWidth: 400, |
||||
imageHeight: 200, |
||||
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>", |
||||
confirmButtonText: "عضو شوید", |
||||
showCancelButton: false, |
||||
showCloseButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
confirmButton: "confirm-button-5", |
||||
input: "input-error-5", |
||||
closeButton: "close-button-2", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert5 |
||||
</button> |
||||
{/* 6 */} |
||||
<button |
||||
className="bg-red-600" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: false, |
||||
showCloseButton: true, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-6", |
||||
confirmButton: "confirm-button-1", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert6 |
||||
</button> |
||||
{/* 7 */} |
||||
<button |
||||
className="bg-red-500" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
showCloseButton: true, |
||||
customClass: { |
||||
title: "title-error-7", |
||||
closeButton: "close-button-7", |
||||
confirmButton: "confirm-button-7", |
||||
cancelButton: "cancle-button7", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert7 |
||||
</button> |
||||
{/* 8 */} |
||||
<button |
||||
className="bg-red-500" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
icon: "error", |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: true, |
||||
showCloseButton: false, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-8", |
||||
confirmButton: "confirm-button-7", |
||||
cancelButton: "cancle-button7", |
||||
popup: "alert-popup8", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert8 |
||||
</button> |
||||
{/* 9 */} |
||||
<button |
||||
className="bg-red-500" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "این ارور بسیار مهم ", |
||||
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>", |
||||
confirmButtonText: "رد کردن", |
||||
showCloseButton: true, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
footer: '<a href="">یک لینک در این قسمت است</a>', |
||||
customClass: { |
||||
title: "title-error-9", |
||||
closeButton: "close-button-9", |
||||
confirmButton: "confirm-button-9", |
||||
cancelButton: "cancle-button9", |
||||
popup: "alert-popup9", |
||||
footer: "footer-error-9", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert9 |
||||
</button> |
||||
{/* 10 */} |
||||
<button |
||||
className="bg-red-500" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "این ارور بسیار مهم ", |
||||
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>", |
||||
confirmButtonText: "رد کردن", |
||||
showCloseButton: true, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
footer: '<a href="">یک لینک در این قسمت است</a>', |
||||
customClass: { |
||||
title: "title-error-9", |
||||
closeButton: "close-button-10", |
||||
confirmButton: "confirm-button-10", |
||||
cancelButton: "cancle-button10", |
||||
popup: "alert-popup10", |
||||
footer: "footer-error-9", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
alert10 |
||||
</button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => { |
||||
return {}; |
||||
}; |
||||
|
||||
// export default Alert;
|
||||
|
||||
export default connect(mapStateToProps, { customAlert: infoAlert })(Alert); |
||||
@ -0,0 +1,255 @@ |
||||
/* TODO common styles */ |
||||
.swal2-container.swal2-center > .swal2-popup { |
||||
border: solid 2px #707070 !important; |
||||
padding: 10px !important; |
||||
} |
||||
/* ? کلاس تمامی تایتل ها */ |
||||
.swal2-title { |
||||
text-align: right !important; |
||||
font-size: 26px !important; |
||||
} |
||||
/* ? کلاس متن داخل الرت باکس */ |
||||
.swal2-html-container { |
||||
text-align: justify !important; |
||||
line-height: 1.8 !important; |
||||
color: $contentcolor !important; |
||||
font-weight: 600 !important; |
||||
} |
||||
/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */ |
||||
.swal2-rtl .swal2-close { |
||||
border-radius: 10px !important; |
||||
margin-left: 10px !important; |
||||
margin-top: 13px !important; |
||||
transition: all 0.4s !important; |
||||
} |
||||
/* ? کلاس کانفرم باتن */ |
||||
.swal2-styled.swal2-confirm { |
||||
transition: all 0.4s !important; |
||||
outline: none !important; |
||||
} |
||||
/* ? کلاس هاور کانفرم باتن */ |
||||
.swal2-styled.swal2-confirm:hover { |
||||
transform: translateY(-5px) !important; |
||||
} |
||||
/* ? کلاس کنسل باتن */ |
||||
.swal2-styled.swal2-cancel { |
||||
transition: all 0.4s !important; |
||||
} |
||||
/* ? کلاس هاور کنسل باتن */ |
||||
.swal2-styled.swal2-cancel:hover { |
||||
transform: translateY(-5px) !important; |
||||
} |
||||
/* ? ایکن اررور */ |
||||
.swal2-icon.swal2-error { |
||||
border-color: var(--error-color7-button) !important; |
||||
color: var(--error-color7-button) !important; |
||||
} |
||||
/* !error 1 */ |
||||
/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */ |
||||
/* TODO باکس اول از سمت راست در فایل پی اس دی */ |
||||
/* ? تایتل */ |
||||
.title-error-1 { |
||||
color: var(--error-color1) !important; |
||||
} |
||||
|
||||
.eroorr:focus { |
||||
outline: none !important; |
||||
box-shadow: 0px 0px 0px black !important; |
||||
border: 0px !important; |
||||
} |
||||
/* ? دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-1 { |
||||
background-color: var(--error-color1) !important; |
||||
color: var(--white) !important; |
||||
} |
||||
/* ? هاور دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-1:hover { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color1) !important; |
||||
border: solid 4px var(--error-color1) !important; |
||||
} |
||||
/* ? کانفرم باتن */ |
||||
.confirm-button-1 { |
||||
background-color: var(--white) !important; |
||||
border: solid 2px var(--error-color1) !important; |
||||
color: var(--error-color1) !important; |
||||
text-align: left !important; |
||||
} |
||||
/* ? هاور کانفرم باتن */ |
||||
.confirm-button-1:hover { |
||||
background-color: var(--error-color1) !important; |
||||
color: var(--white) !important; |
||||
} |
||||
/* !error 2 */ |
||||
/* ? کنسل باتن */ |
||||
.cancle-button1 { |
||||
background-color: var(--error-color1) !important; |
||||
color: var(--white) !important; |
||||
border: solid 2px var(--error-color1) !important; |
||||
} |
||||
/* ? هاور کنسل باتن */ |
||||
.cancle-button1:hover { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color1) !important; |
||||
} |
||||
/* !error3 */ |
||||
/* ? تایتل */ |
||||
.title-error-2 { |
||||
color: var(--error-color2) !important; |
||||
} |
||||
/* ? دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-2 { |
||||
background-color: var(--error-color2) !important; |
||||
color: var(--white) !important; |
||||
} |
||||
/* ? هاور دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-2:hover { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color2) !important; |
||||
border: solid 4px var(--error-color2) !important; |
||||
} |
||||
/* ? کانفرم باتن */ |
||||
.confirm-button-2 { |
||||
background-color: var(--white) !important; |
||||
border: solid 2px var(--error-color2) !important; |
||||
color: var(--error-color2) !important; |
||||
} |
||||
/* ? هاور کانفرم باتن */ |
||||
.confirm-button-2:hover { |
||||
background-color: var(--error-color2) !important; |
||||
color: var(--white) !important; |
||||
} |
||||
/* ? کنسل باتن */ |
||||
.cancle-button2 { |
||||
background-color: var(--error-color2) !important; |
||||
color: var(--white) !important; |
||||
border: solid 2px var(--error-color2) !important; |
||||
} |
||||
/* ? هاور کنسل باتن */ |
||||
.cancle-button2:hover { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color2) !important; |
||||
} |
||||
/* !error4 */ |
||||
/* ? تایتل */ |
||||
.title-error-4 { |
||||
text-align: center !important; |
||||
color: var(--error-color2) !important; |
||||
} |
||||
.alert-popup4 { |
||||
width: 440px !important; |
||||
} |
||||
/* !error5 */ |
||||
/* ? کانفرم باتن */ |
||||
.confirm-button-5 { |
||||
background-color: var(--error-color2) !important; |
||||
margin-top: -81px !important; |
||||
margin-left: -260px !important; |
||||
padding: 12px 15px !important; |
||||
border-top-right-radius: 0px !important; |
||||
border-bottom-right-radius: 0px !important; |
||||
} |
||||
/* ? اینپوت فیلد */ |
||||
.input-error-5 { |
||||
width: 70% !important; |
||||
height: 47px !important ; |
||||
border-top-left-radius: 0px !important; |
||||
border-bottom-left-radius: 0px !important; |
||||
} |
||||
/* !error6 */ |
||||
/* ? دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-6 { |
||||
color: var(--error-color1) !important; |
||||
} |
||||
/* ? هاور دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-6:hover { |
||||
background-color: var(--error-color1) !important; |
||||
color: var(--white) !important; |
||||
border: solid 4px var(--error-color1) !important; |
||||
} |
||||
/* !error7 */ |
||||
/* ? تایتل */ |
||||
.title-error-7 { |
||||
color: var(--error-color7) !important; |
||||
} |
||||
/* ? دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-7 { |
||||
background-color: var(--error-color7-button) !important; |
||||
color: var(--white) !important; |
||||
} |
||||
/* ? هاور دکمه ضربدر بالا سمت چپ */ |
||||
.close-button-7:hover { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color7) !important; |
||||
border: solid 4px var(--error-color7-button) !important; |
||||
} |
||||
/* ? کانفرم باتن */ |
||||
.confirm-button-7 { |
||||
background-color: var(--white) !important; |
||||
border: solid 2px var(--error-color7-button) !important; |
||||
color: var(--error-color7) !important; |
||||
} |
||||
/* ? هاور کانفرم باتن */ |
||||
.confirm-button-7:hover { |
||||
background-color: var(--error-color7-button) !important; |
||||
color: var(--white) !important; |
||||
} |
||||
/* ? کنسل باتن */ |
||||
.cancle-button7 { |
||||
background-color: var(--error-color7-button) !important; |
||||
color: var(--white) !important; |
||||
border: solid 2px var(--error-color7-button) !important; |
||||
} |
||||
/* ? هاور کنسل باتن */ |
||||
.cancle-button7:hover { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color7-button) !important; |
||||
} |
||||
/* !error8 */ |
||||
.title-error-8 { |
||||
color: var(--error-color7-button) !important; |
||||
text-align: center !important; |
||||
} |
||||
.alert-popup8 { |
||||
width: 440px !important; |
||||
} |
||||
/* !error9 */ |
||||
.title-error-9 { |
||||
color: var(--white) !important; |
||||
} |
||||
.alert-popup9 { |
||||
background-color: var(--error-color2) !important; |
||||
border-color: var(--error-color2) !important; |
||||
} |
||||
.close-button-9 { |
||||
background-color: var(--toast-bg-success) !important; |
||||
color: var(--toast-success-color) !important; |
||||
} |
||||
.confirm-button-9 { |
||||
background-color: #35bb20 !important; |
||||
} |
||||
.cancle-button9 { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color2) !important; |
||||
} |
||||
.footer-error-9 a { |
||||
color: var(--white) !important; |
||||
border-bottom-color: var(--white) !important; |
||||
font-size: 18px !important; |
||||
} |
||||
/* !error10 */ |
||||
.alert-popup10 { |
||||
background-color: var(--error-color7-button) !important; |
||||
border-color: var(--error-color7-button) !important; |
||||
} |
||||
.close-button-10 { |
||||
background-color: #fd6a6a !important; |
||||
color: var(--white) !important; |
||||
} |
||||
.confirm-button-10 { |
||||
background-color: #bb2020 !important; |
||||
} |
||||
.cancle-button10 { |
||||
background-color: var(--white) !important; |
||||
color: var(--error-color7-button) !important; |
||||
} |
||||
@ -0,0 +1,157 @@ |
||||
import React from "react"; |
||||
// import "./SweetAlert.css";
|
||||
import { toastAlert } from "../../redux/actions/modalActions"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
function Toast(props) { |
||||
return ( |
||||
<div className="mt-5"> |
||||
{/* toast1 */} |
||||
<button |
||||
className="bg-blue-600" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast1 |
||||
</button> |
||||
{/* toast2 */} |
||||
<button |
||||
className="bg-blue-600" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast2 |
||||
</button> |
||||
{/* toast3 */} |
||||
<button |
||||
className="bg-blue-600" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast3 |
||||
</button> |
||||
{/* toast4 */} |
||||
<button |
||||
className="bg-blue-600" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast4 |
||||
</button> |
||||
{/* toast5 */} |
||||
<button |
||||
className="bg-blue-600" |
||||
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-timer", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast5 |
||||
</button> |
||||
{/* toast6 */} |
||||
<button |
||||
className="bg-blue-600" |
||||
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-timer", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast6 |
||||
</button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => { |
||||
return {}; |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, { customAlert: toastAlert })(Toast); |
||||
@ -0,0 +1,15 @@ |
||||
import { INFO_ALERT, TOAST_ALERT } from "./types"; |
||||
|
||||
export const infoAlert = (data) => (dispatch) => { |
||||
dispatch({ |
||||
type: INFO_ALERT, |
||||
data: data, |
||||
}); |
||||
}; |
||||
|
||||
export const toastAlert = (data) => (dispatch) => { |
||||
dispatch({ |
||||
type: TOAST_ALERT, |
||||
data: data, |
||||
}); |
||||
}; |
||||
@ -0,0 +1,2 @@ |
||||
export const INFO_ALERT = "INFO_ALERT"; |
||||
export const TOAST_ALERT = "TOAST_ALERT"; |
||||
@ -0,0 +1,44 @@ |
||||
import { INFO_ALERT } from "../actions/types"; |
||||
import Swal from "sweetalert2"; |
||||
|
||||
const initialState = {}; |
||||
|
||||
const modalReducer = (state = initialState, action) => { |
||||
const { type, data } = action; |
||||
switch (type) { |
||||
case INFO_ALERT: |
||||
Swal.fire({ |
||||
icon: data.icon, |
||||
title: data.title, |
||||
text: data.text, |
||||
input: data.input, |
||||
inputPlaceholder: data.inputPlaceholder, |
||||
imageUrl: data.imageUrl, |
||||
imageAlt: data.imageAlt, |
||||
imageWidth: data.imageWidth, |
||||
imageHeight: data.imageHeight, |
||||
confirmButtonText: data.confirmButtonText, |
||||
showCloseButton: data.showCloseButton, |
||||
showCancelButton: data.showCancelButton, |
||||
cancelButtonText: data.cancelButtonText, |
||||
html: data.html, |
||||
footer: data.footer, |
||||
customClass: { |
||||
title: data.customClass.title, |
||||
closeButton: data.customClass.closeButton, |
||||
confirmButton: data.customClass.confirmButton, |
||||
cancelButton: data.customClass.cancelButton, |
||||
popup: data.customClass.popup, |
||||
input: data.customClass.input, |
||||
footer: data.customClass.footer, |
||||
}, |
||||
}); |
||||
return { |
||||
...state, |
||||
}; |
||||
default: |
||||
return state; |
||||
} |
||||
}; |
||||
|
||||
export default modalReducer; |
||||
@ -0,0 +1,10 @@ |
||||
import modalReducer from "./modalReducer"; |
||||
import toastReducer from "./toastReducer"; |
||||
import { combineReducers } from "redux"; |
||||
|
||||
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; |
||||
@ -0,0 +1,6 @@ |
||||
import { createStore, applyMiddleware } from "redux"; |
||||
import thunk from "redux-thunk"; |
||||
import rootReducer from "./reducers/rootReducer"; |
||||
|
||||
const store = createStore(rootReducer, applyMiddleware(thunk)); |
||||
export default store; |
||||
Loading…
Reference in new issue