wehub-resource-sync
45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import { useMapTabBottomSheet } from '../hooks/useMapTabBottomSheet';
|
|
import { useMapStore } from '../state';
|
|
|
|
/**
|
|
* 「我」「贡献」叠在共享地图层之上；三档为露头 / 半屏 / 顶满（中间档为 50%，与本地生活脉搏的约 20% 不同）。
|
|
* 与探索页一致：有地点详情 / 地点结果 Sheet / 路线面板时收起本 Sheet，避免与 PlaceDetailSheet 等双叠。
|
|
*/
|
|
export const MapTabSheetFrame: React.FC<{
|
|
children: React.ReactNode;
|
|
}> = ({ children }) => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const { sheetHeight, isDragging, pointerHandlers } = useMapTabBottomSheet(containerRef);
|
|
const poi = useMapStore((s) => s.currentView.poi);
|
|
const route = useMapStore((s) => s.currentView.route);
|
|
const placeResultsSheetOpen = useMapStore((s) => s.currentView.placeResultsSheetOpen);
|
|
const routeSheetOpen = useMapStore((s) => s.currentView.routeSheetOpen);
|
|
const hideTabSheet = poi !== null || route !== null || placeResultsSheetOpen || routeSheetOpen;
|
|
|
|
if (hideTabSheet) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="pointer-events-none absolute inset-0 z-10 overflow-hidden"
|
|
>
|
|
<div
|
|
className="pointer-events-auto absolute bottom-0 left-0 right-0 z-20 flex flex-col rounded-t-3xl bg-app-surface shadow-up"
|
|
style={{
|
|
height: `${sheetHeight}px`,
|
|
transition: isDragging ? 'none' : 'height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',
|
|
willChange: isDragging ? 'height' : 'auto',
|
|
}}
|
|
>
|
|
<div className="flex w-full shrink-0 touch-none justify-center pt-3 pb-1" {...pointerHandlers}>
|
|
<div className="h-1 w-10 rounded-full bg-gray-300" />
|
|
</div>
|
|
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|