npm install yaka-core --save
import Yaka from 'yaka-core'
const YakaForm = Yaka.YakaForm,
YakaFormOnFlow = Yaka.YakaFormOnFlow,
YakaComponent = Yaka.YakaComponent- YakaForm 这个是针对表单开发的yaka
- YakaComponent 这个是组件量级的yaka
- YakaFormOnFlow 这个是工单系统用的yaka
请按需引用
import React, { Component } from 'react';
import Yaka from 'yaka-core'
// yaka组件需另行安装
import yakaComponents from 'yaka-components'
const { components, layoutComponents } = yakaComponents
import { config } from './config/'
const YakaComponent = Yaka.YakaComponent
class App extends Component {
render() {
return (
<div className='yaka'>
<YakaComponent
config={config}
components={components}
layoutComponents={layoutComponents}
/>
</div>
)
}
}
export default App;- config json配置，具体配置协议请看文档
- components yaka使用组件的引入接口
- layoutComponents yaka使用的布局组件的引入接口
- 新的json协议
- mountFunctions 挂载函数接口
- functionTemplates 函数模板接口
- mountData 挂载数据接口
- plugIn 插件接口
- 模块化配置体验
- 移除 igroot 依赖，改用rc-form
- 抽离yaka组件到 yaka-component包
- 单元测试
- 工单的交付测试
- 新增数据监听
- 加入生命周期
- 移除 datamap 功能
- 移除 models 配置项
- 移除 functions 配置项
- 移除 rule 收集功能
- 移除在layout 声明全局变量功能
新的json协议会分为以下部分
- layout 页面结构
- init yaka初始化
- mounted yaka挂载后
- name
layout的配置协议做了改动，更加简洁
- name 现在只有在表单组件需要声明键值的时候才要定义
- ele 对应原来的component
- subs 对应原来的 children
- text 标签文本内容
- props 组件的属性
废弃项
- component
- children
- state
- global
- initData
- models
- functions
以下是新版的配置示例
"layout": [
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "h1",
"text": "@data",
"hide": true,
"props": {
"style": {
"textAlign": "center"
}
}
}
]
}
]yaka初始化的数据声明、函数初始化、数据监听都集中在这里进行处理
-
formValue 原initData，用来配置表单的初始值
-
state 原global，用来配置全局变量
-
watch 数据监听配置项目
数据监听配置项目，目前仅支持监听 全局变量，监听后触发的对应动作仅支持调用函数
"watch": { // 声明监听的变量 "title": { // 声明调用的函数 "run": "log" } }
-
functions 函数的声明,原models 和functions都转到这里进行配置
函数声明方式改为配置模板函数的方式，yaka本身有两个函数模板可以使用，用户也可以自己通过外部写入自己的模板然后声明调用。
"functions": { "getItem": { // 函数模板名称 "type": "yakaFetch", // 函数模板定义，具体参数应由模板开发者给出配置项 "definition": { "headers": { "aa": "@data", "state": "$demo", "string": "string" }, "type": "restful", "url": "http://xxxx.com/re/localdns", "params": { "demo": "$title.value", "test": "#name" }, "streams": { "$bumen.options": { "path": "data.org", "alias": { "label": "label", "value": "value" } }, "$test.options": "data.org" } } }, "titleChange": { "type": "stream", "definition": { "$title": "target.value", "#sename": "target.value" } }, "log": { "type": "log", "definition": { "text": "自定义代码模板" } } },
以下是新版初始化的配置示例
"init": {
"formValue": {
"bumen": "2",
"name": "1000",
"checkbox": [
"Pear"
],
"numbeer": "demo",
"switch": false
},
"state": {
"demo": "ddddddd"
},
"functions": {
"getItem": {
"type": "yakaFetch",
"definition": {
"headers": {
"aa": "@data",
"state": "$demo",
"string": "string"
},
"type": "restful",
"url": "http://xxxx.com/re/localdns",
"params": {
"demo": "$title.value",
"test": "#name"
},
"streams": {
"$bumen.options": {
"path": "data.org",
"alias": {
"label": "label",
"value": "value"
}
},
"$test.options": "data.org"
}
}
},
"titleChange": {
"type": "stream",
"definition": {
"$title": "target.value",
"#sename": "target.value"
}
},
"log": {
"type": "log",
"definition": {
"text": "自定义代码模板"
}
}
},
"watch": {
"title": {
"run": "log"
}
},
"event": {
"demo": {
"onCLick": "#buttonCLick"
}
}
}yaka组件挂载后的生命周期钩子，适用于调用一些api函数
配置方式很简单，在run里面用对象键值的形式声明调用的函数名和对应的参数
"mounted": {
"run": {
"demo": {
"param": 10000
},
"getItem": {},
"log": {
"param": "dadwa"
}
}
}外部函数挂载的接口，挂载进去的函数同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 表单示例获取函数
单纯使用挂载函数的话，很多场景下都要不断开发函数去应对，这样不利于后期维护和整个生态的发展。沿用了旧版的思路，提出函数模板的概念。
用户可以定义一种可以满足部分场景的函数模板，模板可以根据配置应对不同的细微调整。下面是简单的配置示例
<YakaFormEngine
functionTemplates={{
log: (definition, data, api) => {
const { text } = definition
const log = () => {
console.log(e);
}
return log
}
}}
/>
参数说明
- definition 配置字段，可以根据不同函数模板，由用户自己定义
- data 触发元素传入的值
- 暴露的yakaApi可以用来修改数据,以下是几个常用的api
下面是在json定义和调用的示例
"init": {
"functions": {
"log": {
"type": "log",
"definition": {
"text": "自定义代码模板"
}
}
}，
"watch": {
"title": {
"run": "log"
}
}
}外部数据挂载的数据现在用 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"
}
}
}
]
},
]
新增插件扩展的接口，现在主要是用来扩展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": [
{
"ele": "Row",
"subs": [
{
"col": 24,
"ele": "h1",
// 使用 @接受mountData
"text": "@data",
"hide": true,
"props": {
"style": {
"textAlign": "center"
}
}
}
]
},
]插件函数的三个入参
- Element， react元素，可以在这边进行包装处理
- 组件配置项， config 为对应的json，key为引擎分配给该组件的key值
- 可能用到的api，debug 为 debug函数，formCreatFunc 为 表单受控函数，yakaApis为 yakAPI
注意插件函数必须要有return一个元素!!!!
yaka配置平台现在按组件细粒度拆分出个个组件的配置，方便用户进行配置微调。
现在yaka仅仅是基于react 和 rc-form 的一个渲染引擎了。
###抽离yaka组件到 yaka-component包
旧版本yaka开发的组件都集成在了yaka-core里面，现在这部分组件抽离出去，成了一个npm包进行引用
yarn add yaka-component