From 4d26cb0f05ade0ec956a98558762649604aba9e2 Mon Sep 17 00:00:00 2001 From: Carter Date: Tue, 3 Jun 2025 09:48:35 -0600 Subject: [PATCH] using referece to get widths and darg indexes --- src/common/ResponsiveTable.tsx | 103 ++++++++------------------------- src/pages/Devices.tsx | 8 +-- 2 files changed, 27 insertions(+), 84 deletions(-) diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx index c2c2bf5..bb13c51 100644 --- a/src/common/ResponsiveTable.tsx +++ b/src/common/ResponsiveTable.tsx @@ -1,7 +1,7 @@ import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material" -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import React from "react"; import { useMobile } from "hooks"; import classNames from "classnames"; @@ -147,14 +147,11 @@ export default function ResponsiveTable(props: Props) { const [openGutters, setOpenGutters] = useState([]) const [handler, setHandler] = useState(undefined); const [columnAnchor, setColumnAnchor] = useState(null) - - const [columnSizes, setColumnSizes] = useState>(new Map()) - const [tempWidth, setTempWidth] = useState(undefined) - const [tempWidth2, setTempWidth2] = useState(undefined) - const [dragX, setDragX] = useState(0) - const [dragStart, setDragStart] = useState(undefined) + const [rowWidths, setRowWidths] = useState([]) - const [dragIndex, setDragIndex] = useState(undefined) + const dragIndexRef = useRef(undefined); + const dragStartRef = useRef(undefined); + const rowWidthsRef = useRef([]); const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list"; @@ -437,75 +434,46 @@ export default function ResponsiveTable(props: Props) { } const resizeClick = (event: React.MouseEvent, index: number) => { - console.log("click!") - // console.log(event.currentTarget.clientWidth) - // console.log(event.currentTarget.offsetWidth) - // console.log(event.currentTarget.scrollWidth) - // console.log(event.currentTarget.parentElement?.clientWidth) - // console.log(event.currentTarget.parentElement?.offsetWidth) - // console.log(event.currentTarget.parentElement?.scrollWidth) - // console.log(event.currentTarget.parentElement?.childNodes.keys) + let newWidths: number[] = [] event.currentTarget.parentElement?.parentElement?.parentElement?.childNodes.forEach(node => { - // console.log(node.textContent) - // console.log(node) if (node instanceof HTMLElement) { - // console.log(node.clientWidth); newWidths.push(node.clientWidth) } }) - // console.log(event.clientX) - setRowWidths(newWidths) - setTempWidth(event.currentTarget.parentElement?.clientWidth) - setDragStart(event.clientX) - setDragIndex(index) + + rowWidthsRef.current = newWidths + dragIndexRef.current = index; + dragStartRef.current = event.clientX; window.addEventListener('mousemove', resizeDrag); window.addEventListener('mouseup', resizeUnclick); - // return ( - - // ) } - // useEffect(() => { - // console.log(tempWidth) - // console.log(tempWidth) - // }, [tempWidth]) - const resizeUnclick = () => { - console.log("unclick!") - // setDragStart(undefined) + dragIndexRef.current = undefined; + dragStartRef.current = undefined; window.removeEventListener('mousemove', resizeDrag); window.removeEventListener('mouseup', resizeUnclick); } const resizeDrag = (e: any) => { - if (!dragIndex) return - if (!rowWidths[dragIndex]) return - if (!rowWidths[dragIndex+1]) return + // console.log(dragIndex) + const index = dragIndexRef.current; + const dragStart = dragStartRef.current + const rowWidths = rowWidthsRef.current + if (!index) return + if (!rowWidths[index]) return + if (!rowWidths[index+1]) return if (!dragStart) return - console.log((dragStart - e.clientX)) - let newWidths: number[] = [...rowWidths] - newWidths[dragIndex] = newWidths[dragIndex] - (dragStart - e.clientX) - newWidths[dragIndex+1] = newWidths[dragIndex+1] + (dragStart - e.clientX) + newWidths[index] = newWidths[index] - (dragStart - e.clientX) + newWidths[index+1] = newWidths[index+1] + (dragStart - e.clientX) setRowWidths(newWidths) - // if (!dragStart) return - // console.log(dragStart) - // console.log(e.clientX) - // if (dragStart) console.log(dragStart - e.clientX) - // console.log("drag!") - // if (dragStart && tempWidth) setTempWidth(tempWidth - (dragStart - e.clientX)) - // return ( - - // ) + } - useEffect(() => { - console.log(rowWidths) - }, [rowWidths]) - return ( @@ -562,7 +530,7 @@ export default function ResponsiveTable(props: Props) { return ( !column.disableSort && columnClick(column)} // sx={{ cursor: column.disableSort ? "default" : "pointer" }} > @@ -639,35 +607,10 @@ export default function ResponsiveTable(props: Props) { // console.log(j) if (filterList.includes(column.title) || column.hidden) return null if (column.render) return ( - // {column.render(row)} ) - // if (column.render && j!==undefined && j === 1) return ( - // // - // - // {column.render(row)} - // - // ) - // if (column.render && j!==undefined && j === 2) return ( - // // - // - // {column.render(row)} - // - // ) - // if (column.render && j!==undefined && j === 3) return ( - // // - // - // {column.render(row)} - // - // ) - // if (column.render) return ( - // // - // - // {column.render(row)} - // - // ) return ( {Object.values(row)[j] && Object.values(row)[j].toString()} diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index 2bcb7f9..8631451 100644 --- a/src/pages/Devices.tsx +++ b/src/pages/Devices.tsx @@ -393,8 +393,8 @@ export default function Devices() { const status = device.status ?? pond.DeviceStatus.create() const deviceStateHelper = getDeviceStateHelper(status.state); return ( - // - + + {/* */} {deviceStateHelper.icon} ) @@ -413,8 +413,8 @@ export default function Devices() { sortKey: "name", render: (device: Device) => { return ( - // - + + {/* // */}