diff --git a/src/App.js b/src/App.js index 03f6f75..b4e5b6b 100644 --- a/src/App.js +++ b/src/App.js @@ -42,7 +42,8 @@ import Design1 from "./components/ProductSalesAmount/Design1"; import Design2 from "./components/ProductSalesAmount/Design2"; import TableDesign1 from "./components/Table/Design1"; import ReactTable2 from "./components/ReactTable2"; -import ReactTable3 from "./components/ReactTable3"; +// import ReactTable3 from "./components/ReactTable3"; +import ReactTable4 from "./components/ReactTable4"; import Switch from "./components/Switch"; @@ -89,7 +90,8 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} + ); diff --git a/src/components/ReactTable3/index.js b/src/components/ReactTable3/index.js index 306ac27..83d6272 100644 --- a/src/components/ReactTable3/index.js +++ b/src/components/ReactTable3/index.js @@ -5,7 +5,7 @@ import BasicTable from "./BasicTable"; const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { return (
-

+

search box pop up CLICK ON THE SEARCH ICON AND SEE THE RESULT

{/* breadCrumb */} diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js new file mode 100644 index 0000000..9ea7140 --- /dev/null +++ b/src/components/ReactTable4/BasicTable.js @@ -0,0 +1,382 @@ +import React, { useMemo } from "react"; + +import "./index.scss"; + +import { + useTable, + useSortBy, + useGlobalFilter, + useFilters, + usePagination, + useRowSelect, + useColumnOrder, + useExpanded, + useResizeColumns, +} from "react-table"; + +import { COLUMNS } from "./columns"; +import { GlobalFilter } from "./GlobalFilter"; +import { Checkbox } from "./Checkbox"; +import MOCK_DATA from "./MOCK_DATA.json"; + +// This is a custom filter UI for selecting +// a unique option from a list +export function SelectColumnFilter({ + column: { filterValue, setFilter, preFilteredRows, id, render }, +}) { + const options = React.useMemo(() => { + const options = new Set(); + preFilteredRows.forEach((row) => { + options.add(row.values[id]); + }); + return [...options.values()]; + }, [id, preFilteredRows]); + + // Render a multi-select box + return ( + + ); +} + +const BasicTable = () => { + const columns = React.useMemo(() => COLUMNS, []); + const data = useMemo(() => MOCK_DATA, []); + + // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند + 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, + // initialState: { pageIndex: 2 } + }, + useColumnOrder, + useFilters, + useGlobalFilter, + useSortBy, + useExpanded, + usePagination, + useRowSelect, + (hooks) => { + hooks.visibleColumns.push((columns) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }) => ( + + ), + Cell: ({ row }) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + + const changeOrder = () => { + setColumnOrder([ + "name", + "order-number", + "user-job", + "order-level", + "order-status", + "order-price", + ]); + }; + + const { globalFilter, pageIndex, pageSize } = state; + // const firstPageRows = rows.slice(0, 10); + return ( + <> +
+ {headerGroups.map((headerGroup) => + headerGroup.headers.map((column) => + column.Filter ? ( +
+ {column.render("Filter")} +
+ ) : null + ) + )} +
+
+ {/* search box */} + {/* */} + {/* pagination */} +
+ {/* go to page */} +
+ { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + /> + + {" "} + برو به صفحه{" "} + +
+ {/* */} +
+ {/* arrows */} + + + + +
+
+ {/* */} + {/* toggle columns */} + {/*
+
+ Toggle All +
+ {allColumns.map((column) => ( +
+ +
+ ))} +
*/} + {/* Change Column Order */} + {/* */} + + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + + {page.map((row, idx) => { + prepareRow(row); + return ( + + + {row.cells.map((cell) => { + return ( + + ); + })} + + {row.isExpanded ? ( + + + + ) : null} + + ); + })} + + + 10 ? "w-full" : "hidden"}`} + > + {footerGroups.map((footerGroup) => ( + + {footerGroup.headers.map((column) => ( + + ))} + + ))} + +
+ {column.render("Header")} + + {column.isSorted + ? column.isSortedDesc + ? " 🔽" + : " 🔼" + : ""} + +
+ {cell.render("Cell")} +
+ {renderRowSubComponent({ row: row.values })} +
+ {column.render("Footer")} +
+ 
+        
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        
+
+ +
+ + صفحه{" "} + + {pageIndex + 1} از {pageOptions.length} + + {""} + + + +
+ + ); +}; + +function renderRowSubComponent({ row }) { + return ( +
+ نام‌: {row.name} +
+ +
+ ); +} +export default BasicTable; diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js new file mode 100644 index 0000000..746e885 --- /dev/null +++ b/src/components/ReactTable4/Buttons.js @@ -0,0 +1,31 @@ +import arrowIcon from "./arrow-icon.svg"; +import more from "./more2.svg"; +import edit from "./edit.svg"; + +import { useState } from "react"; + +export function Buttons({ row }) { + const [activeDetails, setActiveDetails] = useState(null); + return ( +
+ +
+ +
+ +
+ ); +} diff --git a/src/components/ReactTable4/Checkbox.js b/src/components/ReactTable4/Checkbox.js new file mode 100644 index 0000000..7a63ae4 --- /dev/null +++ b/src/components/ReactTable4/Checkbox.js @@ -0,0 +1,16 @@ +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/ReactTable4/ColumnFilter.js b/src/components/ReactTable4/ColumnFilter.js new file mode 100644 index 0000000..f70108e --- /dev/null +++ b/src/components/ReactTable4/ColumnFilter.js @@ -0,0 +1,19 @@ +import React from 'react'; + +export const ColumnFilter = ({ column }) => { + + const { filterValue, setFilter } = column + + return ( + + + + Search: {''} + + setFilter(e.target.value)} /> + + + + ); +}; diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js new file mode 100644 index 0000000..4d09856 --- /dev/null +++ b/src/components/ReactTable4/EditButtons.js @@ -0,0 +1,126 @@ +import React, { useState } from "react"; + +import filter from "./filter.svg"; +import plus from "./plus.svg"; +import more from "./more2.svg"; + +export function EditButtons({ buttons }) { + const [selectedButton, setSelectedButton] = useState(null); + return ( +
+ {buttons.map((button, index) => ( +
+ + +
+ ))} +
+ ); +} + +EditButtons.defaultProps = { + buttons: [ + { + logo: plus, + width: "w-3", + height: "h-3", + title: "ثبت جدید", + backgroundColor: "#65A9FF", + border: "border-b-4", + borderColor: "#3686EC", + padding: "4px 7px", + components: "d", + buttonSubItems: [], + }, + { + logo: filter, + width: "w-5", + height: "h-5", + title: null, + backgroundColor: "#F3F8FF", + border: null, + borderColor: null, + components: "a", + buttonSubItems: [], + }, + { + logo: more, + width: "w-5", + height: "h-5", + title: null, + textColor: null, + backgroundColor: "#F3F8FF", + border: null, + borderColor: null, + components: "a", + buttonSubItems: [ + { + title: "دراپ داون 1", + }, + { + title: "دراپ داون 2", + }, + { + title: "دراپ داون 3", + }, + { + title: "دراپ داون 4", + }, + { + title: "دراپ داون 5", + }, + ], + }, + ], +}; + +// { +// 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 new file mode 100644 index 0000000..ea538b4 --- /dev/null +++ b/src/components/ReactTable4/GlobalFilter.js @@ -0,0 +1,27 @@ +import React, { useState } from "react"; +import { useAsyncDebounce } from "react-table"; + +import search from "./search-normal.svg"; + +export const GlobalFilter = ({ filter, setFilter }) => { + const [openModal, setOpenModal] = useState(true); + + const [value, setValue] = useState(filter); + + const onChange = useAsyncDebounce((value) => { + setFilter(value || undefined); + }, 400); + + return ( + { + setValue(e.target.value); + onChange(e.target.value); + }} + type="text" + placeholder="نام کالا را جستجو کنید..." + className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none" + /> + ); +}; diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json new file mode 100644 index 0000000..a4056ca --- /dev/null +++ b/src/components/ReactTable4/MOCK_DATA.json @@ -0,0 +1,182 @@ +[ + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "name": "مایکروویر سامسونگ مدل 2", + "order-date": "1399/09/25", + "order-price": 26, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 2, + "order-level": 2 + }, + { + "name": "مایکروویر سامسونگ مدل 3", + "order-date": "1399/09/22", + "order-price": 44, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 3, + "order-level": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 + }, + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "name": "مایکروویر سامسونگ مدل 2", + "order-date": "1399/09/25", + "order-price": 26, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 2, + "order-level": 2 + }, + { + "name": "مایکروویر سامسونگ مدل 3", + "order-date": "1399/09/22", + "order-price": 44, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 3, + "order-level": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 + }, + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "name": "مایکروویر سامسونگ مدل 2", + "order-date": "1399/09/25", + "order-price": 26, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 2, + "order-level": 2 + }, + { + "name": "مایکروویر سامسونگ مدل 3", + "order-date": "1399/09/22", + "order-price": 44, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 3, + "order-level": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 + }, + { + "name": "مایکروویر سامسونگ مدل 1", + "order-date": "1399/09/27", + "order-price": 27, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 1, + "order-level": 1 + }, + { + "name": "مایکروویر سامسونگ مدل 2", + "order-date": "1399/09/25", + "order-price": 26, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 2, + "order-level": 2 + }, + { + "name": "مایکروویر سامسونگ مدل 3", + "order-date": "1399/09/22", + "order-price": 44, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 3, + "order-level": 3 + }, + { + "name": "لپ تاپ مک بوک اپل", + "order-date": "1410/09/27", + "order-price": 73, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 4, + "order-level": 4 + }, + { + "name": "تبلت اپل", + "order-date": "1375/09/25", + "order-price": 96, + "order-number": "09120023100", + "user-job": "مهندس ساختمان", + "order-status": 5, + "order-level": 5 + } +] diff --git a/src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js b/src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js new file mode 100644 index 0000000..968b271 --- /dev/null +++ b/src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js @@ -0,0 +1,302 @@ +import React, { useMemo } from "react"; + +import { + useTable, + useSortBy, + useGlobalFilter, + useFilters, + usePagination, + useRowSelect, + useColumnOrder, +} from "react-table"; + +import { COLUMNS } from "./columns"; + +import { GlobalFilter } from "./GlobalFilter"; + +import { Checkbox } from "./Checkbox"; + +import MOCK_DATA from "./MOCK_DATA.json"; + +const BasicTable = () => { + const columns = React.useMemo(() => COLUMNS, []); + const data = useMemo(() => MOCK_DATA, []); + + const { + getTableProps, + getTableBodyProps, + headerGroups, + footerGroups, + rows, + page, + nextPage, + previousPage, + canNextPage, + canPreviousPage, + pageOptions, + gotoPage, + pageCount, + setPageSize, + prepareRow, + allColumns, + getToggleHideAllColumnsProps, + setColumnOrder, + selectedFlatRows, + state, + setGlobalFilter, + } = useTable( + { + columns, + data, + // initialState: { pageIndex: 2 } + }, + useColumnOrder, + useFilters, + useGlobalFilter, + useSortBy, + usePagination, + useRowSelect, + (hooks) => { + hooks.visibleColumns.push((columns) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }) => ( + + ), + Cell: ({ row }) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + + const changeOrder = () => { + setColumnOrder([ + "name", + "order-number", + "user-job", + "order-level", + "order-status", + "order-price", + ]); + }; + + const { globalFilter, pageIndex, pageSize } = state; + // const firstPageRows = rows.slice(0, 10); + + return ( + <> +
+ {/* search box */} + + {/* pagination */} +
+ {/* toggle columns */} + {/*
+
+ Toggle All +
+ {allColumns.map((column) => ( +
+ +
+ ))} +
*/} + + {/* Change Column Order */} + {/* */} + + + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + + {/* not using */} + {/* {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} */} + {page.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} + + {/* not using */} + {/* {firstPageRows.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} */} + + + 10 ? "w-full" : "hidden"}`} + > + {footerGroups.map((footerGroup) => ( + + {footerGroup.headers.map((column) => ( + + ))} + + ))} + +
+ {column.render("Header")} + + {column.isSorted + ? column.isSortedDesc + ? " 🔽" + : " 🔼" + : ""} + + {/* not using */} + {/*
+ {column.canFilter ? column.render('Filter') : null } +
*/} +
+ {cell.render('Cell')} +
+ {cell.render("Cell")} +
+ {cell.render("Cell")} +
+ {column.render("Footer")} +
+ + 
+        
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        
+
+ +
+ + Page{" "} + + {pageIndex + 1} of {pageOptions.length} + + {""} + + + + | Go to Page:{" "} + { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + /> + + + + + + + + + + +
+ + ); +}; + +export default BasicTable; diff --git a/src/components/ReactTable4/OrderLevel.js b/src/components/ReactTable4/OrderLevel.js new file mode 100644 index 0000000..a09965a --- /dev/null +++ b/src/components/ReactTable4/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/ReactTable4/OrderStatus.js b/src/components/ReactTable4/OrderStatus.js new file mode 100644 index 0000000..b1403bd --- /dev/null +++ b/src/components/ReactTable4/OrderStatus.js @@ -0,0 +1,55 @@ +export function OrderStatus({ value }) { + return ( +
+ {(() => { + if (value === 1) { + return ( + + ارسال شده + + ); + } else if (value === 2) { + return ( + + رسیدگی + + ); + } else if (value === 3) { + return ( + + لغو شده + + ); + } else if (value === 4) { + return ( + + پیگیری + + ); + } else { + return ( + + خطری + + ); + } + })()}{" "} +
+ ); + } + \ No newline at end of file diff --git a/src/components/ReactTable4/arrow-icon.svg b/src/components/ReactTable4/arrow-icon.svg new file mode 100644 index 0000000..589a9ba --- /dev/null +++ b/src/components/ReactTable4/arrow-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable4/blue-arrow.svg b/src/components/ReactTable4/blue-arrow.svg new file mode 100644 index 0000000..a688a28 --- /dev/null +++ b/src/components/ReactTable4/blue-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/ReactTable4/columns.js b/src/components/ReactTable4/columns.js new file mode 100644 index 0000000..795480e --- /dev/null +++ b/src/components/ReactTable4/columns.js @@ -0,0 +1,64 @@ +import { format } from "date-fns"; + +import Table, { SelectColumnFilter } from "./BasicTable"; // new + +import { ColumnFilter } from "./ColumnFilter"; + +import { OrderStatus } from "./OrderStatus"; +import { OrderLevel } from "./OrderLevel"; +import { Buttons } from "./Buttons"; +import { EditButtons } from "./EditButtons"; + +export const COLUMNS = [ + { + Header: "نام و نام خانوادگی", + Footer: "نام و نام خانوادگی", + accessor: "name", + disableSortBy: true, + }, + { + Header: "تاریخ سفارش", + Footer: "تاریخ سفارش", + accessor: "order-date", + Cell: ({ value }) => { + return format(new Date(value), "dd/MM/yyyy"); + }, + }, + { + Header: "مبلغ سفارش", + Footer: "مبلغ سفارش", + accessor: "order-price", + Filter: ColumnFilter, + }, + { + Header: "شماره سفارش", + Footer: "شماره سفارش", + accessor: "order-number", + }, + { + Header: "شغل کاربر", + Footer: "شغل کاربر", + accessor: "user-job", + }, + { + Header: "وضعیت سفارش", + Footer: "وضعیت سفارش", + accessor: "order-status", + Cell: OrderStatus, + }, + { + Header: "سطح اهمیت", + Footer: "سطح اهمیت", + accessor: "order-level", + Cell: OrderLevel, + // Filter: SelectColumnFilter, + // new + }, + { + Header: EditButtons, + Footer: "ویرایش", + accessor: "edit", + Cell: Buttons, + disableSortBy: true, + }, +]; diff --git a/src/components/ReactTable4/edit.svg b/src/components/ReactTable4/edit.svg new file mode 100644 index 0000000..85f109e --- /dev/null +++ b/src/components/ReactTable4/edit.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable4/filter.svg b/src/components/ReactTable4/filter.svg new file mode 100644 index 0000000..6b8c315 --- /dev/null +++ b/src/components/ReactTable4/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js new file mode 100644 index 0000000..ce1888d --- /dev/null +++ b/src/components/ReactTable4/index.js @@ -0,0 +1,158 @@ +import React, { useRef } from "react"; +import BasicTable from "./BasicTable"; +// import useDraggableScroll from "use-draggable-scroll"; + +const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { + return ( +
+ {/* breadCrumb */} + +
+ {breadCrumbs.map((breadCrumb, index) => ( +
+ + {breadCrumb.name} + + {Number(index) !== breadCrumbs.length - 1 && ( +
+ {" > "} +
+ )} +
+ ))} +
+ +
+ {/* page Title */} +
+
+

{title}

+
+ {/* page Title */} +
+
+

{subTitle}

+
+
+ + +
+ ); +}; +window.isDown = false; +export default ReactTable3; +function Tabbar({}) { + const ref = useRef(null); + + // const { onMouseDown } = useDraggableScroll(ref); + const tabs = [ + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + "تست۱", + ]; + 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) => ( +
  • + { + if (window.isDown) return e.preventDefault(); + ///do here + }} + aria-current="page" + className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500" + > + + {el} x + + +
    • + ))} +
+ ); +} + +ReactTable3.defaultProps = { + breadCrumbs: [ + { + name: "صفحه اصلی", + active: false, + }, + { + name: "آمار و گزارشات", + active: false, + }, + { + name: "فروش محصولات", + active: false, + }, + { + name: "سال 1400", + active: true, + }, + ], + + title: "میزان فروش محصولات", + subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", +}; diff --git a/src/components/ReactTable4/index.scss b/src/components/ReactTable4/index.scss new file mode 100644 index 0000000..a7764b2 --- /dev/null +++ b/src/components/ReactTable4/index.scss @@ -0,0 +1,16 @@ +.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; +} \ No newline at end of file diff --git a/src/components/ReactTable4/more2.svg b/src/components/ReactTable4/more2.svg new file mode 100644 index 0000000..3967400 --- /dev/null +++ b/src/components/ReactTable4/more2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ReactTable4/plus.svg b/src/components/ReactTable4/plus.svg new file mode 100644 index 0000000..cca7283 --- /dev/null +++ b/src/components/ReactTable4/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ReactTable4/search-normal.svg b/src/components/ReactTable4/search-normal.svg new file mode 100644 index 0000000..49604d0 --- /dev/null +++ b/src/components/ReactTable4/search-normal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ReactTable4/settings.svg b/src/components/ReactTable4/settings.svg new file mode 100644 index 0000000..fea3eb9 --- /dev/null +++ b/src/components/ReactTable4/settings.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +