diff --git a/client/package.json b/client/package.json
index 7dd25f069..6f31ce130 100644
--- a/client/package.json
+++ b/client/package.json
@@ -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",
diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx
index 808e0d56c..6595476d5 100644
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.component.jsx
@@ -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 No columns found.
;
const totalHrs = data
@@ -190,7 +184,6 @@ export function ProductionListTable({
0
)
.toFixed(1);
-
return (
({
width: column.width,
@@ -284,67 +276,11 @@ export function ProductionListTable({
rowKey="id"
loading={loading}
dataSource={dataSource}
- scroll={{ x: 1500 }}
+ // scroll={{ x: true }}
onChange={handleTableChange}
/>
);
}
-
-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);
diff --git a/client/src/components/production-list-table/production-list-table.resizeable.component.jsx b/client/src/components/production-list-table/production-list-table.resizeable.component.jsx
index e373f28b7..2f1324999 100644
--- a/client/src/components/production-list-table/production-list-table.resizeable.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.resizeable.component.jsx
@@ -3,11 +3,6 @@ import { Resizable } from "react-resizable";
export default function ResizableComponent(props) {
const { onResize, width, ...restProps } = props;
-
- if (!width) {
- | ;
- }
-
return (
|
diff --git a/client/src/index.css b/client/src/index.css
index 68308ed42..c58b73347 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -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;
-}
diff --git a/client/yarn.lock b/client/yarn.lock
index 5cd924deb..04749e444 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -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"