fix: marketplace

pull/12372/head
StyleZhang 1 year ago
parent 2a590f6d2b
commit 6a99fab92f

@ -28,6 +28,60 @@ const Marketplace = async ({
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap} marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton} showInstallButton={showInstallButton}
/> />
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
<ListWrapper
locale={locale}
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
showInstallButton={showInstallButton}
/>
</MarketplaceContextProvider> </MarketplaceContextProvider>
) )
} }

@ -1,17 +1,16 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context' import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
export const useScrollIntersection = ( export const useScrollIntersection = (
anchorRef: React.RefObject<HTMLDivElement>, anchorRef: React.RefObject<HTMLDivElement>,
) => { ) => {
const containerRef = usePluginPageContext(v => v.containerRef)
const intersected = useMarketplaceContext(v => v.intersected) const intersected = useMarketplaceContext(v => v.intersected)
const setIntersected = useMarketplaceContext(v => v.setIntersected) const setIntersected = useMarketplaceContext(v => v.setIntersected)
useEffect(() => { useEffect(() => {
const container = document.getElementById('marketplace-container')
let observer: IntersectionObserver | undefined let observer: IntersectionObserver | undefined
if (containerRef?.current && anchorRef.current) { if (container && anchorRef.current) {
observer = new IntersectionObserver((entries) => { observer = new IntersectionObserver((entries) => {
const isIntersecting = entries[0].isIntersecting const isIntersecting = entries[0].isIntersecting
@ -21,10 +20,10 @@ export const useScrollIntersection = (
if (!isIntersecting && intersected) if (!isIntersecting && intersected)
setIntersected(false) setIntersected(false)
}, { }, {
root: containerRef.current, root: container,
}) })
observer.observe(anchorRef.current) observer.observe(anchorRef.current)
} }
return () => observer?.disconnect() return () => observer?.disconnect()
}, [containerRef, anchorRef, intersected, setIntersected]) }, [anchorRef, intersected, setIntersected])
} }

@ -121,6 +121,7 @@ const PluginPage = ({
return ( return (
<div <div
id='marketplace-container'
ref={containerRef} ref={containerRef}
className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins' className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
? 'rounded-t-xl bg-components-panel-bg' ? 'rounded-t-xl bg-components-panel-bg'

Loading…
Cancel
Save