From 028df9d38fe3a7a9cf7c5f2d10d2750edae02b6a Mon Sep 17 00:00:00 2001 From: lenpel <26303224+lenpel@users.noreply.github.com> Date: Fri, 1 Feb 2019 22:21:35 +0100 Subject: [PATCH] working min-widts, changes in css and onMove --- resizable-columns/README.md | 17 ++++ resizable-columns/src/RequestListHeader.js | 93 +++++++++------------ resizable-columns/src/Table.css | 4 +- resizable-columns/src/defaultColumnsData.js | 4 +- 4 files changed, 60 insertions(+), 58 deletions(-) diff --git a/resizable-columns/README.md b/resizable-columns/README.md index 97d2fa1..ebae62c 100644 --- a/resizable-columns/README.md +++ b/resizable-columns/README.md @@ -12,3 +12,20 @@ Open http://localhost:3000 to view it in the browser. * position:absolute removed from .requests-list-contents * Using `width` not `minWidth` * min-width set to 15px for all columns in CSS (look for .requests-list-header-item) + +[02-01-19] +* changed css: +- removed width: 100px from .requests-list-column +- removed !important from .requests-list-header-item min-width +- removed padding-inline-start: 16px from .requests-list-header-button +- min-width doesn't work in table-layout:fixed, so we pass columnsData into onMove() to take care of min-width + +* changed onStopMove(): +- to use parent
width for calculation px2% + +* changed onMove(): +- to use parent
width for calculation +- to read minWidth and minCompensateWidth from columnsData and adjust resizing of columns to take min widths into account +- changed the resize logic a bit + +* const defaultColumnsData has now miWidth set in pixels. All columns have 30px, waterfall has 150px diff --git a/resizable-columns/src/RequestListHeader.js b/resizable-columns/src/RequestListHeader.js index 44ce4aa..5a2ae4a 100644 --- a/resizable-columns/src/RequestListHeader.js +++ b/resizable-columns/src/RequestListHeader.js @@ -43,8 +43,6 @@ class RequestListHeader extends Component { doc.documentElement.style.cursor = "ew-resize"; this.requestListHeader.classList.add("dragging"); - console.log("onStartMove"); - // this setState causes a call to render; maybe we can get rid of it later // This causes rerender - we don't want that. /*this.setState({ @@ -55,27 +53,18 @@ class RequestListHeader extends Component { /** * Helper method to convert pixels into percent based on parent container width */ - px2percent(pxWidth, totalWidth) { - const percent = Math.round((100 * pxWidth / totalWidth) * 100) / 100; + px2percent(pxWidth, parentWidth) { + const percent = Math.round((100 * pxWidth / parentWidth) * 100) / 100; return percent; } onStopMove(columnsData) { - // let temp = [...columnsData.values()].map(value => value.name + ":" + value.width); - // console.log("onStopMove before recalc:", temp); - - console.log("onStopMove"); - // Store the new column widths into prefs const { columns } = this.props; const visibleColumns = HEADERS.filter((header) => columns[header.name]); - let totalWidth = 0; - for (let i = 0; i < visibleColumns.length; i++) { - const name = visibleColumns[i].name; - const headerRef = this.refs[`${name}Header`]; - totalWidth += headerRef.clientWidth; - } + const parentEl = document.querySelector(".requests-list-headers"); + const parentWidth = parentEl.clientWidth; // For each visible column update minWidth and width in columnsData Map for (let i = 0; i < visibleColumns.length; i++) { @@ -91,7 +80,7 @@ class RequestListHeader extends Component { const headerRef = this.refs[`${name}Header`]; // Get actual column width, change into %, update columnsData Map - const width = this.px2percent(headerRef.clientWidth, totalWidth); + const width = this.px2percent(headerRef.clientWidth, parentWidth); columnsData.set(name, {name, minWidth, width}); } @@ -105,7 +94,9 @@ class RequestListHeader extends Component { this.requestListHeader.classList.remove("dragging"); } - onMove(visibleColumns, name, x, y) { + onMove(visibleColumns, columnsData, name, x, y) { + const parentEl = document.querySelector(".requests-list-headers"); + const parentWidth = parentEl.clientWidth; // Get the current column handle and save its old width // before changing so we can compute the difference in width @@ -120,8 +111,6 @@ class RequestListHeader extends Component { compensateHeaderName = visibleColumns[visibleColumns.length - 2].name; // When resizing the last column before waterfall // then the compensate column is waterfall - // TODO: in chrome - when resizing the last column before waterfall, - // ALL columns compensate (autosize) if (name === compensateHeaderName) { compensateHeaderName = "waterfall"; } @@ -131,34 +120,36 @@ class RequestListHeader extends Component { const compensateHeaderRef = this.refs[`${compensateHeaderName}Header`]; const oldCompensateWidth = compensateHeaderRef.clientWidth; - // Calculate new width (according to the mouse x-position) and set to .style - const newWidth = x - headerRef.offsetLeft; - headerRef.style.width = `${newWidth}px`; - // Save the real width (computed) - it can be influenced by minwidth - const realWidth = headerRef.clientWidth; - const diffWidth = oldWidth - realWidth; - - // Calculate new width for compensate column as the original width + difference - const newCompensateWidth = diffWidth + compensateHeaderRef.clientWidth; - compensateHeaderRef.style.width = `${newCompensateWidth}px`; - // Save the real compensate width (computed) - it can be influenced by minwidth - const realCompensateWidth = compensateHeaderRef.clientWidth; - - // When the realCompensateWidth is no more changing because of minWidth - // the resize should not be done and the style should be reset - if (realCompensateWidth !== newCompensateWidth) { - const sumOfBothColumns = oldWidth + oldCompensateWidth; - headerRef.style.width = `${sumOfBothColumns - realCompensateWidth}px`; - } + const sumOfBothColumns = oldWidth + oldCompensateWidth; - let totalWidth = 0; - for (let i = 0; i < visibleColumns.length; i++) { - const name = visibleColumns[i].name; - const headerRef = this.refs[`${name}Header`]; - totalWidth += headerRef.clientWidth; + // get minimal widths for both changed columns (in px) + let minWidth; + let minCompensateWidth; + + if (columnsData.has(name)) { + minWidth = (columnsData.get(name)).minWidth; } + if (columnsData.has(compensateHeaderName)) { + minCompensateWidth = (columnsData.get(compensateHeaderName)).minWidth; + } + + // Calculate new width (according to the mouse x-position) and set to .style + // Do not allow to set it below minWidth + const newWidth = Math.max(x - headerRef.offsetLeft, minWidth); + headerRef.style.width = `${this.px2percent(newWidth, parentWidth)}%`; - console.log("onMove => totalWidth [px]: " + totalWidth); + const diffWidth = oldWidth - newWidth; + + // Calculate new compensate width as the original width + difference + // Do not allow to set it below minCompensateWidth + const newCompensateWidth = + Math.max(diffWidth + oldCompensateWidth, minCompensateWidth); + compensateHeaderRef.style.width = `${this.px2percent(newCompensateWidth, parentWidth)}%`; + + // Do not allow to reset size of column when compensate column is at minWidth + if (newCompensateWidth === minCompensateWidth) { + headerRef.style.width = `${this.px2percent((sumOfBothColumns - newCompensateWidth), parentWidth)}%`; + } } // Preference helpers (these might be in shared module) @@ -208,21 +199,17 @@ class RequestListHeader extends Component { const array = [...columnsData.values()]; const sum = array.reduce((acc, value) => acc + value.width, 0); console.log("renderColumn [" + - array.map(value => value.name + ":" + value.width) + + array.map(value => value.name + ":" + value.width + " min:" + value.minWidth) + "] => " + sum); - // Get the saved column width and set it for rendering - // if it doesn't exist use 20px - just for now let columnStyle; - - // The pref for this column width exists, set the style - // Otherwise leave the style empty - should come from CSS + // If the pref for this column width exists, set the style if (columnsData.has(name)) { const oneColumnEl = columnsData.get(name); let colWidth = oneColumnEl.width ? - oneColumnEl.width : oneColumnEl.min; + oneColumnEl.width : oneColumnEl.minWidth; if (!colWidth) { - colWidth = 10; + colWidth = MIN_COLUMN_WIDTH; } columnStyle = { width: colWidth + "%", @@ -246,7 +233,7 @@ class RequestListHeader extends Component { className="column-resizer" onStart= {() => this.onStartMove()} onStop= {() => this.onStopMove(columnsData)} - onMove= {(x, y) => this.onMove(visibleColumns, name, x, y)} />} + onMove= {(x, y) => this.onMove(visibleColumns, columnsData, name, x, y)} />}
) } diff --git a/resizable-columns/src/Table.css b/resizable-columns/src/Table.css index e4375be..312940b 100644 --- a/resizable-columns/src/Table.css +++ b/resizable-columns/src/Table.css @@ -24,12 +24,10 @@ overflow: hidden; text-overflow: ellipsis; vertical-align: middle; - width: 100px; } .requests-list-header-item { border-bottom: 1px solid lightgray; - min-width: 15px !important; } .requests-list-header-item:hover { @@ -67,7 +65,7 @@ transparent 85%) 1 1; border-width: 0; border-inline-start-width: 1px; - padding-inline-start: 16px; + /* padding-inline-start: 16px; */ width: 100%; min-height: 23px; text-align: center; diff --git a/resizable-columns/src/defaultColumnsData.js b/resizable-columns/src/defaultColumnsData.js index 2b91c54..25f0809 100644 --- a/resizable-columns/src/defaultColumnsData.js +++ b/resizable-columns/src/defaultColumnsData.js @@ -1,7 +1,7 @@ /* See license.txt for terms of usage */ // Minimal width of column in % -export const MIN_COLUMN_WIDTH = 5; +export const MIN_COLUMN_WIDTH = 30; // in px export const defaultColumnsData = [ { @@ -38,7 +38,7 @@ export const defaultColumnsData = [ width: 5, }, { name: "waterfall", - minWidth: MIN_COLUMN_WIDTH, + minWidth: 150, width: 25, }, ];