From a9ba2a2d2b0fc0e30a098632e8a48f2532f60857 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 2 Oct 2021 00:39:23 -0700
Subject: [PATCH] Change selected row to use class instead of prop - Fix rsuite
 table bug causing border gaps on certain scroll positions

---
 src/components/viewtypes/ListViewTable.tsx | 50 ++++++++++++----------
 src/components/viewtypes/styled.tsx        |  3 --
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx
index 4ef16e3..61a5d2b 100644
--- a/src/components/viewtypes/ListViewTable.tsx
+++ b/src/components/viewtypes/ListViewTable.tsx
@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 import path from 'path';
 import settings from 'electron-settings';
+import styled from 'styled-components';
 import { useQueryClient } from 'react-query';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { nanoid } from 'nanoid';
@@ -36,6 +37,19 @@ import {
   toggleSelected,
 } from '../../redux/multiSelectSlice';
 
+const StyledTable = styled(Table)<{ rowHeight: number }>`
+  .rs-table-row.selected {
+    background: ${(props) => props.theme.primary.rowSelected};
+    // Resolve bug from rsuite-table where certain scrollpoints show a horizontal border
+    height: ${(props) => `${props.rowHeight + 1}px !important`};
+  }
+  .rs-table-row,
+  .rs-table-cell-group,
+  .rs-table-cell {
+    transition: none;
+  }
+`;
+
 const ListViewTable = ({
   tableRef,
   height,
@@ -250,13 +264,20 @@ const ListViewTable = ({
 
   return (
     <>
-      <Table
+      <StyledTable
+        rowClassName={(rowData: any) =>
+          multiSelect?.selected.find((e: any) => e?.uniqueId === rowData?.uniqueId)
+            ? 'selected'
+            : ''
+        }
         ref={tableRef}
         height={height}
         data={sortColumn && !nowPlaying ? sortedData : data}
         virtualized={virtualized}
         rowHeight={rowHeight}
         hover
+        cellBordered={false}
+        bordered={false}
         affixHeader
         autoHeight={autoHeight}
         affixHorizontalScrollbar
@@ -346,17 +367,17 @@ const ListViewTable = ({
                 {(rowData: any, rowIndex: any) => {
                   return (
                     <TableCellWrapper
+                      className={
+                        multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
+                          ? 'custom-cell selected'
+                          : 'custom-cell'
+                      }
                       playing={
                         (rowData.uniqueId === playQueue?.currentSongUniqueId && nowPlaying) ||
                         (!nowPlaying && rowData.id === playQueue?.currentSongId)
                           ? 'true'
                           : 'false'
                       }
-                      rowselected={
-                        multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
-                          ? 'true'
-                          : 'false'
-                      }
                       height={rowHeight}
                       onClick={(e: any) => {
                         if (!dnd) {
@@ -450,11 +471,6 @@ const ListViewTable = ({
                 {(rowData: any, rowIndex: any) => {
                   return (
                     <TableCellWrapper
-                      rowselected={
-                        multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
-                          ? 'true'
-                          : 'false'
-                      }
                       onClick={(e: any) =>
                         handleRowClick(e, {
                           ...rowData,
@@ -616,11 +632,6 @@ const ListViewTable = ({
                 {(rowData: any) => {
                   return (
                     <TableCellWrapper
-                      rowselected={
-                        multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
-                          ? 'true'
-                          : 'false'
-                      }
                       height={rowHeight}
                       onMouseDown={(e: any) => handleSelectMouseDown(e, rowData)}
                       onMouseEnter={() => handleSelectMouseEnter(rowData)}
@@ -675,11 +686,6 @@ const ListViewTable = ({
                           ? 'true'
                           : 'false'
                       }
-                      rowselected={
-                        multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
-                          ? 'true'
-                          : 'false'
-                      }
                       height={rowHeight}
                       onClick={(e: any) => {
                         if (!column.dataKey?.match(/starred|songCount|duration|userRating/)) {
@@ -798,7 +804,7 @@ const ListViewTable = ({
             )}
           </Table.Column>
         ))}
-      </Table>
+      </StyledTable>
     </>
   );
 };
diff --git a/src/components/viewtypes/styled.tsx b/src/components/viewtypes/styled.tsx
index 3b81cf4..edf15f8 100644
--- a/src/components/viewtypes/styled.tsx
+++ b/src/components/viewtypes/styled.tsx
@@ -25,14 +25,11 @@ export const RsuiteLinkButton = styled(Button)<{
 `;
 
 export const TableCellWrapper = styled.div<{
-  rowselected: string;
   playing?: string;
   height?: number;
   dragover?: string;
   dragfield?: string;
 }>`
-  background: ${(props) =>
-    props.rowselected === 'true' ? props.theme.primary.rowSelected : undefined};
   color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)};
   line-height: ${(props) => (props.height ? `${props.height}px` : undefined)};
   box-shadow: ${(props) =>