add dynamic table height

src/components/loader/Loader.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Loader as RsLoader } from 'rsuite';
 import '../../styles/Loader.global.css';
 
-const Loader = () => {
+const Loader = ({ text }: any) => {
   return (
     <div className="loader__main">
-      <RsLoader size="md" />
+      <RsLoader size="md" vertical content={text} />
     </div>
   );
 };

src/components/player/NowPlayingView.tsx

@@ -4,6 +4,7 @@ import { setCurrentIndex } from '../../redux/playQueueSlice';
 
 import GenericPage from '../layout/GenericPage';
 import ListViewType from '../viewtypes/ListViewType';
+import Loader from '../loader/Loader';
 
 const tableColumns = [
   {
@@ -51,6 +52,10 @@ const NowPlayingView = () => {
     dispatch(setCurrentIndex(e));
   };
 
+  if (!playQueue) {
+    return <Loader />;
+  }
+
   return (
     <GenericPage header={<h1>Now Playing</h1>}>
       <ListViewType
@@ -58,7 +63,6 @@ const NowPlayingView = () => {
         currentIndex={playQueue.currentIndex}
         tableColumns={tableColumns}
         handleRowClick={handleRowClick}
-        autoHeight
         virtualized
       />
     </GenericPage>

src/components/viewtypes/ListViewType.tsx

@@ -1,79 +1,130 @@
-import React from 'react';
-import { Table } from 'rsuite';
+import React, { useState, useEffect, useRef } from 'react';
+import { Table, DOMHelper } from 'rsuite';
 import { nanoid } from '@reduxjs/toolkit';
 import '../../styles/ListView.global.css';
 import { formatSongDuration } from '../../shared/utils';
+import Loader from '../loader/Loader';
+
+declare global {
+  interface Window {
+    resizeInterval: any;
+  }
+}
 
 const ListViewType = ({
   data,
   handleRowClick,
   handleContextMenu,
   tableColumns,
-  children,
-  tableHeight,
-  autoHeight,
   rowHeight,
   virtualized,
   currentIndex,
+  children,
 }: any) => {
+  const [height, setHeight] = useState(0);
+  const [show, setShow] = useState(false);
+  const { getHeight } = DOMHelper;
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleResize() {
+      setShow(false);
+      window.clearTimeout(window.resizeInterval);
+      window.resizeInterval = window.setTimeout(() => {
+        setShow(true);
+      }, 500);
+
+      setHeight(wrapperRef.current ? getHeight(wrapperRef.current) : 200);
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [getHeight]);
+
+  useEffect(() => {
+    window.requestAnimationFrame(() => {
+      setHeight(wrapperRef.current ? getHeight(wrapperRef.current) : 200);
+      setShow(true);
+    });
+  }, [getHeight]);
+
   return (
-    <Table
-      data={data}
-      height={tableHeight}
-      autoHeight={autoHeight}
-      onRowClick={handleRowClick}
-      virtualized={virtualized}
-      rowHeight={rowHeight}
-      onRowContextMenu={handleContextMenu}
-      affixHeader
-      affixHorizontalScrollbar
-    >
-      {tableColumns.map((column: any) => (
-        <Table.Column
-          key={nanoid()}
-          align={column.alignment}
-          flexGrow={column.flexGrow}
-          resizable={column.resizable}
-          width={column.width}
-          fixed={column.fixed}
-        >
-          <Table.HeaderCell>{column.header}</Table.HeaderCell>
-          {column.dataKey === 'index' ? (
-            <Table.Cell>
-              {(rowData: any, rowIndex: any) => {
-                return (
-                  <span className={rowIndex === currentIndex ? 'playing' : ''}>
-                    {rowIndex + 1}
-                    {rowData['-empty']}
-                  </span>
-                );
-              }}
-            </Table.Cell>
-          ) : column.dataKey === 'duration' ? (
-            <Table.Cell>
-              {(rowData: any, rowIndex: any) => {
-                return (
-                  <span className={rowIndex === currentIndex ? 'playing' : ''}>
-                    {formatSongDuration(rowData.duration)}
-                  </span>
-                );
-              }}
-            </Table.Cell>
-          ) : (
-            <Table.Cell>
-              {(rowData: any, rowIndex: any) => {
-                return (
-                  <span className={rowIndex === currentIndex ? 'playing' : ''}>
-                    {rowData[column.dataKey]}
-                  </span>
-                );
-              }}
-            </Table.Cell>
-          )}
-        </Table.Column>
-      ))}
-      {children}
-    </Table>
+    <>
+      {!show && <Loader text="Resizing..." />}
+      <div
+        className="table__container"
+        style={{ flexGrow: 1 }}
+        ref={wrapperRef}
+      >
+        {show && (
+          <Table
+            height={height}
+            data={data}
+            onRowClick={handleRowClick}
+            virtualized={virtualized}
+            rowHeight={rowHeight}
+            onRowContextMenu={handleContextMenu}
+            affixHeader
+            affixHorizontalScrollbar
+          >
+            {tableColumns.map((column: any) => (
+              <Table.Column
+                key={nanoid()}
+                align={column.alignment}
+                flexGrow={column.flexGrow}
+                resizable={column.resizable}
+                width={column.width}
+                fixed={column.fixed}
+              >
+                <Table.HeaderCell>{column.header}</Table.HeaderCell>
+                {column.dataKey === 'index' ? (
+                  <Table.Cell>
+                    {(rowData: any, rowIndex: any) => {
+                      return (
+                        <span
+                          className={rowIndex === currentIndex ? 'playing' : ''}
+                        >
+                          {rowIndex + 1}
+                          {rowData['-empty']}
+                        </span>
+                      );
+                    }}
+                  </Table.Cell>
+                ) : column.dataKey === 'duration' ? (
+                  <Table.Cell>
+                    {(rowData: any, rowIndex: any) => {
+                      return (
+                        <span
+                          className={rowIndex === currentIndex ? 'playing' : ''}
+                        >
+                          {formatSongDuration(rowData.duration)}
+                        </span>
+                      );
+                    }}
+                  </Table.Cell>
+                ) : (
+                  <Table.Cell>
+                    {(rowData: any, rowIndex: any) => {
+                      return (
+                        <span
+                          className={rowIndex === currentIndex ? 'playing' : ''}
+                        >
+                          {rowData[column.dataKey]}
+                        </span>
+                      );
+                    }}
+                  </Table.Cell>
+                )}
+              </Table.Column>
+            ))}
+            {children}
+          </Table>
+        )}
+      </div>
+    </>
   );
 };
 

src/styles/Layout.global.css

@@ -21,3 +21,7 @@
   width: 100%;
   /* z-index: 1;  */
 }
+
+.container__page {
+  height: 100vh;
+}

src/styles/ListView.global.css

@@ -5,3 +5,7 @@
 .playing {
   color: #169de0;
 }
+
+.table__container {
+  height: 100%;
+}