Browse Source

Change selected row to use class instead of prop

- Fix rsuite table bug causing border gaps on certain scroll positions
master
jeffvli 3 years ago
parent
commit
a9ba2a2d2b
  1. 50
      src/components/viewtypes/ListViewTable.tsx
  2. 3
      src/components/viewtypes/styled.tsx

50
src/components/viewtypes/ListViewTable.tsx

@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
import _ from 'lodash'; import _ from 'lodash';
import path from 'path'; import path from 'path';
import settings from 'electron-settings'; import settings from 'electron-settings';
import styled from 'styled-components';
import { useQueryClient } from 'react-query'; import { useQueryClient } from 'react-query';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
@ -36,6 +37,19 @@ import {
toggleSelected, toggleSelected,
} from '../../redux/multiSelectSlice'; } 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 = ({ const ListViewTable = ({
tableRef, tableRef,
height, height,
@ -250,13 +264,20 @@ const ListViewTable = ({
return ( return (
<> <>
<Table <StyledTable
rowClassName={(rowData: any) =>
multiSelect?.selected.find((e: any) => e?.uniqueId === rowData?.uniqueId)
? 'selected'
: ''
}
ref={tableRef} ref={tableRef}
height={height} height={height}
data={sortColumn && !nowPlaying ? sortedData : data} data={sortColumn && !nowPlaying ? sortedData : data}
virtualized={virtualized} virtualized={virtualized}
rowHeight={rowHeight} rowHeight={rowHeight}
hover hover
cellBordered={false}
bordered={false}
affixHeader affixHeader
autoHeight={autoHeight} autoHeight={autoHeight}
affixHorizontalScrollbar affixHorizontalScrollbar
@ -346,17 +367,17 @@ const ListViewTable = ({
{(rowData: any, rowIndex: any) => { {(rowData: any, rowIndex: any) => {
return ( return (
<TableCellWrapper <TableCellWrapper
className={
multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
? 'custom-cell selected'
: 'custom-cell'
}
playing={ playing={
(rowData.uniqueId === playQueue?.currentSongUniqueId && nowPlaying) || (rowData.uniqueId === playQueue?.currentSongUniqueId && nowPlaying) ||
(!nowPlaying && rowData.id === playQueue?.currentSongId) (!nowPlaying && rowData.id === playQueue?.currentSongId)
? 'true' ? 'true'
: 'false' : 'false'
} }
rowselected={
multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
? 'true'
: 'false'
}
height={rowHeight} height={rowHeight}
onClick={(e: any) => { onClick={(e: any) => {
if (!dnd) { if (!dnd) {
@ -450,11 +471,6 @@ const ListViewTable = ({
{(rowData: any, rowIndex: any) => { {(rowData: any, rowIndex: any) => {
return ( return (
<TableCellWrapper <TableCellWrapper
rowselected={
multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
? 'true'
: 'false'
}
onClick={(e: any) => onClick={(e: any) =>
handleRowClick(e, { handleRowClick(e, {
...rowData, ...rowData,
@ -616,11 +632,6 @@ const ListViewTable = ({
{(rowData: any) => { {(rowData: any) => {
return ( return (
<TableCellWrapper <TableCellWrapper
rowselected={
multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
? 'true'
: 'false'
}
height={rowHeight} height={rowHeight}
onMouseDown={(e: any) => handleSelectMouseDown(e, rowData)} onMouseDown={(e: any) => handleSelectMouseDown(e, rowData)}
onMouseEnter={() => handleSelectMouseEnter(rowData)} onMouseEnter={() => handleSelectMouseEnter(rowData)}
@ -675,11 +686,6 @@ const ListViewTable = ({
? 'true' ? 'true'
: 'false' : 'false'
} }
rowselected={
multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
? 'true'
: 'false'
}
height={rowHeight} height={rowHeight}
onClick={(e: any) => { onClick={(e: any) => {
if (!column.dataKey?.match(/starred|songCount|duration|userRating/)) { if (!column.dataKey?.match(/starred|songCount|duration|userRating/)) {
@ -798,7 +804,7 @@ const ListViewTable = ({
)} )}
</Table.Column> </Table.Column>
))} ))}
</Table> </StyledTable>
</> </>
); );
}; };

3
src/components/viewtypes/styled.tsx

@ -25,14 +25,11 @@ export const RsuiteLinkButton = styled(Button)<{
`; `;
export const TableCellWrapper = styled.div<{ export const TableCellWrapper = styled.div<{
rowselected: string;
playing?: string; playing?: string;
height?: number; height?: number;
dragover?: string; dragover?: string;
dragfield?: string; dragfield?: string;
}>` }>`
background: ${(props) =>
props.rowselected === 'true' ? props.theme.primary.rowSelected : undefined};
color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)}; color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)};
line-height: ${(props) => (props.height ? `${props.height}px` : undefined)}; line-height: ${(props) => (props.height ? `${props.height}px` : undefined)};
box-shadow: ${(props) => box-shadow: ${(props) =>

Loading…
Cancel
Save