ff-dist/container.d.ts

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>;

/**
 * 页面级容器,通过 SlotContext 把 title/subTitle/actions/extras 挂载到外层布局的对应插槽位置
 * @param {Object} props
 * @param {string} [props.rootClassName] 挂载到外层布局根节点的 className
 * @param {string} [props.className] 容器自身的 className
 * @param {ReactNode} [props.children] 容器内容
 * @param {ReactNode} [props.actions] 挂载到 actions 插槽的内容
 * @param {ReactNode} [props.title] 挂载到 title 插槽的内容
 * @param {ReactNode} [props.subTitle] 挂载到 sub-title 插槽的内容
 * @param {ReactNode} [props.extras] 挂载到 extras 插槽的内容
 * @param {CSSProperties} [props.style] 容器行内样式
 */
declare function FFContainer({ rootClassName, className, children, actions, title, subTitle, extras, style }: {
    rootClassName?: string;
    className?: string;
    children?: React.ReactNode;
    actions?: React.ReactNode;
    title?: React.ReactNode;
    subTitle?: React.ReactNode;
    extras?: React.ReactNode;
    style?: React.CSSProperties;
}): React.JSX.Element;
declare namespace FFContainer {
    function Action({ children, className }: {
        children: any;
        className: any;
    }): any;
    function Title({ children, className }: {
        children: any;
        className: any;
    }): any;
    function SubTitle({ children, className }: {
        children: any;
        className: any;
    }): any;
    function Extra({ children, className }: {
        children: any;
        className: any;
    }): any;
}

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, FFContainer as default };
export type { PopupContainerProps, PopupHandle, SlotContextValue, SlotElements, SlotKey };