marketplace
StyleZhang
2 years ago
parent
684896d100
commit
39a6f0943d
@ -0,0 +1,45 @@
|
||||
'use client'
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
createContext,
|
||||
useContextSelector,
|
||||
} from 'use-context-selector'
|
||||
|
||||
export type MarketplaceContextValue = {
|
||||
intersected: boolean
|
||||
setIntersected: (intersected: boolean) => void
|
||||
}
|
||||
|
||||
export const MarketplaceContext = createContext<MarketplaceContextValue>({
|
||||
intersected: true,
|
||||
setIntersected: () => {},
|
||||
})
|
||||
|
||||
type MarketplaceContextProviderProps = {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) {
|
||||
return useContextSelector(MarketplaceContext, selector)
|
||||
}
|
||||
|
||||
export const MarketplaceContextProvider = ({
|
||||
children,
|
||||
}: MarketplaceContextProviderProps) => {
|
||||
const [intersected, setIntersected] = useState(true)
|
||||
|
||||
return (
|
||||
<MarketplaceContext.Provider
|
||||
value={{
|
||||
intersected,
|
||||
setIntersected,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</MarketplaceContext.Provider>
|
||||
)
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import IntersectionLine from '../intersection-line'
|
||||
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
|
||||
|
||||
type DescriptionWrapperProps = {
|
||||
children: ReactNode
|
||||
}
|
||||
const DescriptionWrapper = ({
|
||||
children,
|
||||
}: DescriptionWrapperProps) => {
|
||||
const containerRef = usePluginPageContext(v => v.containerRef)
|
||||
const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
|
||||
const setScrollDisabled = usePluginPageContext(v => v.setScrollDisabled)
|
||||
|
||||
const handleScrollIntersectionChange = useCallback((isIntersecting: boolean) => {
|
||||
if (!isIntersecting && !scrollDisabled) {
|
||||
setScrollDisabled(true)
|
||||
setTimeout(() => {
|
||||
if (containerRef && containerRef.current)
|
||||
containerRef.current.scrollTop = 0
|
||||
}, 100)
|
||||
}
|
||||
}, [containerRef, scrollDisabled, setScrollDisabled])
|
||||
|
||||
return !scrollDisabled && (
|
||||
<>
|
||||
{children}
|
||||
<IntersectionLine
|
||||
containerRef={containerRef}
|
||||
intersectedCallback={handleScrollIntersectionChange}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DescriptionWrapper
|
||||
@ -1,20 +0,0 @@
|
||||
import Description from '../description'
|
||||
import DescriptionWrapper from '../description/wrapper'
|
||||
import SearchBoxWrapper from '../search-box/wrapper'
|
||||
import PluginTypeSwitch from '../plugin-type-switch'
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<DescriptionWrapper>
|
||||
<Description />
|
||||
</DescriptionWrapper>
|
||||
<div className='flex items-center justify-center mt-[15px] mb-4'>
|
||||
<SearchBoxWrapper />
|
||||
</div>
|
||||
<PluginTypeSwitch />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,27 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type HeaderWrapperProps = {
|
||||
children: ReactNode
|
||||
}
|
||||
const HeaderWrapper = ({
|
||||
children,
|
||||
}: HeaderWrapperProps) => {
|
||||
const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'py-10',
|
||||
scrollDisabled && 'absolute left-1/2 -translate-x-1/2 -top-[100px] pb-3',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderWrapper
|
||||
@ -1,21 +1,30 @@
|
||||
import { useEffect } from 'react'
|
||||
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
|
||||
import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
|
||||
|
||||
export const useScrollIntersection = (
|
||||
containerRef: React.RefObject<HTMLDivElement>,
|
||||
anchorRef: React.RefObject<HTMLDivElement>,
|
||||
callback: (isIntersecting: boolean) => void,
|
||||
) => {
|
||||
const containerRef = usePluginPageContext(v => v.containerRef)
|
||||
const intersected = useMarketplaceContext(v => v.intersected)
|
||||
const setIntersected = useMarketplaceContext(v => v.setIntersected)
|
||||
|
||||
useEffect(() => {
|
||||
let observer: IntersectionObserver | undefined
|
||||
if (containerRef?.current && anchorRef.current) {
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
const isIntersecting = entries[0].isIntersecting
|
||||
callback(isIntersecting)
|
||||
|
||||
if (isIntersecting && !intersected)
|
||||
setIntersected(true)
|
||||
|
||||
if (!isIntersecting && intersected)
|
||||
setIntersected(false)
|
||||
}, {
|
||||
root: containerRef.current,
|
||||
})
|
||||
observer.observe(anchorRef.current)
|
||||
}
|
||||
return () => observer?.disconnect()
|
||||
}, [containerRef, anchorRef, callback])
|
||||
}, [containerRef, anchorRef, intersected, setIntersected])
|
||||
}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type ListWrapperProps = {
|
||||
children: ReactNode
|
||||
}
|
||||
const ListWrapper = ({
|
||||
children,
|
||||
}: ListWrapperProps) => {
|
||||
const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
|
||||
const setScrollDisabled = usePluginPageContext(v => v.setScrollDisabled)
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
scrollDisabled && (
|
||||
<div className='h-[60px]'></div>
|
||||
)
|
||||
}
|
||||
<div
|
||||
className={cn(
|
||||
'px-12 py-2 bg-background-default-subtle',
|
||||
scrollDisabled && 'grow h-0 overflow-y-auto',
|
||||
)}
|
||||
onScroll={(e) => {
|
||||
if ((e.target as HTMLElement).scrollTop <= 0)
|
||||
setScrollDisabled(false)
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListWrapper
|
||||
@ -1,14 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import SearchBox from '.'
|
||||
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
|
||||
|
||||
const Wrapper = () => {
|
||||
const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
|
||||
|
||||
return (
|
||||
<SearchBox widthShouldChange={scrollDisabled} />
|
||||
)
|
||||
}
|
||||
|
||||
export default Wrapper
|
||||
Loading…
Reference in New Issue