vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Prevent initial animation on settings modal

Browse Source
This commit is contained in:
jeffvli
2022-12-09 03:05:48 -08:00
parent 75b7eab2e1
commit 557eaab44c
1 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/renderer/src/features/settings/components/settings.tsx
+39 -36
View File
@@ -1,5 +1,6 @@
import { Box } from '@mantine/core'; import { Box } from '@mantine/core';
import type { Variants } from 'framer-motion'; import type { Variants } from 'framer-motion';
import { AnimatePresence } from 'framer-motion';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Tabs } from '/@/components'; import { Tabs } from '/@/components';
import { GeneralTab } from '/@/features/settings/components/general-tab'; import { GeneralTab } from '/@/features/settings/components/general-tab';
@@ -29,42 +30,44 @@ export const Settings = () => {
m={5} m={5}
sx={{ height: '800px', maxHeight: '50vh', overflowX: 'hidden' }} sx={{ height: '800px', maxHeight: '50vh', overflowX: 'hidden' }}
> >
<Tabs <AnimatePresence initial={false}>
keepMounted={false} <Tabs
orientation="vertical" keepMounted={false}
styles={{ orientation="vertical"
tab: { styles={{
fontSize: '1.1rem', tab: {
padding: '0.5rem 1rem', fontSize: '1.1rem',
}, padding: '0.5rem 1rem',
}} },
value={currentTab} }}
variant="pills" value={currentTab}
onTabChange={(e) => e && update({ tab: e })} variant="pills"
> onTabChange={(e) => e && update({ tab: e })}
<Tabs.List> >
<Tabs.Tab value="general">General</Tabs.Tab> <Tabs.List>
<Tabs.Tab value="playback">Playback</Tabs.Tab> <Tabs.Tab value="general">General</Tabs.Tab>
</Tabs.List> <Tabs.Tab value="playback">Playback</Tabs.Tab>
<Tabs.Panel value="general"> </Tabs.List>
<motion.div <Tabs.Panel value="general">
animate="in" <motion.div
initial="out" animate="in"
variants={tabVariants} initial="out"
> variants={tabVariants}
<GeneralTab /> >
</motion.div> <GeneralTab />
</Tabs.Panel> </motion.div>
<Tabs.Panel value="playback"> </Tabs.Panel>
<motion.div <Tabs.Panel value="playback">
animate="in" <motion.div
initial="out" animate="in"
variants={tabVariants} initial="out"
> variants={tabVariants}
<PlaybackTab /> >
</motion.div> <PlaybackTab />
</Tabs.Panel> </motion.div>
</Tabs> </Tabs.Panel>
</Tabs>
</AnimatePresence>
</Box> </Box>
); );
}; };