Update column width calculation logic #3747
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## am-double-double-click #3747 +/- ##
==========================================================
- Coverage 98.75% 98.63% -0.12%
==========================================================
Files 47 47
Lines 3445 3446 +1
Branches 751 751
==========================================================
- Hits 3402 3399 -3
- Misses 43 47 +4
🚀 New features to boost your workflow:
|
src/utils/index.ts
Outdated
| // ignore maxWidth if it less than minWidth | ||
| if (typeof maxWidth === 'number' && maxWidth >= minWidth) { | ||
| return min(width, maxWidth); | ||
| // clamp() and max() do not handle all the css grid column width values |
There was a problem hiding this comment.
I tried calc-size but it does not work unfortunately
https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size
amanmahajan7
changed the title
src/utils/index.ts
Outdated
|
|
||
| export function clampColumnWidth<R, SR>( | ||
| width: number, | ||
| export function getColumnWidthForMeasurement<R, SR>( |
There was a problem hiding this comment.
I believe that this function is not needed at all if we pass min-width and max-width to columns styles; then setting any width will not break the grid layout
There was a problem hiding this comment.
This is needed to fix this bug. We already set min/max width on the measuring cell
| @@ -177,9 +177,7 @@ export function useCalculatedColumns<R, SR>({ | |||
| for (const column of columns) { | |||
| let width = getColumnWidth(column); | |||
|
|
|||
| if (typeof width === 'number') { | |||
| width = clampColumnWidth(width, column); | |||
There was a problem hiding this comment.
It is possible that a column has a width less than minWidth or greater than maxWidth so we may have more or less viewport columns initially but they will be updated once the actual width is measured. I think this scenario is unlikely so I removed clampColumnWidth. getColumnWidthForMeasurement handles it using css clamp function now. I am okay with adding it back if you prefer
| prevGridWidthRef.current = gridWidth; | ||
| updateMeasuredAndResizedWidths(); | ||
| }); | ||
| useLayoutEffect(updateMeasuredAndResizedWidths); |
There was a problem hiding this comment.
Cannot inline this function as exhaustive deps rule complains. I can add useMemo but not sure it is worth
#3746 (comment)
I have removed
clampColumnWidthhelper and now the browser handle theminWidth/maxWidthusing the following logicclamp/maxwhen possibleminmaxwhen possibleminWidth/maxWidthon the measuring cell