master
mahdi andalib 3 years ago
parent c4af8618c2
commit a7b9032459
  1. 4
      src/App.js
  2. 4
      src/components/Alert/index.js
  3. 108
      src/components/Alert/index.scss
  4. 18
      src/components/ReactTable4/BasicTable.js

@ -72,7 +72,7 @@ function App() {
{/* <Design2D /> */}
{/* <Features /> */}
{/* <Feedback /> */}
{/* <Alert /> */}
<Alert />
{/* <Toast /> */}
{/* <ProductSuggestion /> */}
{/* <ProductImage /> */}
@ -90,7 +90,7 @@ function App() {
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
<ReactTable4 />
{/* <ReactTable4 /> */}
{/* <Digikala /> */}
{/* <DigikalaShop /> */}
{/* <HeaderDesign1 />

@ -7,7 +7,9 @@ import { connect } from "react-redux";
function Alert(props) {
return (
<div className="">
<h2 className="mt-4 mx-7 bg-pink-600 rounded p-4 text-center text-white">inside Alert Components</h2>
<h2 className="mt-4 mx-7 bg-pink-600 rounded p-4 text-center text-white">
inside Alert Components
</h2>
{/* 1 */}
<button
className="bg-red-600 p-4 rounded text-white m-4"

@ -6,10 +6,17 @@ $alertContentColor: #646464;
$white: #fff;
// $BgHeaderColor
// ? bluee alert Box , error1
// ? blue alert Box , error1
$lightBlue: #06bace;
$confirmBtnBgColor: #f6feff;
$blueTitleBgColor: #dfe6e9;
// ? green alert Box , error1
$lightGreen: #3ee924;
$darkGreen: #21ae0b;
$greenTitleBgColor: #91ff5233;
$darkRed: #e92424;
$headerBgClr: #dfe6e9;
// $errorcolor1: #06bace;
// $errorcolor2: #3ee924;
@ -21,17 +28,17 @@ $headerBgClr: #dfe6e9;
// $toastbgerror: #ffeaea;
// $toastbgsuccess: #c3ffb9;
// $toastsuccesscolor: #21ae0b;
// ! common styles
// alert box
// * alert box
.swal2-container.swal2-center > .swal2-popup {
border: solid 2px $alertBorderClr !important;
border-top-right-radius: 10px !important;
border-top-left-radius: 10px !important;
//
position: relative;
}
/* ? کلاس تمامی تایتل ها */
// * کلاس تمامی تایتل ها
.swal2-title {
text-align: right !important;
font-size: 20px !important;
@ -42,7 +49,7 @@ $headerBgClr: #dfe6e9;
border-top-left-radius: 10px !important;
}
/* ? کلاس متن داخل الرت باکس */
// * کلاس متن داخل الرت باکس
.swal2-html-container {
text-align: justify !important;
line-height: 1.8 !important;
@ -50,7 +57,7 @@ $headerBgClr: #dfe6e9;
font-size: 16px !important;
}
/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
// * کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس
.swal2-rtl .swal2-close {
width: 31px !important;
height: 30px !important;
@ -66,93 +73,102 @@ $headerBgClr: #dfe6e9;
z-index: 2;
}
/* ? کلاس کانفرم باتن */
// * کلاس کانفرم باتن
.swal2-styled.swal2-confirm {
transition: all 0.4s !important;
outline: none !important;
border-radius: 4px !important;
}
/* ? کلاس هاور کانفرم باتن */
// * کلاس هاور کانفرم باتن
.swal2-styled.swal2-confirm:hover {
transform: translateY(-5px) !important;
}
/* ? کلاس کنسل باتن */
// * کلاس کنسل باتن
.swal2-styled.swal2-cancel {
transition: all 0.4s !important;
}
/* ? کلاس هاور کنسل باتن */
// * کلاس هاور کنسل باتن
.swal2-styled.swal2-cancel:hover {
transform: translateY(-5px) !important;
}
/* ? ایکن اررور */
// * ایکن اررور
.swal2-icon.swal2-error {
border-color: $darkRed !important;
color: $darkRed !important;
}
// ? error 1 lightBlue
// به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود
// * به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود
// TODO باکس اول از سمت راست در فایل پی اس دی
// ? تایتل
.title-error-1 {
color: $lightBlue !important;
background-color: $headerBgClr !important;
background-color: $blueTitleBgColor !important;
}
.eroorr:focus {
outline: none !important;
box-shadow: 0px 0px 0px black !important;
border: 0px !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
// * دکمه ضربدر بالا سمت چپ
.close-button-1 {
background-color: $lightBlue !important;
color: $white !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
// * هاور دکمه ضربدر بالا سمت چپ
.close-button-1:hover {
background-color: var(--white) !important;
background-color: $white !important;
color: $lightBlue !important;
border: solid 2px $lightBlue !important;
}
/* ? کانفرم باتن */
// * کانفرم باتن
.confirm-button-1 {
background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important;
text-align: left !important;
background-color: $confirmBtnBgColor !important;
border: solid 1px $lightBlue !important;
color: $lightBlue !important;
//
position: absolute !important;
left: 20px !important;
margin-bottom: 33px !important;
}
/* ? هاور کانفرم باتن */
// * هاور کانفرم باتن
.confirm-button-1:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
background-color: $lightBlue !important;
color: $white !important;
}
/* !error 2 */
/* ? کنسل باتن */
// ? error 2 lightBlue
// TODO کنسل باتن
.cancle-button1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
background-color: $lightBlue !important;
color: $white !important;
border: solid 1px $lightBlue !important;
//
position: absolute !important;
left: 33% !important;
margin-bottom: 33px !important;
}
/* ? هاور کنسل باتن */
// TODO هاور کنسل باتن
.cancle-button1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
background: $white !important;
color: $lightBlue !important;
}
/* !error3 */
/* ? تایتل */
// ? error3
// TODO تایتل
.title-error-2 {
color: var(--error-color2) !important;
color: $darkGreen !important;
background-color: $greenTitleBgColor !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
// * دکمه ضربدر بالا سمت چپ
.close-button-2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
background-color: $lightGreen !important;
color: $white !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-2:hover {

@ -73,15 +73,15 @@ const BasicTable = ({
[]
);
const defaultColumn = {
Cell: EditableCell,
};
// const defaultColumn = {
// Cell: EditableCell,
// };
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
// const defaultColumn = useMemo(() => {
// return {
// Filter: ColumnSearch,
// };
// }, []);
const defaultColumn = useMemo(() => {
return {
Filter: ColumnSearch,
};
}, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0;
@ -326,7 +326,7 @@ const BasicTable = ({
rows.find((e) => e.original && +e.original.id === activeTab)
?.original || {}
}
columns={columns}
columns={defaultColumn}
/>
)}
{/* <pre>

Loading…
Cancel
Save