master
mahdi 3 years ago
parent ebea007b48
commit 651bec5f07
  1. 8
      src/App.js
  2. 264
      src/components/alert/Alert.js
  3. 179
      src/components/sweetAlertToast/SweetToast.js
  4. 386
      src/components/testt/Testt.js
  5. 18
      src/reducers/Public.js
  6. 9
      src/redux/actions/modalActions.js
  7. 1
      src/redux/actions/types.js
  8. 4
      src/redux/reducers/modalReducer.js
  9. 6
      src/redux/reducers/rootReducer.js
  10. 34
      src/redux/reducers/toastReducer.js

@ -49,14 +49,14 @@ function App() {
/> />
</div> </div>
</div> </div>
<Testt /> {/* <Testt /> */}
{/* <Header /> {/* <Header />
<Functionalities /> <Functionalities />
<Footer /> */} <Footer /> */}
{/* <Alert /> */} <Alert />
{/* <Toast /> {/* <Toast /> */}
<SweetAlert /> */} <SweetAlert />
</div> </div>
</div> </div>
</Provider> </Provider>

@ -1,75 +1,86 @@
import React from "react"; import React from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import "./alert.css"; import "./alert.css";
import undraw from "../../icons/undraw.png"; import { infoAlert } from "../../redux/actions/modalActions";
import { connect } from "react-redux";
const Alert = () => { function Alert(props) {
// error1 return (
const showAlert = () => { <div>
Swal.fire({ {/* 1 */}
title: "عنوان متن ارور", <button
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "متوجه شدم", confirmButtonText: "متوجه شدم",
showCloseButton: true, showCloseButton: true,
showCancelButton: false,
customClass: { customClass: {
title: "title-error-1", title: "title-error-1",
closeButton: "close-button-1", closeButton: "close-button-1",
confirmButton: "confirm-button-1", confirmButton: "confirm-button-1",
}, },
}); })
}; }
// error2 >
const showAlert2 = () => { alert1
Swal.fire({ </button>
title: "عنوان متن ارور", {/* 2 */}
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", <button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر", confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCancelButton: true, showCancelButton: true,
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: { customClass: {
title: "title-error-1", title: "title-error-1",
closeButton: "close-button-1", closeButton: "close-button-1",
confirmButton: "confirm-button-1", confirmButton: "confirm-button-1",
cancelButton: "cancle-button1", cancelButton: "cancle-button1",
}, },
}).then((result) => { })
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
} }
}); >
}; alert2
// error3 </button>
const showAlert3 = () => { {/* 3 */}
Swal.fire({ <button
title: "عنوان متن ارور", className="btn btn-danger btn-lg"
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر", confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: { customClass: {
title: "title-error-2", title: "title-error-2",
closeButton: "close-button-2", closeButton: "close-button-2",
confirmButton: "confirm-button-2", confirmButton: "confirm-button-2",
cancelButton: "cancle-button2", cancelButton: "cancle-button2",
}, },
showCloseButton: true, })
showCancelButton: true,
cancelButtonText: "متوجه شدم",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
} }
}); >
}; alert3
// error4 </button>
const showAlert4 = () => { {/* 4 */}
Swal.fire({ <button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "success", icon: "success",
title: "عنوان متن ارور", title: "اررور شماره 1",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر", confirmButtonText: "توضیح بیشتر",
showCloseButton: false,
showCancelButton: true, showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
customClass: { customClass: {
title: "title-error-4", title: "title-error-4",
@ -77,83 +88,90 @@ const Alert = () => {
cancelButton: "cancle-button2", cancelButton: "cancle-button2",
popup: "alert-popup4", popup: "alert-popup4",
}, },
}).then((result) => { })
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
} }
}); >
}; alert4
// error5 </button>
const showAlert5 = () => { {/* 5 */}
const { value: email } = Swal.fire({ <button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
input: "email", input: "email",
inputPlaceholder: "ایمیل خود را اینجا بنویسید", inputPlaceholder: "ایمیل خود را اینجا بنویسید",
imageUrl: "https://unsplash.it/400/200", imageUrl: "https://unsplash.it/400/200",
imageAlt: "Custom image", imageAlt: "Custom image",
showCloseButton: true,
imageWidth: 400, imageWidth: 400,
imageHeight: 200, imageHeight: 200,
confirmButtonText: "عضو شوید",
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>", html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
confirmButtonText: "عضو شوید",
showCancelButton: false,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: { customClass: {
confirmButton: "confirm-button-5", confirmButton: "confirm-button-5",
input: "input-error-5", input: "input-error-5",
closeButton: "close-button-2", closeButton: "close-button-2",
}, },
}); })
if (email) {
Swal.fire(`Entered email: ${email}`);
} }
}; >
// error6 alert5
const showAlert6 = () => { </button>
Swal.fire({ {/* 6 */}
title: "عنوان متن ارور", <button
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", className="btn btn-danger btn-lg"
confirmButtonText: "مشاهده امکانات", onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: false,
showCloseButton: true, showCloseButton: true,
customClass: { customClass: {
title: "title-error-1", title: "title-error-1",
closeButton: "close-button-6", closeButton: "close-button-6",
confirmButton: "confirm-button-1", confirmButton: "confirm-button-1",
}, },
}).then((result) => { })
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
} }
}); >
}; alert6
// error7 </button>
const showAlert7 = () => { {/* 7 */}
Swal.fire({ <button
title: "عنوان متن ارور", className="btn btn-danger btn-lg"
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر", confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCancelButton: true, showCancelButton: true,
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: { customClass: {
title: "title-error-7", title: "title-error-7",
closeButton: "close-button-7", closeButton: "close-button-7",
confirmButton: "confirm-button-7", confirmButton: "confirm-button-7",
cancelButton: "cancle-button7", cancelButton: "cancle-button7",
}, },
}).then((result) => { })
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
} }
}); >
}; alert7
// error8 </button>
const showAlert8 = () => { {/* 8 */}
Swal.fire({ <button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "error", icon: "error",
title: "این یک متن موفقیت امیز است!!!", title: ررور شماره 1",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر", confirmButtonText: "توضیح بیشتر",
showCloseButton: false,
showCancelButton: true, showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
customClass: { customClass: {
title: "title-error-8", title: "title-error-8",
@ -161,15 +179,16 @@ const Alert = () => {
cancelButton: "cancle-button7", cancelButton: "cancle-button7",
popup: "alert-popup8", popup: "alert-popup8",
}, },
}).then((result) => { })
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
} }
}); >
}; alert8
// error9 </button>
const showAlert9 = () => { {/* 9 */}
Swal.fire({ <button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "این ارور بسیار مهم ", title: "این ارور بسیار مهم ",
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>", html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
confirmButtonText: "رد کردن", confirmButtonText: "رد کردن",
@ -185,11 +204,16 @@ const Alert = () => {
popup: "alert-popup9", popup: "alert-popup9",
footer: "footer-error-9", footer: "footer-error-9",
}, },
}); })
}; }
// error10 >
const showAlert10 = () => { alert9
Swal.fire({ </button>
{/* 10 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "این ارور بسیار مهم ", title: "این ارور بسیار مهم ",
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>", html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
confirmButtonText: "رد کردن", confirmButtonText: "رد کردن",
@ -205,43 +229,19 @@ const Alert = () => {
popup: "alert-popup10", popup: "alert-popup10",
footer: "footer-error-9", footer: "footer-error-9",
}, },
}); })
}; }
>
return ( alert10
<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> </button>
</div> </div>
); );
}
const mapStateToProps = (state) => {
return {};
}; };
export default Alert; // export default Alert;
export default connect(mapStateToProps, { customAlert: infoAlert })(Alert);

@ -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
);

@ -243,3 +243,389 @@ const mapStateToProps = (state) => {
}; };
export default connect(mapStateToProps, { customAlert: infoAlert })(Testt); 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,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,4 +1,4 @@
import { INFO_ALERT } from "./types"; import { INFO_ALERT, TOAST_ALERT } from "./types";
export const infoAlert = (data) => (dispatch) => { export const infoAlert = (data) => (dispatch) => {
dispatch({ dispatch({
@ -6,3 +6,10 @@ export const infoAlert = (data) => (dispatch) => {
data: data, data: data,
}); });
}; };
export const toastAlert = (data) => (dispatch) => {
dispatch({
type: TOAST_ALERT,
data: data,
});
};

@ -1 +1,2 @@
export const INFO_ALERT = "INFO_ALERT"; export const INFO_ALERT = "INFO_ALERT";
export const TOAST_ALERT = "TOAST_ALERT";

@ -1,9 +1,7 @@
import { INFO_ALERT } from "../actions/types"; import { INFO_ALERT } from "../actions/types";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
const initialState = { const initialState = {};
showCloseButton: false,
};
const modalReducer = (state = initialState, action) => { const modalReducer = (state = initialState, action) => {
const { type, data } = action; const { type, data } = action;

@ -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…
Cancel
Save