antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Refactor scrollarea component for overlayscrollbars

Browse source
This commit is contained in:
jeffvli 2023-07-21 05:20:40 -07:00
parent 3d6f5a2748
commit c3d8791455
9 changed files with 95 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/renderer/components/page-header/index.tsx
View file

@ -1,6 +1,6 @@
import { useRef } from 'react';
import { Flex, FlexProps } from '@mantine/core';
import { AnimatePresence, motion, Variants } from 'framer-motion';
import { useRef } from 'react';
import styled from 'styled-components';
import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
import { useWindowSettings } from '/@/renderer/store/settings.store';
@ -64,6 +64,7 @@ const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
export interface PageHeaderProps
extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
animated?: boolean;
backgroundColor?: string;
children?: React.ReactNode;
height?: string;
@ -79,12 +80,19 @@ const TitleWrapper = styled(motion.div)`
`;
const variants: Variants = {
animate: { opacity: 1 },
animate: {
opacity: 1,
transition: {
duration: 0.3,
ease: 'easeIn',
},
},
exit: { opacity: 0 },
initial: { opacity: 0 },
};
export const PageHeader = ({
animated,
position,
height,
backgroundColor,
@ -109,17 +117,15 @@ export const PageHeader = ({
$isHidden={isHidden}
$padRight={padRight}
>
<AnimatePresence initial={false}>
{!isHidden && (
<TitleWrapper
animate="animate"
exit="exit"
initial="initial"
variants={variants}
>
{children}
</TitleWrapper>
)}
<AnimatePresence initial={animated ?? false}>
<TitleWrapper
animate="animate"
exit="exit"
initial="initial"
variants={variants}
>
{children}
</TitleWrapper>
</AnimatePresence>
</Header>
{backgroundColor && (