brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

using referece to get widths and darg indexes

Browse source
This commit is contained in:
Carter 2025-06-03 09:48:35 -06:00
parent 6cc29c37c7
commit 4d26cb0f05
2 changed files with 27 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/common/ResponsiveTable.tsx
View file

@ -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";
@ -148,13 +148,10 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const [handler, setHandler] = useState<NodeJS.Timeout | undefined>(undefined);
const [columnAnchor, setColumnAnchor] = useState<any>(null)
const [columnSizes, setColumnSizes] = useState<Map<string, number>>(new Map())
const [tempWidth, setTempWidth] = useState<number | undefined>(undefined)
const [tempWidth2, setTempWidth2] = useState<number | undefined>(undefined)
const [dragX, setDragX] = useState<number>(0)
const [dragStart, setDragStart] = useState<number | undefined>(undefined)
const [rowWidths, setRowWidths] = useState<number[]>([])
const [dragIndex, setDragIndex] = useState<number | undefined>(undefined)
const dragIndexRef = useRef<number | undefined>(undefined);
const dragStartRef = useRef<number | undefined>(undefined);
const rowWidthsRef = useRef<number[]>([]);
const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
@ -437,75 +434,46 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
const resizeClick = (event: React.MouseEvent<HTMLDivElement, 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 (
<TableContainer className={classes.tableContainer} component={Paper}>
<Table>
@ -562,7 +530,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
return (
<TableCell
key={"header-cell-"+index}
style={{ border: "1px solid red" }}
// style={{ border: "1px solid red" }}
// onClick={() => !column.disableSort && columnClick(column)}
// sx={{ cursor: column.disableSort ? "default" : "pointer" }}
>
@ -639,35 +607,10 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
// console.log(j)
if (filterList.includes(column.title) || column.hidden) return null
if (column.render) return (
// <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
<TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, width: rowWidths[j] ? rowWidths[j] : undefined}}>
{column.render(row)}
</TableCell>
)
// if (column.render && j!==undefined && j === 1) return (
// // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
// <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0}}>
// {column.render(row)}
// </TableCell>
// )
// if (column.render && j!==undefined && j === 2) return (
// // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
// <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, width: tempWidth ? tempWidth : undefined}}>
// {column.render(row)}
// </TableCell>
// )
// if (column.render && j!==undefined && j === 3) return (
// // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
// <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, width: tempWidth2 ? tempWidth2 : undefined}}>
// {column.render(row)}
// </TableCell>
// )
// if (column.render) return (
// // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
// <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0}}>
// {column.render(row)}
// </TableCell>
// )
return (
<TableCell key={"row-"+index+"cell-"+j}>
{Object.values(row)[j] && Object.values(row)[j].toString()}

8
src/pages/Devices.tsx
View file

@ -393,8 +393,8 @@ export default function Devices() {
const status = device.status ?? pond.DeviceStatus.create()
const deviceStateHelper = getDeviceStateHelper(status.state);
return (
// <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
<Box >
<Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
{/* <Box > */}
<Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
</Box>
)
@ -413,8 +413,8 @@ export default function Devices() {
sortKey: "name",
render: (device: Device) => {
return (
// <Box className={classes.cellContainer}>
<Box >
<Box className={classes.cellContainer}>
{/* // <Box > */}
<Chip
variant="outlined"
label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId}