drag resize is working
This commit is contained in:
Carter
parent
bb50975a28
commit
6cc29c37c7
2 changed files with 118 additions and 16 deletions
|
|
@ -148,6 +148,14 @@ 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 filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
|
||||
|
||||
const [filterList, setFilterList] = useState<string[]>(() => {
|
||||
|
|
@ -298,8 +306,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
}
|
||||
return (
|
||||
Object.keys(row).map((key, index) => {
|
||||
let value = row[key as keyof typeof row]
|
||||
|
||||
const value = row[key as keyof typeof row]
|
||||
return (
|
||||
<Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
|
||||
<Grid2 size={{ xs: 4 }} alignContent={"center"} >
|
||||
|
|
@ -345,7 +352,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
padding: gutterPadding
|
||||
}}
|
||||
onClick={(event) => handleCollapse(index, event)}
|
||||
// style={{pre}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
|
|
@ -430,6 +436,76 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
return null;
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
window.addEventListener('mousemove', resizeDrag);
|
||||
window.addEventListener('mouseup', resizeUnclick);
|
||||
// return (
|
||||
|
||||
// )
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log(tempWidth)
|
||||
// console.log(tempWidth)
|
||||
// }, [tempWidth])
|
||||
|
||||
const resizeUnclick = () => {
|
||||
console.log("unclick!")
|
||||
// setDragStart(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
|
||||
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)
|
||||
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>
|
||||
|
|
@ -501,6 +577,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
</Grid2>
|
||||
<Grid2
|
||||
sx={{ cursor: "col-resize" }}
|
||||
onMouseDown={event => resizeClick(event, index)}
|
||||
>
|
||||
|
|
||||
</Grid2>
|
||||
|
|
@ -559,15 +636,41 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
}
|
||||
{columns ?
|
||||
columns.map((column, j) => {
|
||||
// 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={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].toString()}
|
||||
{Object.values(row)[j] && Object.values(row)[j].toString()}
|
||||
</TableCell>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ import StatusSen5x from "common/StatusSen5x";
|
|||
import StatusDust from "common/StatusDust";
|
||||
import StatusGas from "common/StatusGas";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { or } from "utils";
|
||||
import LoadingScreen from "app/LoadingScreen";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
|
|
@ -388,12 +387,14 @@ export default function Devices() {
|
|||
let columns: Column<Device>[] = [
|
||||
{
|
||||
title: "State",
|
||||
// cellStyle: {width: 100000},
|
||||
// sortKey: "state",
|
||||
render: (device: Device) => {
|
||||
const status = device.status ?? pond.DeviceStatus.create()
|
||||
const deviceStateHelper = getDeviceStateHelper(status.state);
|
||||
return (
|
||||
<Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
|
||||
// <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
|
||||
<Box >
|
||||
<Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
|
||||
</Box>
|
||||
)
|
||||
|
|
@ -408,10 +409,12 @@ export default function Devices() {
|
|||
},
|
||||
{
|
||||
title: "Device",
|
||||
cellStyle: { width: 160 },
|
||||
sortKey: "name",
|
||||
render: (device: Device) => {
|
||||
return (
|
||||
<Box className={classes.cellContainer}>
|
||||
// <Box className={classes.cellContainer}>
|
||||
<Box >
|
||||
<Chip
|
||||
variant="outlined"
|
||||
label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId}
|
||||
|
|
@ -423,11 +426,12 @@ export default function Devices() {
|
|||
},
|
||||
{
|
||||
title: "Description",
|
||||
cellStyle: { width: 400 },
|
||||
render: (device: Device) => {
|
||||
const description = device.settings?.description ?? ""
|
||||
let size = (hasCo2 && !groupGas) ? 26 : 36
|
||||
return (
|
||||
<Box className={classes.descriptionCellContainer} width={size*6}>
|
||||
<Box >
|
||||
<Tooltip title={description}>
|
||||
<span>
|
||||
{description.length > size
|
||||
|
|
@ -697,9 +701,7 @@ export default function Devices() {
|
|||
dense
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
checked={!separateDust}
|
||||
/>
|
||||
<Checkbox checked={!separateDust} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={"Group Dust"} />
|
||||
</MenuItem>
|
||||
|
|
@ -709,10 +711,7 @@ export default function Devices() {
|
|||
dense
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
checked={groupGas}
|
||||
|
||||
/>
|
||||
<Checkbox checked={groupGas} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={"Group Gas"} />
|
||||
</MenuItem>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue