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