vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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 type { Variants } from 'framer-motion';
import { AnimatePresence } from 'framer-motion';
import { motion } from 'framer-motion';
import { Tabs } from '/@/components';
import { GeneralTab } from '/@/features/settings/components/general-tab';
@@ -29,42 +30,44 @@ export const Settings = () => {
m={5}
sx={{ height: '800px', maxHeight: '50vh', overflowX: 'hidden' }}
>
<Tabs
keepMounted={false}
orientation="vertical"
styles={{
tab: {
fontSize: '1.1rem',
padding: '0.5rem 1rem',
},
}}
value={currentTab}
variant="pills"
onTabChange={(e) => e && update({ tab: e })}
>
<Tabs.List>
<Tabs.Tab value="general">General</Tabs.Tab>
<Tabs.Tab value="playback">Playback</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="general">
<motion.div
animate="in"
initial="out"
variants={tabVariants}
>
<GeneralTab />
</motion.div>
</Tabs.Panel>
<Tabs.Panel value="playback">
<motion.div
animate="in"
initial="out"
variants={tabVariants}
>
<PlaybackTab />
</motion.div>
</Tabs.Panel>
</Tabs>
<AnimatePresence initial={false}>
<Tabs
keepMounted={false}
orientation="vertical"
styles={{
tab: {
fontSize: '1.1rem',
padding: '0.5rem 1rem',
},
}}
value={currentTab}
variant="pills"
onTabChange={(e) => e && update({ tab: e })}
>
<Tabs.List>
<Tabs.Tab value="general">General</Tabs.Tab>
<Tabs.Tab value="playback">Playback</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="general">
<motion.div
animate="in"
initial="out"
variants={tabVariants}
>
<GeneralTab />
</motion.div>
</Tabs.Panel>
<Tabs.Panel value="playback">
<motion.div
animate="in"
initial="out"
variants={tabVariants}
>
<PlaybackTab />
</motion.div>
</Tabs.Panel>
</Tabs>
</AnimatePresence>
</Box>
);
};