From 6e7d1abd7093d52ce1a5b1e7a2af5e141f7f22b1 Mon Sep 17 00:00:00 2001 From: swtmply Date: Wed, 5 Apr 2023 02:35:07 +0800 Subject: [PATCH] fixed column resize --- client/package.json | 4 +- .../production-list-table.component.jsx | 68 ++++++++++++++++++- ...uction-list-table.resizeable.component.jsx | 5 ++ client/src/index.css | 15 ++++ client/yarn.lock | 16 +++-- 5 files changed, 100 insertions(+), 8 deletions(-) diff --git a/client/package.json b/client/package.json index 6f31ce130..7dd25f069 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": "^0.2.1", + "react-drag-listview": "^2.0.0", "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.4", + "react-resizable": "^3.0.5", "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 6595476d5..808e0d56c 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, { useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import ReactDragListView from "react-drag-listview"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -173,6 +173,12 @@ 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 @@ -184,6 +190,7 @@ export function ProductionListTable({ 0 ) .toFixed(1); + return (
({ width: column.width, @@ -276,11 +284,67 @@ export function ProductionListTable({ rowKey="id" loading={loading} dataSource={dataSource} - // scroll={{ x: true }} + scroll={{ x: 1500 }} 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 2f1324999..e373f28b7 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,6 +3,11 @@ 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 c58b73347..68308ed42 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -12,3 +12,18 @@ 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 04749e444..5cd924deb 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@^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== +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== dependencies: babel-runtime "^6.26.0" prop-types "^15.5.8" @@ -11256,6 +11256,14 @@ 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"