diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 2d04d36..998e565 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -16,6 +16,7 @@ import { Settings } from "./Settings"; import { Checkbox } from "./Checkbox"; import RenderRowSubComponent from "./RenderRowSubComponent"; +import EditRow from "./EditRow"; import { useTable, @@ -37,6 +38,7 @@ const BasicTable = ({ activeTab, }) => { const data = useMemo(() => MOCK_DATA, []); + console.log(data); const [filtering, setFiltering] = useState(false); @@ -45,6 +47,32 @@ const BasicTable = ({ [] ); + 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 defaultColumn = useMemo(() => { return { @@ -351,279 +379,6 @@ const BasicTable = ({ ); }; -function EditRow({ row, columns }) { - console.log(row); - const persian = { - weight: "وزن", - pageNumber: "تعداد صفحات", - pageType: "نوع کاغذ", - bookNumber: "شماره شابک", - publisher: "انتشارات", - author: "نویسنده", - bookType: "قطع", - publishedYear: "سال انتشار", - }; - return ( -
- {/* right */} -
- {/* 1 */} -
-
-

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

-
- {/* 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 BasicTable; BasicTable.defaultProps = { diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js index be2701e..3134228 100644 --- a/src/components/ReactTable4/Buttons.js +++ b/src/components/ReactTable4/Buttons.js @@ -7,11 +7,10 @@ import edit from "./edit.svg"; export const Buttons = ({ row, addTab }) => { const [activeDetails, setActiveDetails] = useState(null); return ( -
+
{ - console.log("mahdi"); setActiveDetails(!activeDetails); }} > @@ -21,10 +20,9 @@ export const Buttons = ({ row, addTab }) => { > جزئیات setActiveDetails(!activeDetails)} src={arrowIcon} alt="" - className={`mx-1 w-3 cursor-pointer mr-2 ${ + className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${ activeDetails ? "rotate-60" : "rotate-90" }`} /> diff --git a/src/components/ReactTable4/ColumnSearch.js b/src/components/ReactTable4/ColumnSearch.js index be57157..c610c4b 100644 --- a/src/components/ReactTable4/ColumnSearch.js +++ b/src/components/ReactTable4/ColumnSearch.js @@ -4,11 +4,11 @@ export const ColumnSearch = ({ column }) => { const { filterValue, setFilter } = column; return ( -
+
setFilter(e.target.value)} - className={`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`} + 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/ReactTable4/EditRow.js b/src/components/ReactTable4/EditRow.js new file mode 100644 index 0000000..f5aa4ee --- /dev/null +++ b/src/components/ReactTable4/EditRow.js @@ -0,0 +1,345 @@ +import React from "react"; + +const EditRow = ({ row, columns }) => { + console.log(columns); + + return ( +
+
+ {/* 1 */} +
+
+

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

+ +
+ {/* 2 */} +
+
+

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

+ +
+ {/* 3 */} +
+
+

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

+ +
+ {/* 4 */} +
+
+

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

+ +
+ {/* 5 */} +
+
+

+ شغل کاربر: +

+ +
+ {/* 6 */} +
+
+

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

+ +
+ {/* 7 */} +
+
+

+ سطح اهمیت: +

+ +
+ {/* 8 */} +
+
+

+ محل تولد: +

+ +
+ {/* 9 */} +
+
+

+ تلفن محل کار: +

+ +
+ {/* 10 */} +
+
+

+ تحصیلات: +

+ +
+ {/* 11 */} +
+
+

+ تاریخ تولد: +

+ +
+ {/* 12 */} +
+
+

+ شغل: +

+ +
+ {/* 13 */} +
+
+

+ دانشگاه: +

+ +
+ {/* 14 */} +
+
+

+ رشته تحصیلی: +

+ +
+ {/* 15 */} +
+
+

+ اخلاق: +

+ +
+ {/* 16 */} +
+
+

+ نشانی: +

+ +
+
+
+ ); +}; + +// {features.map((feature, index) => ( + +export default EditRow; + +{ + /*
+ + +
*/ +} diff --git a/src/components/ReactTable4/RenderRowSubComponent.js b/src/components/ReactTable4/RenderRowSubComponent.js index cea0d40..dd7be7c 100644 --- a/src/components/ReactTable4/RenderRowSubComponent.js +++ b/src/components/ReactTable4/RenderRowSubComponent.js @@ -1,6 +1,6 @@ import React from "react"; -const RenderRowSubComponent = ({ columns, addTab, row }) => { +const RenderRowSubComponent = ({ columns, addTab, row, EditableCell }) => { console.log(row); return ( @@ -94,10 +94,10 @@ const RenderRowSubComponent = ({ columns, addTab, row }) => { style={{ borderColor: "#65A9FF" }} > وضعیت سفارش: - - {columns[5].Cell({ value: row.order_status })} -

+ + {columns[5].Cell({ value: row.order_status })} +
{/* 7 */}
@@ -110,10 +110,10 @@ const RenderRowSubComponent = ({ columns, addTab, row }) => { style={{ borderColor: "#65A9FF" }} > سطح اهمیت: - - {columns[6].Cell({ value: row.order_level })} -

+ + {columns[6].Cell({ value: row.order_level })} +
{/* 8 */}