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

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
Show stats 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 && (

136
src/renderer/components/scroll-area/index.tsx
View file

@ -1,8 +1,9 @@
import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
import type { ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
import { ScrollArea as MantineScrollArea } from '@mantine/core';
import { useMergedRef, useTimeout } from '@mantine/hooks';
import { motion, useScroll } from 'framer-motion';
import { useMergedRef } from '@mantine/hooks';
import { useInView } from 'framer-motion';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header';
import { useWindowSettings } from '/@/renderer/store/settings.store';
@ -30,25 +31,6 @@ const StyledScrollArea = styled(MantineScrollArea)`
const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar-track {
margin-top: ${(props) =>
props.windowBarStyle === Platform.WINDOWS ||
props.windowBarStyle === Platform.MACOS ||
props.windowBarStyle === Platform.LINUX
? '0px'
: props.scrollBarOffset || '65px'};
}
&::-webkit-scrollbar-thumb {
margin-top: ${(props) =>
props.windowBarStyle === Platform.WINDOWS ||
props.windowBarStyle === Platform.MACOS ||
props.windowBarStyle === Platform.LINUX
? '0px'
: props.scrollBarOffset || '65px'};
}
`;
export const ScrollArea = forwardRef(({ children, ...props }: ScrollAreaProps, ref: Ref<any>) => {
@ -87,90 +69,84 @@ export const NativeScrollArea = forwardRef(
ref: Ref<HTMLDivElement>,
) => {
const { windowBarStyle } = useWindowSettings();
const [hideScrollbar, setHideScrollbar] = useState(false);
const [hideHeader, setHideHeader] = useState(true);
const { start, clear } = useTimeout(
() => setHideScrollbar(true),
scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 0,
);
const containerRef = useRef(null);
const mergedRef = useMergedRef(ref, containerRef);
const [isPastOffset, setIsPastOffset] = useState(false);
const { scrollYProgress } = useScroll({
container: containerRef,
offset: pageHeaderProps?.offset || ['center start', 'end start'],
target: pageHeaderProps?.target,
// useInView initializes as false, so we need to track this to properly render the header
const isInViewInitializedRef = useRef<boolean | null>(null);
const isInView = useInView({
current: pageHeaderProps?.target?.current,
});
// Automatically hide the scrollbar after the timeout duration
useEffect(() => {
start();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (!isInViewInitializedRef.current && isInView) {
isInViewInitializedRef.current = true;
}
}, [isInView]);
const [initialize] = useOverlayScrollbars({
defer: true,
events: {
scroll: (_instance, e) => {
if (!pageHeaderProps?.offset) {
return;
}
const offset = pageHeaderProps?.offset;
const scrollTop = (e?.target as HTMLDivElement)?.scrollTop;
if (scrollTop > offset && isPastOffset === false) {
setIsPastOffset(true);
} else if (scrollTop <= offset && isPastOffset === true) {
setIsPastOffset(false);
}
},
},
options: {
overflow: { x: 'hidden', y: 'scroll' },
scrollbars: {
autoHide: 'move',
autoHideDelay: 500,
pointers: ['mouse', 'pen', 'touch'],
theme: 'feishin',
visibility: 'visible',
},
},
});
useEffect(() => {
const setHeaderVisibility = (v: number) => {
if (v === 1) {
return setHideHeader(false);
}
if (containerRef.current) {
initialize(containerRef.current as HTMLDivElement);
}
}, [initialize]);
if (hideHeader === false) {
return setHideHeader(true);
}
// console.log('isPastOffsetRef.current', isPastOffsetRef.current);
return undefined;
};
const mergedRef = useMergedRef(ref, containerRef);
const unsubscribe = scrollYProgress.on('change', setHeaderVisibility);
return () => {
unsubscribe();
};
}, [hideHeader, scrollYProgress]);
const shouldShowHeader =
!noHeader && (isPastOffset || (isInViewInitializedRef.current && !isInView));
return (
<>
{!noHeader && (
{shouldShowHeader && (
<PageHeader
isHidden={hideHeader}
animated
isHidden={false}
position="absolute"
style={{ opacity: scrollYProgress as any }}
{...pageHeaderProps}
/>
)}
<StyledNativeScrollArea
ref={mergedRef}
className={hideScrollbar ? 'hide-scrollbar' : undefined}
scrollBarOffset={scrollBarOffset}
windowBarStyle={windowBarStyle}
onMouseEnter={() => {
setHideScrollbar(false);
clear();
}}
onMouseLeave={() => {
start();
}}
{...props}
>
{children}
</StyledNativeScrollArea>
{debugScrollPosition && (
<motion.div
style={{
background: 'red',
height: '10px',
left: 0,
position: 'fixed',
right: 0,
scaleX: scrollYProgress,
top: 0,
transformOrigin: '0%',
width: '100%',
zIndex: 5000,
}}
/>
)}
</>
);
},

4
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -50,10 +50,6 @@ const DetailContainer = styled.div`
flex-direction: column;
padding: 1rem 2rem 5rem;
overflow: hidden;
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
}
`;
interface AlbumDetailContentProps {

2
src/renderer/features/home/routes/home-route.tsx
View file

@ -139,7 +139,7 @@ const HomeRoute = () => {
<LibraryHeaderBar.Title>Home</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
offset: ['0px', '200px'],
offset: 200,
}}
>
<Stack

1
src/renderer/index.tsx
View file

@ -3,6 +3,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
import { createRoot } from 'react-dom/client';
import { App } from './app';
import { queryClient } from './lib/react-query';
import 'overlayscrollbars/overlayscrollbars.css';
const container = document.getElementById('root')! as HTMLElement;
const root = createRoot(container);

2
src/renderer/styles/ag-grid.scss
View file

@ -23,7 +23,7 @@
}
.ag-header-fixed-margin {
margin-top: 43px !important;
margin-top: 36px !important;
}
.ag-header-cell-comp-wrapper {

1
src/renderer/styles/global.scss
View file

@ -2,6 +2,7 @@
@use '../themes/dark.scss';
@use '../themes/light.scss';
@use './ag-grid.scss';
@use './overlayscrollbars.scss';
* {
box-sizing: border-box;

15
src/renderer/styles/overlayscrollbars.scss Normal file
View file

@ -0,0 +1,15 @@
.feishin.os-scrollbar {
--os-size: var(--scrollbar-size);
--os-handle-bg: var(--scrollbar-thumb-bg);
--os-handle-bg-hover: var(--scrollbar-thumb-bg-hover);
--os-handle-bg-active: var(--scrollbar-thumb-bg-hover);
--os-track-bg: var(--scrollbar-track-bg);
--os-track-bg-hover: var(--scrollbar-track-bg);
--os-track-bg-active: var(--scrollbar-track-bg);
--os-padding-perpendicular: 0;
--os-padding-axis: 0;
--os-track-border-radius: 0;
--os-handle-border-radius: 0;
}

1
src/renderer/themes/default.scss
View file

@ -43,6 +43,7 @@
--tooltip-bg: #ffffff;
--tooltip-fg: #000000;
--scrollbar-size: 12px;
--scrollbar-track-bg: transparent;
--scrollbar-thumb-bg: rgba(160, 160, 160, 0.3);
--scrollbar-thumb-bg-hover: rgba(160, 160, 160, 0.6);