You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
249 lines
8.8 KiB
249 lines
8.8 KiB
3 years ago
|
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);
|