update 11 files

master
mahdi 3 years ago
parent aa20b8e617
commit ac98bdebcf
  1. 9
      src/components/Tabels/ReactTable4/Buttons.js
  2. 13
      src/components/Tabels/ReactTable4/EditButtons.js
  3. 7
      src/components/Tabels/ReactTable4/GlobalFilter.js
  4. 7
      src/components/Tabels/ReactTable4/Location.js
  5. 48
      src/components/Tabels/ReactTable4/Pagination.js
  6. 8
      src/components/Tabels/ReactTable4/Settings.js
  7. 5
      src/components/Tabels/ReactTable4/SliderColumnFilter.js
  8. 5
      src/components/Tabels/ReactTable4/Tabbar.js
  9. 4
      src/components/Tabels/ReactTable4/index.js
  10. 7
      src/components/Tabels/ReactTable5/Location.js

@ -1,9 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import arrowIcon from "images/ReactTable4arrow-icon.svg"; import DropDown from "../../MiniComponents/DropDown";
import edit from "images/ReactTable4edit.svg";
import DropDown from "../MiniComponents/DropDown";
export const Buttons = ({ row, addTab }) => { export const Buttons = ({ row, addTab }) => {
const [activeDetails, setActiveDetails] = useState(null); const [activeDetails, setActiveDetails] = useState(null);
@ -21,7 +18,7 @@ export const Buttons = ({ row, addTab }) => {
> >
جزئیات جزئیات
<img <img
src={arrowIcon} src="images/ReactTable4arrow-icon.svg"
alt="" alt=""
className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${ className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${
activeDetails ? "rotate-60" : "rotate-90" activeDetails ? "rotate-60" : "rotate-90"
@ -35,7 +32,7 @@ export const Buttons = ({ row, addTab }) => {
addTab({ name: row.original.name, id: row.original.id }); addTab({ name: row.original.name, id: row.original.id });
}} }}
> >
<img src={edit} alt="" className="w-4" /> <img src="images/ReactTable4edit.svg" alt="" className="w-4" />
</div> </div>
<DropDown /> <DropDown />
</div> </div>

@ -1,10 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Table from "./BasicTable"; import Table from "./BasicTable";
import DropDown from "../MiniComponents/DropDown"; import DropDown from "../../MiniComponents/DropDown";
import filter from "./filter.svg";
import plus from "./plus.svg";
export function EditButtons({ setFiltering, filtering, addTab }) { export function EditButtons({ setFiltering, filtering, addTab }) {
const [selectedFilterRow, setSelectedFilterRow] = useState(filtering); const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
@ -21,11 +18,15 @@ export function EditButtons({ setFiltering, filtering, addTab }) {
}} }}
> >
ثبت جدید ثبت جدید
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} /> <img
src="images/ReactTable4plus.svg"
alt=""
className={`cursor-pointer w-2 mr-1 `}
/>
</button> </button>
{/* filter */} {/* filter */}
<img <img
src={filter} src="images/ReactTable4filter.svg"
alt="" alt=""
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
${selectedFilterRow ? "border" : "border-0"}`} ${selectedFilterRow ? "border" : "border-0"}`}

@ -1,9 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useAsyncDebounce } from "react-table"; import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg";
import cancleIcon from "./zarbedar-icon.svg";
export const GlobalFilter = ({ filter, setFilter }) => { export const GlobalFilter = ({ filter, setFilter }) => {
const [activeSearchBox, setActiveSearchBox] = useState(false); const [activeSearchBox, setActiveSearchBox] = useState(false);
@ -17,14 +14,14 @@ export const GlobalFilter = ({ filter, setFilter }) => {
<div className="flex flex-row-reverse items-center relative ml-2 "> <div className="flex flex-row-reverse items-center relative ml-2 ">
{activeSearchBox && ( {activeSearchBox && (
<img <img
src={cancleIcon} src="images/ReactTable4zarbedar-icon.svg"
alt="" alt=""
className="w-3 h-3 absolute left-7 cursor-pointer" className="w-3 h-3 absolute left-7 cursor-pointer"
onClick={() => setActiveSearchBox(false)} onClick={() => setActiveSearchBox(false)}
/> />
)} )}
<img <img
src={search} src="images/ReactTable4search-normal.svg"
alt="" alt=""
className="w-4 h-4 absolute left-2 cursor-pointer" className="w-4 h-4 absolute left-2 cursor-pointer"
/> />

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import map from "./map.svg";
const Location = () => { const Location = () => {
return ( return (
@ -7,7 +6,11 @@ const Location = () => {
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}> <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
لوکیشن مد نظر: لوکیشن مد نظر:
</span> </span>
<img className="mt-1 mr-2 border border-blue-300 rounded" src={map} /> <img
className="mt-1 mr-2 border border-blue-300 rounded"
src="images/ReactTable4map.svg"
alt=""
/>
</div> </div>
); );
}; };

@ -1,7 +1,4 @@
import React from "react"; 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 = ({ export const Pagination = ({
gotoPage, gotoPage,
@ -14,48 +11,51 @@ export const Pagination = ({
return ( return (
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center space-x-1">
<button <button
className="rounded py-1 px-2 text-xs font-sansbold" className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)} onClick={() => gotoPage(0)}
disabled={!canPreviousPage} disabled={!canPreviousPage}
> >
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" /> <img
src="images/ReactTable4double-left-arrow.svg"
className="rotate-180 w-4 h-4"
alt=""
/>
</button> </button>
<button <button
className="rounded py-1 px-2 text-xs font-sansbold" className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()} onClick={() => previousPage()}
disabled={!canPreviousPage} disabled={!canPreviousPage}
> >
<img src={rightArrow} className="w-3 h-3" /> <img
src="images/ReactTable4right-arrow.svg"
className="w-3 h-3"
alt=""
/>
</button> </button>
<button <button
className="rounded py-1 px-2 text-xs font-sansbold" className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()} onClick={() => nextPage()}
disabled={!canNextPage} disabled={!canNextPage}
> >
<img src={leftArrow} className="w-3 h-3" /> <img
src="images/ReactTable4left-arrow.svg"
className="w-3 h-3"
alt=""
/>
</button> </button>
<button <button
className="rounded py-1 px-2 text-xs font-sansbold" className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`}
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)} onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage} disabled={!canNextPage}
> >
<img src={dobleLeftArrow} className="w-4 h-4" /> <img
src="images/ReactTable4double-left-arrow.svg"
className="w-4 h-4"
alt=""
/>
</button> </button>
</div> </div>
); );
}; };
export default Pagination; export default Pagination;
// Pagination.defaultProps = {
// pagintaionButtons: [
// {
// image: { dobleLeftArrow },
// click: gotoPage(0),
// },
// ],
// };

@ -1,8 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { ToggleColumns } from "./ToggleColumns"; import { ToggleColumns } from "./ToggleColumns";
import settings from "./settings.svg";
export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => { export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
console.log(openModal); console.log(openModal);
@ -15,7 +13,11 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
style={{ backgroundColor: "#F9FBFF" }} style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded" className="mr-2 flex flex-col items-center justify-center p-1 rounded"
> >
<img src={settings} className="w-6 h-6 cursor-pointer" /> <img
src="images/ReactTable4settings.svg"
className="w-6 h-6 cursor-pointer"
alt=""
/>
</div> </div>
{/* modal */} {/* modal */}
<div <div

@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import cancleIcon from "./zarbedar-icon.svg";
export const SliderColumnFilter = ({ export const SliderColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id }, column: { filterValue, setFilter, preFilteredRows, id },
}) => { }) => {
@ -29,9 +27,10 @@ export const SliderColumnFilter = ({
/> />
<div className="p-1 rounded bg-blue-300 bg-opacity-20"> <div className="p-1 rounded bg-blue-300 bg-opacity-20">
<img <img
src={cancleIcon} src="images/ReactTable4zarbedar-icon.svg"
onClick={() => setFilter(undefined)} onClick={() => setFilter(undefined)}
className="cursor-pointer w-2 h-2" className="cursor-pointer w-2 h-2"
alt=""
/> />
</div> </div>
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */} {/* <button onClick={() => setFilter(undefined)}>ریست</button> */}

@ -1,7 +1,4 @@
import React from "react"; import React from "react";
import "./index.scss";
import cancleIcon from "./zarbedar-icon.svg";
const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => { const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
return ( return (
@ -46,7 +43,7 @@ const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
</div> </div>
{el.id ? ( {el.id ? (
<img <img
src={cancleIcon} src="images/ReactTable5zarbedar-icon.svg"
className="w-2 mr-3" className="w-2 mr-3"
alt="" alt=""
onClick={(e) => { onClick={(e) => {

@ -3,8 +3,8 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable"; import BasicTable from "./BasicTable";
import TitleSubtitle from "../MiniComponents/BreadCrumb"; import TitleSubtitle from "../../MiniComponents/BreadCrumb";
import BreadCrumb from "../MiniComponents/BreadCrumb"; import BreadCrumb from "../../MiniComponents/BreadCrumb";
const ReactTable4 = ({ breadCrumbs }) => { const ReactTable4 = ({ breadCrumbs }) => {
const [tabs, setTabs] = useState([ const [tabs, setTabs] = useState([

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import map from "./map.svg";
const Location = () => { const Location = () => {
return ( return (
@ -7,7 +6,11 @@ const Location = () => {
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}> <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
لوکیشن مد نظر: لوکیشن مد نظر:
</span> </span>
<img className="mt-1 mr-2 border border-blue-300 rounded" src={map} /> <img
className="mt-1 mr-2 border border-blue-300 rounded"
src="images/ReactTable4map.svg"
alt=""
/>
</div> </div>
); );
}; };

Loading…
Cancel
Save