From 856079c934e2f6cc88d266fe1e85456bb9c1fc23 Mon Sep 17 00:00:00 2001 From: yehuozhili <673632758@qq.com> Date: Mon, 15 Aug 2022 00:11:02 +0800 Subject: [PATCH] fix: update doc --- packages/dooringx-dumi-doc/.umirc.ts | 10 +- packages/dooringx-dumi-doc/docs/API/index.md | 546 ++++++++++++++++++- 2 files changed, 546 insertions(+), 10 deletions(-) diff --git a/packages/dooringx-dumi-doc/.umirc.ts b/packages/dooringx-dumi-doc/.umirc.ts index 0c84f41..03e288e 100644 --- a/packages/dooringx-dumi-doc/.umirc.ts +++ b/packages/dooringx-dumi-doc/.umirc.ts @@ -2,13 +2,21 @@ import { defineConfig } from 'dumi'; export default defineConfig({ title: 'Dooringx', favicon: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png', - logo: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png', + logo: 'https://img-blog.csdnimg.cn/img_convert/520863a38a93d960862f92c805bc97cc.png#pic_center', outputPath: 'docs-dist', mode: 'site', locales: [ ['zh', '中文'], ['en', 'English'], ], + styles: [ + ` + .__dumi-default-navbar-logo{ + padding-left: 200px !important; + text-indent: -10000px; + } + `, + ], navs: { // 多语言 key 值需与 locales 配置中的 key 一致 en: [ diff --git a/packages/dooringx-dumi-doc/docs/API/index.md b/packages/dooringx-dumi-doc/docs/API/index.md index 12f1f50..908000c 100644 --- a/packages/dooringx-dumi-doc/docs/API/index.md +++ b/packages/dooringx-dumi-doc/docs/API/index.md @@ -2,21 +2,549 @@ title: API toc: menu --- - ## useStoreState +用于将json中的block转换为react中的state，可插入block变更订阅函数。 + +示例： +```js + 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 = () => {} | | -| everyFn | Function = () => {} | | +| config | UserConfig | 总的配置项 | +| extraFn | Function = () => {} | 订阅store变更函数 | +| everyFn | Function = () => {} | 暂时无用，可穿插运行函数 | -#### 返回值： +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| [IStoreData] | 转变为state的block ，用于后续渲染 | -`[IStoreData]` +## useDynamicAddEventCenter +用于在组件中注册时机。 + +示例： +```js + useDynamicAddEventCenter(props, `${props.data.id}-click`, '点击执行时机'); +``` + + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| props | ComponentRenderConfigProps | 传入组件的对象{data,context,store,config} | +| eventName | string | 添加的名称 | +| displayName | string | 展示的名称 | + + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| void | 无 | + +## Container + +画布 + +示例： +```js + +``` + + + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| state | IStoreData | 传入useStoreState转换的state | +| context | 'edit' \| 'preview' | 根据预览或者编辑传 | +| config | UserConfig | 总配置项 | +| editContainerStyle | CSSProperties | 可以修改样式 | +| previewContainerStyle | CSSProperties | 可以修改样式 | + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | + +## LeftConfig + +左侧面板 + + +示例： +```js + +``` + + + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | +| showName | Boolean? | 是否显示名称 | +| footerConfig | ReactNode? | 面板footer插槽 | +| mode | 'horizontal' | 'vertical' | 模式 | + + + + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | + + +## Preview + +预览组件，包含了preview模式的container，以及一些加载逻辑。 + +示例： +```js + { + // setTimeout(() => { + // setLoading(false); + // }, 10000); + // }} + config={config} + > +``` + + + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | +| loadText | ReactNode? | 加载中插槽 | +| loadingState | boolean? | 手动维护加载状态 | +| completeFn | Function? | 页面装载完成调用 | +| previewContainerStyle | CSSProperties? | 样式修改 | + + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | + +## RightConfig + +右侧面板 + +示例： +```js + +``` + + + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| state | IStoreData | 传入useStoreState转换的state | +| config | UserConfig | 总配置项 | +| globalExtra | ReactNode? | 全局属性部分添加位置插槽 | +| modalExtra | ReactNode? | 弹窗属性添加插槽 | + + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | + +## ContainerWrapper + +画布外层，主要包含了滚轮放大缩小，刻度等。 + +示例： +```js + + <> + + + + +``` + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | +| classNames | string? | 样式修改 | +| style | CSSProperties? | 样式修改 | + + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | +## Control + +全局、弹窗等画布控制器。 + +示例： +```js + +``` +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | +| style | CSSProperties? | 样式修改 | + + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | + + +## LeftDataPannel + +左侧数据源tab，用来装载在左侧面板上。 + +示例： +```js +leftRenderListCategory: [ + ..., + { + type: 'datax', + icon: , + custom: true, + displayName: '数据源', + customRender: (config) => , + }, + ], +``` +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| JSX.Element | 无 | + +## innerContainerDragUp + +放到外层容器属性里，主要包含多种up类型事件处理逻辑。 + +示例： +```js +
+
+``` +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| mouseUp moseMove等 | 无 | + +## unmountContextMenu + +卸载右键dom，用于关闭右键菜单，也可以在contextMenuState.unmountContextMenu中取到 + +示例： +```js +const ContextMenu = () => { + const handleclick = () => { + unmountContextMenu(); + }; + return ( +
+
{ + commander.exec('redo'); + handleclick(); + }} + > + +
+
+ ); +}; +``` +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| config | UserConfig | 总配置项 | + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| mouseUp moseMove等 | 无 | + + +## UserConfig +总设置项，包括可以获取store commander等，也需传递给组件。 + +待补全文档 + +## userConfigMerge + +合并配置项,用于合并他人的配置项。 + + * 部分无法合并属性如果b传了会以b为准 + * initstore不合并 + * leftallregistmap合并 + * leftRenderListCategory合并 + * rightRenderListCategory合并 + * rightGlobalCustom 不合并 + * initComponentCache合并 + * initFunctionMap合并 + * initDataCenterMap合并 + * initCommandModule合并 + * initFormComponents合并 + * containerIcon不合并 + +示例： + +```js +const merge = userConfigMerge(a: Partial, b?: Partial): +``` +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| 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\ | 内置数据中心配置数据 | +| InitConfig: initCommandModule | CommanderItemFactory[] | commander 指令集合 | +| InitConfig: rightGlobalCustom | ((config: UserConfig) => React.ReactNode) \| null \| undefined | 右侧全局自定义 | +| InitConfig: initFormComponents | Record\ \| React.ComponentClass\\>| 右侧配置项 | +| InitConfig: containerIcon | React.ReactNode | 容器拉伸图标 | + +| 返回值 | 说明 | +| ---------------------------- | ---------------- | +| InitConfig | 无 | + +## scaleFn + +制作放大缩小的函数 + +示例： + +```js +scaleFn.increase(0.1,config) +scaleFn.decrease(0.1,config) +``` + + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| number | number | 放大缩小比例 | +| config | UserConfig | 总配置项 | + +## ComponentItemFactory + +制作组件函数，如果想传递对象请使用createComponent。 + +示例： +```js +new ComponentItemFactory( + 'button', + '按钮', + { + style: [ + createPannelOptions('input', { + receive: 'text', + label: '文字', + }), + ], + fn: [ + createPannelOptions('switch', { + receive: 'op1', + label: '改变文本函数', + }), + ], + animate: [createPannelOptions('animateControl', {})], + actions: [createPannelOptions('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 ; + }, + true +); +``` + +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| name | string | map上key名唯一 | +| display| string | 展示的名称 | +| props| Record\| 配置项属性 | +| initData| Partial\| 初始值 | +| render|(data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element| 渲染函数 | +| resize| boolean = true | 是否拉伸 | +| needPosition| boolean = true| 是否用拖拽点位定初始位置 | +| init| () => void| 加载时函数 | +| destroy| () => void| 销毁时函数 | +| remoteConfig| Record\| 远程组件配置项 | + +## createComponent + +制作组件函数，对象形式new ComponentItemFactory,属性同上。 + +示例： + +```js +createComponent({ + name: 'testco', + display: '测试按钮', + props: { + style: [ + createPannelOptions('input', { + receive: 'text', + label: '文字', + }), + ], + fn: [ + createPannelOptions('switch', { + receive: 'op1', + label: '改变文本函数', + }), + ], + animate: [createPannelOptions('animateControl', {})], + actions: [createPannelOptions('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 ; + }, + resize: true, +}); +``` + + +## createPannelOptions + +用制作组件配置项函数 + +示例： +```js + createPannelOptions('input', { + receive: 'text', + label: '文字', + }) +``` +| 参数 | 类型 | 说明 | +| ----------------- | ---------------- | ---- | +| type | string | 右侧配置组件对应的name | +| option| any | 发给该右侧配置组件的属性（根据右侧组件定义） | + + +## useRegistFunc + +用于制作函数 + +## CommanderItemFactory + +用于制作快捷键 +## changeUserValueRecord + +用于制作函数转换 + +## changeUserValue + +用于制作函数转换 + + +## dragEventResolve + +用于菜单拖拽函数 + + +## defaultStore + +默认store + +## deepCopy + +用于深拷贝 + +## specialCoList + +需要特殊处理的组件，用于弹窗mask，一般不做处理 + +## specialFnList + +需要特殊处理的函数，通过includes判断，函数不会像组件函数一样卸载。 + + +## locale + +国际化设置