0.1.3 • Published 2 years ago
react-expression-editor v0.1.3
安装
npm install react-expression-editor -S -D
使用方法
import { ExpressionEditor, Formula, Expression } from 'react-expression-editor';
import 'react-expression-editor/dist/index.css';ExpressionEditor API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
single | 是否为单个公式 | Boolean | true | true 或 false |
dataSource | 数据源 | Object | null | - |
mode | 简易模式或复杂模式 | String | "base" | "base" 或 "advanced" |
singleProperty | 单个公式操作的属性对象(property) | Object | null | - |
baseFormula | 单个简易公式 | String | "" | - |
advancedFormula | 单个复杂公式 | Object<Formula> | null | - |
baseFormulaQueue | 简易公式的队列 | Array<Object> | [] | - |
advancedFormulaQueue | 复杂公式的队列 | Array<Formula> | [] | - |
onBaseFormulaChange | 单个简易公式变化的回调函数 | function(Object _singleProperty, String baseFormula) | ()=>{} | - |
onBaseFormulaQueueChange | 简易公式的队列变化的回调函数 | function(Array<Object> _baseFormulaQueue) | ()=>{} | - |
onAdvancedFormulaChange | 单个复杂公式变化的回调函数 | function(Object singleProperty, Formula _advancedFormula) | ()=>{}) | - |
onAdvancedFormulaQueueChange | 复杂公式的队列变化的回调函数 | function(Array<Formula> _advancedFormulaQueue) | ()=>{}) | - |
onModeChange | 简易/复杂模式改变的回调函数 | function(String _mode) | ()=>{}) | - |
dataSource的数据结构
dataSource: {
data: { // 存放的某类指标的数据
box: {
width: 100,
height: 100,
},
},
dataMapping: { // 存放的某类指标的名称映射
box: "盒子"
},
propertyMapping: { // data存放的某类指标中的属性的名称映射
width: "宽度",
height: "高度"
}
}property的数据结构
property: {
dataSourceIndex: "box",// 某类指标的KEY
propertyName: "width",// 某类指标中属性的KEY
}Formula类
// 初始化一个formula对象
const formula = new Formula(property, dataSource);
/*
计算公式的值
@return {Object} property 计算结果
*/
formula.getResult();
// 注：若为单个高级公式 需要先把property设置到formula中
// 序列化一个formula对象成json
formula.formatToJson();
Formula.build(json, dataSource) 把json反序列化一个formula对象Expression类
/*
计算一个简易公式的值
@param {String} formula 简易公式
@param {Object} dataSource 数据源
@return Number
*/
Expression.getBaseResult(baseFormula, dataSource);