Compare commits
No commits in common. 'e593759b36027b574a6f3b13a00a981fa98b57a2' and 'c4c4478a4c43a8cf8ddca2b1af2ad4111fdf0364' have entirely different histories.
e593759b36
...
c4c4478a4c
22 changed files with 411 additions and 1661 deletions
@ -1,247 +1,246 @@ |
||||
import React from "react"; |
||||
import Swal from "sweetalert2"; |
||||
import withReactContent from "sweetalert2-react-content"; |
||||
import "./alert.css"; |
||||
import { infoAlert } from "../../redux/actions/modalActions"; |
||||
import { connect } from "react-redux"; |
||||
import undraw from "../../icons/undraw.png"; |
||||
|
||||
function Alert(props) { |
||||
const Alert = () => { |
||||
// error1
|
||||
const showAlert = () => { |
||||
Swal.fire({ |
||||
title: "عنوان متن ارور", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "متوجه شدم", |
||||
showCloseButton: true, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-1", |
||||
confirmButton: "confirm-button-1", |
||||
}, |
||||
}); |
||||
}; |
||||
// error2
|
||||
const showAlert2 = () => { |
||||
Swal.fire({ |
||||
title: "عنوان متن ارور", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCloseButton: true, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-1", |
||||
confirmButton: "confirm-button-1", |
||||
cancelButton: "cancle-button1", |
||||
}, |
||||
}).then((result) => { |
||||
if (result.isConfirmed) { |
||||
Swal.fire("Deleted!", "Your file has been deleted.", "success"); |
||||
} |
||||
}); |
||||
}; |
||||
// error3
|
||||
const showAlert3 = () => { |
||||
Swal.fire({ |
||||
title: "عنوان متن ارور", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
customClass: { |
||||
title: "title-error-2", |
||||
closeButton: "close-button-2", |
||||
confirmButton: "confirm-button-2", |
||||
cancelButton: "cancle-button2", |
||||
}, |
||||
showCloseButton: true, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
}).then((result) => { |
||||
if (result.isConfirmed) { |
||||
Swal.fire("Deleted!", "Your file has been deleted.", "success"); |
||||
} |
||||
}); |
||||
}; |
||||
// error4
|
||||
const showAlert4 = () => { |
||||
Swal.fire({ |
||||
icon: "success", |
||||
title: "عنوان متن ارور", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCloseButton: false, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-4", |
||||
confirmButton: "confirm-button-2", |
||||
cancelButton: "cancle-button2", |
||||
popup: "alert-popup4", |
||||
}, |
||||
}).then((result) => { |
||||
if (result.isConfirmed) { |
||||
Swal.fire("Deleted!", "Your file has been deleted.", "success"); |
||||
} |
||||
}); |
||||
}; |
||||
// error5
|
||||
const showAlert5 = () => { |
||||
const { value: email } = Swal.fire({ |
||||
input: "email", |
||||
inputPlaceholder: "ایمیل خود را اینجا بنویسید", |
||||
imageUrl: "https://unsplash.it/400/200", |
||||
imageAlt: "Custom image", |
||||
showCloseButton: true, |
||||
imageWidth: 400, |
||||
imageHeight: 200, |
||||
confirmButtonText: "عضو شوید", |
||||
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>", |
||||
customClass: { |
||||
confirmButton: "confirm-button-5", |
||||
input: "input-error-5", |
||||
closeButton: "close-button-2", |
||||
}, |
||||
}); |
||||
|
||||
if (email) { |
||||
Swal.fire(`Entered email: ${email}`); |
||||
} |
||||
}; |
||||
// error6
|
||||
const showAlert6 = () => { |
||||
Swal.fire({ |
||||
title: "عنوان متن ارور", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "مشاهده امکانات", |
||||
showCloseButton: true, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-6", |
||||
confirmButton: "confirm-button-1", |
||||
}, |
||||
}).then((result) => { |
||||
if (result.isConfirmed) { |
||||
Swal.fire("Deleted!", "Your file has been deleted.", "success"); |
||||
} |
||||
}); |
||||
}; |
||||
// error7
|
||||
const showAlert7 = () => { |
||||
Swal.fire({ |
||||
title: "عنوان متن ارور", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCloseButton: true, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-7", |
||||
closeButton: "close-button-7", |
||||
confirmButton: "confirm-button-7", |
||||
cancelButton: "cancle-button7", |
||||
}, |
||||
}).then((result) => { |
||||
if (result.isConfirmed) { |
||||
Swal.fire("Deleted!", "Your file has been deleted.", "success"); |
||||
} |
||||
}); |
||||
}; |
||||
// error8
|
||||
const showAlert8 = () => { |
||||
Swal.fire({ |
||||
icon: "error", |
||||
title: "این یک متن موفقیت امیز است!!!", |
||||
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCloseButton: false, |
||||
showCancelButton: true, |
||||
cancelButtonText: "متوجه شدم", |
||||
customClass: { |
||||
title: "title-error-8", |
||||
confirmButton: "confirm-button-7", |
||||
cancelButton: "cancle-button7", |
||||
popup: "alert-popup8", |
||||
}, |
||||
}).then((result) => { |
||||
if (result.isConfirmed) { |
||||
Swal.fire("Deleted!", "Your file has been deleted.", "success"); |
||||
} |
||||
}); |
||||
}; |
||||
// error9
|
||||
const showAlert9 = () => { |
||||
Swal.fire({ |
||||
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", |
||||
}, |
||||
}); |
||||
}; |
||||
// error10
|
||||
const showAlert10 = () => { |
||||
Swal.fire({ |
||||
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", |
||||
}, |
||||
}); |
||||
}; |
||||
return ( |
||||
<div> |
||||
{/* 1 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 |
||||
<div className="mt-5"> |
||||
<button className="btn btn-danger btn-lg" onClick={showAlert}> |
||||
اررور 1 |
||||
</button> |
||||
{/* 2 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert2}> |
||||
اررور 2 |
||||
</button> |
||||
{/* 3 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg eroorr" onClick={showAlert3}> |
||||
اررور 3 |
||||
</button> |
||||
{/* 4 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert4}> |
||||
4 اررور |
||||
</button> |
||||
{/* 5 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert5}> |
||||
5 اررور |
||||
</button> |
||||
{/* 6 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert6}> |
||||
6 اررور |
||||
</button> |
||||
{/* 7 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert7}> |
||||
7 اررور |
||||
</button> |
||||
{/* 8 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert8}> |
||||
8 اررور |
||||
</button> |
||||
{/* 9 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert9}> |
||||
9 اررور |
||||
</button> |
||||
{/* 10 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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 className="btn btn-danger btn-lg" onClick={showAlert10}> |
||||
10 اررور |
||||
</button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => { |
||||
return {}; |
||||
}; |
||||
|
||||
// export default Alert;
|
||||
|
||||
export default connect(mapStateToProps, { customAlert: infoAlert })(Alert); |
||||
export default Alert; |
||||
|
||||
@ -1,59 +0,0 @@ |
||||
.swal2-popup.swal2-toast .swal2-title { |
||||
font-size: 1em !important; |
||||
} |
||||
.swal2-popup.swal2-toast .swal2-close { |
||||
margin-left: 0px !important; |
||||
margin-top: 0px !important; |
||||
} |
||||
.swal2-timer-progress-bar-container { |
||||
direction: ltr !important; |
||||
} |
||||
/* .swal2-timer-progress-bar { |
||||
background-color: var(--toast-bg-error) !important; |
||||
} */ |
||||
.swal2-icon { |
||||
font-size: 13px !important; |
||||
} |
||||
/* !error Toast */ |
||||
.error-toast-title { |
||||
color: var(--error-color7) !important; |
||||
} |
||||
.error-toast-modalBox, |
||||
.error-toast-modalBox-timer { |
||||
background-color: var(--toast-bg-error) !important; |
||||
} |
||||
.error-toast-closeButton { |
||||
background-color: #ffc6c6 !important; |
||||
color: var(--white) !important; |
||||
padding: 15px !important; |
||||
} |
||||
/* *success Toast */ |
||||
|
||||
.success-toast-title { |
||||
color: var(--toast-success-color) !important; |
||||
} |
||||
.success-toast-modalBox, |
||||
.success-toast-modalBox-timer { |
||||
background-color: var(--toast-bg-success) !important; |
||||
} |
||||
.success-toast-closeButton { |
||||
background-color: #77df65 !important; |
||||
color: var(--toast-bg-success) !important; |
||||
padding: 15px !important; |
||||
} |
||||
|
||||
.error-toast-modalBox-timer .swal2-timer-progress-bar-container { |
||||
background-color: var(--error-color7) !important; |
||||
} |
||||
|
||||
.error-toast-modalBox-timer .swal2-timer-progress-bar { |
||||
background-color: var(--toast-bg-error) !important; |
||||
} |
||||
|
||||
.success-toast-modalBox-timer .swal2-timer-progress-bar-container { |
||||
background-color: var(--toast-success-color) !important; |
||||
} |
||||
|
||||
.success-toast-modalBox-timer .swal2-timer-progress-bar { |
||||
background-color: var(--toast-bg-success) !important; |
||||
} |
||||
@ -1,160 +0,0 @@ |
||||
import React from "react"; |
||||
import "./SweetAlert.css"; |
||||
import { toastAlert } from "../../redux/actions/modalActions"; |
||||
import { connect } from "react-redux"; |
||||
import Swal from "sweetalert2"; |
||||
|
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
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-timer", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
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-timer", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
toast6 |
||||
</button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => { |
||||
return {}; |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, { customAlert: toastAlert })( |
||||
SweetToast |
||||
); |
||||
@ -1,631 +0,0 @@ |
||||
import React from "react"; |
||||
import "./testt.css"; |
||||
import { infoAlert } from "../../redux/actions/modalActions"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
function Testt(props) { |
||||
return ( |
||||
<div> |
||||
{/* 1 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "متوجه شدم", |
||||
showCloseButton: true, |
||||
showCancelButton: false, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-1", |
||||
confirmButton: "confirm-button-1", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
{/* 2 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
{/* 3 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
{/* 4 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 4 |
||||
</button> |
||||
{/* 5 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 4 |
||||
</button> |
||||
{/* 6 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
onClick={() => |
||||
props.customAlert({ |
||||
title: "اررور شماره 1", |
||||
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.", |
||||
confirmButtonText: "توضیح بیشتر", |
||||
showCancelButton: false, |
||||
showCloseButton: true, |
||||
customClass: { |
||||
title: "title-error-1", |
||||
closeButton: "close-button-6", |
||||
confirmButton: "confirm-button-1", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
{/* 7 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
{/* 8 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 4 |
||||
</button> |
||||
{/* 9 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
{/* 10 */} |
||||
<button |
||||
className="btn btn-danger btn-lg" |
||||
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", |
||||
}, |
||||
}) |
||||
} |
||||
> |
||||
اررور 1 |
||||
</button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => { |
||||
return {}; |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, { customAlert: infoAlert })(Testt); |
||||
|
||||
// const Alert = () => {
|
||||
// // error1
|
||||
// const showAlert = () => {
|
||||
// Swal.fire({
|
||||
// title: "عنوان متن ارور",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "متوجه شدم",
|
||||
// showCloseButton: true,
|
||||
// customClass: {
|
||||
// title: "title-error-1",
|
||||
// closeButton: "close-button-1",
|
||||
// confirmButton: "confirm-button-1",
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
// // error2
|
||||
// const showAlert2 = () => {
|
||||
// Swal.fire({
|
||||
// title: "عنوان متن ارور",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "توضیح بیشتر",
|
||||
// showCloseButton: true,
|
||||
// showCancelButton: true,
|
||||
// cancelButtonText: "متوجه شدم",
|
||||
// customClass: {
|
||||
// title: "title-error-1",
|
||||
// closeButton: "close-button-1",
|
||||
// confirmButton: "confirm-button-1",
|
||||
// cancelButton: "cancle-button1",
|
||||
// },
|
||||
// }).then((result) => {
|
||||
// if (result.isConfirmed) {
|
||||
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // error3
|
||||
// const showAlert3 = () => {
|
||||
// Swal.fire({
|
||||
// title: "عنوان متن ارور",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "توضیح بیشتر",
|
||||
// customClass: {
|
||||
// title: "title-error-2",
|
||||
// closeButton: "close-button-2",
|
||||
// confirmButton: "confirm-button-2",
|
||||
// cancelButton: "cancle-button2",
|
||||
// },
|
||||
// showCloseButton: true,
|
||||
// showCancelButton: true,
|
||||
// cancelButtonText: "متوجه شدم",
|
||||
// }).then((result) => {
|
||||
// if (result.isConfirmed) {
|
||||
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // error4
|
||||
// const showAlert4 = () => {
|
||||
// Swal.fire({
|
||||
// icon: "success",
|
||||
// title: "عنوان متن ارور",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "توضیح بیشتر",
|
||||
// showCloseButton: false,
|
||||
// showCancelButton: true,
|
||||
// cancelButtonText: "متوجه شدم",
|
||||
// customClass: {
|
||||
// title: "title-error-4",
|
||||
// confirmButton: "confirm-button-2",
|
||||
// cancelButton: "cancle-button2",
|
||||
// popup: "alert-popup4",
|
||||
// },
|
||||
// }).then((result) => {
|
||||
// if (result.isConfirmed) {
|
||||
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // error5
|
||||
// const showAlert5 = () => {
|
||||
// const { value: email } = Swal.fire({
|
||||
// input: "email",
|
||||
// inputPlaceholder: "ایمیل خود را اینجا بنویسید",
|
||||
// imageUrl: "https://unsplash.it/400/200",
|
||||
// imageAlt: "Custom image",
|
||||
// showCloseButton: true,
|
||||
// imageWidth: 400,
|
||||
// imageHeight: 200,
|
||||
// confirmButtonText: "عضو شوید",
|
||||
// html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
|
||||
// customClass: {
|
||||
// confirmButton: "confirm-button-5",
|
||||
// input: "input-error-5",
|
||||
// closeButton: "close-button-2",
|
||||
// },
|
||||
// });
|
||||
|
||||
// if (email) {
|
||||
// Swal.fire(`Entered email: ${email}`);
|
||||
// }
|
||||
// };
|
||||
// // error6
|
||||
// const showAlert6 = () => {
|
||||
// Swal.fire({
|
||||
// title: "عنوان متن ارور",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "مشاهده امکانات",
|
||||
// showCloseButton: true,
|
||||
// customClass: {
|
||||
// title: "title-error-1",
|
||||
// closeButton: "close-button-6",
|
||||
// confirmButton: "confirm-button-1",
|
||||
// },
|
||||
// }).then((result) => {
|
||||
// if (result.isConfirmed) {
|
||||
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // error7
|
||||
// const showAlert7 = () => {
|
||||
// Swal.fire({
|
||||
// title: "عنوان متن ارور",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "توضیح بیشتر",
|
||||
// showCloseButton: true,
|
||||
// showCancelButton: true,
|
||||
// cancelButtonText: "متوجه شدم",
|
||||
// customClass: {
|
||||
// title: "title-error-7",
|
||||
// closeButton: "close-button-7",
|
||||
// confirmButton: "confirm-button-7",
|
||||
// cancelButton: "cancle-button7",
|
||||
// },
|
||||
// }).then((result) => {
|
||||
// if (result.isConfirmed) {
|
||||
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // error8
|
||||
// const showAlert8 = () => {
|
||||
// Swal.fire({
|
||||
// icon: "error",
|
||||
// title: "این یک متن موفقیت امیز است!!!",
|
||||
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
|
||||
// confirmButtonText: "توضیح بیشتر",
|
||||
// showCloseButton: false,
|
||||
// showCancelButton: true,
|
||||
// cancelButtonText: "متوجه شدم",
|
||||
// customClass: {
|
||||
// title: "title-error-8",
|
||||
// confirmButton: "confirm-button-7",
|
||||
// cancelButton: "cancle-button7",
|
||||
// popup: "alert-popup8",
|
||||
// },
|
||||
// }).then((result) => {
|
||||
// if (result.isConfirmed) {
|
||||
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// // error9
|
||||
// const showAlert9 = () => {
|
||||
// Swal.fire({
|
||||
// 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",
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
// // error10
|
||||
// const showAlert10 = () => {
|
||||
// Swal.fire({
|
||||
// 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",
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="mt-5">
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert}>
|
||||
// اررور 1
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert2}>
|
||||
// اررور 2
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg eroorr" onClick={showAlert3}>
|
||||
// اررور 3
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert4}>
|
||||
// 4 اررور
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert5}>
|
||||
// 5 اررور
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert6}>
|
||||
// 6 اررور
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert7}>
|
||||
// 7 اررور
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert8}>
|
||||
// 8 اررور
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert9}>
|
||||
// 9 اررور
|
||||
// </button>
|
||||
// <button className="btn btn-danger btn-lg" onClick={showAlert10}>
|
||||
// 10 اررور
|
||||
// </button>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// toast
|
||||
|
||||
// const SweetToast = () => {
|
||||
// const sweetAlert1 = () => {
|
||||
// Swal.fire({
|
||||
// icon: "error",
|
||||
// title: "ارور شماره 1",
|
||||
// showCloseButton: true,
|
||||
// toast: true,
|
||||
// position: "top-end",
|
||||
// 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({
|
||||
// icon: "success",
|
||||
// title: "ارور شماره 2",
|
||||
// showCloseButton: true,
|
||||
// toast: true,
|
||||
// position: "top-end",
|
||||
// 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({
|
||||
// title: "ارور شماره 1",
|
||||
// showCloseButton: true,
|
||||
// toast: true,
|
||||
// position: "top-end",
|
||||
// customClass: {
|
||||
// title: "error-toast-title",
|
||||
// closeButton: "error-toast-closeButton",
|
||||
// popup: "error-toast-modalBox",
|
||||
// },
|
||||
// showConfirmButton: false,
|
||||
// });
|
||||
// };
|
||||
|
||||
// const sweetAlert4 = () => {
|
||||
// Swal.fire({
|
||||
// title: "ارور شماره 2",
|
||||
// showCloseButton: true,
|
||||
// toast: true,
|
||||
// position: "top-end",
|
||||
// customClass: {
|
||||
// title: "success-toast-title",
|
||||
// closeButton: "success-toast-closeButton",
|
||||
// popup: "success-toast-modalBox",
|
||||
// },
|
||||
// showConfirmButton: false,
|
||||
// });
|
||||
// };
|
||||
|
||||
// const sweetAlert5 = () => {
|
||||
// Swal.fire({
|
||||
// title: "ارور شماره 1",
|
||||
// showCloseButton: true,
|
||||
// toast: true,
|
||||
// position: "top-end",
|
||||
// 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({
|
||||
// title: "ارور شماره 2",
|
||||
// showCloseButton: true,
|
||||
// toast: true,
|
||||
// position: "top-end",
|
||||
// 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
|
||||
// </button>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default SweetToast;
|
||||
@ -1,15 +0,0 @@ |
||||
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, |
||||
}); |
||||
}; |
||||
@ -1,2 +0,0 @@ |
||||
export const INFO_ALERT = "INFO_ALERT"; |
||||
export const TOAST_ALERT = "TOAST_ALERT"; |
||||
@ -1,44 +0,0 @@ |
||||
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; |
||||
@ -1,10 +0,0 @@ |
||||
import modalReducer from "./modalReducer"; |
||||
import toastReducer from "./toastReducer"; |
||||
import { combineReducers } from "redux"; |
||||
|
||||
const rootReducer = combineReducers({ |
||||
modalReducer: modalReducer, |
||||
toastReducer: toastReducer, |
||||
}); |
||||
|
||||
export default rootReducer; |
||||
@ -1,34 +0,0 @@ |
||||
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; |
||||
@ -1,6 +0,0 @@ |
||||
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