update

src/App.js

@@ -101,7 +101,7 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         <ReactTable5 />
         {/* <Digikala /> */}
         {/* <HeaderDesign1 />

src/components/ButtonNewDesign/index.js

@@ -14,12 +14,13 @@ const ButtonNewDesign = ({
   padding,
   icon,
   buttonIcon,
+  text,
 }) => {
   return (
     <button
       className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} ${padding}`}
     >
-      اطلاعات بیشتر
+      {text}
       {icon && (
         <span className={`rounded-full mr-2 ${iconBgColor} `}>
           <img src={buttonIcon} alt="" className="w-full" />
@@ -44,4 +45,6 @@ ButtonNewDesign.defaultProps = {
   // icons
   icon: true,
   buttonIcon: arrow,
+
+  text: "اطلاعات بیشتر",
 };

src/components/ReactTable5/BasicTable.js

@@ -5,7 +5,6 @@ import Tabbar from "./Tabbar";
 
 import MOCK_DATA2 from "./MOCK_DATA2.json";
 
-import { ColumnSearch } from "./ColumnSearch";
 import { GlobalFilter } from "./GlobalFilter";
 
 import { COLUMNS } from "./COLUMNS";
@@ -14,6 +13,7 @@ import { GoToPage } from "./GoToPage";
 import ShowMoreRows from "./ShowMoreRows";
 import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
+import { FilterFileType } from "./FilterFileType";
 
 import grid from "./grid.svg";
 import list from "./list.svg";
@@ -32,16 +32,75 @@ import {
   useColumnOrder,
   useExpanded,
 } from "react-table";
+import ButtonNewDesign from "../ButtonNewDesign";
 
 export function CheckBox({}) {
   return <input type="checkbox" className="cursor-pointer" />;
 }
 
+export const SelectColumnFilter = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="w-32 appearance-none text-xs  flex flex-row items-start p-2 rounded focus:outline-none border focus:border-gray-200 focus:ring focus:ring-gray-200 focus:ring-opacity-20"
+      style={{ borderColor: "#EEEEEE", color: "#00253A" }}
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option
+        className="text-white"
+        value=""
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        بر اساس نوع فایل
+      </option>
+      {options.map((option, i) => (
+        <option
+          key={i}
+          value={option}
+          className="text-right text-white px-2"
+          style={{ backgroundColor: "#65A9FF" }}
+        >
+          {(() => {
+            if (option === 1) {
+              return "JPG";
+            } else if (option === 2) {
+              return "PNG";
+            } else if (option === 3) {
+              return "PDF";
+            } else if (option === 4) {
+              return "CSV";
+            } else if (option === 5) {
+              return "PPT";
+            } else {
+              return "MP4";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};
+
 const BasicTable = ({
   settingsIcon,
   thead,
   goToPage,
   showMore,
+  filterBarDefault,
   addTab,
   tabs,
   delTab,
@@ -85,14 +144,8 @@ const BasicTable = ({
     []
   );
 
-  // const defaultColumn = {
-  //   Cell: EditableCell,
-  // };
-  // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
   const defaultColumn = useMemo(() => {
-    return {
-      Filter: ColumnSearch,
-    };
+    return {};
   }, []);
 
   //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
@@ -169,7 +222,7 @@ const BasicTable = ({
           />
         ))}
       </div>{" "} */}
-      <div>
+      <div className="mb-3 flex flex-row items-center gap-x-5">
         {/* select View list */}
         <div className="flex flex-row items-center gap-x-2">
           <img
@@ -183,18 +236,42 @@ const BasicTable = ({
             onClick={() => setActiveList(true)}
           />
         </div>
+        {headerGroups.map((headerGroup) =>
+          headerGroup.headers.map((column) =>
+            column.Filter ? (
+              <div className="mt-2 sm:mt-0" key={column.id}>
+                {column.render("Filter")}
+              </div>
+            ) : null
+          )
+        )}
+        <ButtonNewDesign
+          bgColor={"bg-blue-500"}
+          icon={null}
+          border={"border-0"}
+          borderRadius={"rounded"}
+          fontSize={"text-xs"}
+          padding={"p-2"}
+          text={"انتخاب چند فایل"}
+        />
+        <div className="flex-1 ">
+          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+        </div>
+
+        {/* <FilterFileType /> */}
       </div>
-      <div className="flex flex-row items-center justify-between">
-        {/* right box */}
-        <di className="bg-red-400">
-          <Tabbar
-            tabs={tabs}
-            delTab={delTab}
-            setActivateTab={setActivateTab}
-            activeTab={activeTab}
-          />
-        </di>
-        {/* <div className="">
+      {filterBarDefault && (
+        <div className="flex flex-row items-center justify-between">
+          {/* right box */}
+          <di className="">
+            <Tabbar
+              tabs={tabs}
+              delTab={delTab}
+              setActivateTab={setActivateTab}
+              activeTab={activeTab}
+            />
+          </di>
+          {/* <div className="">
           <Tabbar
             tabs={tabs}
             delTab={delTab}
@@ -202,57 +279,57 @@ const BasicTable = ({
             activeTab={activeTab}
           />
         </div> */}
-        {/* left box */}
-        {activeTab == 0 ? (
-          <div
-            className="flex flex-row items-center p-2 rounded-tl rounded-tr"
-            style={{ backgroundColor: "#F1F6FF" }}
-          >
-            {/* search box */}
-            <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
-            {/* pagination */}
+          {/* left box */}
+          {activeTab == 0 ? (
             <div
-              className="flex flex-row items-center p-1 rounded"
-              style={{ backgroundColor: "#F9FBFF" }}
+              className="flex flex-row items-center p-2 rounded-tl rounded-tr"
+              style={{ backgroundColor: "#F1F6FF" }}
             >
-              {/* go to page */}
-              <GoToPage
-                pageIndex={pageIndex}
-                gotoPage={gotoPage}
-                pageOptions={pageOptions}
-              />
-              {/* vertical line */}
+              {/* search box */}
+              <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+              {/* pagination */}
               <div
-                className={`w-0.5 h-4 mr-2`}
-                style={{ backgroundColor: "#65A9FF" }}
-              ></div>
-              {/* arrows */}
-              <Pagination
-                gotoPage={gotoPage}
-                canPreviousPage={canPreviousPage}
-                previousPage={previousPage}
-                canNextPage={canNextPage}
-                pageCount={pageCount}
-                nextPage={nextPage}
-              />
+                className="flex flex-row items-center p-1 rounded"
+                style={{ backgroundColor: "#F9FBFF" }}
+              >
+                {/* go to page */}
+                <GoToPage
+                  pageIndex={pageIndex}
+                  gotoPage={gotoPage}
+                  pageOptions={pageOptions}
+                />
+                {/* vertical line */}
+                <div
+                  className={`w-0.5 h-4 mr-2`}
+                  style={{ backgroundColor: "#65A9FF" }}
+                ></div>
+                {/* arrows */}
+                <Pagination
+                  gotoPage={gotoPage}
+                  canPreviousPage={canPreviousPage}
+                  previousPage={previousPage}
+                  canNextPage={canNextPage}
+                  pageCount={pageCount}
+                  nextPage={nextPage}
+                />
+              </div>
+              {/* settings icon */}
+              {settingsIcon && (
+                <Settings
+                  allColumns={allColumns}
+                  getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
+                />
+              )}
             </div>
-            {/* settings icon */}
-            {settingsIcon && (
-              <Settings
-                allColumns={allColumns}
-                getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
-              />
-            )}
-          </div>
-        ) : null}
-      </div>
-
-      {activeList === true ? <div>listView</div> : <div>gridView</div>}
+          ) : null}
+        </div>
+      )}
+      {/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */}
 
       {/* table LIST */}
       {activeTab == 0 ? (
         <>
-          {activeList === false && (
+          {activeList === true && (
             // table
             <table
               {...getTableProps()}
@@ -368,21 +445,32 @@ const BasicTable = ({
             </table>
           )}
           {/* GRID LIST */}
-          {activeList === true && (
-            <div className="flex flex-row gap-4">
-              {data.map((item, index) => (
-                <div
-                  className="flex flex-col px-4 py-5 rounded-md"
-                  key={index}
-                  style={{ backgroundColor: "#F3F3F3" }}
-                >
-                  <img src={image1} className="w-52" />
-                  <p className="text-sm my-3">{item.fileName}</p>
-                  <span className="text-xs text-left text-gray-500">
-                    {item.fileSize}
-                  </span>
-                </div>
-              ))}
+          {activeList === false && (
+            <div
+              {...getTableBodyProps()}
+              className="flex flex-row flex-wrap gap-4 items-center justify-center"
+            >
+              {rows.map((row, index) => {
+                prepareRow(row);
+                return (
+                  <div
+                    {...row.getRowProps()}
+                    className="flex flex-col px-4 py-5 rounded-md"
+                    key={index}
+                    style={{ backgroundColor: "#F3F3F3" }}
+                  >
+                    <img
+                      src={row.original.filePic}
+                      alt={row.original.filePic}
+                      className="w-52"
+                    />
+                    <p className="text-sm my-3">{row.original.fileName}</p>
+                    <span className="text-xs text-left text-gray-500">
+                      {row.original.fileSize}
+                    </span>
+                  </div>
+                );
+              })}
             </div>
           )}
           {/* bottom table */}
@@ -418,6 +506,7 @@ BasicTable.defaultProps = {
   thead: false,
   goToPage: false,
   showMore: false,
+  filterBarDefault: false,
 
   // listView: [
   //   { icon: grid, click: () => setActiveList(false) },

src/components/ReactTable5/COLUMNS.js

@@ -1,20 +1,17 @@
 import { format } from "date-fns";
 
-import BasicTable, { CheckBox } from "../ReactTable5/BasicTable";
+import BasicTable, {
+  CheckBox,
+  SelectColumnFilter,
+} from "../ReactTable5/BasicTable";
 
-import { OrderStatus } from "./OrderStatus";
-import { OrderLevel } from "./OrderLevel";
-import { Buttons } from "./Buttons";
-import { EditButtons } from "./EditButtons";
-import { SelectColumnFilter } from "./SelectColumnFilter.js";
-import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
-import { SliderColumnFilter } from "./SliderColumnFilter.js";
+import { FileType } from "./FileType";
 
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "چک باکس",
     accessor: CheckBox,
-    className: "bg-red-100 w-7",
+    className: "w-7",
   },
   {
     Header: "ایکن فایل",
@@ -30,6 +27,8 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "نوع فایل",
     accessor: "fileType",
+    Cell: FileType,
+    Filter: SelectColumnFilter, // new
     // className: "bg-red-500 ",
   },
   {

src/components/ReactTable5/FileType.js

@@ -0,0 +1,26 @@
+export function FileType({ value }) {
+  return (
+    <div className="">
+      {(() => {
+        switch (value) {
+          case 1:
+            return <span>JPG</span>;
+          case 2:
+            return <span>PNG</span>;
+
+          case 3:
+            return <span>PDF</span>;
+
+          case 4:
+            return <span>CSV</span>;
+
+          case 5:
+            return <span>PPT</span>;
+
+          default:
+            return <span>MP4</span>;
+        }
+      })()}
+    </div>
+  );
+}

src/components/ReactTable5/FilterFileType.js

@@ -0,0 +1,58 @@
+import React from "react";
+
+export const FilterFileType = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option
+        className="text-white"
+        value=""
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        همه
+      </option>
+      {options.map((option, i) => (
+        <option
+          key={i}
+          value={option}
+          className="text-right text-white px-2"
+          style={{ backgroundColor: "#65A9FF" }}
+        >
+          {(() => {
+            if (option === 1) {
+              return "JPG";
+            } else if (option === 2) {
+              return "PNG";
+            } else if (option === 3) {
+              return "PDF";
+            } else if (option === 4) {
+              return "CSV";
+            } else if (option === 5) {
+              return "PPT";
+            } else {
+              return "MP4";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};

src/components/ReactTable5/GlobalFilter.js

@@ -14,7 +14,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 400);
 
   return (
-    <div className="flex flex-row-reverse items-center relative ml-2 ">
+    <div className="flex flex-row-reverse items-center relative ml-2 w-full">
       {activeSearchBox && (
         <img
           src={cancleIcon}
@@ -34,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         onFocus={() => setActiveSearchBox(true)}
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
-        className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+        className={`w-full text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
     </div>

src/components/ReactTable5/MOCK_DATA2.json

@@ -2,55 +2,81 @@
   {
     "id": 1,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "تهران شهری برای آیندگان",
-    "fileType": "JPG",
+    "fileType": 1,
     "fileSize": "23.5KB",
     "fileDate": "1400/02/12"
   },
   {
     "id": 2,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "عکس سال 99 نوروز",
-    "fileType": "JPG",
+    "fileType": 2,
     "fileSize": "69.5KB",
     "fileDate": "1400/02/10"
   },
   {
     "id": 3,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "دری به سوی بی نهایت",
-    "fileType": "JPG",
+    "fileType": 3,
     "fileSize": "1.5MB",
     "fileDate": "1400/04/24"
   },
   {
     "id": 4,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "فایل اکسل دانش آموزان",
-    "fileType": "JPG",
+    "fileType": 4,
     "fileSize": "20MB",
     "fileDate": "1397/04/20"
   },
   {
     "id": 5,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "صحرای بدون شن",
-    "fileType": "JPG",
+    "fileType": 5,
     "fileSize": "150MB",
     "fileDate": "1399/04/20"
   },
   {
     "id": 6,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
-    "fileType": "JPG",
+    "fileType": 6,
     "fileSize": "150MB",
     "fileDate": "1393/10/20"
+  },
+  {
+    "id": 7,
+    "filePic": "picture",
+    "fileName": "تهران شهری برای آیندگان",
+    "fileType": 1,
+    "fileSize": "23.5KB",
+    "fileDate": "1400/02/12"
+  },
+  {
+    "id": 8,
+    "filePic": "picture",
+    "fileName": "عکس سال 99 نوروز",
+    "fileType": 2,
+    "fileSize": "69.5KB",
+    "fileDate": "1400/02/10"
+  },
+  {
+    "id": 9,
+    "filePic": "picture",
+    "fileName": "دری به سوی بی نهایت",
+    "fileType": 3,
+    "fileSize": "1.5MB",
+    "fileDate": "1400/04/24"
+  },
+  {
+    "id": 10,
+    "filePic": "picture",
+    "fileName": "فایل اکسل دانش آموزان",
+    "fileType": 4,
+    "fileSize": "20MB",
+    "fileDate": "1397/04/20"
   }
 ]