admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "fixed column resize"

Browse Source 
This reverts commit 6e7d1abd70.
This commit is contained in:
Patrick Fic
2023-04-05 14:20:15 -07:00
parent 8a6d94f193
commit 9b4247d6f6
5 changed files with 8 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/package.json
View File

@@ -45,7 +45,7 @@
"react-color": "^2.19.3",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-drag-listview": "^2.0.0",
"react-drag-listview": "^0.2.1",
"react-grid-gallery": "^1.0.0",
"react-grid-layout": "^1.3.4",
"react-i18next": "^12.2.0",
@@ -53,7 +53,7 @@
"react-image-lightbox": "^5.1.4",
"react-number-format": "^5.1.3",
"react-redux": "^8.0.5",
"react-resizable": "^3.0.5",
"react-resizable": "^3.0.4",
"react-router-dom": "^5.3.0",
"react-scripts": "^5.0.1",
"react-sticky": "^6.0.3",

68
client/src/components/production-list-table/production-list-table.component.jsx
View File

@@ -10,7 +10,7 @@ import {
Statistic,
Table,
} from "antd";
import React, { useEffect, useMemo, useState } from "react";
import React, { useMemo, useState } from "react";
import ReactDragListView from "react-drag-listview";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -173,12 +173,6 @@ export function ProductionListTable({
// }
// };
useEffect(
() => calculateColumnsWidth(columns, dataSource),
// eslint-disable-next-line react-hooks/exhaustive-deps
[dataSource, state]
);
if (!!!columns) return <div>No columns found.</div>;
const totalHrs = data
@@ -190,7 +184,6 @@ export function ProductionListTable({
0
)
.toFixed(1);
return (
<div>
<PageHeader
@@ -273,7 +266,6 @@ export function ProductionListTable({
filteredValue: state.filteredInfo[c.key] || null,
sortOrder:
state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
ellipsis: true,
title: headerItem(c),
onHeaderCell: (column) => ({
width: column.width,
@@ -284,67 +276,11 @@ export function ProductionListTable({
rowKey="id"
loading={loading}
dataSource={dataSource}
scroll={{ x: 1500 }}
// scroll={{ x: true }}
onChange={handleTableChange}
/>
</ReactDragListView.DragColumn>
</div>
);
}
const getTextWidth = (text, font = "14px -apple-system") => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return Math.round(metrics.width + 80);
};
const calculateColumnsWidth = (columns, source, maxWidthPerCell = 500) => {
// First we calculate the width for each column
// The column width is based on its string length
const columnsWithWidth = columns.map((column) => {
return Object.assign(column, {
width: column.width ?? getTextWidth(column.title),
});
});
// Since we have a minimum width (column's width already calculated),
// now we are going to verify if the cell value is bigger
// than the column width which is already set
source.forEach((entry) => {
columnsWithWidth.forEach((column, indexColumn) => {
const columnWidth = column.width;
const cellValue = Object.values(entry)[indexColumn];
// Get the string width based on chars length
let cellWidth = getTextWidth(cellValue);
// Verify if the cell value is smaller than column's width
if (cellWidth < columnWidth) cellWidth = columnWidth;
// Verify if the cell value width is bigger than our max width flag
if (cellWidth > maxWidthPerCell) cellWidth = maxWidthPerCell;
// Update the column width
columnsWithWidth[indexColumn].width = cellWidth;
});
});
// Sum of all columns width to determine the table max width
const tableWidth = columnsWithWidth
.map((column) => column.width)
.reduce((a, b) => {
return a + b;
});
return {
columns: columnsWithWidth,
source,
tableWidth,
};
};
export default connect(mapStateToProps, null)(ProductionListTable);

5
client/src/components/production-list-table/production-list-table.resizeable.component.jsx
View File

@@ -3,11 +3,6 @@ import { Resizable } from "react-resizable";
export default function ResizableComponent(props) {
const { onResize, width, ...restProps } = props;
if (!width) {
<th {...restProps} />;
}
return (
<Resizable width={width || 200} height={0} onResize={onResize}>
<th {...restProps} />

15
client/src/index.css
View File

@@ -12,18 +12,3 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.react-resizable {
position: relative;
background-clip: padding-box;
}
.react-resizable-handle {
position: absolute;
right: -5px;
bottom: 0;
z-index: 1;
width: 10px;
height: 100%;
cursor: col-resize;
}

16
client/yarn.lock
View File

@@ -11105,10 +11105,10 @@ react-dom@^17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-drag-listview@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-drag-listview/-/react-drag-listview-2.0.0.tgz#b8e7ec5f980ecbbf3abb85f50db0b03cd764edbf"
integrity sha512-7Apx/1Xt4qu+JHHP0rH6aLgZgS7c2MX8ocHVGCi03KfeIWEu0t14MhT3boQKM33l5eJrE/IWfExFTvoYq22fsg==
react-drag-listview@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/react-drag-listview/-/react-drag-listview-0.2.1.tgz#922fa3c37ed4d84f2a349a93b01a623ac565f7dc"
integrity sha512-LFR/14CpmiieITCywfe2rxAg1szAqsynpqgquSgirT9cansDwJdpqAVEjzIRSEql/DRIYTvBYLvMI/HJcVeU4w==
dependencies:
babel-runtime "^6.26.0"
prop-types "^15.5.8"
@@ -11256,14 +11256,6 @@ react-resizable@^3.0.4:
prop-types "15.x"
react-draggable "^4.0.3"
react-resizable@^3.0.5:
version "3.0.5"
resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1"
integrity sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==
dependencies:
prop-types "15.x"
react-draggable "^4.0.3"
react-resize-detector@^7.1.2:
version "7.1.2"
resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c"