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.

252 lines
9.2 KiB

3 years ago
// it has style inside index.scss ---> // Start Alert Component && end Alert Component
3 years ago
import React from "react";
import { alert } from "../../redux/actions";
3 years ago
import { connect } from "react-redux";
function Alert(props) {
props.confirmAlert();
3 years ago
return (
<div className="">
{/* 1 */}
<button
className="bg-red-600 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
icon: "success",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
3 years ago
confirmButton: "confirm-button-4",
cancelButton: "cancle-button4",
3 years ago
popup: "alert-popup4",
},
})
}
>
alert4
</button>
{/* 5 */}
<button
className="bg-red-600 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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-600 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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-600 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
icon: "error",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-8",
3 years ago
confirmButton: "confirm-button-8",
cancelButton: "cancle-button-8",
3 years ago
popup: "alert-popup8",
},
})
}
>
alert8
</button>
{/* 9 */}
<button
className="bg-red-600 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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-600 p-4 rounded text-white m-4"
3 years ago
onClick={() =>
props.confirmAlert({
3 years ago
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) => ({});
3 years ago
const mapDispatchToProps = {
confirmAlert: alert.confirm,
};
3 years ago
export default connect(mapStateToProps, mapDispatchToProps)(Alert);