安装
npm install yaka-core --save
npm
const YakaForm = YakaYakaForm YakaFormOnFlow = YakaYakaFormOnFlow YakaComponent = YakaYakaComponent
- YakaForm 这个是针对表单开发的yaka
- YakaComponent 这个是组件量级的yaka
- YakaFormOnFlow 这个是工单系统用的yaka
请按需引用
使用
;// yaka组件需另行安装 const components layoutComponents = yakaComponentsconst YakaComponent = YakaYakaComponent { return <div className='yaka'> <YakaComponent config=config components=components layoutComponents=layoutComponents /> </div> };
api
- config json配置,具体配置协议请看文档
- components yaka使用组件的引入接口
- layoutComponents yaka使用的布局组件的引入接口
yaka组件包地址
更新日志
预览
- 新的json协议
- mountFunctions 挂载函数接口
- functionTemplates 函数模板接口
- mountData 挂载数据接口
- plugIn 插件接口
- 模块化配置体验
- 移除 igroot 依赖,改用rc-form
- 抽离yaka组件到 yaka-component包
- 单元测试
- 工单的交付测试
- 新增数据监听
- 加入生命周期
- 移除 datamap 功能
- 移除 models 配置项
- 移除 functions 配置项
- 移除 rule 收集功能
- 移除在layout 声明全局变量功能
新的json协议
新的json协议会分为以下部分
- layout 页面结构
- init yaka初始化
- mounted yaka挂载后
- name
layout
layout的配置协议做了改动,更加简洁
- name 现在只有在表单组件需要声明键值的时候才要定义
- ele 对应原来的component
- subs 对应原来的 children
- text 标签文本内容
- props 组件的属性
废弃项
- component
- children
- state
- global
- initData
- models
- functions
以下是新版的配置示例
"layout":
init
yaka初始化的数据声明、函数初始化、数据监听都集中在这里进行处理
-
formValue 原initData,用来配置表单的初始值
-
state 原global,用来配置全局变量
-
watch 数据监听配置项目
数据监听配置项目,目前仅支持监听 全局变量,监听后触发的对应动作仅支持调用函数
"watch": -
functions 函数的声明,原models 和functions都转到这里进行配置
函数声明方式改为配置模板函数的方式,yaka本身有两个函数模板可以使用,用户也可以自己通过外部写入自己的模板然后声明调用。
"functions":,
以下是新版初始化的配置示例
"init":
mounted
yaka组件挂载后的生命周期钩子,适用于调用一些api函数
配置方式很简单,在run里面用对象键值的形式声明调用的函数名和对应的参数
"mounted":
mountFunctions 挂载函数接口
外部函数挂载的接口,挂载进去的函数同json配置声明的函数一样的效果。
<YakaFormEngine mountFunctions={{ demo: (data, api) => { const { getState, formValueSettingFunction, stateValueSettingFunction } = api formValueSettingFunction({ sename: "测试数据" }) stateValueSettingFunction({ title: { value: "测试数据" } }) }, yakaChange: (val, api) => { console.log(val, '外部接口'); } }}/>
挂载函数接收两个参数
-
Data触发元素传入的值
-
暴露的yakaApi可以用来修改数据,以下是几个常用的api
- formValueSettingFunction 表单数据设置函数
- stateValueSettingFunction 全局变量设置函数
- formValueGettingFunction 表单数据获取函数
- getState 全局变量获取函数
- getForm 表单示例获取函数
functionTemplates 函数模板接口
单纯使用挂载函数的话,很多场景下都要不断开发函数去应对,这样不利于后期维护和整个生态的发展。沿用了旧版的思路,提出函数模板的概念。
用户可以定义一种可以满足部分场景的函数模板,模板可以根据配置应对不同的细微调整。下面是简单的配置示例
<YakaFormEngine functionTemplates={{ log: (definition, data, api) => { const { text } = definition const log = () => { console.log(e); } return log } }}/>
参数说明
- definition 配置字段,可以根据不同函数模板,由用户自己定义
- data 触发元素传入的值
- 暴露的yakaApi可以用来修改数据,以下是几个常用的api
下面是在json定义和调用的示例
"init":
mountData 挂载数据接口
外部数据挂载的数据现在用 mountData 统一接收
<YakaFormEngine mountData={{ data: this.state.test, num: 1 }} />
内部接受的用法
"layout": [ { "ele": "Row", "subs": [ { "col": 24, "ele": "h1", // 使用 @接受mountData "text": "@data", "hide": true, "props": { "style": { "textAlign": "center" } } } ] }, ]
plugIn 插件接口
新增插件扩展的接口,现在主要是用来扩展layout里面的配置项目
例如我们要在组件配置项目里面加入一个hide的字段,如果这个字段为ture,就不渲染这个组件
插件代码
const logic = (Element, { config, key }, { debug, formCreatFunc, yakaApis }) => { if (config.hide) { return null } return Element}export default logic
yaka组件使用方式,插件接口需要传入的是一个数组,用户可以根据需要引入不同的插件扩展
<YakaFormEngine plugIn={[logic]}/>
json配置上的变化
"layout":
插件函数的三个入参
- Element, react元素,可以在这边进行包装处理
- 组件配置项, config 为对应的json,key为引擎分配给该组件的key值
- 可能用到的api,debug 为 debug函数,formCreatFunc 为 表单受控函数,yakaApis为 yakAPI
注意插件函数必须要有return一个元素!!!!
模块化配置体验
yaka配置平台现在按组件细粒度拆分出个个组件的配置,方便用户进行配置微调。
移除 igroot 依赖,改用rc-form
现在yaka仅仅是基于react 和 rc-form 的一个渲染引擎了。
抽离yaka组件到 yaka-component包
旧版本yaka开发的组件都集成在了yaka-core里面,现在这部分组件抽离出去,成了一个npm包进行引用
yarn add yaka-component
目录结构
├── README.md
├── demo.json
├── lib
│ ├── engines
│ │ ├── YakaComponent yaka组件
│ │ │ └── index.js
│ │ ├── YakaForm yaka表单组件
│ │ │ └── index.js
│ │ ├── YakaFormOnFlow yaka 昆仑表单组件
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── model yaka功能模块
│ │ │ ├── stream.js 数据流模块
│ │ │ ├── dataMap.js 数据编编辑模块
│ │ │ ├── functions.js 配置函数处理模块
│ │ │ ├── index.js
│ │ │ ├── layout.js 渲染解析模块
│ │ │ ├── models.js http请求模块
│ │ │ ├── mountFunctions.js 弃用
│ │ │ ├── rules.js 弃用
│ │ │ ├── state.js 配置数据采集模块
│ │ │ └── stream.js 数据流模块
│ │ └── yaka.class.js
│ ├── extend 特殊组件的处理
│ │ ├── editTable.js
│ │ ├── editor.js
│ │ └── index.js
│ ├── index.js 入口文件
│ └── tool 工具函数
│ └── index.js
├── jest.config.js
├── dist 构建后的文件
│ ├── engines
│ │ ├── YakaComponent
│ │ │ └── index.jsx
│ │ ├── YakaForm
│ │ │ └── index.jsx
│ │ ├── YakaFormOnFlow
│ │ │ └── index.jsx
│ │ ├── index.js
│ │ ├── model
│ │ │ ├── dataMap.js
│ │ │ ├── functions.js
│ │ │ ├── index.js
│ │ │ ├── layout.js
│ │ │ ├── models.js
│ │ │ ├── mountFunctions.js
│ │ │ ├── rules.js
│ │ │ ├── state.js
│ │ │ └── stream.js
│ │ └── yaka.class.jsx
│ ├── extend
│ │ ├── editTable.jsx
│ │ ├── editor.jsx
│ │ └── index.js
│ ├── index.js
│ └── tool
│ └── index.js
├── package.json
├── test 单元测试
│ ├── __snapshots__
│ ├── demos
│ │ ├── datamap.js
│ │ ├── index.js
│ │ ├── layout.js
│ │ └── logic.js
│ ├── error_case
│ ├── flow.test.js
│ ├── jest
│ │ └── css-transform.js
│ ├── retun.test.js
│ ├── setup.js
│ ├── tool
│ │ └── index.js
│ ├── tool.test.js
│ └── yaka.test.js
├── yarn-error.log
└── yarn.lock
技术栈
js + react + igroot
发布方式
yarn publish