codestyle

cloudscape-design · Sep 17, 2023 · 5a8211c · 5a8211c
1 parent 7048d40
commit 5a8211c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/table/__tests__/resizable-columns.test.tsx b/src/table/__tests__/resizable-columns.test.tsx
@@ -313,6 +313,7 @@ describe('resize with keyboard', () => {
   });
 
   test('resizes columns with keyboard', async () => {
+    mockWidth = 150;
     const onChange = jest.fn();
     const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
     const columnResizerWrapper = wrapper.findColumnResizer(1)!;

diff --git a/src/table/header-cell/th-element.tsx b/src/table/header-cell/th-element.tsx
@@ -19,7 +19,7 @@ interface TableThElementProps {
   resizableColumns?: boolean;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
-  cellRef?: React.Ref<HTMLElement>;
+  cellRef?: React.RefCallback<HTMLElement>;
   tableRole: TableRole;
   children: React.ReactNode;
 }

diff --git a/src/table/resizer/index.tsx b/src/table/resizer/index.tsx
@@ -44,6 +44,8 @@ export function Resizer({
   useEffect(() => setHeaderCellWidth(resizerDom.current.header.getBoundingClientRect().width), []);
 
   const handlers = useMemo(() => {
+    const { left: leftEdge, right: rightEdge } = resizerDom.current.scrollParent.getBoundingClientRect();
+
     const updateTrackerPosition = (newOffset: number) => {
       const { left: scrollParentLeft } = resizerDom.current.table.getBoundingClientRect();
       resizerDom.current.tracker.style.top = resizerDom.current.header.getBoundingClientRect().height + 'px';
@@ -52,8 +54,7 @@ export function Resizer({
     };
 
     const updateColumnWidth = (newWidth: number) => {
-      const right = resizerDom.current.header.getBoundingClientRect().right;
-      const width = resizerDom.current.header.getBoundingClientRect().width;
+      const { right, width } = resizerDom.current.header.getBoundingClientRect();
       const updatedWidth = newWidth < minWidth ? minWidth : newWidth;
       updateTrackerPosition(right + updatedWidth - width);
       if (newWidth >= minWidth) {
@@ -64,24 +65,25 @@ export function Resizer({
     };
 
     const resizeColumn = (offset: number) => {
-      if (offset > resizerDom.current.scrollParent.getBoundingClientRect().left) {
+      if (offset > leftEdge) {
         const newWidth = offset - resizerDom.current.header.getBoundingClientRect().left;
         // callbacks must be the last calls in the handler, because they may cause an extra update
         updateColumnWidth(newWidth);
       }
     };
 
     const onAutoGrow = () => {
+      const { width } = resizerDom.current.header.getBoundingClientRect();
       autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);
       // callbacks must be the last calls in the handler, because they may cause an extra update
-      updateColumnWidth(resizerDom.current.header.getBoundingClientRect().width + AUTO_GROW_INCREMENT);
+      updateColumnWidth(width + AUTO_GROW_INCREMENT);
       resizerDom.current.scrollParent.scrollLeft += AUTO_GROW_INCREMENT;
     };
 
     const onMouseMove = (event: MouseEvent) => {
       clearTimeout(autoGrowTimeout.current);
       const offset = event.pageX;
-      if (offset > resizerDom.current.scrollParent.getBoundingClientRect().right) {
+      if (offset > rightEdge) {
         autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);
       } else {
         resizeColumn(offset);