From a2a7ffb1edf271a80a13e89af7d37e6aa7fff6d2 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Tue, 15 Feb 2022 17:05:45 +0330 Subject: [PATCH] added --- src/components/ProductSuggestion/index.js | 7 ++- src/components/ReactTable4/BasicTable.js | 34 ++++------ src/components/ReactTable4/Buttons.js | 2 +- src/components/ReactTable4/DropDown.js | 72 ++++++++++++++++++++++ src/components/ReactTable4/EditButtons.js | 29 +++------ src/components/ReactTable4/GlobalFilter.js | 27 +++----- src/components/ReactTable4/GoToPage.js | 5 +- src/components/ReactTable4/MOCK_DATA.json | 60 ++++++++++++++++++ src/components/ReactTable4/Pagination.js | 21 +++++-- src/components/ReactTable4/Settings.js | 13 ++++ 10 files changed, 198 insertions(+), 72 deletions(-) create mode 100644 src/components/ReactTable4/DropDown.js create mode 100644 src/components/ReactTable4/Settings.js diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js index 16add84..e06e3b6 100644 --- a/src/components/ProductSuggestion/index.js +++ b/src/components/ProductSuggestion/index.js @@ -19,7 +19,12 @@ const ProductSuggestion = ({ suggestions, selected }) => {
setSelectedProduct(suggestion)} + // onClick={() => setSelectedProduct(suggestion)} + onClick={() => + setSelectedProduct( + selectedProduct === suggestion ? null : suggestion + ) + } > {
{/* left box */}
{/* search box */} {/* pagination */}
{/* go to page */} -
- -
+ {/* vertical line */}
{/* arrows */} @@ -215,14 +214,7 @@ const BasicTable = ({ settingsIcon }) => { />
{/* settings icon */} - {settingsIcon && ( -
- -
- )} + {settingsIcon && }
+
+ + +
+ ); +}; + +export default DropDown; diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js index 3f3919e..479dbc9 100644 --- a/src/components/ReactTable4/EditButtons.js +++ b/src/components/ReactTable4/EditButtons.js @@ -3,15 +3,16 @@ 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 ( -
+
{buttons.map((button, index) => (
))} +
{selectedButton?.components}
); } @@ -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: , }, ], }; - -// { -// logo: settings, -// width: "w-5", -// height: "h-5", -// title: null, -// textColor: null, -// backgroundColor: "#F3F8FF", -// components: "b", -// }, diff --git a/src/components/ReactTable4/GlobalFilter.js b/src/components/ReactTable4/GlobalFilter.js index c0715e6..32ff097 100644 --- a/src/components/ReactTable4/GlobalFilter.js +++ b/src/components/ReactTable4/GlobalFilter.js @@ -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 ( -
+
setActiveSearchBox(!activeSearchBox)} + > @@ -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" }} />
); }; - -{ - /*
- - -
*/ -} diff --git a/src/components/ReactTable4/GoToPage.js b/src/components/ReactTable4/GoToPage.js index ccae79b..e18d585 100644 --- a/src/components/ReactTable4/GoToPage.js +++ b/src/components/ReactTable4/GoToPage.js @@ -2,17 +2,16 @@ import React from "react"; export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => { return ( - + صفحه{" "} { const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; gotoPage(pageNumber); }} - style={{ width: "50px" }} /> از {pageOptions.length} diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json index dbc3c2f..f04f38b 100644 --- a/src/components/ReactTable4/MOCK_DATA.json +++ b/src/components/ReactTable4/MOCK_DATA.json @@ -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", diff --git a/src/components/ReactTable4/Pagination.js b/src/components/ReactTable4/Pagination.js index a5d9f52..de553b4 100644 --- a/src/components/ReactTable4/Pagination.js +++ b/src/components/ReactTable4/Pagination.js @@ -12,9 +12,9 @@ export const Pagination = ({ nextPage, }) => { return ( -
+
); }; + +export default Pagination; + +// Pagination.defaultProps = { +// pagintaionButtons: [ +// { +// image: { dobleLeftArrow }, +// click: gotoPage(0), +// }, +// ], +// }; diff --git a/src/components/ReactTable4/Settings.js b/src/components/ReactTable4/Settings.js new file mode 100644 index 0000000..f5e3f77 --- /dev/null +++ b/src/components/ReactTable4/Settings.js @@ -0,0 +1,13 @@ +import React from "react"; +import settings from "./settings.svg"; + +export const Settings = ({}) => { + return ( +
+ +
+ ); +};