edited version

master
mahdi 3 years ago
parent f65096ccfe
commit c4ccca28d0
  1. 163
      src/components/ReactTable4/BasicTable.js
  2. 33
      src/components/ReactTable4/EditButtons.js
  3. 12
      src/components/ReactTable4/double-left-arrow.svg
  4. 2
      src/components/ReactTable4/index.js
  5. 8
      src/components/ReactTable4/left-arrow.svg
  6. 6
      src/components/ReactTable4/right-arrow.svg
  7. 12
      src/components/Sidebar/SidebarDesign2/index.js

@ -19,6 +19,10 @@ import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
import dobleLeftArrow from "./double-left-arrow.svg";
import leftArrow from "./left-arrow.svg";
import rightArrow from "./right-arrow.svg";
// This is a custom filter UI for selecting
// a unique option from a list
export function SelectColumnFilter({
@ -146,7 +150,8 @@ const BasicTable = () => {
// const firstPageRows = rows.slice(0, 10);
return (
<>
<div className="customeClass1">
{/* filter */}
{/* <div className="customeClass1">
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) =>
column.Filter ? (
@ -156,71 +161,7 @@ const BasicTable = () => {
) : null
)
)}
</div>
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div
className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
style={{}}
>
{/* go to page */}
<div>
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */}
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{"<<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{">>"}
</button>
</div>
</div>
</div> */}
{/* */}
{/* toggle columns */}
{/* <div>
@ -238,6 +179,75 @@ const BasicTable = () => {
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
<div
className="rounded-md py-2 px-4 flex flex-row flex-items-center"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div className="flex flex-row flex-items-center bg-white p-1">
{/* go to page */}
<div>
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */}
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
<img src={dobleLeftArrow} />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{">>"}
</button>
{/* dobleLeftArrow
leftArrow
import rightArrow from "./right-arrow.svg"; */}
</div>
</div>
</div>
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
@ -334,12 +344,31 @@ const BasicTable = () => {
</pre>
<div className="mt-3 ">
<span className="text-sm ml-4">
{/* <span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length}
</strong>
{""}
</span> */}
<span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>{" "}
از {pageOptions.length}
</strong>
{""}
</span>
<select

@ -10,10 +10,7 @@ export function EditButtons({ buttons }) {
<div className="flex flex-row items-center justify-end">
{buttons.map((button, index) => (
<div>
<button
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
<div
className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${
button.border
} ${button.borderColor} ${
@ -36,22 +33,6 @@ export function EditButtons({ buttons }) {
button.title === null ? "mr-0" : "mx-2"
}`}
/>
</button>
<div
id="dropdown"
className="hidden z-10 w-44 text-base list-none bg-red-600 rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<p>{buttonSubItem.title}</p>
))}
{/* <ul className="py-1" aria-labelledby="dropdownButton">
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<li className="bg-red-400">{buttonSubItem.title}</li>
))}
</ul> */}
</div>
</div>
))}
@ -98,18 +79,6 @@ EditButtons.defaultProps = {
{
title: "دراپ داون 1",
},
{
title: "دراپ داون 2",
},
{
title: "دراپ داون 3",
},
{
title: "دراپ داون 4",
},
{
title: "دراپ داون 5",
},
],
},
],

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.988" height="11.988" viewBox="0 0 15.988 11.988">
<g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(15.988 11.988) rotate(180)">
<g id="arrow-right" transform="translate(4)">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
<g id="arrow-right-2" data-name="arrow-right">
<path id="Vector-3" data-name="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-sm">{subTitle}</h2>
</div>
</div>
<Tabbar />
{/* <Tabbar /> */}
<BasicTable />
</div>
);

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
<g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(11.988 11.988) rotate(180)">
<g id="arrow-right">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 622 B

@ -0,0 +1,6 @@
<svg id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
<g id="arrow-right">
<path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 552 B

@ -69,7 +69,11 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
${activeDropdown === menuItem ? "bg-blue-100" : ""}
`}
onClick={() => setActiveDropdown(activeDropdown === menuItem ? null : menuItem)}
onClick={() =>
setActiveDropdown(
activeDropdown === menuItem ? null : menuItem
)
}
>
<img src={menuItem.icon} alt="" className="w-7 h-7" />
<p className="text-blue-800 text-sm flex-1 mx-2">
@ -117,7 +121,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
-
</div>
<div
className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
onClick={() => setActiveDropdown(menuSubItem)}
>
<p className="text-xs transition duration-300">
@ -137,8 +141,8 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
))}
</div>
))}
{ Number(i) !== items.length -1 && (
<div className="border border-gray-100 my-2"></div>
{Number(i) !== items.length - 1 && (
<div className="border border-gray-100 my-2"></div>
)}
</div>
))}

Loading…
Cancel
Save