This commit is contained in:
Ou 2024-10-12 01:36:42 +08:00
parent 17146bd865
commit 5d87ce3ea4
2 changed files with 8 additions and 22 deletions

View File

@ -18,14 +18,12 @@ export interface ItemsProps extends React.HTMLAttributes<HTMLDivElement> {
* *
*/ */
isDragged?: boolean isDragged?: boolean
isOverlay?: boolean
handleListeners?: SyntheticListenerMap handleListeners?: SyntheticListenerMap
} }
interface NewsCardProps { interface NewsCardProps {
id: SourceID id: SourceID
inView: boolean inView: boolean
isOverlay?: boolean
handleListeners?: SyntheticListenerMap handleListeners?: SyntheticListenerMap
} }
@ -33,11 +31,9 @@ interface Query {
query: UseQueryResult<SourceInfo, Error> query: UseQueryResult<SourceInfo, Error>
} }
export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, isOverlay, handleListeners, style, ...props }, dndRef) => { export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, handleListeners, style, ...props }, dndRef) => {
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
const { ref: inViewRef, inView } = useInView({ const { ref: inViewRef, inView } = useInView()
threshold: 0,
})
useImperativeHandle(dndRef, () => ref.current!) useImperativeHandle(dndRef, () => ref.current!)
useImperativeHandle(inViewRef, () => ref.current!) useImperativeHandle(inViewRef, () => ref.current!)
@ -48,7 +44,6 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
className={clsx( className={clsx(
"flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5", "flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5",
isDragged && "op-50", isDragged && "op-50",
isOverlay ? "backdrop-blur-5 bg-op-40" : "",
)} )}
style={{ style={{
transformOrigin: "50% 50%", transformOrigin: "50% 50%",
@ -56,13 +51,12 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
}} }}
{...props} {...props}
> >
<NewsCard id={id} inView={inView} isOverlay={isOverlay} handleListeners={handleListeners} /> <NewsCard id={id} inView={inView} handleListeners={handleListeners} />
</div> </div>
) )
}) })
export function CardOverlay({ id }: { id: SourceID }) { export function CardOverlay({ id }: { id: SourceID }) {
const [focusSources] = useAtom(focusSourcesAtom)
return ( return (
<div className={clsx( <div className={clsx(
"flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5", "flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5",
@ -84,18 +78,10 @@ export function CardOverlay({ id }: { id: SourceID }) {
</span> </span>
{sources[id]?.title && <span className="text-sm">{sources[id].title}</span>} {sources[id]?.title && <span className="text-sm">{sources[id].title}</span>}
</span> </span>
<span className="text-xs op-0"></span> <span className="text-xs"></span>
</span> </span>
</div> </div>
<div className="flex gap-2 op-80"> <div className="flex gap-2 op-80">
<button
type="button"
className={clsx("i-ph:arrow-counter-clockwise-duotone")}
/>
<button
type="button"
className={clsx(focusSources.includes(id) ? "i-ph:star-fill" : "i-ph:star-duotone")}
/>
<button <button
type="button" type="button"
className={clsx("i-ph:dots-six-vertical-duotone", "cursor-grabbing")} className={clsx("i-ph:dots-six-vertical-duotone", "cursor-grabbing")}
@ -107,7 +93,7 @@ export function CardOverlay({ id }: { id: SourceID }) {
) )
} }
export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardProps) { function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
const [focusSources, setFocusSources] = useAtom(focusSourcesAtom) const [focusSources, setFocusSources] = useAtom(focusSourcesAtom)
const [refetchSource, setRefetchSource] = useAtom(refetchSourcesAtom) const [refetchSource, setRefetchSource] = useAtom(refetchSourcesAtom)
const query = useQuery({ const query = useQuery({
@ -175,13 +161,13 @@ export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardPro
<button <button
{...handleListeners} {...handleListeners}
type="button" type="button"
className={clsx("i-ph:dots-six-vertical-duotone", handleListeners && "cursor-grab", isOverlay && "cursor-grabbing")} className={clsx("i-ph:dots-six-vertical-duotone", "cursor-grab")}
/> />
</div> </div>
</div> </div>
<OverlayScrollbar <OverlayScrollbar
className="h-full p-2 overflow-x-auto bg-base bg-op-70! rounded-2xl" className={clsx("h-full p-2 overflow-x-auto bg-base bg-op-70! rounded-2xl transition-all duration-500", query.isFetching && "blur-3px")}
options={{ options={{
overflow: { x: "hidden" }, overflow: { x: "hidden" },
}} }}

View File

@ -23,7 +23,7 @@ export function Section({ id }: { id: SectionID }) {
to="/s/$section" to="/s/$section"
params={{ section }} params={{ section }}
className={clsx( className={clsx(
"btn-action-sm", "btn-action",
id === section && "btn-action-active", id === section && "btn-action-active",
)} )}
> >