mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 7 files

Browse Source
master
amir hosein gorji 3 years ago
parent 2a74360a2d
commit 54319326bb
7 changed files with 7775 additions and 7898 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 126
      src/components/ReactTable3/BasicTable.js
  3. 48
      src/components/ReactTable3/Buttons.js
  4. 5
      src/components/ReactTable3/columns.js
  5. 76
      src/components/ReactTable3/index.js
  6. 10
      src/components/ReactTable3/index.scss
  7. 15407
      yarn.lock

1
package.json
Unescape View File

@ -25,6 +25,7 @@
"sass": "^1.45.0",
"sweetalert2": "^11.3.4",
"tw-elements": "^1.0.0-alpha8",
"use-draggable-scroll": "^0.1.0",
"web-vitals": "^2.1.2"
},
"scripts": {

126
src/components/ReactTable3/BasicTable.js
Unescape View File

@ -11,7 +11,7 @@ import {
useRowSelect,
useColumnOrder,
useExpanded,
useResizeColumns
useResizeColumns,
} from "react-table";
import { COLUMNS } from "./columns";
@ -24,14 +24,13 @@ import MOCK_DATA from "./MOCK_DATA.json";
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])
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
// Render a multi-select box
return (
@ -42,50 +41,40 @@ export function SelectColumnFilter({
name={id}
id={id}
value={filterValue}
onChange={e => {
setFilter(e.target.value || undefined)
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option className="text-xs" value="">همه</option>
<option className="text-xs" value="">
همه
</option>
{options.map((option, i) => (
<option key={i} value={option} className="text-xs">
{(() => {
if (option === 1) {
return (
"وضعیت عادی"
);
} else if (option === 2) {
return (
"اعلان سطح هشدار"
);
} else if (option === 3) {
return (
"بررسی و پیگیری"
);
} else if (option === 4) {
return (
"وضعیت بحرانی"
);
} else {
return (
" وضعیت پایدار"
);
}
if (option === 1) {
return "وضعیت عادی";
} else if (option === 2) {
return "اعلان سطح هشدار";
} else if (option === 3) {
return "بررسی و پیگیری";
} else if (option === 4) {
return "وضعیت بحرانی";
} else {
return " وضعیت پایدار";
}
})()}{" "}
</option>
))}
</select>
</label>
)
);
}
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0;
const {
@ -159,7 +148,7 @@ const BasicTable = () => {
return (
<>
<div className="customeClass1">
{headerGroups.map((headerGroup) =>
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) =>
column.Filter ? (
<div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
@ -170,10 +159,10 @@ const BasicTable = () => {
)}
</div>
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div
{/* 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={{}}
>
@ -231,8 +220,7 @@ const BasicTable = () => {
>
{">>"}
</button>
</div>
</div>
</div>
{/* */}
{/* toggle columns */}
@ -257,7 +245,7 @@ const BasicTable = () => {
>
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()} >
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
@ -286,22 +274,32 @@ const BasicTable = () => {
{page.map((row, idx) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="p-4 whitespace-nowrap text-xs"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
<React.Fragment>
<tr
{...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="p-4 whitespace-nowrap text-xs"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{renderRowSubComponent({ row: row.values })}
</td>
);
})}
</tr>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
@ -372,5 +370,13 @@ const BasicTable = () => {
</>
);
};
function renderRowSubComponent({ row }) {
return (
<div className="pl-2 pr-5 bg-blue-200">
نام‌: {row.name}
<br />
<button className="bg-blue-400">ویرایش</button>
</div>
);
}
export default BasicTable;

48
src/components/ReactTable3/Buttons.js
Unescape View File

@ -1,25 +1,31 @@
import arrowIcon from './arrow-icon.svg';
import more from './more.svg';
import edit from './edit.svg';
import arrowIcon from "./arrow-icon.svg";
import more from "./more.svg";
import edit from "./edit.svg";
import { useState } from 'react';
import { useState } from "react";
export function Buttons({ }) {
export function Buttons({ row }) {
const [activeDetails, setActiveDetails] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
<button
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1"
onClick={ () => setActiveDetails(!activeDetails) }>
جزیات
<img src={arrowIcon} alt="" className={`w-3 cursor-pointer mr-2 ${activeDetails ? "rotate-60" : "rotate-90"}`} />
</button>
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
<img src={edit} alt="" className="w-4" />
</div>
<img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
return (
<div className="flex flex-row items-center justify-end">
<button
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1"
onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()}
>
جزیات
<img
src={arrowIcon}
alt=""
className={`w-3 cursor-pointer mr-2 ${
activeDetails ? "rotate-60" : "rotate-90"
}`}
/>
</button>
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
<img src={edit} alt="" className="w-4" />
</div>
);
}
<img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
</div>
);
}

5
src/components/ReactTable3/columns.js
Unescape View File

@ -7,10 +7,9 @@ import { ColumnFilter } from "./ColumnFilter";
import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons";
import {EditButtons} from "./EditButtons";
import { EditButtons } from "./EditButtons";
export const COLUMNS = [
{
Header: "نام و نام خانوادگی",
Footer: "نام و نام خانوادگی",
@ -52,7 +51,7 @@ export const COLUMNS = [
Footer: "سطح اهمیت",
accessor: "order-level",
Cell: OrderLevel,
Filter: SelectColumnFilter,
// Filter: SelectColumnFilter,
// new
},
{

76
src/components/ReactTable3/index.js
Unescape View File

@ -1,5 +1,6 @@
import React from "react";
import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return (
@ -40,13 +41,82 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-sm">{subTitle}</h2>
</div>
</div>
<Tabbar />
<BasicTable />
</div>
);
};
window.isDown = false;
export default ReactTable3;
function Tabbar({}) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
const tabs = [
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
];
return (
<ul
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
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) => (
<li className="mr-2 ">
<span
onClick={(e) => {
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"
>
<span className="p-2">
{el} <span className="p-2">x</span>
</span>
</span>
</li>
))}
</ul>
);
}
ReactTable3.defaultProps = {
breadCrumbs: [

10
src/components/ReactTable3/index.scss
Unescape View File

@ -4,3 +4,13 @@
.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;
}

15407
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save