master
mahdi andalib 3 years ago
parent 88a6324867
commit 9a9320a22b
  1. 6
      src/App.js
  2. 4
      src/components/Header/desgin1/HeaderDesign1.js
  3. 184
      src/components/ReactTable4/EditRow.js
  4. 3
      src/components/ReactTable4/SelectColumnFilter.js
  5. 11
      src/components/Switch/index.js
  6. 57
      src/components/Switch/index.scss
  7. 0
      src/components/testtttt/index.scss

@ -90,17 +90,17 @@ function App() {
{/* <TableDesign1 /> */} {/* <TableDesign1 /> */}
{/* <ReactTable2 /> */} {/* <ReactTable2 /> */}
{/* <ReactTable3 /> */} {/* <ReactTable3 /> */}
<ReactTable4 /> {/* <ReactTable4 /> */}
{/* <Digikala /> */} {/* <Digikala /> */}
{/* <DigikalaShop /> */} {/* <DigikalaShop /> */}
{/* <HeaderDesign1 /> <HeaderDesign1 />
<div className="flex"> <div className="flex">
<SidebarDesign2 className="w-1/5" /> <SidebarDesign2 className="w-1/5" />
<span className="w-4/5 "> <span className="w-4/5 ">
<ReactTable4 /> <ReactTable4 />
<FooterDesign1 /> <FooterDesign1 />
</span> </span>
</div> */} </div>
</div> </div>
</Provider> </Provider>
); );

@ -51,7 +51,9 @@ const HeaderDesign1 = ({ username, userJob }) => {
</div> </div>
<div className="flex justify-end items-center "> <div className="flex justify-end items-center ">
<Switch /> <div className="ml-4">
<Switch />
</div>
<div className="flex flex-row-reverse items-center relative w-60 ml-3"> <div className="flex flex-row-reverse items-center relative w-60 ml-3">
<img <img
src={search} src={search}

@ -28,16 +28,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
نام و نام خانوادگی: نام و نام خانوادگی:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.name} >
/> {row.name}
</span>
</div> </div>
{/* 2 */} {/* 2 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -47,16 +49,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
تاریخ سفارش: تاریخ سفارش:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_date} >
/> {row.order_date}
</span>
</div> </div>
{/* 3 */} {/* 3 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -66,16 +70,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
مبلغ سفارش: مبلغ سفارش:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_price} >
/> {row.order_price}
</span>
</div> </div>
{/* 4 */} {/* 4 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -85,16 +91,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
شماره سفارش: شماره سفارش:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_number} >
/> {row.order_number}
</span>
</div> </div>
{/* 5 */} {/* 5 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -104,16 +112,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
شغل کاربر: شغل کاربر:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.user_job} >
/> {row.user_job}
</span>
</div> </div>
{/* 6 */} {/* 6 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -123,16 +133,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
وضعیت سفارش: وضعیت سفارش:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status} >
/> {row.order_status}
</span>
</div> </div>
{/* 7 */} {/* 7 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -140,18 +152,20 @@ const EditRow = ({ row, columns, sentForms }) => {
className="text-xs text-blue-400 mb-2" className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
وضعیت سفارش: سطح اهمیت:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status} >
/> {row.order_level}
</span>
</div> </div>
{/* 8 */} {/* 8 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -161,16 +175,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
محل تولد: محل تولد:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_place} >
/> {row.birth_place}
</span>
</div> </div>
{/* 9 */} {/* 9 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -180,16 +196,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
تلفن محل کار: تلفن محل کار:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.office_phone} >
/> {row.office_phone}
</span>
</div> </div>
{/* 10 */} {/* 10 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -199,16 +217,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
تحصیلات: تحصیلات:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.education} >
/> {row.education}
</span>
</div> </div>
{/* 11 */} {/* 11 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -218,16 +238,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
تاریخ تولد: تاریخ تولد:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_day} >
/> {row.birth_day}
</span>
</div> </div>
{/* 12 */} {/* 12 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -237,16 +259,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
شغل: شغل:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.job} >
/> {row.job}
</span>
</div> </div>
{/* 13 */} {/* 13 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -256,16 +280,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
دانشگاه: دانشگاه:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.uni} >
/> {row.uni}
</span>
</div> </div>
{/* 14 */} {/* 14 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -275,16 +301,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
رشته تحصیلی: رشته تحصیلی:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.field_study} >
/> {row.field_study}
</span>
</div> </div>
{/* 15 */} {/* 15 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -294,16 +322,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
اخلاق: اخلاق:
</p> </p>
<input <span
type="text" role="textbox"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.behaviour} >
/> {row.behaviour}
</span>
</div> </div>
{/* 16 */} {/* 16 */}
<div className="flex flex-col my-2 mx-2"> <div className="flex flex-col my-2 mx-2">
@ -313,23 +343,18 @@ const EditRow = ({ row, columns, sentForms }) => {
> >
نشانی: نشانی:
</p> </p>
{/* <span <span
role="textbox" role="textbox"
className="text-xs rounded-sm bo, color: "#00253A",
rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.address}{" "}
</span> */}
<input
type="text"
style={{ style={{
backgroundColor: "#F8FBFF", backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9", borderColor: "#C8DEF9",
color: "#00253A", color: "#00253A",
minWidth: "96px",
}} }}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.address} >
/> {row.address}
</span>
</div> </div>
</div> </div>
{/* title bottom */} {/* title bottom */}
@ -347,18 +372,18 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
{/* right */} {/* right */}
<div className="flex items-center w-10/12"> <div className="flex items-center w-10/12">
{/* map */} {/* map */}
<div className=" mx-2"> <div className="mx-2">
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}> <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
لوکیشن مد نظر: لوکیشن مد نظر:
</span> </span>
<img <img
className="my-2 mr-2 border border-blue-300 rounded" className="mt-1 mr-2 border border-blue-300 rounded"
src={map} src={map}
/> />
</div> </div>
{/* formInput */} {/* formInput */}
<div className="flex flex-col flex-1 mx-2"> <div className="flex flex-col flex-1 mx-2">
<span className="text-sm mb-2" style={{ color: "#65A9FF" }}> <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات: توضیحات:
</span> </span>
<form className="flex flex-col "> <form className="flex flex-col ">
@ -385,7 +410,7 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
{/* previous */} {/* previous */}
<div className="flex flex-col relative mx-2"> <div className="flex flex-col relative mx-2">
{/* title */} {/* title */}
<span className="text-sm mb-2" style={{ color: "#65A9FF" }}> <span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات قبلی: توضیحات قبلی:
</span> </span>
{/* content */} {/* content */}
@ -431,7 +456,14 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
</div> </div>
</div> </div>
{/* left */} {/* left */}
<div className="w-2/12 flex justify-end">dfsfdsdfs</div> <div className="w-2/12 flex justify-end">
<button
className="border rounded text-sm lg:ml-3 py-2 px-4 text-white"
style={{ backgroundColor: "#65A9FF" }}
>
ذخیره اطلاعات{" "}
</button>
</div>
</div> </div>
</section> </section>
); );

@ -1,7 +1,8 @@
import React from "react"; import React from "react";
// {columns[5].Cell({ value: row.order_status })}
export const SelectColumnFilter = ({ export const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id, render }, column: { filterValue, setFilter, preFilteredRows, id, render, columns },
}) => { }) => {
const options = React.useMemo(() => { const options = React.useMemo(() => {
const options = new Set(); const options = new Set();

@ -3,10 +3,13 @@ import "./index.scss";
const Switch = () => { const Switch = () => {
return ( return (
<div className="switch"> <label for="toogleA" class="cursor-pointer">
<input type="checkbox" id="toggle" /> <div class="relative">
<label for="toggle"></label> <input id="toogleA" type="checkbox" class="sr-only" />
</div> <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
<div class="dot absolute w-6 h-6 bg-gray-200 rounded-full shadow -left-1 -top-1 transition"></div>
</div>
</label>
); );
}; };

@ -1,52 +1,9 @@
// *, *:after, *:before { input:checked ~ .dot {
// // box-sizing: border-box; transform: translateX(100%);
// } background-color: #65a9ff;
}
// body {
// min-height: 100vh;
// display: flex;
// align-items: center;
// justify-content: center;
// }
.switch {
position: relative;
input[type="checkbox"] {
visibility: hidden;
position : absolute;
&:checked + label {
transform: rotate(0deg);
background-color: #000;
&:before {
transform: translateX(35.5px);
background-color: #fff;
}
}
}
label {
display: flex;
width: 70px;
height: 34px;
border: 3px solid;
border-radius: 99em;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
cursor: pointer;
&:before { input:checked ~ .dot {
transition: transform 0.3s ease; transform: translateX(100%);
transition-delay: 0s; background-color: #65a9ff;
content: "";
display: block;
position: absolute;
width: 24px;
height: 24px;
background-color: #000;
border-radius: 50%;
top: 2px;
left: 3px;
}
}
} }

Loading…
Cancel
Save