dooring/packages/dooringx-dumi-doc/docs/API/index.md

title, toc

title	toc
API	menu

useStoreState

用于将json中的block转换为react中的state，可插入block变更订阅函数。

示例：

	const config = useContext(configContext);
	const locale = useContext(LocaleContext);

	const everyFn = () => {};

	const subscribeFn = useCallback(() => {
		//需要去预览前判断下弹窗。
		localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
	}, [config]);

	const [state] = useStoreState(config, subscribeFn, everyFn);

参数	类型	说明
config	UserConfig	总的配置项
extraFn	Function = () => {}	订阅store变更函数
everyFn	Function = () => {}	暂时无用，可穿插运行函数

返回值	说明
[IStoreData]	转变为state的block ，用于后续渲染

useDynamicAddEventCenter

用于在组件中注册时机。

示例：

	useDynamicAddEventCenter(props, `${props.data.id}-click`, '点击执行时机');

参数	类型	说明
props	ComponentRenderConfigProps	传入组件的对象{data,context,store,config}
eventName	string	添加的名称
displayName	string	展示的名称

返回值	说明
void	无

Container

画布

示例：

	<Container state={state} config={config} context="edit"></Container>

参数	类型	说明
state	IStoreData	传入useStoreState转换的state
context	'edit' | 'preview'	根据预览或者编辑传
config	UserConfig	总配置项
editContainerStyle	CSSProperties	可以修改样式
previewContainerStyle	CSSProperties	可以修改样式

返回值	说明
JSX.Element	无

LeftConfig

左侧面板

示例：

		<LeftConfig footerConfig={footerConfig()} config={config}></LeftConfig>

参数	类型	说明
config	UserConfig	总配置项
showName	Boolean?	是否显示名称
footerConfig	ReactNode?	面板footer插槽
mode	'horizontal'	'vertical'

返回值	说明
JSX.Element	无

Preview

预览组件，包含了preview模式的container，以及一些加载逻辑。

示例：

	<Preview
				//loadingState={loading}
				// completeFn={() => {
				// 	setTimeout(() => {
				// 		setLoading(false);
				// 	}, 10000);
				// }}
				config={config}
	></Preview>

参数	类型	说明
config	UserConfig	总配置项
loadText	ReactNode?	加载中插槽
loadingState	boolean?	手动维护加载状态
completeFn	Function?	页面装载完成调用
previewContainerStyle	CSSProperties?	样式修改

返回值	说明
JSX.Element	无

RightConfig

右侧面板

示例：

	<RightConfig state={state} config={config}></RightConfig>

参数	类型	说明
state	IStoreData	传入useStoreState转换的state
config	UserConfig	总配置项
globalExtra	ReactNode?	全局属性部分添加位置插槽
modalExtra	ReactNode?	弹窗属性添加插槽

返回值	说明
JSX.Element	无

ContainerWrapper

画布外层，主要包含了滚轮放大缩小，刻度等。

示例：

<ContainerWrapper config={config}>
  <>
    <Control
      config={config}
      style={{ position: 'fixed', bottom: '160px', right: '450px', zIndex: 100 }}
    ></Control>
    <Container state={state} config={config} context="edit"></Container>
  </>
</ContainerWrapper>

参数	类型	说明
config	UserConfig	总配置项
classNames	string?	样式修改
style	CSSProperties?	样式修改

返回值	说明
JSX.Element	无

Control

全局、弹窗等画布控制器。

示例：

<Control
  config={config}
  style={{ position: 'fixed', bottom: '160px', right: '450px', zIndex: 100 }}
></Control>

参数	类型	说明
config	UserConfig	总配置项
style	CSSProperties?	样式修改

返回值	说明
JSX.Element	无

LeftDataPannel

左侧数据源tab，用来装载在左侧面板上。

示例：

leftRenderListCategory: [
  ...,
		{
			type: 'datax',
			icon: <ContainerOutlined />,
			custom: true,
			displayName: '数据源',
			customRender: (config) => <LeftDataPannel config={config}></LeftDataPannel>,
		},
	],

参数	类型	说明
config	UserConfig	总配置项

返回值	说明
JSX.Element	无

innerContainerDragUp

放到外层容器属性里，主要包含多种up类型事件处理逻辑。

示例：

<div {...innerContainerDragUp(config)}>
</div>

参数	类型	说明
config	UserConfig	总配置项

返回值	说明
mouseUp moseMove等	无

unmountContextMenu

卸载右键dom，用于关闭右键菜单，也可以在contextMenuState.unmountContextMenu中取到

示例：

const ContextMenu = () => {
	const handleclick = () => {
		unmountContextMenu();
	};
	return (
		<div
			style={{
				left: contextMenuState.left,
				top: contextMenuState.top,
				position: 'fixed',
				background: 'rgb(24, 23, 23)',
			}}
		>
			<div
				style={{ width: '100%' }}
				onClick={() => {
					commander.exec('redo');
					handleclick();
				}}
			>
				<Button>自定义</Button>
			</div>
		</div>
	);
};

参数	类型	说明
config	UserConfig	总配置项

返回值	说明
mouseUp moseMove等	无

UserConfig

总设置项，包括可以获取store commander等，也需传递给组件。

待补全文档

userConfigMerge

合并配置项,用于合并他人的配置项。

• 部分无法合并属性如果b传了会以b为准
• initstore不合并
• leftallregistmap合并
• leftRenderListCategory合并
• rightRenderListCategory合并
• rightGlobalCustom 不合并
• initComponentCache合并
• initFunctionMap合并
• initDataCenterMap合并
• initCommandModule合并
• initFormComponents合并
• containerIcon不合并

示例：

const merge = userConfigMerge(a: Partial<InitConfig>, b?: Partial<InitConfig>):

参数	类型	说明
InitConfig: initStoreData	IStoreData[]	store初始值
InitConfig: leftAllRegistMap	leftAllRegistMap[]	左边tab页组件渲染包括异步路径 { type: 'basic', component: 'button', img: 'http://xxxx/1.jpg' ,url:'' }
InitConfig: leftRenderListCategory	leftRenderListCategory[]	左边tab页图标配置
InitConfig: rightRenderListCategory	RightMapRenderListPropsItemCategory[]	右边tab页图标配置
InitConfig: initComponentCache	CacheComponentType	组件加载缓存判定，用来设置不异步加载的组件
InitConfig: initFunctionMap	FunctionCenterType	内置函数配置
InitConfig: initDataCenterMap	Record<string, any>	内置数据中心配置数据
InitConfig: initCommandModule	CommanderItemFactory[]	commander 指令集合
InitConfig: rightGlobalCustom	((config: UserConfig) => React.ReactNode) | null | undefined	右侧全局自定义
InitConfig: initFormComponents	Record<string, React.FunctionComponent<any> | React.ComponentClass<any, any>>	右侧配置项
InitConfig: containerIcon	React.ReactNode	容器拉伸图标

返回值	说明
InitConfig	无

scaleFn

制作放大缩小的函数

示例：

scaleFn.increase(0.1,config)
scaleFn.decrease(0.1,config)

参数	类型	说明
number	number	放大缩小比例
config	UserConfig	总配置项

ComponentItemFactory

制作组件函数，如果想传递对象请使用createComponent。

示例：

new ComponentItemFactory(
	'button',
	'按钮',
	{
		style: [
			createPannelOptions<FormMap, 'input'>('input', {
				receive: 'text',
				label: '文字',
			}),
		],
		fn: [
			createPannelOptions<FormMap, 'switch'>('switch', {
				receive: 'op1',
				label: '改变文本函数',
			}),
		],
		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
	},
	{
		props: {
			text: 'yehuozhili',
			sizeData: [100, 30],
			backgroundColor: 'rgba(0,132,255,1)',
			lineHeight: 1,
			borderRadius: 0,
			op1: false,
			borderData: {
				borderWidth: 0,
				borderColor: 'rgba(0,0,0,1)',
				borderStyle: 'solid',
			},
			fontData: {
				fontSize: 14,
				textDecoration: 'none',
				fontStyle: 'normal',
				color: 'rgba(255,255,255,1)',
				fontWeight: 'normal',
			},
		},
		width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
		rotate: {
			canRotate: true,
			value: 0,
		},
		canDrag: true, // false就不能拖
	},
	(data, context, store, config) => {
		return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
	},
	true
);

参数	类型	说明
name	string	map上key名唯一
display	string	展示的名称
props	Record<string, CreateOptionsResAll[]>	配置项属性
initData	Partial<IBlockType>	初始值
render	(data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element	渲染函数
resize	boolean = true	是否拉伸
needPosition	boolean = true	是否用拖拽点位定初始位置
init	() => void	加载时函数
destroy	() => void	销毁时函数
remoteConfig	Record<string, any>	远程组件配置项

createComponent

制作组件函数，对象形式new ComponentItemFactory,属性同上。

示例：

createComponent({
	name: 'testco',
	display: '测试按钮',
	props: {
		style: [
			createPannelOptions<FormMap, 'input'>('input', {
				receive: 'text',
				label: '文字',
			}),
		],
		fn: [
			createPannelOptions<FormMap, 'switch'>('switch', {
				receive: 'op1',
				label: '改变文本函数',
			}),
		],
		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
	},
	initData: {
		props: {
			text: 'yehuozhili',
			sizeData: [100, 30],
			backgroundColor: 'rgba(0,132,255,1)',
			lineHeight: 1,
			borderRadius: 0,
			op1: false,
			borderData: {
				borderWidth: 0,
				borderColor: 'rgba(0,0,0,1)',
				borderStyle: 'solid',
			},
			fontData: {
				fontSize: 14,
				textDecoration: 'none',
				fontStyle: 'normal',
				color: 'rgba(255,255,255,1)',
				fontWeight: 'normal',
			},
		},
		width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
		rotate: {
			canRotate: true,
			value: 0,
		},
		canDrag: true, // false就不能拖
	},
	render: (data, context, store, config) => {
		return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
	},
	resize: true,
});

createPannelOptions

用制作组件配置项函数

示例：

	createPannelOptions<FormMap, 'input'>('input', {
				receive: 'text',
				label: '文字',
	})

参数	类型	说明
type	string	右侧配置组件对应的name
option	any	发给该右侧配置组件的属性（根据右侧组件定义）

useRegistFunc

用于制作函数

CommanderItemFactory

用于制作快捷键

changeUserValueRecord

用于制作函数转换

changeUserValue

用于制作函数转换

dragEventResolve

用于菜单拖拽函数

defaultStore

默认store

deepCopy

用于深拷贝

specialCoList

需要特殊处理的组件，用于弹窗mask，一般不做处理

specialFnList

需要特殊处理的函数，通过includes判断，函数不会像组件函数一样卸载。

locale

国际化设置