master
mahdi andalib 3 years ago
parent 7a189071e8
commit 5b96ce80c0
  1. 74
      src/components/ReactTable4/BasicTable.js
  2. 8
      src/components/ReactTable4/Buttons.js
  3. 8
      src/components/ReactTable4/EditButtons.js
  4. 13
      src/components/ReactTable4/SliderColumnFilter.js
  5. 2
      src/components/ReactTable4/index.js
  6. 10
      src/components/ReactTable4/zarbedar-icon.svg

@ -1,7 +1,8 @@
import React, { useMemo } from "react"; import React, { useMemo, useState } from "react";
import "./index.scss"; import "./index.scss";
import { ColumnSearch } from "./ColumnSearch.js"; import { ColumnSearch } from "./ColumnSearch.js";
import { Tabbar } from "./index";
import { import {
useTable, useTable,
@ -28,6 +29,9 @@ const BasicTable = ({ settingsIcon }) => {
const columns = React.useMemo(() => COLUMNS, []); const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
//selected row
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
const defaultColumn = useMemo(() => { const defaultColumn = useMemo(() => {
return { return {
Filter: ColumnSearch, Filter: ColumnSearch,
@ -103,9 +107,14 @@ const BasicTable = ({ settingsIcon }) => {
// }; // };
const { globalFilter, pageIndex, pageSize } = state; const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
return ( return (
<> <>
{/* <button
className="bg-orange-600"
onClick={() => setSelectedFilterRow(!selectedFilterRow)}
>
click me
</button> */}
{/* toggle columns */} {/* toggle columns */}
{/* <div> {/* <div>
<div> <div>
@ -122,7 +131,11 @@ const BasicTable = ({ settingsIcon }) => {
</div> */} </div> */}
{/* Change Column Order */} {/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */} {/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-between">
{/* right box */}
<div className="w-8/12">
<Tabbar />
</div>
{/* left box */} {/* left box */}
<div <div
className="rounded-md p-2 flex flex-row items-center" className="rounded-md p-2 flex flex-row items-center"
@ -188,11 +201,12 @@ const BasicTable = ({ settingsIcon }) => {
))} ))}
</thead> </thead>
{/* filter row */} {/* filter row */}
{/* {selectedFilterRow === !null && ( )} */}
<thead style={{ backgroundColor: "#FAFBFF" }}> <thead style={{ backgroundColor: "#FAFBFF" }}>
{headerGroups.map((headerGroup) => ( {headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}> <tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => ( {headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} className="py-2 text-sm "> <th {...column.getHeaderProps()} className="py-2 text-sm">
{column.canFilter ? column.render("Filter") : null} {column.canFilter ? column.render("Filter") : null}
</th> </th>
))} ))}
@ -207,7 +221,6 @@ const BasicTable = ({ settingsIcon }) => {
prepareRow(row); prepareRow(row);
return ( return (
<React.Fragment> <React.Fragment>
<tr></tr>
<tr <tr
{...row.getRowProps()} {...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"} // className={isEven(idx) ? "bg-gray-600" : "bg-white"}
@ -228,7 +241,7 @@ const BasicTable = ({ settingsIcon }) => {
{row.isExpanded ? ( {row.isExpanded ? (
<tr> <tr>
<td colSpan={headerGroups[0].headers.length}> <td colSpan={headerGroups[0].headers.length}>
{renderRowSubComponent({ rows: row.original })} {renderRowSubComponent({ row: row.original })}
{/* {renderRowSubComponent({ row: row.values })} */} {/* {renderRowSubComponent({ row: row.values })} */}
</td> </td>
</tr> </tr>
@ -322,7 +335,8 @@ const BasicTable = ({ settingsIcon }) => {
); );
}; };
function renderRowSubComponent({ rows }) { function renderRowSubComponent({ row }) {
console.log(row);
const persian = { const persian = {
weight: "وزن", weight: "وزن",
pageNumber: "تعداد صفحات", pageNumber: "تعداد صفحات",
@ -334,7 +348,10 @@ function renderRowSubComponent({ rows }) {
publishedYear: "سال انتشار", publishedYear: "سال انتشار",
}; };
return ( return (
<div className="w-full flex flex-row items-center bg-indigo-100 border-r-4 border-blue-600 p-2"> <div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#FAFBFF" }}
>
{/* right */} {/* right */}
<div <div
className="flex flex-row flex-wrap items-center" className="flex flex-row flex-wrap items-center"
@ -351,7 +368,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
نام و نام خانوادگی: نام و نام خانوادگی:
<span className="mr-1 text-black">{rows.name}</span> <span className="mr-1 text-black">{row.name}</span>
</p> </p>
</div> </div>
{/* 2 */} {/* 2 */}
@ -365,7 +382,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
تاریخ سفارش: تاریخ سفارش:
<span className="mr-1 text-black">{rows.order_date}</span> <span className="mr-1 text-black">{row.order_date}</span>
</p> </p>
</div> </div>
{/* 3 */} {/* 3 */}
@ -379,7 +396,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
مبلغ سفارش: مبلغ سفارش:
<span className="mr-1 text-black">{rows.order_price}</span> <span className="mr-1 text-black">{row.order_price}</span>
</p> </p>
</div> </div>
{/* 4 */} {/* 4 */}
@ -393,7 +410,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
شماره سفارش: شماره سفارش:
<span className="mr-1 text-black">{rows.order_number}</span> <span className="mr-1 text-black">{row.order_number}</span>
</p> </p>
</div> </div>
{/* 5 */} {/* 5 */}
@ -407,7 +424,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
شغل کاربر: شغل کاربر:
<span className="mr-1 text-black">{rows.user_job}</span> <span className="mr-1 text-black">{row.user_job}</span>
</p> </p>
</div> </div>
{/* 6 */} {/* 6 */}
@ -421,7 +438,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
وضعیت سفارش: وضعیت سفارش:
<span className="mr-1 text-black">{rows.order_status}</span> <span className="mr-1 text-black">{row.order_status}</span>
</p> </p>
</div> </div>
{/* 7 */} {/* 7 */}
@ -435,7 +452,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
سطح اهمیت: سطح اهمیت:
<span className="mr-1 text-black">{rows.order_level}</span> <span className="mr-1 text-black">{row.order_level}</span>
</p> </p>
</div> </div>
{/* 8 */} {/* 8 */}
@ -449,7 +466,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
محل تولد: محل تولد:
<span className="mr-1 text-black">{rows.birth_place}</span> <span className="mr-1 text-black">{row.birth_place}</span>
</p> </p>
</div> </div>
{/* 9 */} {/* 9 */}
@ -463,7 +480,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
تلفن محل کار: تلفن محل کار:
<span className="mr-1 text-black">{rows.office_phone}</span> <span className="mr-1 text-black">{row.office_phone}</span>
</p> </p>
</div> </div>
{/* 10 */} {/* 10 */}
@ -477,7 +494,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
تحصیلات: تحصیلات:
<span className="mr-1 text-black">{rows.education}</span> <span className="mr-1 text-black">{row.education}</span>
</p> </p>
</div> </div>
{/* 11 */} {/* 11 */}
@ -491,7 +508,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
تاریخ تولد: تاریخ تولد:
<span className="mr-1 text-black">{rows.birth_day}</span> <span className="mr-1 text-black">{row.birth_day}</span>
</p> </p>
</div> </div>
{/* 12 */} {/* 12 */}
@ -505,7 +522,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
شغل: شغل:
<span className="mr-1 text-black">{rows.job}</span> <span className="mr-1 text-black">{row.job}</span>
</p> </p>
</div> </div>
{/* 13 */} {/* 13 */}
@ -519,7 +536,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
دانشگاه: دانشگاه:
<span className="mr-1 text-black">{rows.uni}</span> <span className="mr-1 text-black">{row.uni}</span>
</p> </p>
</div> </div>
{/* 14 */} {/* 14 */}
@ -533,7 +550,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
رشته تحصیلی: رشته تحصیلی:
<span className="mr-1 text-black">{rows.field_study}</span> <span className="mr-1 text-black">{row.field_study}</span>
</p> </p>
</div> </div>
{/* 15 */} {/* 15 */}
@ -547,7 +564,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
اخلاق: اخلاق:
<span className="mr-1 text-black">{rows.behaviour}</span> <span className="mr-1 text-black">{row.behaviour}</span>
</p> </p>
</div> </div>
{/* 16 */} {/* 16 */}
@ -561,7 +578,7 @@ function renderRowSubComponent({ rows }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
نشانی: نشانی:
<span className="mr-1 text-black">{rows.address}</span> <span className="mr-1 text-black">{row.address}</span>
</p> </p>
</div> </div>
</div> </div>
@ -571,12 +588,15 @@ function renderRowSubComponent({ rows }) {
style={{ width: "10%" }} style={{ width: "10%" }}
> >
<button <button
className="border rounded text-red-600 w-8/12 text-xs py-2 mb-2" className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
style={{ borderColor: "#D53921" }} style={{ borderColor: "#D53921", color: "#D53921" }}
> >
حذف حذف
</button> </button>
<button className="border rounded text-blue-600 w-8/12 text-xs py-2"> <button
className="border rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
>
جزیات بیشتر جزیات بیشتر
</button> </button>
</div> </div>

@ -7,13 +7,11 @@ import { useState } from "react";
export function Buttons({ row }) { export function Buttons({ row }) {
const [activeDetails, setActiveDetails] = useState(null); const [activeDetails, setActiveDetails] = useState(null);
return ( return (
<div <div className="flex flex-row items-center justify-end">
className="flex flex-row items-center justify-end"
{...row.getToggleRowExpandedProps()}
>
<button <button
className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300 " className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
onClick={() => setActiveDetails(!activeDetails)} onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()}
> >
جزیات جزیات
<img <img

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Table from "./BasicTable";
import DropDown from "./DropDown"; import DropDown from "./DropDown";
@ -7,6 +8,7 @@ import plus from "./plus.svg";
export function EditButtons({}) { export function EditButtons({}) {
const [activeFilter, setActiveFilter] = useState(null); const [activeFilter, setActiveFilter] = useState(null);
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
return ( return (
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
@ -21,10 +23,10 @@ export function EditButtons({}) {
{/* filter */} {/* filter */}
<img <img
src={filter} src={filter}
// onClick={() => setSelectedFilterRow(!selectedFilterRow)}
alt="" alt=""
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 ${ className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
activeFilter ? "border" : "border-0" ${activeFilter ? "border" : "border-0"}`}
}`}
onClick={() => setActiveFilter(!activeFilter)} onClick={() => setActiveFilter(!activeFilter)}
/> />
{/* dropDown */} {/* dropDown */}

@ -1,5 +1,7 @@
import React from "react"; import React from "react";
import cancleIcon from "./zarbedar-icon.svg";
export const SliderColumnFilter = ({ export const SliderColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id }, column: { filterValue, setFilter, preFilteredRows, id },
}) => { }) => {
@ -14,8 +16,9 @@ export const SliderColumnFilter = ({
}, [id, preFilteredRows]); }, [id, preFilteredRows]);
return ( return (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center justify-between w-10/12">
<input <input
className=" w-10/12"
type="range" type="range"
min={min} min={min}
max={max} max={max}
@ -24,7 +27,13 @@ export const SliderColumnFilter = ({
setFilter(parseInt(e.target.value, 10)); setFilter(parseInt(e.target.value, 10));
}} }}
/> />
<input type="checkbox" onClick={() => setFilter(undefined)} /> <div className="p-1 rounded bg-blue-300">
<img
src={cancleIcon}
onClick={() => setFilter(undefined)}
className="cursor-pointer w-2 h-2"
/>
</div>
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */} {/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
</div> </div>
); );

@ -48,7 +48,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
window.isDown = false; window.isDown = false;
export default ReactTable4; export default ReactTable4;
function Tabbar({}) { export function Tabbar({}) {
const ref = useRef(null); const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref); // const { onMouseDown } = useDraggableScroll(ref);

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.118" height="18.118" viewBox="0 0 18.118 18.118">
<g id="Group_1" data-name="Group 1" transform="translate(-244.586 -251.497)">
<g id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close">
<g id="clipboard-close">
<path id="Vector" d="M15.136,15.136,0,0" transform="translate(246.153 252.911)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M15.136,0,0,15.136" transform="translate(246 253.064)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 713 B

Loading…
Cancel
Save