166 lines
6.2 KiB
TypeScript
166 lines
6.2 KiB
TypeScript
import React, { ReactNode, CSSProperties } from 'react';
|
||
import { GridLayoutFormField } from './grid-layout-form';
|
||
|
||
/** 空状态占位组件 */
|
||
declare function Empty(): React.JSX.Element;
|
||
|
||
/** 加载中占位组件 */
|
||
declare function Loading(): React.JSX.Element;
|
||
|
||
/** 未找到占位组件 */
|
||
declare function NotFound(): React.JSX.Element;
|
||
|
||
/**
|
||
* 为页面级布局提供 SlotContext,把子元素(通常是 FFContainer)挂载的
|
||
* title/subTitle/actions/extras 等插槽内容收集起来,再作为 props 传回给这个子元素
|
||
* @param {Object} props
|
||
* @param {ReactElement} props.children 单个子元素（字符串类型的元素会跳过插槽逻辑，原样返回）
|
||
*/
|
||
declare function FFPageRender({ children }: {
|
||
children: React.ReactElement;
|
||
}): React.JSX.Element;
|
||
|
||
/** 已知的内容插槽 key（由 FFContainer.slot / PopupContainer 维护） */
|
||
type SlotKey = 'title' | 'subTitle' | 'actions' | 'extras'
|
||
|
||
/** 插槽元素映射；由 FFPageRender / PopupContainer 的 useState 维护 */
|
||
interface SlotElements {
|
||
/** title 插槽内容 */
|
||
title?: ReactNode
|
||
/** 副标题插槽内容 */
|
||
subTitle?: ReactNode
|
||
/** 操作按钮插槽内容 */
|
||
actions?: ReactNode
|
||
/** 扩展区插槽内容 */
|
||
extras?: ReactNode
|
||
/** 挂载到外层布局根节点的 className */
|
||
rootClassName?: string
|
||
[key: string]: ReactNode | string | undefined
|
||
}
|
||
|
||
/**
|
||
* SlotContext 的值结构；由 FFPageRender / PopupContainer 提供，FFContainer / slot 内部消费
|
||
* （也可在自定义 theme 容器中消费）
|
||
*/
|
||
interface SlotContextValue {
|
||
/** 已挂载的插槽元素映射 */
|
||
ele: SlotElements
|
||
/** 挂载一个插槽元素 */
|
||
mount: (slot: string, element: ReactNode) => void
|
||
/** 卸载一个插槽元素 */
|
||
unmount: (slot: string) => void
|
||
}
|
||
|
||
/** Popup.modal / PopupContainer 的容器配置参数 */
|
||
interface PopupContainerProps {
|
||
/** 弹窗标题；支持 lodash template 插值（以触发时的 raw data 为上下文） */
|
||
title?: string
|
||
/**
|
||
* 弹出位置；'center'（默认）渲染为居中模态框，
|
||
* 'left'/'right'/'top'/'bottom' 渲染为对应方向的抽屉
|
||
*/
|
||
placement?: 'center' | 'left' | 'top' | 'right' | 'bottom'
|
||
/** 内容区宽度（模态框有效） */
|
||
width?: number | string
|
||
/** 内容区高度 */
|
||
height?: number | string
|
||
/** 内容区行内样式（模态框有效） */
|
||
style?: CSSProperties
|
||
/** 根节点额外 class */
|
||
className?: string
|
||
/** 各分区 class */
|
||
classNames?: {
|
||
header?: string
|
||
body?: string
|
||
footer?: string
|
||
close?: string
|
||
}
|
||
/** 点击蒙层是否关闭弹窗，默认 false */
|
||
maskClosable?: boolean
|
||
[key: string]: unknown
|
||
}
|
||
|
||
/**
|
||
* Popup.modal 的返回值；
|
||
* 关闭时 resolve 传入的值，`update` 可在弹窗打开期间动态更新内容 props 和容器 props
|
||
*/
|
||
type PopupHandle<T = unknown> = Promise<T> & {
|
||
update: (
|
||
widgetPatch?: Record<string, unknown>,
|
||
containerPatch?: Partial<PopupContainerProps>
|
||
) => void
|
||
}
|
||
|
||
/** FFContainer 内部用来把 title/subTitle/actions/extras 等具名插槽挂载到外层布局的 context
|
||
* @type {Context<SlotContextValue>}
|
||
*/
|
||
declare const SlotContext: React.Context<SlotContextValue>;
|
||
|
||
declare namespace FFPopup {
|
||
export { modal };
|
||
export { confirm };
|
||
export { form };
|
||
export { notification };
|
||
export { success };
|
||
export { error };
|
||
}
|
||
|
||
/**
|
||
* 打开一个任意组件的弹窗
|
||
* @param {ComponentType} widget 要渲染的组件
|
||
* @param {Record<string, unknown>} [widgetData] 传给组件的 props
|
||
* @param {PopupContainerProps} [widgetContainerProps] 传给弹窗容器(PopupContainer)的 props
|
||
* @returns {PopupHandle} 关闭时 resolve 传入的值；`promise.update(patch, containerPatch)` 可动态更新弹窗
|
||
*/
|
||
declare function modal(widget: React.ComponentType, widgetData?: Record<string, unknown>, widgetContainerProps?: PopupContainerProps): PopupHandle;
|
||
/**
|
||
* 弹出一个确认框
|
||
* @param {ReactNode} content 确认框内容
|
||
* @param {Object} [opts] 其余透传给 Confirm 组件的 props
|
||
* @returns {PopupHandle} 点击确认时 resolve，点击取消/关闭时 resolve(false)
|
||
*/
|
||
declare function confirm(content: React.ReactNode, opts?: any): PopupHandle;
|
||
/**
|
||
* 弹出一个模态表单；取消时 resolve(false)
|
||
* @param {GridLayoutFormField[]} fields 表单字段配置（传给 FormModal 的 fields）
|
||
* @param {PopupContainerProps} [widgetContainerProps] 传给弹窗容器的 props
|
||
* @param {Record<string, unknown>} [formProps] 传给表单的额外 props
|
||
* @returns {PopupHandle<Record<string, unknown>>} 提交后的表单数据
|
||
*/
|
||
declare function form(fields: GridLayoutFormField[], widgetContainerProps?: PopupContainerProps, formProps?: Record<string, unknown>): PopupHandle<Record<string, unknown>>;
|
||
/**
|
||
* 弹出一条消息提示
|
||
* @param {ReactNode} content 提示内容
|
||
* @param {Object} [opts] 其余透传给 Notification 组件的 props，duration/showProgress 会转发到容器 props
|
||
* @returns {PopupHandle}
|
||
*/
|
||
declare function notification(content: React.ReactNode, { showProgress, duration, ...opts }?: any): PopupHandle;
|
||
/**
|
||
* 成功提示（绿色图标样式的 notification）
|
||
* @param {ReactNode} content 提示内容
|
||
* @param {Object} [opts] 其余透传给 notification 的选项
|
||
* @returns {PopupHandle}
|
||
*/
|
||
declare function success(content: React.ReactNode, opts?: any): PopupHandle;
|
||
/**
|
||
* 错误提示（红色图标样式的 notification）
|
||
* @param {ReactNode} content 提示内容
|
||
* @param {Object} [opts] 其余透传给 notification 的选项
|
||
* @returns {PopupHandle}
|
||
*/
|
||
declare function error(content: React.ReactNode, opts?: any): PopupHandle;
|
||
/**
|
||
* 弹层渲染出口(通常挂载一份到页面根部);负责渲染 FFPopup 触发的所有弹窗/模态框和 notification。
|
||
* 在挂载前调用 FFPopup 的方法会被排队,挂载后统一渲染出来
|
||
*/
|
||
declare function FFPopupRender(): React.JSX.Element;
|
||
declare namespace FFPopupRender {
|
||
let $popups: Map<any, any>;
|
||
let $index: number;
|
||
let $queue: any[];
|
||
function $onClick(...args: any[]): Promise<any>;
|
||
}
|
||
|
||
export { SlotContext as Context, Empty, Loading, NotFound, FFPageRender as PageRender, FFPopup as Popup, FFPopupRender as PopupRender };
|
||
export type { PopupContainerProps, PopupHandle, SlotContextValue, SlotElements, SlotKey };
|