117 lines
5.3 KiB
TypeScript
117 lines
5.3 KiB
TypeScript
export { default as Icon } from './iconfont';
|
||
import React, { ReactElement, ComponentType, ReactNode, CSSProperties } from 'react';
|
||
import { SlotKey } from './container';
|
||
export { Empty, Loading, NotFound, Popup } from './container';
|
||
|
||
/**
|
||
* 包装一个弹窗内容组件,让它可以通过 $setProps 更新自己的 props(与外部传入的 widgetProps 做浅合并),
|
||
* 同时注入 $close 用于关闭弹窗
|
||
* @param {Object} props
|
||
* @param {ReactElement|ComponentType} 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 | React.ComponentType;
|
||
widgetProps?: any;
|
||
$close: (result?: any) => void;
|
||
onSetProps?: (patch: any) => void;
|
||
}): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ComponentType;
|
||
|
||
/**
|
||
* 通用错误边界组件
|
||
* @param {Object} props
|
||
* @param {*} props.children
|
||
* @param {ReactNode|((error: Error, reset: () => void) => ReactNode)} [props.fallback]
|
||
* 错误时的 UI。函数形式可接收 error 和 reset，不传则显示错误字符串。
|
||
* @param {Function} [props.onError] 错误回调 (error, info) => void
|
||
* @param {Function} [props.onReset] 重置回调 () => void
|
||
* @param {any[]} [props.resetKeys] 任一值变化时自动重置（类似 react-error-boundary）
|
||
*/
|
||
declare class ErrorBoundary extends React.Component<any, any, any> {
|
||
static getDerivedStateFromError(error: any): {
|
||
error: any;
|
||
};
|
||
constructor(props: any);
|
||
constructor(props: any, context: any);
|
||
state: {
|
||
error: any;
|
||
};
|
||
componentDidCatch(error: any, info: any): void;
|
||
componentDidUpdate(prevProps: any): void;
|
||
reset: () => void;
|
||
render(): 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
|
||
* @param {string | ThemeRenderer} [props.theme]
|
||
* 容器框架：string 异步加载，function render prop（接收 {@link ThemeContext}）
|
||
* @param {Object} [props.themeProps] 传给 theme 的 $setting（即 ThemeContext.$setting）
|
||
* @param {string} [props.className] 透传给 theme 的根节点 className
|
||
* @param {Partial<Record<LayoutKey, string>>} [props.classNames] 各布局区块的 className
|
||
* @param {CSSProperties} [props.style] 透传给 theme 的根节点行内样式
|
||
* @param {Partial<Record<LayoutKey, CSSProperties>>} [props.styles] 各布局区块的行内样式
|
||
* @param {*} [props.fallback] 加载中占位 UI，默认 null
|
||
* @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, }?: {
|
||
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;
|
||
|
||
export { ErrorBoundary, ImportWidgetComponent, SetPropsWrapper };
|
||
export type { FallbackOnError, LayoutKey, ThemeContext, ThemeRenderer, WidgetInput };
|