import React from 'react'; export interface ReservationHudDrawerHandleProps { /** 关闭抽屉。点击或下拖超过阈值时调用。 */ onClose: () => void; /** * 触发关闭的下拖位移阈值(px)。短促的微小拖动不算关闭,避免误触; * 用户从手柄向下「甩一下」即可关。默认 80px ≈ 一个手指节。 */ closeOffsetPx?: number; /** * 抽屉根节点 ref:拖动时给它实时打 transform: translateY,让面板跟着手指走; * 松手后再决定「滑回原位」或「滑出关闭」。可不传——不传则只做关闭决策、不做跟随动画。 */ drawerRef?: React.RefObject; } /** * 抽屉顶端的「抓手 + 拍击区」: * - 视觉上是一条居中的胶囊形 bar,给用户一个「这里可以拖 / 可以点」的暗示; * - 点击:直接关闭抽屉; * - 指针下拖:传入 drawerRef 时,面板会实时跟随手指下移; * • 松手时位移 ≥ closeOffsetPx → 平滑滑出底部并关闭; * • 否则回弹到原位。 * * 直接 mutate `drawerRef.current.style.transform` 而不是走 React state,是因为 * 拖动每一帧都重渲染整个抽屉(PisellRecordBoard + 表格)开销太大。命令式风格 * 把动画限制在 DOM 层、React 树不参与,掉帧风险最小。组件卸载 / 关闭后由抽屉 * 节点本身被 unmount 一并清理,不留残留 inline style。 */ export declare const ReservationHudDrawerHandle: React.FC; export default ReservationHudDrawerHandle;