update

3 years ago · 89a020e80f
parent 0218139589
commit 89a020e80f
8 changed files with 304 additions and 103 deletions
--- a/src/App.js
+++ b/src/App.js
@ -101,7 +101,7 @@ function App() {
        {/* <TableDesign1 /> */}
        {/* <ReactTable2 /> */}
        {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
        <ReactTable5 />
        {/* <Digikala /> */}
        {/* <HeaderDesign1 />
--- a/src/components/ButtonNewDesign/index.js
+++ b/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: "اطلاعات بیشتر",
 };
--- a/src/components/ReactTable5/BasicTable.js
+++ b/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,10 +236,34 @@ 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>
+      {filterBarDefault && (
        <div className="flex flex-row items-center justify-between">
          {/* right box */}
-        <di className="bg-red-400">
+          <di className="">
            <Tabbar
              tabs={tabs}
              delTab={delTab}
@ -246,13 +323,13 @@ const BasicTable = ({
            </div>
          ) : null}
        </div>
-
-      {activeList === true ? <div>listView</div> : <div>gridView</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) => (
+          {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={image1} className="w-52" />
-                  <p className="text-sm my-3">{item.fileName}</p>
+                    <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">
-                    {item.fileSize}
+                      {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) },
--- a/src/components/ReactTable5/COLUMNS.js
+++ b/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 ",
  },
  {
--- a/src/components/ReactTable5/FileType.js
+++ b/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>
+  );
+}
--- a/src/components/ReactTable5/FilterFileType.js
+++ b/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>
+  );
+};
--- a/src/components/ReactTable5/GlobalFilter.js
+++ b/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>
--- a/src/components/ReactTable5/MOCK_DATA2.json
+++ b/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"
  }
 ]