pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove base animation of smart playlist query builder display

Browse source
This commit is contained in:
jeffvli 2023-07-16 23:25:00 -07:00
parent be0792a5c7
commit c27a9a8ffb
1 changed files with 38 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
View file

@ -1,8 +1,7 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Group } from '@mantine/core'; import { Box, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals'; import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion, Variants } from 'framer-motion';
import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri'; import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
import { generatePath, useNavigate, useParams } from 'react-router'; import { generatePath, useNavigate, useParams } from 'react-router';
import { PlaylistDetailSongListContent } from '../components/playlist-detail-song-list-content'; import { PlaylistDetailSongListContent } from '../components/playlist-detail-song-list-content';
@ -119,28 +118,6 @@ const PlaylistDetailSongListRoute = () => {
}); });
}; };
const smartPlaylistVariants: Variants = {
animate: (custom: { isQueryBuilderExpanded: boolean }) => {
return {
maxHeight: custom.isQueryBuilderExpanded ? '35vh' : '3.5em',
opacity: 1,
transition: {
duration: 0.3,
ease: 'easeInOut',
},
y: 0,
};
},
exit: {
opacity: 0,
y: -25,
},
initial: {
opacity: 0,
y: -25,
},
};
const isSmartPlaylist = const isSmartPlaylist =
!detailQuery?.isLoading && !detailQuery?.isLoading &&
detailQuery?.data?.rules && detailQuery?.data?.rules &&
@ -190,55 +167,45 @@ const PlaylistDetailSongListRoute = () => {
itemCount={itemCount} itemCount={itemCount}
tableRef={tableRef} tableRef={tableRef}
/> />
<AnimatePresence
custom={{ isQueryBuilderExpanded }} {(isSmartPlaylist || showQueryBuilder) && (
initial={false} <Box>
> <Paper
{(isSmartPlaylist || showQueryBuilder) && ( h="100%"
<motion.div mah="35vh"
animate="animate" w="100%"
custom={{ isQueryBuilderExpanded }}
exit="exit"
initial="initial"
transition={{ duration: 0.2, ease: 'easeInOut' }}
variants={smartPlaylistVariants}
> >
<Paper <Group p="1rem">
h="100%" <Button
pos="relative" compact
w="100%" variant="default"
> onClick={handleToggleExpand}
<Group
pt="1rem"
px="1rem"
> >
<Button {isQueryBuilderExpanded ? (
compact <RiArrowUpSLine size={20} />
variant="default" ) : (
onClick={handleToggleExpand} <RiArrowDownSLine size={20} />
> )}
{isQueryBuilderExpanded ? ( </Button>
<RiArrowUpSLine size={20} /> <Text>Query Editor</Text>
) : ( </Group>
<RiArrowDownSLine size={20} /> <Box>
)} {isQueryBuilderExpanded && (
</Button> <PlaylistQueryBuilder
<Text>Query Editor</Text> key={JSON.stringify(detailQuery?.data?.rules)}
</Group> isSaving={createPlaylistMutation?.isLoading}
<PlaylistQueryBuilder limit={detailQuery?.data?.rules?.limit}
key={JSON.stringify(detailQuery?.data?.rules)} query={detailQuery?.data?.rules}
isSaving={createPlaylistMutation?.isLoading} sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
limit={detailQuery?.data?.rules?.limit} sortOrder={detailQuery?.data?.rules?.order || 'asc'}
query={detailQuery?.data?.rules} onSave={handleSave}
sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM} onSaveAs={handleSaveAs}
sortOrder={detailQuery?.data?.rules?.order || 'asc'} />
onSave={handleSave} )}
onSaveAs={handleSaveAs} </Box>
/> </Paper>
</Paper> </Box>
</motion.div> )}
)}
</AnimatePresence>
<PlaylistDetailSongListContent tableRef={tableRef} /> <PlaylistDetailSongListContent tableRef={tableRef} />
</AnimatedPage> </AnimatedPage>
); );