v0.7.14

components.d.ts

@@ -1,51 +1,8 @@
-import * as React from 'react';
-import React__default, { ReactElement, ComponentType } from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * 渲染一个 iconfont symbol 图标(依赖 Iconfont.init 注入的 SVG symbol 脚本)
- * @param {Object} props
- * @param {string} [props.className] 额外的 class 名
- * @param {string} props.type 图标名,对应 svg symbol 的 id
- * @param {Object} [props.style] 行内样式
- */
-declare function Iconfont({ className, type, style, rotate, spin, twoToneColor, compact, ...props }: {
-    className?: string;
-    type: string;
-    style?: any;
-}): React__default.JSX.Element;
-declare namespace Iconfont {
-    export namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let type: PropTypes.Validator<string>;
-        let style: PropTypes.Requireable<object>;
-    }
-    export { createScriptUrlElements as init };
-}
-
-/**
- * 依次注入 iconfont symbol 的 script 地址(单个 url 只会注入一次);
- * 也是 Iconfont.init 挂载的实现,支持传入多个 url 按顺序加载(前一个 load/error 后再加载下一个)
- * @param {string[]} [scriptUrls] iconfont symbol 脚本地址列表
- * @param {number} [index] 内部递归用的当前下标
- */
-declare function createScriptUrlElements(scriptUrls?: string[], index?: number): void;
-
-/**
- * 包装一个弹窗内容组件,让它可以通过 $setProps 更新自己的 props(与外部传入的 widgetProps 做浅合并),
- * 同时注入 $close 用于关闭弹窗
- * @param {Object} props
- * @param {import('react').ReactElement|Function} props.widget 要渲染的元素或组件
- * @param {Object} [props.widgetProps] 外部传入的初始 props,变化时会合并进内部状态
- * @param {(result?: *) => void} props.$close 关闭弹窗的函数,会透传给 widget
- * @param {(patch: Object) => void} [props.onSetProps] $setProps 被调用时的回调,用于同步外部状态
- */
-declare function SetPropsWrapper({ widget, widgetProps: externalProps, $close, onSetProps }: {
-    widget: React.ReactElement | Function;
-    widgetProps?: any;
-    $close: (result?: any) => void;
-    onSetProps?: (patch: any) => void;
-}): Function | React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
+export { default as Icon } from './iconfont';
+export { default as SetPropsWrapper } from './container';
+import React, { ReactElement, ComponentType, ReactNode, CSSProperties } from 'react';
+import { SlotKey } from './container';
+export { Empty, Loading, NotFound, Popup } from './container';
 
 /**
  * 通用错误边界组件
@@ -57,7 +14,7 @@ declare function SetPropsWrapper({ widget, widgetProps: externalProps, $close, o
  * @param {Function} [props.onReset]     重置回调 () => void
  * @param {any[]}    [props.resetKeys]   任一值变化时自动重置（类似 react-error-boundary）
  */
-declare class ErrorBoundary extends React__default.Component<any, any, any> {
+declare class ErrorBoundary extends React.Component<any, any, any> {
     static getDerivedStateFromError(error: any): {
         error: any;
     };
@@ -75,8 +32,42 @@ declare class ErrorBoundary extends React__default.Component<any, any, any> {
 /** widget 支持的三种形式 */
 type WidgetInput = string | ReactElement | ComponentType
 
+/** theme 布局区块 key，用于 classNames / styles（在 SlotKey 基础上加入容器区块） */
+type LayoutKey = SlotKey | 'header' | 'body' | 'footer'
+
+/** theme function 收到的上下文，ele slot 展开 + children + 样式 + $setting */
+type ThemeContext = {
+  /** 已渲染的 widget 实例 */
+  children: ReactNode
+  /** slot 注入的标题 */
+  title?: ReactNode
+  /** slot 注入的副标题 */
+  subTitle?: ReactNode
+  /** slot 注入的额外内容，通常显示在底栏左侧（与 actions 两端对齐） */
+  extras?: ReactNode
+  /** slot 注入的操作区，通常显示在底栏右侧（与 extras 两端对齐） */
+  actions?: ReactNode
+  /** 根节点 className */
+  className?: string
+  /** 各布局区块的 className */
+  classNames?: Partial<Record<LayoutKey, string>>
+  /** 根节点行内样式 */
+  style?: CSSProperties
+  /** 各布局区块的行内样式 */
+  styles?: Partial<Record<LayoutKey, CSSProperties>>
+  /** 即 themeProps，主题自身的配置 */
+  $setting?: Record<string, unknown>
+}
+
+/** theme function render prop 签名 */
+type ThemeRenderer = (ctx: ThemeContext) => ReactNode
+
+/** fallbackOnError 的 function 形式 */
+type FallbackOnError = (error: Error, reset: null) => ReactNode
+
 /**
  * 按组件名动态加载并渲染组件，支持 theme 容器框架（string 异步加载 或 function render prop）
+ * @param {Object} [props]
  * @param {WidgetInput} [props.widget]  组件名（@pkg/xxx）、ReactElement 或组件函数/类
  * @param {Object}   [props.widgetProps]     直接 spread 给 widget 的 props
  * @param {Object}   [props.widgetSetting]   传给 widget 的 $setting
@@ -91,71 +82,20 @@ type WidgetInput = string | ReactElement | ComponentType
  * @param {ReactNode | FallbackOnError} [props.fallbackOnError]
  * @param {(error: Error, info: null) => void} [props.onError]
  */
-declare function ImportWidgetComponent({ widget, widgetProps, widgetSetting, theme, themeProps, className, classNames, style, styles, fallback, fallbackOnError, onError, }?: WidgetInput): any;
+declare function ImportWidgetComponent({ widget, widgetProps, widgetSetting, theme, themeProps, className, classNames, style, styles, fallback, fallbackOnError, onError, }?: {
+    widget?: WidgetInput;
+    widgetProps?: any;
+    widgetSetting?: any;
+    theme?: string | ThemeRenderer;
+    themeProps?: any;
+    className?: string;
+    classNames?: Partial<Record<LayoutKey, string>>;
+    style?: React.CSSProperties;
+    styles?: Partial<Record<LayoutKey, React.CSSProperties>>;
+    fallback?: any;
+    fallbackOnError?: React.ReactNode | FallbackOnError;
+    onError?: (error: Error, info: null) => void;
+}): any;
 
-/** 空状态占位组件 */
-declare function Empty(): React__default.JSX.Element;
-
-/** 加载中占位组件 */
-declare function Loading(): React__default.JSX.Element;
-
-/** 未找到占位组件 */
-declare function NotFound(): React__default.JSX.Element;
-
-declare namespace FFPopup {
-    export { modal };
-    export { confirm };
-    export { form };
-    export { notification };
-    export { success };
-    export { error };
-}
-
-/**
- * 打开一个任意组件的弹窗
- * @param {Function} widget 要渲染的组件
- * @param {Object} [widgetData] 传给组件的 props
- * @param {Object} [widgetContainerProps] 传给弹窗容器(PopupContainer)的 props
- * @returns {Promise<*>&{update: Function}} resolve 弹窗关闭时传入的值;promise.update(patch, containerPatch) 可用来更新弹窗内容
- */
-declare function modal(widget: Function, widgetData?: any, widgetContainerProps?: any): Promise<any> & {
-    update: Function;
-};
-/**
- * 弹出一个确认框
- * @param {*} content 确认框内容
- * @param {Object} [opts] 其余透传给 Confirm 组件的 props
- * @returns {Promise<*>} 点击确认时 resolve,点击取消/关闭时按 modal 的语义处理
- */
-declare function confirm(content: any, opts?: any): Promise<any>;
-/**
- * 弹出一个模态表单;取消时 reject(false)
- * @param {Array} fields 表单字段配置(传给 FormModal 的 fields)
- * @param {Object} [widgetContainerProps] 传给弹窗容器的 props
- * @param {Object} [formProps] 传给表单的额外 props
- * @returns {Promise<Object>} 提交后的表单数据
- */
-declare function form(fields: any[], widgetContainerProps?: any, formProps?: any): Promise<any>;
-/**
- * 弹出一条消息提示
- * @param {*} content 提示内容
- * @param {Object} [opts] 其余透传给 Notification 组件的 props,duration/showProgress 会转发到容器 props
- * @returns {Promise<*>}
- */
-declare function notification(content: any, { showProgress, duration, ...opts }?: any): Promise<any>;
-/**
- * 成功提示(绿色图标样式的 notification)
- * @param {*} content 提示内容
- * @param {Object} [opts] 其余透传给 notification 的选项
- * @returns {Promise<*>}
- */
-declare function success(content: any, opts?: any): Promise<any>;
-/**
- * 错误提示(红色图标样式的 notification)
- * @param {*} content 提示内容
- * @param {Object} [opts] 其余透传给 notification 的选项
- * @returns {Promise<*>}
- */
-declare function error(content: any, opts?: any): Promise<any>;
-
-export { Empty, ErrorBoundary, Iconfont as Icon, ImportWidgetComponent, Loading, NotFound, FFPopup as Popup, SetPropsWrapper };
+export { ErrorBoundary, ImportWidgetComponent };
+export type { FallbackOnError, LayoutKey, ThemeContext, ThemeRenderer, WidgetInput };