32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { createContext, useContext, useEffect } from 'react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
// 页头槽：页面挂载时把自己的内容注册到布局 PageContainer 的 content 行——
|
|
// info 在左（实体标识/关键状态），actions 在右（操作按钮，右侧对齐），卸载时自动清除。
|
|
// Layout 提供 Provider，页面只消费 usePageInfo / usePageActions。
|
|
type SetSlot = (node: ReactNode) => void;
|
|
const PageHeaderSlotsContext = createContext<{ setInfo: SetSlot; setActions: SetSlot }>({
|
|
setInfo: () => {},
|
|
setActions: () => {},
|
|
});
|
|
|
|
function useSlot(setSlot: SetSlot, node: ReactNode, deps: unknown[]) {
|
|
useEffect(() => {
|
|
setSlot(node);
|
|
return () => setSlot(null);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, deps);
|
|
}
|
|
|
|
export function usePageInfo(node: ReactNode, deps: unknown[] = []) {
|
|
const { setInfo } = useContext(PageHeaderSlotsContext);
|
|
useSlot(setInfo, node, deps);
|
|
}
|
|
|
|
export function usePageActions(node: ReactNode, deps: unknown[] = []) {
|
|
const { setActions } = useContext(PageHeaderSlotsContext);
|
|
useSlot(setActions, node, deps);
|
|
}
|
|
|
|
export { PageHeaderSlotsContext };
|