master
mahdi andalib 3 years ago
parent 88c0fd870f
commit a2a7ffb1ed
  1. 7
      src/components/ProductSuggestion/index.js
  2. 24
      src/components/ReactTable4/BasicTable.js
  3. 2
      src/components/ReactTable4/Buttons.js
  4. 72
      src/components/ReactTable4/DropDown.js
  5. 27
      src/components/ReactTable4/EditButtons.js
  6. 27
      src/components/ReactTable4/GlobalFilter.js
  7. 5
      src/components/ReactTable4/GoToPage.js
  8. 60
      src/components/ReactTable4/MOCK_DATA.json
  9. 21
      src/components/ReactTable4/Pagination.js
  10. 13
      src/components/ReactTable4/Settings.js

@ -19,7 +19,12 @@ const ProductSuggestion = ({ suggestions, selected }) => {
<div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
${selectedProduct === suggestion ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(suggestion)}
// onClick={() => setSelectedProduct(suggestion)}
onClick={() =>
setSelectedProduct(
selectedProduct === suggestion ? null : suggestion
)
}
>
<img
src={suggestion.productImage}

@ -16,13 +16,14 @@ import {
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
import settings from "./settings.svg";
// This is a custom filter UI for selecting
// a unique option from a list
export function SelectColumnFilter({
@ -181,27 +182,25 @@ const BasicTable = ({ settingsIcon }) => {
<div className="flex flex-row items-center justify-end">
{/* left box */}
<div
className="rounded-md p-2 flex flex-row flex-items-center"
className="rounded-md p-2 flex flex-row items-center"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<div
className="flex flex-row flex-items-center p-1 rounded"
className="flex flex-row items-center p-1 rounded"
style={{ backgroundColor: "#F9FBFF" }}
>
{/* go to page */}
<div>
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
</div>
{/* vertical line */}
<div
className={`w-0.5 my-1 mx-2`}
className={`w-0.5 h-4 mr-2`}
style={{ backgroundColor: "#65A9FF" }}
></div>
{/* arrows */}
@ -215,14 +214,7 @@ const BasicTable = ({ settingsIcon }) => {
/>
</div>
{/* settings icon */}
{settingsIcon && (
<div
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
>
<img src={settings} className="w-5 h-5 cursor-pointer" />
</div>
)}
{settingsIcon && <Settings />}
</div>
</div>
<table
@ -387,5 +379,5 @@ function renderRowSubComponent({ row }) {
export default BasicTable;
BasicTable.defaultProps = {
settingsIcon: false,
settingsIcon: true,
};

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

@ -0,0 +1,72 @@
import React from "react";
export const DropDown = ({}) => {
return (
<div>
<button
id="dropdownButton"
data-dropdown-toggle="dropdown"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
>
Dropdown button{" "}
<svg
className="ml-2 w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<div
id="dropdown"
className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
<ul className="py-1" aria-labelledby="dropdownButton">
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Dashboard
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Settings
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Earnings
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Sign out
</a>
</li>
</ul>
</div>
</div>
);
};
export default DropDown;

@ -3,11 +3,12 @@ import React, { useState } from "react";
import filter from "./filter.svg";
import plus from "./plus.svg";
import more from "./more2.svg";
import DropDown from "./DropDown";
export function EditButtons({ buttons }) {
const [selectedButton, setSelectedButton] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
<div className="flex flex-row items-center justify-end ">
{buttons.map((button, index) => (
<div>
<div
@ -36,6 +37,7 @@ export function EditButtons({ buttons }) {
</div>
</div>
))}
<div>{selectedButton?.components}</div>
</div>
);
}
@ -51,8 +53,7 @@ EditButtons.defaultProps = {
border: "border-b-4",
borderColor: "#3686EC",
padding: "4px 7px",
components: "d",
buttonSubItems: [],
// components: "d",
},
{
logo: filter,
@ -62,8 +63,7 @@ EditButtons.defaultProps = {
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
components: "a",
buttonSubItems: [],
// components: "a",
},
{
logo: more,
@ -74,22 +74,7 @@ EditButtons.defaultProps = {
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
components: "a",
buttonSubItems: [
{
title: "دراپ داون 1",
},
],
// components: <DropDown />,
},
],
};
// {
// logo: settings,
// width: "w-5",
// height: "h-5",
// title: null,
// textColor: null,
// backgroundColor: "#F3F8FF",
// components: "b",
// },

@ -2,9 +2,10 @@ import React, { useState } from "react";
import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg";
import settings from "./settings.svg";
export const GlobalFilter = ({ filter, setFilter }) => {
const [openModal, setOpenModal] = useState(true);
// const [activeSearchBox, setActiveSearchBox] = useState(null);
const [value, setValue] = useState(filter);
@ -13,9 +14,13 @@ 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"
// onClick={() => setActiveSearchBox(!activeSearchBox)}
>
<img
src={search}
// src={activeSearchBox ? { search } : { settings }}
alt=""
className="w-4 h-4 absolute left-2 cursor-pointer"
/>
@ -26,25 +31,9 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onChange(e.target.value);
}}
type="text"
// placeholder="نام کالا را جستجو کنید..."
className="text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border"
className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/>
</div>
);
};
{
/* <div className="flex flex-row-reverse items-center relative w-full">
<img
src={lightGraySearchIcon}
alt=""
className="w-4 h-4 absolute left-3"
/>
<input
type="text"
placeholder="نام کالا را جستجو کنید..."
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
/>
</div> */
}

@ -2,17 +2,16 @@ import React from "react";
export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
return (
<span className="text-xs text-blue-400">
<span className="text-xs text-blue-400 mr-1">
صفحه{" "}
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
className="ml-1 text-xs p-1 rounded border-blue-400 w-9"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
از {pageOptions.length}
</span>

@ -1,4 +1,64 @@
[
{
"name": "mahdi",
"order-date": "1399/09/27",
"order-price": 25,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "مهدی"
},
{
"name": "مهدی",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "mahdimahdi"
},
{
"name": "mahdi",
"order-date": "1399/09/27",
"order-price": 25,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "مهدی"
},
{
"name": "مهدی",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "mahdimahdi"
},
{
"name": "mahdi",
"order-date": "1399/09/27",
"order-price": 25,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "مهدی"
},
{
"name": "مهدی",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "mahdimahdi"
},
{
"name": "mahdi",
"order-date": "1399/09/27",

@ -12,9 +12,9 @@ export const Pagination = ({
nextPage,
}) => {
return (
<div className="flex flex-row items-center">
<div className="flex flex-row items-center space-x-1">
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
@ -22,7 +22,7 @@ export const Pagination = ({
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
@ -30,7 +30,7 @@ export const Pagination = ({
<img src={rightArrow} className="w-3 h-3" />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
@ -38,7 +38,7 @@ export const Pagination = ({
<img src={leftArrow} className="w-3 h-3" />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
className="rounded py-1 px-2 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
@ -48,3 +48,14 @@ export const Pagination = ({
</div>
);
};
export default Pagination;
// Pagination.defaultProps = {
// pagintaionButtons: [
// {
// image: { dobleLeftArrow },
// click: gotoPage(0),
// },
// ],
// };

@ -0,0 +1,13 @@
import React from "react";
import settings from "./settings.svg";
export const Settings = ({}) => {
return (
<div
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
>
<img src={settings} className="w-6 h-6 cursor-pointer" />
</div>
);
};
Loading…
Cancel
Save