extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-06-28 16:01:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: ReorderTable component to use useMemo for rowsOrder (#3227)

Browse Source
This commit is contained in:
Pragadesh-45 2024-09-30 17:19:18 +05:30 committed by GitHub
parent e2baed6724
commit 02a82c5371
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/bruno-app/src/components/ReorderTable/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState, useCallback } from 'react'; import React, { useEffect, useRef, useState, useMemo } from 'react';
import { IconGripVertical, IconMinusVertical } from '@tabler/icons'; import { IconGripVertical, IconMinusVertical } from '@tabler/icons';
/** /**
@ -13,17 +13,17 @@ import { IconGripVertical, IconMinusVertical } from '@tabler/icons';
const ReorderTable = ({ children, updateReorderedItem }) => { const ReorderTable = ({ children, updateReorderedItem }) => {
const tbodyRef = useRef(); const tbodyRef = useRef();
const [rowsOrder, setRowsOrder] = useState(React.Children.toArray(children));
const [hoveredRow, setHoveredRow] = useState(null); const [hoveredRow, setHoveredRow] = useState(null);
const [dragStart, setDragStart] = useState(null); const [dragStart, setDragStart] = useState(null);
const rowsOrder = useMemo(() => React.Children.toArray(children), [children]);
/** /**
* useEffect hook to update the rows order and handle row hover states * useEffect hook to handle row hover states
*/ */
useEffect(() => { useEffect(() => {
setRowsOrder(React.Children.toArray(children));
handleRowHover(null, false); handleRowHover(null, false);
}, [children, dragStart]); }, [children]);
const handleRowHover = (index, hoverstatus = true) => { const handleRowHover = (index, hoverstatus = true) => {
setHoveredRow(hoverstatus ? index : null); setHoveredRow(hoverstatus ? index : null);
@ -48,7 +48,6 @@ const ReorderTable = ({ children, updateReorderedItem }) => {
const updatedRowsOrder = [...rowsOrder]; const updatedRowsOrder = [...rowsOrder];
const [movedRow] = updatedRowsOrder.splice(fromIndex, 1); const [movedRow] = updatedRowsOrder.splice(fromIndex, 1);
updatedRowsOrder.splice(toIndex, 0, movedRow); updatedRowsOrder.splice(toIndex, 0, movedRow);
setRowsOrder(updatedRowsOrder);
updateReorderedItem({ updateReorderedItem({
updateReorderedItem: updatedRowsOrder.map((row) => row.props['data-uid']) updateReorderedItem: updatedRowsOrder.map((row) => row.props['data-uid'])