v0.7.14

container.d.ts

@@ -1,87 +1,101 @@
-import * as React from 'react';
-import React__default from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode, CSSProperties } from 'react';
+import { GridLayoutFormField } from './grid-layout-form';
 
 /** 空状态占位组件 */
-declare function Empty(): React__default.JSX.Element;
+declare function Empty(): React.JSX.Element;
 
 /** 加载中占位组件 */
-declare function Loading(): React__default.JSX.Element;
+declare function Loading(): React.JSX.Element;
 
 /** 未找到占位组件 */
-declare function NotFound(): React__default.JSX.Element;
+declare function NotFound(): React.JSX.Element;
 
 /**
  * 为页面级布局提供 SlotContext,把子元素(通常是 FFContainer)挂载的
  * title/subTitle/actions/extras 等插槽内容收集起来,再作为 props 传回给这个子元素
  * @param {Object} props
- * @param {import('react').ReactElement} props.children 单个子元素(字符串类型的元素会跳过插槽逻辑,原样返回)
+ * @param {ReactElement} props.children 单个子元素（字符串类型的元素会跳过插槽逻辑，原样返回）
  */
 declare function FFPageRender({ children }: {
     children: React.ReactElement;
-}): React__default.JSX.Element;
-declare namespace FFPageRender {
-    namespace propTypes {
-        let children: PropTypes.Validator<PropTypes.ReactElementLike>;
-    }
-}
+}): React.JSX.Element;
 
-/** FFContainer 内部用来把 title/subTitle/actions/extras 等具名插槽挂载到外层布局的 context */
-declare const SlotContext: React__default.Context<{
-    ele: {};
-    mount: () => void;
-    unmount: () => void;
-}>;
+/** 已知的内容插槽 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 把 title/subTitle/actions/extras 挂载到外层布局的对应插槽位置
- * @param {Object} props
- * @param {string} [props.rootClassName] 挂载到外层布局根节点的 className
- * @param {string} [props.className] 容器自身的 className
- * @param {*} [props.children] 容器内容
- * @param {*} [props.actions] 挂载到 actions 插槽的内容
- * @param {*} [props.title] 挂载到 title 插槽的内容
- * @param {*} [props.subTitle] 挂载到 sub-title 插槽的内容
- * @param {*} [props.extras] 挂载到 extras 插槽的内容
- * @param {Object} [props.style] 容器行内样式
+ * SlotContext 的值结构；由 FFPageRender / PopupContainer 提供，FFContainer / slot 内部消费
+ * （也可在自定义 theme 容器中消费）
  */
-declare function FFContainer({ rootClassName, className, children, actions, title, subTitle, extras, style }: {
-    rootClassName?: string;
-    className?: string;
-    children?: any;
-    actions?: any;
-    title?: any;
-    subTitle?: any;
-    extras?: any;
-    style?: any;
-}): React__default.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;
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let style: PropTypes.Requireable<object>;
-        let title: PropTypes.Requireable<any>;
-        let subTitle: PropTypes.Requireable<any>;
-        let actions: PropTypes.Requireable<any>;
-        let extras: PropTypes.Requireable<any>;
-    }
+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 };
@@ -93,55 +107,53 @@ declare namespace FFPopup {
 
 /**
  * 打开一个任意组件的弹窗
- * @param {Function} widget 要渲染的组件
- * @param {Object} [widgetData] 传给组件的 props
- * @param {Object} [widgetContainerProps] 传给弹窗容器(PopupContainer)的 props
- * @returns {Promise<*>&{update: Function}} resolve 弹窗关闭时传入的值;promise.update(patch, containerPatch) 可用来更新弹窗内容
+ * @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: Function, widgetData?: any, widgetContainerProps?: any): Promise<any> & {
-    update: Function;
-};
+declare function modal(widget: React.ComponentType, widgetData?: Record<string, unknown>, widgetContainerProps?: PopupContainerProps): PopupHandle;
 /**
  * 弹出一个确认框
- * @param {*} content 确认框内容
+ * @param {ReactNode} content 确认框内容
  * @param {Object} [opts] 其余透传给 Confirm 组件的 props
- * @returns {Promise<*>} 点击确认时 resolve,点击取消/关闭时按 modal 的语义处理
+ * @returns {PopupHandle} 点击确认时 resolve，点击取消/关闭时 resolve(false)
  */
-declare function confirm(content: any, opts?: any): Promise<any>;
+declare function confirm(content: React.ReactNode, opts?: any): PopupHandle;
 /**
- * 弹出一个模态表单;取消时 reject(false)
- * @param {Array} fields 表单字段配置(传给 FormModal 的 fields)
- * @param {Object} [widgetContainerProps] 传给弹窗容器的 props
- * @param {Object} [formProps] 传给表单的额外 props
- * @returns {Promise<Object>} 提交后的表单数据
+ * 弹出一个模态表单；取消时 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: any[], widgetContainerProps?: any, formProps?: any): Promise<any>;
+declare function form(fields: GridLayoutFormField[], widgetContainerProps?: PopupContainerProps, formProps?: Record<string, unknown>): PopupHandle<Record<string, unknown>>;
 /**
  * 弹出一条消息提示
- * @param {*} content 提示内容
- * @param {Object} [opts] 其余透传给 Notification 组件的 props,duration/showProgress 会转发到容器 props
- * @returns {Promise<*>}
+ * @param {ReactNode} content 提示内容
+ * @param {Object} [opts] 其余透传给 Notification 组件的 props，duration/showProgress 会转发到容器 props
+ * @returns {PopupHandle}
  */
-declare function notification(content: any, { showProgress, duration, ...opts }?: any): Promise<any>;
+declare function notification(content: React.ReactNode, { showProgress, duration, ...opts }?: any): PopupHandle;
 /**
- * 成功提示(绿色图标样式的 notification)
- * @param {*} content 提示内容
+ * 成功提示（绿色图标样式的 notification）
+ * @param {ReactNode} content 提示内容
  * @param {Object} [opts] 其余透传给 notification 的选项
- * @returns {Promise<*>}
+ * @returns {PopupHandle}
  */
-declare function success(content: any, opts?: any): Promise<any>;
+declare function success(content: React.ReactNode, opts?: any): PopupHandle;
 /**
- * 错误提示(红色图标样式的 notification)
- * @param {*} content 提示内容
+ * 错误提示（红色图标样式的 notification）
+ * @param {ReactNode} content 提示内容
  * @param {Object} [opts] 其余透传给 notification 的选项
- * @returns {Promise<*>}
+ * @returns {PopupHandle}
  */
-declare function error(content: any, opts?: any): Promise<any>;
+declare function error(content: React.ReactNode, opts?: any): PopupHandle;
 /**
  * 弹层渲染出口(通常挂载一份到页面根部);负责渲染 FFPopup 触发的所有弹窗/模态框和 notification。
  * 在挂载前调用 FFPopup 的方法会被排队,挂载后统一渲染出来
  */
-declare function FFPopupRender(): React__default.JSX.Element;
+declare function FFPopupRender(): React.JSX.Element;
 declare namespace FFPopupRender {
     let $popups: Map<any, any>;
     let $index: number;
@@ -149,4 +161,5 @@ declare namespace FFPopupRender {
     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 { SlotContext as Context, Empty, Loading, NotFound, FFPageRender as PageRender, FFPopup as Popup, FFPopupRender as PopupRender };
+export type { PopupContainerProps, PopupHandle, SlotContextValue, SlotElements, SlotKey };