From 3a83c2e22825f8e475fe7108d8b047c480fafc47 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Tue, 8 Mar 2022 09:10:26 +0330 Subject: [PATCH] update --- src/App.js | 6 +- src/components/ReactTable5/BasicTable.js | 351 +++++++++++++++ src/components/ReactTable5/Buttons.js | 44 ++ src/components/ReactTable5/COLUMNS.js | 35 ++ src/components/ReactTable5/Checkbox.js | 21 + src/components/ReactTable5/ColumnSearch.js | 16 + src/components/ReactTable5/DropDown.js | 51 +++ src/components/ReactTable5/EditButtons.js | 43 ++ src/components/ReactTable5/EditRow.js | 398 ++++++++++++++++++ src/components/ReactTable5/GlobalFilter.js | 103 +++++ src/components/ReactTable5/GoToPage.js | 19 + src/components/ReactTable5/History.js | 64 +++ src/components/ReactTable5/Location.js | 15 + src/components/ReactTable5/MOCK_DATA.json | 325 ++++++++++++++ src/components/ReactTable5/MOCK_DATA2.json | 56 +++ src/components/ReactTable5/MultiRangeInput.js | 24 ++ src/components/ReactTable5/OrderLevel.js | 35 ++ src/components/ReactTable5/OrderStatus.js | 56 +++ src/components/ReactTable5/Pagination.js | 61 +++ .../ReactTable5/RenderRowSubComponent.js | 269 ++++++++++++ .../ReactTable5/SelectColumnFilter.js | 57 +++ .../ReactTable5/SelectColumnFilter2.js | 56 +++ src/components/ReactTable5/SendForm.js | 33 ++ src/components/ReactTable5/Settings.js | 39 ++ src/components/ReactTable5/ShowMoreRows.js | 31 ++ .../ReactTable5/SliderColumnFilter.js | 40 ++ src/components/ReactTable5/Tabbar.js | 66 +++ src/components/ReactTable5/ToggleColumns.js | 47 +++ src/components/ReactTable5/arrow-icon.svg | 6 + .../ReactTable5/black-arrow-left.svg | 4 + src/components/ReactTable5/blue-arrow.svg | 4 + .../ReactTable5/double-left-arrow.svg | 12 + src/components/ReactTable5/edit.svg | 6 + src/components/ReactTable5/filter.svg | 3 + .../ReactTable5/gray-arrow-left.svg | 4 + src/components/ReactTable5/images/ai.svg | 8 + .../ReactTable5/images/folder-open.svg | 10 + src/components/ReactTable5/images/image1.svg | 8 + src/components/ReactTable5/images/image2.svg | 8 + src/components/ReactTable5/images/image3.svg | 8 + src/components/ReactTable5/images/image4.svg | 8 + src/components/ReactTable5/images/xls.svg | 3 + src/components/ReactTable5/index.js | 97 +++++ src/components/ReactTable5/index.scss | 17 + src/components/ReactTable5/left-arrow.svg | 8 + src/components/ReactTable5/map.svg | 8 + src/components/ReactTable5/more2.svg | 10 + src/components/ReactTable5/plus.svg | 6 + src/components/ReactTable5/right-arrow.svg | 6 + src/components/ReactTable5/search-normal.svg | 10 + src/components/ReactTable5/settings.svg | 14 + src/components/ReactTable5/zarbedar-icon.svg | 6 + 52 files changed, 2633 insertions(+), 2 deletions(-) create mode 100644 src/components/ReactTable5/BasicTable.js create mode 100644 src/components/ReactTable5/Buttons.js create mode 100644 src/components/ReactTable5/COLUMNS.js create mode 100644 src/components/ReactTable5/Checkbox.js create mode 100644 src/components/ReactTable5/ColumnSearch.js create mode 100644 src/components/ReactTable5/DropDown.js create mode 100644 src/components/ReactTable5/EditButtons.js create mode 100644 src/components/ReactTable5/EditRow.js create mode 100644 src/components/ReactTable5/GlobalFilter.js create mode 100644 src/components/ReactTable5/GoToPage.js create mode 100644 src/components/ReactTable5/History.js create mode 100644 src/components/ReactTable5/Location.js create mode 100644 src/components/ReactTable5/MOCK_DATA.json create mode 100644 src/components/ReactTable5/MOCK_DATA2.json create mode 100644 src/components/ReactTable5/MultiRangeInput.js create mode 100644 src/components/ReactTable5/OrderLevel.js create mode 100644 src/components/ReactTable5/OrderStatus.js create mode 100644 src/components/ReactTable5/Pagination.js create mode 100644 src/components/ReactTable5/RenderRowSubComponent.js create mode 100644 src/components/ReactTable5/SelectColumnFilter.js create mode 100644 src/components/ReactTable5/SelectColumnFilter2.js create mode 100644 src/components/ReactTable5/SendForm.js create mode 100644 src/components/ReactTable5/Settings.js create mode 100644 src/components/ReactTable5/ShowMoreRows.js create mode 100644 src/components/ReactTable5/SliderColumnFilter.js create mode 100644 src/components/ReactTable5/Tabbar.js create mode 100644 src/components/ReactTable5/ToggleColumns.js create mode 100644 src/components/ReactTable5/arrow-icon.svg create mode 100644 src/components/ReactTable5/black-arrow-left.svg create mode 100644 src/components/ReactTable5/blue-arrow.svg create mode 100644 src/components/ReactTable5/double-left-arrow.svg create mode 100644 src/components/ReactTable5/edit.svg create mode 100644 src/components/ReactTable5/filter.svg create mode 100644 src/components/ReactTable5/gray-arrow-left.svg create mode 100644 src/components/ReactTable5/images/ai.svg create mode 100644 src/components/ReactTable5/images/folder-open.svg create mode 100644 src/components/ReactTable5/images/image1.svg create mode 100644 src/components/ReactTable5/images/image2.svg create mode 100644 src/components/ReactTable5/images/image3.svg create mode 100644 src/components/ReactTable5/images/image4.svg create mode 100644 src/components/ReactTable5/images/xls.svg create mode 100644 src/components/ReactTable5/index.js create mode 100644 src/components/ReactTable5/index.scss create mode 100644 src/components/ReactTable5/left-arrow.svg create mode 100644 src/components/ReactTable5/map.svg create mode 100644 src/components/ReactTable5/more2.svg create mode 100644 src/components/ReactTable5/plus.svg create mode 100644 src/components/ReactTable5/right-arrow.svg create mode 100644 src/components/ReactTable5/search-normal.svg create mode 100644 src/components/ReactTable5/settings.svg create mode 100644 src/components/ReactTable5/zarbedar-icon.svg diff --git a/src/App.js b/src/App.js index 362eca2..4f0ca6c 100644 --- a/src/App.js +++ b/src/App.js @@ -44,6 +44,7 @@ import TableDesign1 from "./components/Table/Design1"; import ReactTable2 from "./components/ReactTable2"; import ReactTable3 from "./components/ReactTable3"; import ReactTable4 from "./components/ReactTable4"; +import ReactTable5 from "./components/ReactTable5"; import Digikala from "./components/Digikala"; import Switch from "./components/Switch"; import BreadCrumb from "./components/BreadCrumb"; @@ -100,7 +101,8 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} + {/* */} {/*
@@ -112,7 +114,7 @@ function App() {
*/} {/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} diff --git a/src/components/ReactTable5/BasicTable.js b/src/components/ReactTable5/BasicTable.js new file mode 100644 index 0000000..c9ec718 --- /dev/null +++ b/src/components/ReactTable5/BasicTable.js @@ -0,0 +1,351 @@ +import React, { useMemo, useState } from "react"; + +import "./index.scss"; +import Tabbar from "./Tabbar"; + +import MOCK_DATA2 from "./MOCK_DATA2.json"; + +import { ColumnSearch } from "./ColumnSearch"; +import { GlobalFilter } from "./GlobalFilter"; + +import { COLUMNS } from "./COLUMNS"; +import { Pagination } from "./Pagination"; +import { GoToPage } from "./GoToPage"; +import ShowMoreRows from "./ShowMoreRows"; +import { Settings } from "./Settings"; +import { Checkbox } from "./Checkbox"; + +import RenderRowSubComponent from "./RenderRowSubComponent"; +import EditRow from "./EditRow"; + +import { + useTable, + useSortBy, + useGlobalFilter, + useFilters, + usePagination, + useRowSelect, + useColumnOrder, + useExpanded, +} from "react-table"; + +const BasicTable = ({ + settingsIcon, + thead, + addTab, + tabs, + delTab, + setActivateTab, + activeTab, +}) => { + const data = useMemo(() => MOCK_DATA2, []); + // console.log(data); + // console.log(MOCK_DATA2); + + 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 [filtering, setFiltering] = useState(false); + + const columns = React.useMemo( + () => COLUMNS({ filtering, setFiltering, addTab }), + [] + ); + + // const defaultColumn = { + // Cell: EditableCell, + // }; + // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم + const defaultColumn = useMemo(() => { + return { + Filter: ColumnSearch, + }; + }, []); + + // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند + const isEven = (idx) => idx % 2 === 0; + + const { + getTableProps, + getTableBodyProps, + headerGroups, + footerGroups, + rows, + page, + nextPage, + previousPage, + canNextPage, + canPreviousPage, + pageOptions, + gotoPage, + pageCount, + setPageSize, + prepareRow, + allColumns, + getToggleHideAllColumnsProps, + setColumnOrder, + selectedFlatRows, + state, + setGlobalFilter, + resetResizing, + } = useTable( + { + columns, + data, + defaultColumn, + }, + useColumnOrder, + useFilters, + useGlobalFilter, + useSortBy, + useExpanded, + usePagination, + useRowSelect, + (hooks) => { + hooks.visibleColumns.push((columns) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }) => ( + + ), + Cell: ({ row }) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + + const { globalFilter, pageIndex, pageSize } = state; + + return ( + <> +
+ {/* right box */} + + + + {/*
+ +
*/} + {/* left box */} + {activeTab == 0 ? ( +
+ {/* search box */} + + {/* pagination */} +
+ {/* go to page */} + + {/* vertical line */} +
+ {/* arrows */} + +
+ {/* settings icon */} + {settingsIcon && ( + + )} +
+ ) : null} +
+ {/* table */} + {activeTab == 0 ? ( + <> + + {thead && ( + + {headerGroups.map((headerGroup, index) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + )} + {/* filter row */} + {filtering && ( + + {headerGroups.map((headerGroup, index) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + )} + + {page.map((row, idx) => { + prepareRow(row); + return ( + + + {row.cells.map((cell, index) => { + return ( + + ); + })} + + {row.isExpanded ? ( + + + + ) : null} + + ); + })} + +
+ {column.render("Header")} + + {column.isSorted + ? column.isSortedDesc + ? " 🔽" + : " 🔼" + : ""} + +
+ {column.canFilter ? column.render("Filter") : null} +
+ {cell.render("Cell")} +
+ {/* {RenderRowSubComponent({ + row: row.original, + columns, + addTab, + })} */} + {/* {RenderRowSubComponent({ row: row.values })} */} + + {console.log(row.original)} +
+ {/* bottom table */} + + + + ) : ( + e.original && +e.original.id === activeTab) + ?.original || {} + } + columns={defaultColumn} + /> + )} + + ); +}; + +export default BasicTable; + +BasicTable.defaultProps = { + settingsIcon: true, + + thead: false, +}; diff --git a/src/components/ReactTable5/Buttons.js b/src/components/ReactTable5/Buttons.js new file mode 100644 index 0000000..e994201 --- /dev/null +++ b/src/components/ReactTable5/Buttons.js @@ -0,0 +1,44 @@ +import { useState } from "react"; + +import arrowIcon from "./arrow-icon.svg"; +import more from "./more2.svg"; +import edit from "./edit.svg"; +import DropDown from "./DropDown"; + +export const Buttons = ({ row, addTab }) => { + const [activeDetails, setActiveDetails] = useState(null); + return ( +
+
{ + setActiveDetails(!activeDetails); + }} + > + +
+
{ + addTab({ name: row.original.name, id: row.original.id }); + }} + > + +
+ {/* */} + +
+ ); +}; diff --git a/src/components/ReactTable5/COLUMNS.js b/src/components/ReactTable5/COLUMNS.js new file mode 100644 index 0000000..c3c0c7c --- /dev/null +++ b/src/components/ReactTable5/COLUMNS.js @@ -0,0 +1,35 @@ +import { format } from "date-fns"; + +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"; + +export const COLUMNS = ({ setFiltering, filtering, addTab }) => [ + { + Header: "ایکن فایل", + accessor: "filePic", + disableSortBy: true, + className: "bg-red-500 w-7", + }, + { + Header: "نام فایل", + accessor: "fileName", + className: "bg-blue-500 w-10", + }, + { + Header: "نوع فایل", + accessor: "fileType", + }, + { + Header: "سایز فایل", + accessor: "fileSize", + }, + { + Header: "تاریخ فایل", + accessor: "fileDate", + }, +]; diff --git a/src/components/ReactTable5/Checkbox.js b/src/components/ReactTable5/Checkbox.js new file mode 100644 index 0000000..b67c027 --- /dev/null +++ b/src/components/ReactTable5/Checkbox.js @@ -0,0 +1,21 @@ +import React from "react"; + +export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => { + const defaultRef = React.useRef(); + const resolvedRef = ref || defaultRef; + + React.useEffect(() => { + resolvedRef.current.indeterminate = indeterminate; + }, [resolvedRef, indeterminate]); + + return ( + <> + + + ); +}); diff --git a/src/components/ReactTable5/ColumnSearch.js b/src/components/ReactTable5/ColumnSearch.js new file mode 100644 index 0000000..c610c4b --- /dev/null +++ b/src/components/ReactTable5/ColumnSearch.js @@ -0,0 +1,16 @@ +import React, { useState } from "react"; + +export const ColumnSearch = ({ column }) => { + const { filterValue, setFilter } = column; + + return ( +
+ setFilter(e.target.value)} + 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/ReactTable5/DropDown.js b/src/components/ReactTable5/DropDown.js new file mode 100644 index 0000000..3c93430 --- /dev/null +++ b/src/components/ReactTable5/DropDown.js @@ -0,0 +1,51 @@ +import React from "react"; +import more from "./more2.svg"; + +export const DropDown = ({}) => { + return ( + + ); +}; + +export default DropDown; diff --git a/src/components/ReactTable5/EditButtons.js b/src/components/ReactTable5/EditButtons.js new file mode 100644 index 0000000..93ffa4d --- /dev/null +++ b/src/components/ReactTable5/EditButtons.js @@ -0,0 +1,43 @@ +import React, { useState } from "react"; +import Table from "./BasicTable"; + +import DropDown from "./DropDown"; + +import filter from "./filter.svg"; +import plus from "./plus.svg"; + +export function EditButtons({ setFiltering, filtering, addTab }) { + const [selectedFilterRow, setSelectedFilterRow] = useState(filtering); + + return ( +
+ {/* add new row */} + + {/* filter */} + { + setFiltering(!selectedFilterRow); + setSelectedFilterRow(!selectedFilterRow); + }} + /> + {/* dropDown */} + +
+ ); +} + +EditButtons.defaultProps = {}; diff --git a/src/components/ReactTable5/EditRow.js b/src/components/ReactTable5/EditRow.js new file mode 100644 index 0000000..5d5a292 --- /dev/null +++ b/src/components/ReactTable5/EditRow.js @@ -0,0 +1,398 @@ +import React from "react"; +import SendForm from "./SendForm"; +import Location from "./Location"; +import History from "./History"; + +const EditRow = ({ row, columns }) => { + // console.log(columns); + return ( +
+
+
+

+ اطلاعات هویتی +

+
+ {/* table data */} +
+ {/* 1 */} +
+

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

+ + {row.name} + +
+ {/* 2 */} +
+

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

+ + {row.order_date} + +
+ {/* 3 */} +
+

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

+ + {row.order_price} + +
+ {/* 4 */} +
+

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

+ + {row.order_number} + +
+ {/* 5 */} +
+

+ شغل کاربر: +

+ + {row.user_job} + +
+ {/* 6 */} +
+

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

+ + {row.order_status} + +
+ {/* 7 */} +
+

+ سطح اهمیت: +

+ + {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} + +
+
+ {/* title bottom */} +
+
+

+ اطلاعات شخصی +

+
+ {/* bottom */} +
+ {/* right */} +
+ {/* map */} + + {/* formInput */} + + {/* previous */} + +
+ {/* left */} +
+ +
+
+
+ ); +}; + +export default EditRow; + +EditRow.defaultProps = {}; diff --git a/src/components/ReactTable5/GlobalFilter.js b/src/components/ReactTable5/GlobalFilter.js new file mode 100644 index 0000000..5932ea8 --- /dev/null +++ b/src/components/ReactTable5/GlobalFilter.js @@ -0,0 +1,103 @@ +import React, { useState } from "react"; +import { useAsyncDebounce } from "react-table"; + +import search from "./search-normal.svg"; +import cancleIcon from "./zarbedar-icon.svg"; + +export const GlobalFilter = ({ filter, setFilter }) => { + const [activeSearchBox, setActiveSearchBox] = useState(false); + + const [value, setValue] = useState(filter); + + const onChange = useAsyncDebounce((value) => { + setFilter(value || undefined); + }, 400); + + return ( +
+ {activeSearchBox && ( + setActiveSearchBox(false)} + /> + )} + + setFilter(e.target.value)} + 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`} + style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} + /> +
+ ); +}; + +{ + /* { + setValue(e.target.value); + onChange(e.target.value); + }} + onFocus={() => setActiveSearchBox(true)} + // onBlur={() => setActiveSearchBox(false)} + type="text" + className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`} + style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} + /> */ +} + +// ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم + +// import React, { useState } from "react"; +// import { useAsyncDebounce } from "react-table"; + +// import search from "./search-normal.svg"; +// import cancleIcon from "./zarbedar-icon.svg"; + +// export const GlobalFilter = ({ filter, setFilter }) => { +// const [activeSearchBox, setActiveSearchBox] = useState(false); + +// const [value, setValue] = useState(filter); + +// const onChange = useAsyncDebounce((value) => { +// setFilter(value || undefined); +// }, 400); + +// return ( +//
+// {activeSearchBox === true ? ( +// +// ) : ( +// +// )} +// setFilter(e.target.value)} +// 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`} +// style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} +// /> +// {console.log(activeSearchBox)}{" "} +//
+// ); +// }; diff --git a/src/components/ReactTable5/GoToPage.js b/src/components/ReactTable5/GoToPage.js new file mode 100644 index 0000000..e18d585 --- /dev/null +++ b/src/components/ReactTable5/GoToPage.js @@ -0,0 +1,19 @@ +import React from "react"; + +export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => { + return ( + + صفحه{" "} + { + const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; + gotoPage(pageNumber); + }} + /> + از {pageOptions.length} + + ); +}; diff --git a/src/components/ReactTable5/History.js b/src/components/ReactTable5/History.js new file mode 100644 index 0000000..5b421a6 --- /dev/null +++ b/src/components/ReactTable5/History.js @@ -0,0 +1,64 @@ +import React from "react"; + +const History = ({ sentForms }) => { + return ( +
+ {/* title */} + + توضیحات قبلی: + + {/* content */} +
+ {/* {sentForms.slice(0, 4).map((sentForm, index) => ( */} + {sentForms.map((sentForm, index) => ( +
+ {/* content */} +
+

+ {sentForm.title} +

+

+ تاریخ: + {" "} + {sentForm.date} +

+
+ {/* border */} + {Number(index) !== sentForms.length - 1 && ( +
+ )} +
+ ))} +
+ {/* left border */} +
+
+ ); +}; + +export default History; + +History.defaultProps = { + sentForms: [ + { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" }, + { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" }, + { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" }, + { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" }, + { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" }, + { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" }, + { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" }, + { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" }, + ], +}; diff --git a/src/components/ReactTable5/Location.js b/src/components/ReactTable5/Location.js new file mode 100644 index 0000000..09625db --- /dev/null +++ b/src/components/ReactTable5/Location.js @@ -0,0 +1,15 @@ +import React from "react"; +import map from "./map.svg"; + +const Location = () => { + return ( +
+ + لوکیشن مد نظر: + + +
+ ); +}; + +export default Location; diff --git a/src/components/ReactTable5/MOCK_DATA.json b/src/components/ReactTable5/MOCK_DATA.json new file mode 100644 index 0000000..09a8f0b --- /dev/null +++ b/src/components/ReactTable5/MOCK_DATA.json @@ -0,0 +1,325 @@ +[ + { + "id": 1, + "name": "خسرو سهرابی", + "order_date": "1400/11/09", + "order_price": 1, + "order_number": "09120023100", + "user_job": "مهندس ساختمان", + "order_status": 1, + "order_level": 1, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 2, + "name": "خسرو شکیبایی", + "order_date": "1340/04/13", + "order_price": 2, + "order_number": "09390646589", + "user_job": "بازیگر", + "order_status": 2, + "order_level": 2, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 3, + "name": "علی علوی", + "order_date": "1330/12/05", + "order_price": 3, + "order_number": "09120403285", + "user_job": "تاجر", + "order_status": 3, + "order_level": 3, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 4, + "name": "پارسا ایرانی", + "order_date": "1372/01/08", + "order_price": 4, + "order_number": "09120336508", + "user_job": "حسابدار", + "order_status": 4, + "order_level": 4, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 5, + "name": "محمد محمدی", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 6, + "name": "خسرو سهرابی", + "order_date": "1400/11/09", + "order_price": 1, + "order_number": "09120023100", + "user_job": "مهندس ساختمان", + "order_status": 1, + "order_level": 1, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 7, + "name": "خسرو شکیبایی", + "order_date": "1340/04/13", + "order_price": 2, + "order_number": "09390646589", + "user_job": "بازیگر", + "order_status": 2, + "order_level": 2, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 8, + "name": "علی علوی", + "order_date": "1330/12/05", + "order_price": 3, + "order_number": "09120403285", + "user_job": "تاجر", + "order_status": 3, + "order_level": 3, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 9, + "name": "پارسا ایرانی", + "order_date": "1372/01/08", + "order_price": 4, + "order_number": "09120336508", + "user_job": "حسابدار", + "order_status": 4, + "order_level": 4, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 10, + "name": "محمد محمدی", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 11, + "name": "محمد fds", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 12, + "name": "fffff fds", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 13, + "name": "fffff fds", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 14, + "name": "jjkjhg", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 15, + "name": "fffff jghjhg", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 16, + "name": "fffff jghjhg", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + }, + { + "id": 17, + "name": "fffff jghjhg", + "order_date": "1389/01/26", + "order_price": 5, + "order_number": "0913698574", + "user_job": "دکتر", + "order_status": 5, + "order_level": 5, + "birth_place": "استان تهران شهر تهران", + "office_phone": "02144407010", + "education": "کارشناسی", + "job": "فروشنده لوازم خانگی", + "field_study": "مدیریت صنعتی", + "birth_day": "1368/09/02", + "uni": "تهران", + "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", + "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" + } +] diff --git a/src/components/ReactTable5/MOCK_DATA2.json b/src/components/ReactTable5/MOCK_DATA2.json new file mode 100644 index 0000000..ed2871f --- /dev/null +++ b/src/components/ReactTable5/MOCK_DATA2.json @@ -0,0 +1,56 @@ +[ + { + "id": 1, + "filePic": "picture", + "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315", + "fileName": "تهران شهری برای آیندگان", + "fileType": "JPG", + "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", + "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", + "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", + "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", + "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", + "fileSize": "150MB", + "fileDate": "1393/10/20" + } +] diff --git a/src/components/ReactTable5/MultiRangeInput.js b/src/components/ReactTable5/MultiRangeInput.js new file mode 100644 index 0000000..08a0d5f --- /dev/null +++ b/src/components/ReactTable5/MultiRangeInput.js @@ -0,0 +1,24 @@ +import React, { Component } from "react"; +import InputRange from "react-input-range"; + +export default class MultiRangeInput extends Component { + constructor(props) { + super(props); + + this.state = { + value: { min: 2, max: 10 }, + }; + } + render() { + return ( +
+ this.setState({ value })} + /> +
+ ); + } +} diff --git a/src/components/ReactTable5/OrderLevel.js b/src/components/ReactTable5/OrderLevel.js new file mode 100644 index 0000000..a09965a --- /dev/null +++ b/src/components/ReactTable5/OrderLevel.js @@ -0,0 +1,35 @@ +export function OrderLevel({ value }) { + return ( +
+ {(() => { + switch(value) { + case 1: + return
+ + وضعیت عادی +
; + case 2: + return
+ + اعلان سطح هشدار +
; + case 3: + return
+ + بررسی و پیگیری +
; + case 4: + return
+ + وضعیت بحرانی +
; + default: + return
+ + وضعیت پایدار +
; + } + })()} +
+ ); + } diff --git a/src/components/ReactTable5/OrderStatus.js b/src/components/ReactTable5/OrderStatus.js new file mode 100644 index 0000000..91e6ba6 --- /dev/null +++ b/src/components/ReactTable5/OrderStatus.js @@ -0,0 +1,56 @@ +export function OrderStatus({ value }) { + value = +value; + + return ( +
+ {(() => { + if (value === 1) { + return ( + + ارسال شده + + ); + } else if (value === 2) { + return ( + + رسیدگی + + ); + } else if (value === 3) { + return ( + + لغو شده + + ); + } else if (value === 4) { + return ( + + پیگیری + + ); + } else { + return ( + + خطری + + ); + } + })()}{" "} +
+ ); +} diff --git a/src/components/ReactTable5/Pagination.js b/src/components/ReactTable5/Pagination.js new file mode 100644 index 0000000..de553b4 --- /dev/null +++ b/src/components/ReactTable5/Pagination.js @@ -0,0 +1,61 @@ +import React from "react"; +import dobleLeftArrow from "./double-left-arrow.svg"; +import leftArrow from "./left-arrow.svg"; +import rightArrow from "./right-arrow.svg"; + +export const Pagination = ({ + gotoPage, + canPreviousPage, + previousPage, + canNextPage, + pageCount, + nextPage, +}) => { + return ( +
+ + + + +
+ ); +}; + +export default Pagination; + +// Pagination.defaultProps = { +// pagintaionButtons: [ +// { +// image: { dobleLeftArrow }, +// click: gotoPage(0), +// }, +// ], +// }; diff --git a/src/components/ReactTable5/RenderRowSubComponent.js b/src/components/ReactTable5/RenderRowSubComponent.js new file mode 100644 index 0000000..ef5a0d5 --- /dev/null +++ b/src/components/ReactTable5/RenderRowSubComponent.js @@ -0,0 +1,269 @@ +import React from "react"; + +const RenderRowSubComponent = ({ columns, addTab, 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; diff --git a/src/components/ReactTable5/SelectColumnFilter.js b/src/components/ReactTable5/SelectColumnFilter.js new file mode 100644 index 0000000..0e4fae7 --- /dev/null +++ b/src/components/ReactTable5/SelectColumnFilter.js @@ -0,0 +1,57 @@ +import React from "react"; +// {columns[5].Cell({ value: row.order_status })} + +export const SelectColumnFilter = ({ + column: { filterValue, setFilter, preFilteredRows, id, render, columns }, +}) => { + const options = React.useMemo(() => { + const options = new Set(); + preFilteredRows.forEach((row) => { + options.add(row.values[id]); + }); + return [...options.values()]; + }, [id, preFilteredRows]); + + return ( + + ); +}; diff --git a/src/components/ReactTable5/SelectColumnFilter2.js b/src/components/ReactTable5/SelectColumnFilter2.js new file mode 100644 index 0000000..36d5c6e --- /dev/null +++ b/src/components/ReactTable5/SelectColumnFilter2.js @@ -0,0 +1,56 @@ +import React from "react"; + +export const SelectColumnFilter2 = ({ + 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 ( + + ); +}; diff --git a/src/components/ReactTable5/SendForm.js b/src/components/ReactTable5/SendForm.js new file mode 100644 index 0000000..5e85902 --- /dev/null +++ b/src/components/ReactTable5/SendForm.js @@ -0,0 +1,33 @@ +import React from "react"; + +const SendForm = () => { + return ( +
+ + توضیحات: + +
+ + +
+
+ ); +}; + +export default SendForm; diff --git a/src/components/ReactTable5/Settings.js b/src/components/ReactTable5/Settings.js new file mode 100644 index 0000000..7dece26 --- /dev/null +++ b/src/components/ReactTable5/Settings.js @@ -0,0 +1,39 @@ +import React, { useState } from "react"; +import { ToggleColumns } from "./ToggleColumns"; + +import settings from "./settings.svg"; + +export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => { + const [openModal, setOpenModal] = useState(false); + console.log(openModal); + + return ( +
+
setOpenModal(true)} + data-modal-toggle="large-modal" + style={{ backgroundColor: "#F9FBFF" }} + className="mr-2 flex flex-col items-center justify-center p-1 rounded" + > + +
+ {/* modal */} +
setOpenModal(false)} + > +
e.stopPropagation()} + > + +
+
+
+ ); +}; diff --git a/src/components/ReactTable5/ShowMoreRows.js b/src/components/ReactTable5/ShowMoreRows.js new file mode 100644 index 0000000..f871664 --- /dev/null +++ b/src/components/ReactTable5/ShowMoreRows.js @@ -0,0 +1,31 @@ +import React from "react"; + +const ShowMoreRows = ({ pageSize, setPageSize }) => { + return ( + + ); +}; + +export default ShowMoreRows; diff --git a/src/components/ReactTable5/SliderColumnFilter.js b/src/components/ReactTable5/SliderColumnFilter.js new file mode 100644 index 0000000..f5aa2bb --- /dev/null +++ b/src/components/ReactTable5/SliderColumnFilter.js @@ -0,0 +1,40 @@ +import React from "react"; + +import cancleIcon from "./zarbedar-icon.svg"; + +export const SliderColumnFilter = ({ + column: { filterValue, setFilter, preFilteredRows, id }, +}) => { + const [min, max] = React.useMemo(() => { + let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; + let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; + preFilteredRows.forEach((row) => { + min = Math.min(row.values[id], min); + max = Math.max(row.values[id], max); + }); + return [min, max]; + }, [id, preFilteredRows]); + + return ( +
+ { + setFilter(parseInt(e.target.value, 10)); + }} + /> +
+ setFilter(undefined)} + className="cursor-pointer w-2 h-2" + /> +
+ {/* */} +
+ ); +}; diff --git a/src/components/ReactTable5/Tabbar.js b/src/components/ReactTable5/Tabbar.js new file mode 100644 index 0000000..353ad1b --- /dev/null +++ b/src/components/ReactTable5/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/ReactTable5/ToggleColumns.js b/src/components/ReactTable5/ToggleColumns.js new file mode 100644 index 0000000..6933917 --- /dev/null +++ b/src/components/ReactTable5/ToggleColumns.js @@ -0,0 +1,47 @@ +import React from "react"; + +export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => { + // console.log(allColumns); + + return ( +
+

+ با زدن بر روی هر یک از چک باکس ها میتوانید نمایش ستون هارو خاموش روشن + کنید{" "} +

+
+ {" "} + تاگل کردن همه +
+ {allColumns.map((column, index) => ( +
+ +
+ ))} + {/* اگر میخواستیم فیلتر بزاریم */} + {/* {allColumns + .filter((column) => column.Header === "string") + .map((column, index) => ( +
+ +
+ ))} */} +
+ ); +}; + +export default ToggleColumns; diff --git a/src/components/ReactTable5/arrow-icon.svg b/src/components/ReactTable5/arrow-icon.svg new file mode 100644 index 0000000..589a9ba --- /dev/null +++ b/src/components/ReactTable5/arrow-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable5/black-arrow-left.svg b/src/components/ReactTable5/black-arrow-left.svg new file mode 100644 index 0000000..d673f67 --- /dev/null +++ b/src/components/ReactTable5/black-arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/ReactTable5/blue-arrow.svg b/src/components/ReactTable5/blue-arrow.svg new file mode 100644 index 0000000..a688a28 --- /dev/null +++ b/src/components/ReactTable5/blue-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/ReactTable5/double-left-arrow.svg b/src/components/ReactTable5/double-left-arrow.svg new file mode 100644 index 0000000..03e2680 --- /dev/null +++ b/src/components/ReactTable5/double-left-arrow.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/ReactTable5/edit.svg b/src/components/ReactTable5/edit.svg new file mode 100644 index 0000000..85f109e --- /dev/null +++ b/src/components/ReactTable5/edit.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable5/filter.svg b/src/components/ReactTable5/filter.svg new file mode 100644 index 0000000..6b8c315 --- /dev/null +++ b/src/components/ReactTable5/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/ReactTable5/gray-arrow-left.svg b/src/components/ReactTable5/gray-arrow-left.svg new file mode 100644 index 0000000..5cc20f2 --- /dev/null +++ b/src/components/ReactTable5/gray-arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/ReactTable5/images/ai.svg b/src/components/ReactTable5/images/ai.svg new file mode 100644 index 0000000..22659c2 --- /dev/null +++ b/src/components/ReactTable5/images/ai.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/images/folder-open.svg b/src/components/ReactTable5/images/folder-open.svg new file mode 100644 index 0000000..904bc6d --- /dev/null +++ b/src/components/ReactTable5/images/folder-open.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ReactTable5/images/image1.svg b/src/components/ReactTable5/images/image1.svg new file mode 100644 index 0000000..5db5ee7 --- /dev/null +++ b/src/components/ReactTable5/images/image1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/images/image2.svg b/src/components/ReactTable5/images/image2.svg new file mode 100644 index 0000000..e88d3f3 --- /dev/null +++ b/src/components/ReactTable5/images/image2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/images/image3.svg b/src/components/ReactTable5/images/image3.svg new file mode 100644 index 0000000..8e63235 --- /dev/null +++ b/src/components/ReactTable5/images/image3.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/images/image4.svg b/src/components/ReactTable5/images/image4.svg new file mode 100644 index 0000000..c39c6a7 --- /dev/null +++ b/src/components/ReactTable5/images/image4.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/images/xls.svg b/src/components/ReactTable5/images/xls.svg new file mode 100644 index 0000000..676361f --- /dev/null +++ b/src/components/ReactTable5/images/xls.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/ReactTable5/index.js b/src/components/ReactTable5/index.js new file mode 100644 index 0000000..0a7c589 --- /dev/null +++ b/src/components/ReactTable5/index.js @@ -0,0 +1,97 @@ +import React, { useRef, useState } from "react"; + +import BasicTable from "./BasicTable"; +import TitleSubtitle from "../TitleSubtitle"; + +import MultiRangeInput from "./MultiRangeInput"; + +import grayLeftArrow from "./gray-arrow-left.svg"; +import { BreadCrumb } from "../BreadCrumb"; + +const ReactTable5 = ({ breadCrumbs, subTitle, title }) => { + 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; + + const addTab = (newTab) => { + setActivateTab(newTab.id); + 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); + }; + + return ( +
+ {/* breadCrumb */} +
+ {breadCrumbs.map((breadCrumb, index) => ( +
+ + {breadCrumb.name} + + {Number(index) !== breadCrumbs.length - 1 && ( +
+ +
+ )} +
+ ))} +
+
+ +
+ +
+ ); +}; + +export default ReactTable5; + +ReactTable5.defaultProps = { + breadCrumbs: [ + { + name: "صفحه اصلی", + active: false, + }, + { + name: "آمار و گزارشات", + active: false, + }, + { + name: "فروش محصولات", + active: false, + }, + { + name: "سال 1400", + active: true, + }, + ], + + title: "میزان فروش محصولات", + subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", +}; diff --git a/src/components/ReactTable5/index.scss b/src/components/ReactTable5/index.scss new file mode 100644 index 0000000..99ead7d --- /dev/null +++ b/src/components/ReactTable5/index.scss @@ -0,0 +1,17 @@ +.customeClass1 .customeClass2 input { + display: none !important; +} +.customeClass1 .customeClass2 span { + display: none !important; +} +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.tabbar { + cursor: pointer; +} +.active2, +.active2 li a { + cursor: move !important; +} diff --git a/src/components/ReactTable5/left-arrow.svg b/src/components/ReactTable5/left-arrow.svg new file mode 100644 index 0000000..3212c91 --- /dev/null +++ b/src/components/ReactTable5/left-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/map.svg b/src/components/ReactTable5/map.svg new file mode 100644 index 0000000..655e47e --- /dev/null +++ b/src/components/ReactTable5/map.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ReactTable5/more2.svg b/src/components/ReactTable5/more2.svg new file mode 100644 index 0000000..3967400 --- /dev/null +++ b/src/components/ReactTable5/more2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ReactTable5/plus.svg b/src/components/ReactTable5/plus.svg new file mode 100644 index 0000000..cca7283 --- /dev/null +++ b/src/components/ReactTable5/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable5/right-arrow.svg b/src/components/ReactTable5/right-arrow.svg new file mode 100644 index 0000000..1cf09b1 --- /dev/null +++ b/src/components/ReactTable5/right-arrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable5/search-normal.svg b/src/components/ReactTable5/search-normal.svg new file mode 100644 index 0000000..49604d0 --- /dev/null +++ b/src/components/ReactTable5/search-normal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ReactTable5/settings.svg b/src/components/ReactTable5/settings.svg new file mode 100644 index 0000000..fea3eb9 --- /dev/null +++ b/src/components/ReactTable5/settings.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/ReactTable5/zarbedar-icon.svg b/src/components/ReactTable5/zarbedar-icon.svg new file mode 100644 index 0000000..682f7a5 --- /dev/null +++ b/src/components/ReactTable5/zarbedar-icon.svg @@ -0,0 +1,6 @@ + + + + + +