From 17200c9c4745ea0bd70eb7ffc75a92172744498f Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 08:33:31 +0330 Subject: [PATCH 01/10] update --- src/components/ReactTable4/BasicTable.js | 32 ++++---- src/components/ReactTable4/MOCK_DATA.json | 97 ++++++++++++++++++++++- src/components/ReactTable4/index.js | 15 ++-- 3 files changed, 122 insertions(+), 22 deletions(-) diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index ced51dd..38f7b2e 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -1,9 +1,19 @@ import React, { useMemo, useState } from "react"; import "./index.scss"; -import { ColumnSearch } from "./ColumnSearch.js"; -import { ToggleColumns } from "./ToggleColumns.js"; + import { Tabbar } from "./index"; +import MOCK_DATA from "./MOCK_DATA.json"; + +import { ColumnSearch } from "./ColumnSearch"; +import { GlobalFilter } from "./GlobalFilter"; + +import { ToggleColumns } from "./ToggleColumns"; +import { COLUMNS } from "./columns"; +import { Pagination } from "./Pagination"; +import { GoToPage } from "./GoToPage"; +import { Settings } from "./Settings"; +import { Checkbox } from "./Checkbox"; import { useTable, @@ -16,16 +26,6 @@ import { useExpanded, } from "react-table"; -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"; - const BasicTable = ({ settingsIcon, addTab, @@ -114,7 +114,7 @@ const BasicTable = ({ />
{/* right box */} -
+
{/* search box */} @@ -192,7 +192,7 @@ const BasicTable = ({ {/* filter row */} {filtering && ( - + {headerGroups.map((headerGroup, index) => ( {headerGroup.headers.map((column) => ( @@ -621,7 +621,7 @@ function RenderRowSubComponent({ row, columns }) { return (
{/* right */}
{ const [tabs, setTabs] = useState([ { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, ]); + let [activeTab, setActivateTab] = useState(0); + const stateRef = useRef(); const stateActiveRef = useRef(); + stateRef.current = tabs; stateActiveRef.current = activeTab; @@ -19,6 +22,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { if (stateRef.current.find((e) => e.id === newTab.id)) return; setTabs([...stateRef.current, newTab]); }; + const delTab = (id) => { setTabs(stateRef.current.filter((e) => e.id != id)); if (stateActiveRef.current == id) setActivateTab(0); @@ -55,7 +59,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {

{title}

- {/* page Title */} + {/* page subTitle */}

{subTitle}

@@ -72,7 +76,9 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
); }; + window.isDown = false; + export default ReactTable4; export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { @@ -109,14 +115,13 @@ export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { if (window.isDown) return e.preventDefault(); }} aria-current="page" - className="flex flex-row items-center text-sm text-center active px-4 rounded-sm mx-1" + className="flex flex-row items-center text-sm text-center active rounded-sm px-4" style={{ backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", - color: activeTab === el.id ? "#fff" : "#000", }} > -
setActivateTab(el.id)}> +
setActivateTab(el.id)}> {el.name}
{el.id ? ( From 00fe98b11d41a1cd3d0c0b2bedf0fb5de08f2b13 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 09:21:13 +0330 Subject: [PATCH 02/10] update and added --- src/components/ReactTable4/BasicTable.js | 10 ++++++---- src/components/ReactTable4/columns.js | 2 -- src/components/ReactTable4/index.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 38f7b2e..23beebf 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -9,7 +9,7 @@ import { ColumnSearch } from "./ColumnSearch"; import { GlobalFilter } from "./GlobalFilter"; import { ToggleColumns } from "./ToggleColumns"; -import { COLUMNS } from "./columns"; +import { COLUMNS } from "./COLUMNS"; import { Pagination } from "./Pagination"; import { GoToPage } from "./GoToPage"; import { Settings } from "./Settings"; @@ -105,13 +105,14 @@ const BasicTable = ({ ); const { globalFilter, pageIndex, pageSize } = state; + return ( <> {/* toggle columns */} - + /> */}
{/* right box */}
@@ -125,7 +126,7 @@ const BasicTable = ({ {/* left box */} {activeTab == 0 ? (
{/* search box */} @@ -161,6 +162,7 @@ const BasicTable = ({
) : null}
+ {/* table */} {activeTab == 0 ? ( <> { e.preventDefault(); From a7afd97618bbb860140d942ac67cc0d2cd3dcf5f Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 10:24:12 +0330 Subject: [PATCH 03/10] update --- src/components/ReactTable4/BasicTable.js | 9 +- src/components/ReactTable4/ColumnSearch.js | 32 +----- src/components/ReactTable4/EditButtons.js | 2 - src/components/ReactTable4/Tabbar.js | 66 +++++++++++ src/components/ReactTable4/index.js | 121 ++++++++++----------- src/components/ReactTable4/index.scss | 11 +- 6 files changed, 142 insertions(+), 99 deletions(-) create mode 100644 src/components/ReactTable4/Tabbar.js diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 23beebf..083af94 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react"; import "./index.scss"; -import { Tabbar } from "./index"; +import Tabbar from "./Tabbar"; import MOCK_DATA from "./MOCK_DATA.json"; import { ColumnSearch } from "./ColumnSearch"; @@ -35,12 +35,15 @@ const BasicTable = ({ activeTab, }) => { const data = useMemo(() => MOCK_DATA, []); + const [filtering, setFiltering] = useState(false); + const columns = React.useMemo( () => COLUMNS({ filtering, setFiltering, addTab }), [] ); + // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم const defaultColumn = useMemo(() => { return { Filter: ColumnSearch, @@ -176,7 +179,7 @@ const BasicTable = ({ + {headerGroups.map((headerGroup, index) => ( {headerGroup.headers.map((column) => ( diff --git a/src/components/ReactTable4/ColumnSearch.js b/src/components/ReactTable4/ColumnSearch.js index 8633716..be57157 100644 --- a/src/components/ReactTable4/ColumnSearch.js +++ b/src/components/ReactTable4/ColumnSearch.js @@ -1,36 +1,16 @@ import React, { useState } from "react"; -import search from "./search-normal.svg"; -import cancleIcon from "./zarbedar-icon.svg"; - export const ColumnSearch = ({ column }) => { const { filterValue, setFilter } = column; - const [activeSearchBox, setActiveSearchBox] = useState(false); return (
-
- {activeSearchBox && ( - setActiveSearchBox(false)} - /> - )} - - setFilter(e.target.value)} - onFocus={() => setActiveSearchBox(true)} - className={`w-9/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} - style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} - /> -
+ setFilter(e.target.value)} + className={`text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} + style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} + />
); }; diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js index 8febe51..93ffa4d 100644 --- a/src/components/ReactTable4/EditButtons.js +++ b/src/components/ReactTable4/EditButtons.js @@ -8,7 +8,6 @@ import plus from "./plus.svg"; export function EditButtons({ setFiltering, filtering, addTab }) { const [selectedFilterRow, setSelectedFilterRow] = useState(filtering); - // setFiltering(selectedFilterRow); return (
@@ -27,7 +26,6 @@ export function EditButtons({ setFiltering, filtering, addTab }) { {/* filter */} setSelectedFilterRow(!selectedFilterRow)} alt="" className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 ${selectedFilterRow ? "border" : "border-0"}`} diff --git a/src/components/ReactTable4/Tabbar.js b/src/components/ReactTable4/Tabbar.js new file mode 100644 index 0000000..353ad1b --- /dev/null +++ b/src/components/ReactTable4/Tabbar.js @@ -0,0 +1,66 @@ +import React from "react"; +import "./index.scss"; + +import cancleIcon from "./zarbedar-icon.svg"; + +const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => { + return ( +
    { + const slider = window.document.querySelector(".tabbar"); + window.isDown = true; + window.startX = e.pageX - slider.offsetLeft; + window.scrollLeft = slider.scrollLeft; + }} + onMouseLeave={(e) => { + window.isDown = false; + }} + onMouseUp={(e) => { + window.isDown = false; + }} + onMouseMove={(e) => { + const slider = window.document.querySelector(".tabbar"); + if (!window.isDown) return; + e.preventDefault(); + const x = e.pageX - slider.offsetLeft; + const walk = (x - window.startX) * 1; + slider.scrollLeft = window.scrollLeft - walk; + }} + > + {tabs.map((el, index) => ( +
  • { + if (window.isDown) return e.preventDefault(); + }} + aria-current="page" + className="flex flex-row items-center text-sm text-center active rounded-sm px-4" + style={{ + backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", + color: activeTab === el.id ? "#fff" : "#000", + }} + > +
    setActivateTab(el.id)}> + {el.name} +
    + {el.id ? ( + { + e.preventDefault(); + delTab(el.id); + }} + /> + ) : null} +
  • + ))} +
+ ); +}; + +window.isDown = false; + +export default Tabbar; diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index a54a139..457ac1e 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -2,8 +2,6 @@ import React, { useRef, useState } from "react"; import BasicTable from "./BasicTable"; -import cancleIcon from "./zarbedar-icon.svg"; - const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const [tabs, setTabs] = useState([ { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, @@ -65,7 +63,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {

{subTitle}

- {/* */} { ); }; -window.isDown = false; - export default ReactTable4; -export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { - // const { onMouseDown } = useDraggableScroll(ref); +// export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { +// // const { onMouseDown } = useDraggableScroll(ref); - return ( -
    { - const slider = window.document.querySelector(".tabbar"); - window.isDown = true; - window.startX = e.pageX - slider.offsetLeft; - window.scrollLeft = slider.scrollLeft; - }} - onMouseLeave={(e) => { - window.isDown = false; - }} - onMouseUp={(e) => { - window.isDown = false; - }} - onMouseMove={(e) => { - const slider = window.document.querySelector(".tabbar"); - if (!window.isDown) return; - e.preventDefault(); - const x = e.pageX - slider.offsetLeft; - const walk = (x - window.startX) * 1; - slider.scrollLeft = window.scrollLeft - walk; - }} - > - {tabs.map((el, index) => ( -
  • { - if (window.isDown) return e.preventDefault(); - }} - aria-current="page" - className="flex flex-row items-center text-sm text-center active rounded-sm px-4" - style={{ - backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", - color: activeTab === el.id ? "#fff" : "#000", - }} - > -
    setActivateTab(el.id)}> - {el.name} -
    - {el.id ? ( - { - e.preventDefault(); - delTab(el.id); - }} - /> - ) : null} -
  • - ))} -
- ); -} +// return ( +//
    { +// const slider = window.document.querySelector(".tabbar"); +// window.isDown = true; +// window.startX = e.pageX - slider.offsetLeft; +// window.scrollLeft = slider.scrollLeft; +// }} +// onMouseLeave={(e) => { +// window.isDown = false; +// }} +// onMouseUp={(e) => { +// window.isDown = false; +// }} +// onMouseMove={(e) => { +// const slider = window.document.querySelector(".tabbar"); +// if (!window.isDown) return; +// e.preventDefault(); +// const x = e.pageX - slider.offsetLeft; +// const walk = (x - window.startX) * 1; +// slider.scrollLeft = window.scrollLeft - walk; +// }} +// > +// {tabs.map((el, index) => ( +//
  • { +// if (window.isDown) return e.preventDefault(); +// }} +// aria-current="page" +// className="flex flex-row items-center text-sm text-center active rounded-sm px-4" +// style={{ +// backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", +// color: activeTab === el.id ? "#fff" : "#000", +// }} +// > +//
    setActivateTab(el.id)}> +// {el.name} +//
    +// {el.id ? ( +// { +// e.preventDefault(); +// delTab(el.id); +// }} +// /> +// ) : null} +//
  • +// ))} +//
+// ); +// } ReactTable4.defaultProps = { breadCrumbs: [ diff --git a/src/components/ReactTable4/index.scss b/src/components/ReactTable4/index.scss index a7764b2..99ead7d 100644 --- a/src/components/ReactTable4/index.scss +++ b/src/components/ReactTable4/index.scss @@ -5,12 +5,13 @@ display: none !important; } .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } -.tabbar{ +.tabbar { cursor: pointer; } -.active2 ,.active2 li a{ +.active2, +.active2 li a { cursor: move !important; -} \ No newline at end of file +} From 2a1906c192b748bd739517ca011c9d7b2a07e5fe Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 10:34:29 +0330 Subject: [PATCH 04/10] update --- src/components/ReactTable4/BasicTable.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 083af94..5b00ac0 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -179,7 +179,7 @@ const BasicTable = ({
{headerGroup.headers.map((column) => ( - ))} From 956c6685a94b5144424a797cd9e9008539f5c73b Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 12:56:13 +0330 Subject: [PATCH 05/10] added more details component --- src/components/ReactTable4/BasicTable.js | 287 +---------------------- 1 file changed, 12 insertions(+), 275 deletions(-) diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 5b00ac0..2d04d36 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -15,6 +15,8 @@ import { GoToPage } from "./GoToPage"; import { Settings } from "./Settings"; import { Checkbox } from "./Checkbox"; +import RenderRowSubComponent from "./RenderRowSubComponent"; + import { useTable, useSortBy, @@ -129,7 +131,7 @@ const BasicTable = ({ {/* left box */} {activeTab == 0 ? (
{/* search box */} @@ -241,11 +243,17 @@ const BasicTable = ({ {row.isExpanded ? (
) : null} @@ -342,6 +350,7 @@ const BasicTable = ({ ); }; + function EditRow({ row, columns }) { console.log(row); const persian = { @@ -614,278 +623,6 @@ function EditRow({ row, columns }) { ); } -function RenderRowSubComponent({ row, columns }) { - console.log(row); - const persian = { - weight: "وزن", - pageNumber: "تعداد صفحات", - pageType: "نوع کاغذ", - bookNumber: "شماره شابک", - publisher: "انتشارات", - author: "نویسنده", - bookType: "قطع", - publishedYear: "سال انتشار", - }; - return ( -
- {/* right */} -
- {/* 1 */} -
-
-

- نام و نام خانوادگی: - {row.name} -

-
- {/* 2 */} -
-
-

- تاریخ سفارش: - {row.order_date} -

-
- {/* 3 */} -
-
-

- مبلغ سفارش: - {row.order_price} -

-
- {/* 4 */} -
-
-

- شماره سفارش: - {row.order_number} -

-
- {/* 5 */} -
-
-

- شغل کاربر: - {row.user_job} -

-
- {/* 6 */} -
-
-

- وضعیت سفارش: - - {columns[5].Cell({ value: row.order_status })} - -

-
- {/* 7 */} -
-
-

- سطح اهمیت: - - {columns[6].Cell({ value: row.order_level })} - -

-
- {/* 8 */} -
-
-

- محل تولد: - {row.birth_place} -

-
- {/* 9 */} -
-
-

- تلفن محل کار: - {row.office_phone} -

-
- {/* 10 */} -
-
-

- تحصیلات: - {row.education} -

-
- {/* 11 */} -
-
-

- تاریخ تولد: - {row.birth_day} -

-
- {/* 12 */} -
-
-

- شغل: - {row.job} -

-
- {/* 13 */} -
-
-

- دانشگاه: - {row.uni} -

-
- {/* 14 */} -
-
-

- رشته تحصیلی: - {row.field_study} -

-
- {/* 15 */} -
-
-

- اخلاق: - {row.behaviour} -

-
- {/* 16 */} -
-
-

- نشانی: - {row.address} -

-
-
- {/* left */} -
- - -
-
- ); -} export default BasicTable; From 7a70b37c3019c6922e6c3443fa0182a2824395da Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 12:56:23 +0330 Subject: [PATCH 06/10] updated more details component --- src/components/ReactTable4/Buttons.js | 8 +- .../ReactTable4/RenderRowSubComponent.js | 271 ++++++++++++++++++ 2 files changed, 275 insertions(+), 4 deletions(-) create mode 100644 src/components/ReactTable4/RenderRowSubComponent.js diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js index 4701c29..6bb6fca 100644 --- a/src/components/ReactTable4/Buttons.js +++ b/src/components/ReactTable4/Buttons.js @@ -1,9 +1,9 @@ +import { useState } from "react"; + import arrowIcon from "./arrow-icon.svg"; import more from "./more2.svg"; import edit from "./edit.svg"; -import { useState } from "react"; - export const Buttons = ({ row, addTab }) => { const [activeDetails, setActiveDetails] = useState(null); return ( @@ -13,7 +13,7 @@ export const Buttons = ({ row, addTab }) => { onClick={() => setActiveDetails(!activeDetails)} {...row.getToggleRowExpandedProps()} > - جزپیات + جزئیات { > - + ); }; diff --git a/src/components/ReactTable4/RenderRowSubComponent.js b/src/components/ReactTable4/RenderRowSubComponent.js new file mode 100644 index 0000000..d4dee15 --- /dev/null +++ b/src/components/ReactTable4/RenderRowSubComponent.js @@ -0,0 +1,271 @@ +import React from "react"; + +const RenderRowSubComponent = ({ columns, addTab, row }) => { + console.log(row); + + return ( +
+ {/* right */} +
+ {/* 1 */} +
+
+

+ نام و نام خانوادگی: + {row.name} +

+
+ {/* 2 */} +
+
+

+ تاریخ سفارش: + {row.order_date} +

+
+ {/* 3 */} +
+
+

+ مبلغ سفارش: + {row.order_price} +

+
+ {/* 4 */} +
+
+

+ شماره سفارش: + {row.order_number} +

+
+ {/* 5 */} +
+
+

+ شغل کاربر: + {row.user_job} +

+
+ {/* 6 */} +
+
+

+ وضعیت سفارش: + + {columns[5].Cell({ value: row.order_status })} + +

+
+ {/* 7 */} +
+
+

+ سطح اهمیت: + + {columns[6].Cell({ value: row.order_level })} + +

+
+ {/* 8 */} +
+
+

+ محل تولد: + {row.birth_place} +

+
+ {/* 9 */} +
+
+

+ تلفن محل کار: + {row.office_phone} +

+
+ {/* 10 */} +
+
+

+ تحصیلات: + {row.education} +

+
+ {/* 11 */} +
+
+

+ تاریخ تولد: + {row.birth_day} +

+
+ {/* 12 */} +
+
+

+ شغل: + {row.job} +

+
+ {/* 13 */} +
+
+

+ دانشگاه: + {row.uni} +

+
+ {/* 14 */} +
+
+

+ رشته تحصیلی: + {row.field_study} +

+
+ {/* 15 */} +
+
+

+ اخلاق: + {row.behaviour} +

+
+ {/* 16 */} +
+
+

+ نشانی: + {row.address} +

+
+
+ {/* left */} +
+ + +
+
+ ); +}; + +export default RenderRowSubComponent; From 78c7dd7b802147a9aaa9d59e78b81c1ba97056b2 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 13:38:17 +0330 Subject: [PATCH 07/10] update --- src/components/ReactTable4/Buttons.js | 34 ++++++++++++------- .../ReactTable4/RenderRowSubComponent.js | 4 +-- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js index 6bb6fca..be2701e 100644 --- a/src/components/ReactTable4/Buttons.js +++ b/src/components/ReactTable4/Buttons.js @@ -8,20 +8,28 @@ export const Buttons = ({ row, addTab }) => { const [activeDetails, setActiveDetails] = useState(null); return (
- + +
{ diff --git a/src/components/ReactTable4/RenderRowSubComponent.js b/src/components/ReactTable4/RenderRowSubComponent.js index d4dee15..cea0d40 100644 --- a/src/components/ReactTable4/RenderRowSubComponent.js +++ b/src/components/ReactTable4/RenderRowSubComponent.js @@ -5,12 +5,12 @@ const RenderRowSubComponent = ({ columns, addTab, row }) => { return (
{/* right */}
{/* 1 */} From 7ade9427036d83dd4d86c7333b4509153cde1ec2 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 16:54:42 +0330 Subject: [PATCH 08/10] update --- src/components/ReactTable4/BasicTable.js | 301 ++------------- src/components/ReactTable4/Buttons.js | 6 +- src/components/ReactTable4/ColumnSearch.js | 4 +- src/components/ReactTable4/EditRow.js | 345 ++++++++++++++++++ .../ReactTable4/RenderRowSubComponent.js | 14 +- 5 files changed, 384 insertions(+), 286 deletions(-) create mode 100644 src/components/ReactTable4/EditRow.js diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 2d04d36..998e565 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -16,6 +16,7 @@ import { Settings } from "./Settings"; import { Checkbox } from "./Checkbox"; import RenderRowSubComponent from "./RenderRowSubComponent"; +import EditRow from "./EditRow"; import { useTable, @@ -37,6 +38,7 @@ const BasicTable = ({ activeTab, }) => { const data = useMemo(() => MOCK_DATA, []); + console.log(data); const [filtering, setFiltering] = useState(false); @@ -45,6 +47,32 @@ const BasicTable = ({ [] ); + const EditableCell = ({ + value: initialValue, + row: { index }, + column: { id }, + updateMyData, // This is a custom function that we supplied to our table instance + }) => { + // We need to keep and update the state of the cell normally + const [value, setValue] = React.useState(initialValue); + + const onChange = (e) => { + setValue(e.target.value); + }; + + // We'll only update the external data when the input is blurred + const onBlur = () => { + updateMyData(index, id, value); + }; + + // If the initialValue is changed external, sync it up with our state + React.useEffect(() => { + setValue(initialValue); + }, [initialValue]); + + return ; + }; + // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم const defaultColumn = useMemo(() => { return { @@ -351,279 +379,6 @@ const BasicTable = ({ ); }; -function EditRow({ row, columns }) { - console.log(row); - const persian = { - weight: "وزن", - pageNumber: "تعداد صفحات", - pageType: "نوع کاغذ", - bookNumber: "شماره شابک", - publisher: "انتشارات", - author: "نویسنده", - bookType: "قطع", - publishedYear: "سال انتشار", - }; - return ( -
- {/* right */} -
- {/* 1 */} -
-
-

- نام و نام خانوادگی: - -

-
- {/* 2 */} -
-
-

- تاریخ سفارش: - {row.order_date} -

-
- {/* 3 */} -
-
-

- مبلغ سفارش: - {row.order_price} -

-
- {/* 4 */} -
-
-

- شماره سفارش: - {row.order_number} -

-
- {/* 5 */} -
-
-

- شغل کاربر: - {row.user_job} -

-
- {/* 6 */} -
-
-

- وضعیت سفارش: - - {columns[5].Cell({ value: row.order_status })} - -

-
- {/* 7 */} -
-
-

- سطح اهمیت: - - {columns[6].Cell({ value: row.order_level })} - -

-
- {/* 8 */} -
-
-

- محل تولد: - {row.birth_place} -

-
- {/* 9 */} -
-
-

- تلفن محل کار: - {row.office_phone} -

-
- {/* 10 */} -
-
-

- تحصیلات: - {row.education} -

-
- {/* 11 */} -
-
-

- تاریخ تولد: - {row.birth_day} -

-
- {/* 12 */} -
-
-

- شغل: - {row.job} -

-
- {/* 13 */} -
-
-

- دانشگاه: - {row.uni} -

-
- {/* 14 */} -
-
-

- رشته تحصیلی: - {row.field_study} -

-
- {/* 15 */} -
-
-

- اخلاق: - {row.behaviour} -

-
- {/* 16 */} -
-
-

- نشانی: - {row.address} -

-
-
- {/* left */} -
- - -
-
- ); -} - export default BasicTable; BasicTable.defaultProps = { diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js index be2701e..3134228 100644 --- a/src/components/ReactTable4/Buttons.js +++ b/src/components/ReactTable4/Buttons.js @@ -7,11 +7,10 @@ import edit from "./edit.svg"; export const Buttons = ({ row, addTab }) => { const [activeDetails, setActiveDetails] = useState(null); return ( -
+
{ - console.log("mahdi"); setActiveDetails(!activeDetails); }} > @@ -21,10 +20,9 @@ export const Buttons = ({ row, addTab }) => { > جزئیات setActiveDetails(!activeDetails)} src={arrowIcon} alt="" - className={`mx-1 w-3 cursor-pointer mr-2 ${ + className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${ activeDetails ? "rotate-60" : "rotate-90" }`} /> diff --git a/src/components/ReactTable4/ColumnSearch.js b/src/components/ReactTable4/ColumnSearch.js index be57157..c610c4b 100644 --- a/src/components/ReactTable4/ColumnSearch.js +++ b/src/components/ReactTable4/ColumnSearch.js @@ -4,11 +4,11 @@ export const ColumnSearch = ({ column }) => { const { filterValue, setFilter } = column; return ( -
+
setFilter(e.target.value)} - className={`text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} + className={`w-8/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} />
diff --git a/src/components/ReactTable4/EditRow.js b/src/components/ReactTable4/EditRow.js new file mode 100644 index 0000000..f5aa4ee --- /dev/null +++ b/src/components/ReactTable4/EditRow.js @@ -0,0 +1,345 @@ +import React from "react"; + +const EditRow = ({ row, columns }) => { + console.log(columns); + + return ( +
+
+ {/* 1 */} +
+
+

+ نام و نام خانوادگی: +

+ +
+ {/* 2 */} +
+
+

+ تاریخ سفارش: +

+ +
+ {/* 3 */} +
+
+

+ مبلغ سفارش: +

+ +
+ {/* 4 */} +
+
+

+ شماره سفارش: +

+ +
+ {/* 5 */} +
+
+

+ شغل کاربر: +

+ +
+ {/* 6 */} +
+
+

+ وضعیت سفارش: +

+ +
+ {/* 7 */} +
+
+

+ سطح اهمیت: +

+ +
+ {/* 8 */} +
+
+

+ محل تولد: +

+ +
+ {/* 9 */} +
+
+

+ تلفن محل کار: +

+ +
+ {/* 10 */} +
+
+

+ تحصیلات: +

+ +
+ {/* 11 */} +
+
+

+ تاریخ تولد: +

+ +
+ {/* 12 */} +
+
+

+ شغل: +

+ +
+ {/* 13 */} +
+
+

+ دانشگاه: +

+ +
+ {/* 14 */} +
+
+

+ رشته تحصیلی: +

+ +
+ {/* 15 */} +
+
+

+ اخلاق: +

+ +
+ {/* 16 */} +
+
+

+ نشانی: +

+ +
+
+
+ ); +}; + +// {features.map((feature, index) => ( + +export default EditRow; + +{ + /*
+ + +
*/ +} diff --git a/src/components/ReactTable4/RenderRowSubComponent.js b/src/components/ReactTable4/RenderRowSubComponent.js index cea0d40..dd7be7c 100644 --- a/src/components/ReactTable4/RenderRowSubComponent.js +++ b/src/components/ReactTable4/RenderRowSubComponent.js @@ -1,6 +1,6 @@ import React from "react"; -const RenderRowSubComponent = ({ columns, addTab, row }) => { +const RenderRowSubComponent = ({ columns, addTab, row, EditableCell }) => { console.log(row); return ( @@ -94,10 +94,10 @@ const RenderRowSubComponent = ({ columns, addTab, row }) => { style={{ borderColor: "#65A9FF" }} > وضعیت سفارش: - - {columns[5].Cell({ value: row.order_status })} -

+ + {columns[5].Cell({ value: row.order_status })} +
{/* 7 */}
@@ -110,10 +110,10 @@ const RenderRowSubComponent = ({ columns, addTab, row }) => { style={{ borderColor: "#65A9FF" }} > سطح اهمیت: - - {columns[6].Cell({ value: row.order_level })} -

+ + {columns[6].Cell({ value: row.order_level })} +
{/* 8 */}
From d06ceba048d49f9cc00239a2e82c8621dfcb8e86 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 21 Feb 2022 20:52:16 +0330 Subject: [PATCH 09/10] update --- src/components/ReactTable4/BasicTable.js | 9 +- src/components/ReactTable4/EditRow.js | 556 ++++++++---------- .../ReactTable4/RenderRowSubComponent.js | 4 +- 3 files changed, 261 insertions(+), 308 deletions(-) diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 998e565..57902ff 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -38,7 +38,7 @@ const BasicTable = ({ activeTab, }) => { const data = useMemo(() => MOCK_DATA, []); - console.log(data); + // console.log(data); const [filtering, setFiltering] = useState(false); @@ -282,6 +282,7 @@ const BasicTable = ({ addTab={addTab} row={row.original} /> + {console.log(row.original)} ) : null} @@ -290,9 +291,7 @@ const BasicTable = ({ })}
10 ? "w-full" : "hidden" - }`} + className={`bg-blue-900 ${rows.length > 5 ? "w-full" : "hidden"}`} > {footerGroups.map((footerGroup, index) => ( @@ -300,7 +299,7 @@ const BasicTable = ({
{column.render("Header")} @@ -194,7 +197,7 @@ const BasicTable = ({ {/* filter row */} {filtering && ( -
{column.render("Header")} @@ -201,7 +201,10 @@ const BasicTable = ({ {headerGroups.map((headerGroup, index) => (
+ {column.canFilter ? column.render("Filter") : null}
- {RenderRowSubComponent({ + {/* {RenderRowSubComponent({ row: row.original, columns, - })} + addTab, + })} */} {/* {RenderRowSubComponent({ row: row.values })} */} +
{column.render("Footer")} diff --git a/src/components/ReactTable4/EditRow.js b/src/components/ReactTable4/EditRow.js index f5aa4ee..108b4bd 100644 --- a/src/components/ReactTable4/EditRow.js +++ b/src/components/ReactTable4/EditRow.js @@ -1,19 +1,19 @@ import React from "react"; const EditRow = ({ row, columns }) => { - console.log(columns); + // console.log(columns); return (
-
- {/* 1 */} -
+ {/* 1 */} +
+

{ > نام و نام خانوادگی:

- -
- {/* 2 */} -
-
-

- تاریخ سفارش: -

- -
- {/* 3 */} -
-
-

- مبلغ سفارش: -

- -
- {/* 4 */} -
-
-

- شماره سفارش: -

- -
- {/* 5 */} -
-
-

- شغل کاربر: -

- -
- {/* 6 */} -
-
-

- وضعیت سفارش: -

- -
- {/* 7 */} -
-
-

- سطح اهمیت: -

- -
- {/* 8 */} -
-
-

- محل تولد: -

- -
- {/* 9 */} -
-
-

- تلفن محل کار: -

- -
- {/* 10 */} -
-
-

- تحصیلات: -

- -
- {/* 11 */} -
-
-

- تاریخ تولد: -

- -
- {/* 12 */} -
-
-

- شغل: -

- -
- {/* 13 */} -
-
-

- دانشگاه: -

- -
- {/* 14 */} -
-
-

- رشته تحصیلی: -

- -
- {/* 15 */} -
-
-

- اخلاق: -

- -
- {/* 16 */} -
-
-

- نشانی: -

-
+ +
+ {/* 2 */} +
+
+

+ تاریخ سفارش: +

+ +
+ {/* 3 */} +
+
+

+ مبلغ سفارش: +

+ +
+ {/* 4 */} +
+
+

+ شماره سفارش: +

+ +
+ {/* 5 */} +
+
+

+ شغل کاربر: +

+ +
+ {/* 6 */} +
+
+

+ وضعیت سفارش: +

+ +
+ {/* 7 */} +
+
+

+ سطح اهمیت: +

+ +
+ {/* 8 */} +
+
+

+ محل تولد: +

+ +
+ {/* 9 */} +
+
+

+ تلفن محل کار: +

+ +
+ {/* 10 */} +
+
+

+ تحصیلات: +

+ +
+ {/* 11 */} +
+
+

+ تاریخ تولد: +

+ +
+ {/* 12 */} +
+
+

+ شغل: +

+ +
+ {/* 13 */} +
+
+

+ دانشگاه: +

+ +
+ {/* 14 */} +
+
+

+ رشته تحصیلی: +

+ +
+ {/* 15 */} +
+
+

+ اخلاق: +

+
+ {/* 16 */} +
+
+

+ نشانی: +

+ +
{" "}
); }; diff --git a/src/components/ReactTable4/RenderRowSubComponent.js b/src/components/ReactTable4/RenderRowSubComponent.js index dd7be7c..ef5a0d5 100644 --- a/src/components/ReactTable4/RenderRowSubComponent.js +++ b/src/components/ReactTable4/RenderRowSubComponent.js @@ -1,8 +1,6 @@ import React from "react"; -const RenderRowSubComponent = ({ columns, addTab, row, EditableCell }) => { - console.log(row); - +const RenderRowSubComponent = ({ columns, addTab, row }) => { return (
Date: Mon, 21 Feb 2022 22:32:18 +0330 Subject: [PATCH 10/10] update --- src/components/ReactTable4/EditRow.js | 120 +++++++++++++++----------- 1 file changed, 72 insertions(+), 48 deletions(-) diff --git a/src/components/ReactTable4/EditRow.js b/src/components/ReactTable4/EditRow.js index 108b4bd..72e6f19 100644 --- a/src/components/ReactTable4/EditRow.js +++ b/src/components/ReactTable4/EditRow.js @@ -5,7 +5,7 @@ const EditRow = ({ row, columns }) => { return (
{/* 1 */} @@ -25,89 +25,113 @@ const EditRow = ({ row, columns }) => {
{/* 2 */} -
-
-

- تاریخ سفارش: -

+
+
+
+

+ تاریخ سفارش: +

+
{/* 3 */} -
-
-

- مبلغ سفارش: -

+
+
+
+

+ مبلغ سفارش: +

+
{/* 4 */} -
-
-

- شماره سفارش: -

+
+
+
+

+ شماره سفارش: +

+
{/* 5 */} -
-
-

- شغل کاربر: -

+
+
+
+

+ شغل کاربر: +

+
{/* 6 */} -
-
-

- وضعیت سفارش: -

+
+
+
+

+ وضعیت سفارش: +

+