github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-08-13 18:27:08 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Refactor Artist index to use react-window

Browse source 
(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)

Fixed: Restoring scroll position when going back/forward to artist list

(cherry picked from commit 5aad84dba453c42b4b5a9eac43deecf91a98f4f6)
This commit is contained in:
Mark McDowall 2023-01-05 18:20:49 -08:00 • committed by Bogdan
commit f509ca0f72
117 changed files with 4704 additions and 5511 deletions
Download patch file Download diff file Expand all files Collapse all files

197
frontend/src/Artist/Index/Overview/Options/ArtistIndexOverviewOptionsModalContent.tsx Normal file
View file

@ -0,0 +1,197 @@
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
import { setArtistOverviewOption } from 'Store/Actions/artistIndexActions';
import translate from 'Utilities/String/translate';
import selectOverviewOptions from '../selectOverviewOptions';
const posterSizeOptions = [
{
key: 'small',
get value() {
return translate('Small');
},
},
{
key: 'medium',
get value() {
return translate('Medium');
},
},
{
key: 'large',
get value() {
return translate('Large');
},
},
];
interface ArtistIndexOverviewOptionsModalContentProps {
onModalClose(...args: unknown[]): void;
}
function ArtistIndexOverviewOptionsModalContent(
props: ArtistIndexOverviewOptionsModalContentProps
) {
const { onModalClose } = props;
const {
detailedProgressBar,
size,
showMonitored,
showQualityProfile,
showLastAlbum,
showAdded,
showAlbumCount,
showPath,
showSizeOnDisk,
showSearchAction,
} = useSelector(selectOverviewOptions);
const dispatch = useDispatch();
const onOverviewOptionChange = useCallback(
({ name, value }) => {
dispatch(setArtistOverviewOption({ [name]: value }));
},
[dispatch]
);
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>{translate('OverviewOptions')}</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<FormLabel>{translate('PosterSize')}</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="size"
value={size}
values={posterSizeOptions}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('DetailedProgressBar')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="detailedProgressBar"
value={detailedProgressBar}
helpText={translate('DetailedProgressBarHelpText')}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowMonitored')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showMonitored"
value={showMonitored}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowQualityProfile')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showQualityProfile"
value={showQualityProfile}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowLastAlbum')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showLastAlbum"
value={showLastAlbum}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowDateAdded')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showAdded"
value={showAdded}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowAlbumCount')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showAlbumCount"
value={showAlbumCount}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowPath')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showPath"
value={showPath}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowSizeOnDisk')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSizeOnDisk"
value={showSizeOnDisk}
onChange={onOverviewOptionChange}
/>
</FormGroup>
<FormGroup>
<FormLabel>{translate('ShowSearch')}</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="showSearchAction"
value={showSearchAction}
helpText={translate('ShowSearchActionHelpText')}
onChange={onOverviewOptionChange}
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>{translate('Close')}</Button>
</ModalFooter>
</ModalContent>
);
}
export default ArtistIndexOverviewOptionsModalContent;