Browse Source

swap sort type to selectpicker

master
jeffvli 3 years ago
parent
commit
94ef6c32e2
  1. 9
      src/components/library/AlbumList.tsx
  2. 11
      src/components/playlist/PlaylistList.tsx
  3. 10
      src/components/shared/styled.ts

9
src/components/library/AlbumList.tsx

@ -1,7 +1,6 @@
import React, { useState } from 'react';
import settings from 'electron-settings';
import { useQuery, useQueryClient } from 'react-query';
import { SelectPicker } from 'rsuite';
import GridViewType from '../viewtypes/GridViewType';
import ListViewType from '../viewtypes/ListViewType';
import useSearchQuery from '../../hooks/useSearchQuery';
@ -16,6 +15,7 @@ import {
toggleRangeSelected,
setSelected,
} from '../../redux/multiSelectSlice';
import { StyledInputPicker } from '../shared/styled';
const ALBUM_SORT_TYPES = [
{ label: 'A-Z (Name)', value: 'alphabeticalByName' },
@ -73,13 +73,12 @@ const AlbumList = () => {
<GenericPageHeader
title="Albums"
subsidetitle={
<SelectPicker
<StyledInputPicker
width={120}
defaultValue={sortBy}
data={ALBUM_SORT_TYPES}
searchable={false}
placeholder="Sort Type"
menuAutoWidth
onChange={async (value) => {
onChange={async (value: string) => {
setOffset(0);
setSortBy(value);
await queryClient.refetchQueries(['albumList'], {

11
src/components/playlist/PlaylistList.tsx

@ -59,17 +59,6 @@ const PlaylistList = () => {
showSearchBar
handleListClick={() => setViewType('list')}
handleGridClick={() => setViewType('grid')}
subsidetitle={
<SelectPicker
data={PLAYLIST_SORT_TYPES}
searchable={false}
placeholder="Sort Type"
menuAutoWidth
onChange={(value) => {
setSortBy(value);
}}
/>
}
/>
}
>

10
src/components/shared/styled.ts

@ -31,6 +31,7 @@ export const StyledButton = styled(Button)<{ width: number }>`
export const StyledInputGroup = styled(InputGroup)`
input {
background-color: ${(props) => props.theme.primary.inputBackground};
color: ${(props) => `${props.theme.primary.text} !important`};
}
`;
@ -139,10 +140,17 @@ export const StyledSlider = styled(Slider)`
}
`;
export const StyledInputPicker = styled(InputPicker)`
export const StyledInputPicker = styled(InputPicker)<{ width?: number }>`
.rs-picker-toggle-value {
color: ${(props) => `${props.theme.primary.main} !important`};
}
.rs-btn-default {
background: ${(props) =>
`${props.theme.primary.inputBackground} !important`};
}
width: ${(props) => `${props.width}px`};
`;
export const StyledIcon = styled(Icon)`

Loading…
Cancel
Save