// 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 . confirmAlert ( {
title : "اررور شماره 1" ,
text : "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است." ,
confirmButtonText : "متوجه شدم" ,
showCloseButton : true ,
showCancelButton : false ,
customClass : {
title : "title-error-1" ,
closeButton : "close-button-1" ,
confirmButton : "confirm-button-1" ,
} ,
} )
}
>
alert1
< / b u t t o n >
{ /* 2 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 3 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 4 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 5 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 6 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
title : "اررور شماره 1" ,
text : "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است." ,
confirmButtonText : "توضیح بیشتر" ,
showCancelButton : false ,
showCloseButton : true ,
customClass : {
title : "title-error-1" ,
closeButton : "close-button-6" ,
confirmButton : "confirm-button-1" ,
} ,
} )
}
>
alert6
< / b u t t o n >
{ /* 7 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 8 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 9 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
{ /* 10 */ }
< button
className = "bg-red-600 p-4 rounded text-white m-4"
onClick = { ( ) =>
props . confirmAlert ( {
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
< / b u t t o n >
< / d i v >
) ;
}
const mapStateToProps = ( state ) => ( { } ) ;
const mapDispatchToProps = {
confirmAlert : alert . confirm ,
} ;
export default connect ( mapStateToProps , mapDispatchToProps ) ( Alert ) ;