【看板展示】【render值支持function字符串/调整package.json】

kanban-client/app/component/Table.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Table from '../src/Table/index.js';
 import Animate from 'rc-animate';
-import renders from '../utils/RenderUtils.js';
 import '../assets/Table/index.less';
 import '../assets/Table/animation.less';
 
@@ -30,9 +29,7 @@ class TableModel extends React.Component {
 		// 根据render方法名获得对应方法实体
 		for (let i = 0; i < cols.length; i++) {
 			let col = cols[i];
-			let renderFunction = typeof (col.render) == 'string' ? renders[col.render] :
-				(typeof (col.render) == 'function' ? col.render :
-				renders[this.newProps.render] || function (_v, _r, _i) { return { children: _v, props: {} } });
+			let renderFunction = col.render ? col.render : this.newProps.render ? this.newProps.render : function (_v, _r, _i) { return { children: _v, props: {} } };
 			col.render = renderFunction;
 		}
 		return cols;
@@ -56,12 +53,15 @@ class TableModel extends React.Component {
 		let node = this._reactInternalInstance.getHostNode();
 		let title = node.getElementsByClassName('rc-table-title')[0] || {offsetHeight: 0};
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
-		this.cHeight = node.offsetHeight - title.offsetHeight - thead.offsetHeight - 4;
+		this.cHeight = node.offsetHeight - title.offsetHeight;
+		thead.style.fontSize = `${this.rowHeight * .6}px`;
+		thead.style.height = `${this.cHeight/(this.rowCount + 1)}px`;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
 		let trs = node.getElementsByClassName('fade-enter');
 		for (let i = 0; i < trs.length; i++) {
-			trs[i].style.height = `${this.cHeight/this.rowCount}px`;
+			trs[i].style.height = `${this.cHeight/(this.rowCount + 1)}px`;
+			trs[i].style.fontSize = `${this.rowHeight * .6}px`;
 		}
 	}
 
@@ -105,13 +105,13 @@ class TableModel extends React.Component {
 	 * 根据容器高度分割data展示
 	 */
 	splitData() {
-		const { fontSize } = this.newProps;
+		const { fontSize, pageSize } = this.newProps;
 		let node = this._reactInternalInstance.getHostNode();
 		let title = node.getElementsByClassName('rc-table-title')[0] || {offsetHeight: 0};
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
-		this.cHeight = node.offsetHeight - title.offsetHeight - thead.offsetHeight;
-		this.cWidth = node.offsetWidth
-		this.rowCount = Math.round(this.cHeight/(this.newProps.rowHeight || 40));
+		this.cHeight = node.offsetHeight - title.offsetHeight;
+		this.cWidth = node.offsetWidth;
+		this.rowCount = (pageSize + 1) || Math.round(this.cHeight/(fontSize / .6));
 		this.rowHeight = this.cHeight/this.rowCount;
 		let a = this.newProps.data;
 		let result = [];
@@ -187,13 +187,8 @@ class TableModel extends React.Component {
 
 	getTitle() {
 		const { title } = this.newProps;
-		if (renders[title]) {
-			return renders[title];
-		} else {
-			let me = this;
-			return function(state) {
-				return title;
-			}
+		return function(state) {
+			return title;
 		}
 	}
 

kanban-client/app/component/converter.js

@@ -1,5 +1,3 @@
-import Renders from '../utils/RenderUtils.js';
-
 function converter(data) {
     let { content } = data;
     let { title, items } = content;
@@ -55,7 +53,7 @@ function formConfig(model) {
         type: 'form',
         config: {
             fontSize: fontSize || getFontSize(),
-            header: Renders[header] || header,
+            header: header,
             fieldStyle: parseStyleStr(fieldstyle),
             valueStyle: parseStyleStr(valuestyle),
             columns,
@@ -75,10 +73,11 @@ function tableConfig(model) {
             fontSize: fontSize || getFontSize(),
             rowHeight: rowHeight,
             refreshInterval: interval,
-            title: Renders[title] || title,
-            render: Renders[render],
+            title: title,
+            render: renderFunction(render),
             columns: columns.map((v, i) => {
                 v.key = i;
+                v.render = renderFunction(v.render);
                 return v;
             }),
             data: data.map((v, i)=> {
@@ -250,6 +249,16 @@ function pieConfig(model) {
     }
 }
 
+function renderFunction(funcStr) {
+    let func = function (_v, _r, _i) { return { children: _v, props: {} } };
+    try {
+        func = (new Function("return "+funcStr))();
+    }catch(ex) {
+        console.log('parsing failed', ex);
+    }
+    return func;
+}
+
 function getChartsTitle(fontSize, layout, title, subtitle) {
     var title = {
         show: true,

kanban-client/app/component/factory.dev.js

@@ -4,10 +4,9 @@ import Title from '../src/Title/Title.jsx';
 import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import DateFormatter from '../utils/DateTimeUtils.js';
 import { converter } from './converter.js';
-import RenderUtils from '../utils/RenderUtils.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/testline.json';
+import tempdata from '../data/tempdata.json';
 
 class Factory extends React.Component {
 

kanban-client/app/data/testtable.json

@@ -31,12 +31,12 @@
                                 {
                                     "title": "达成率",
                                     "dataIndex": "success",
-                                    "render": "rateRender"
+                                    "render": "function(value, record, index){let nv = value.replace(/%/, '');let style = {};if(nv < 100) {style = {color: 'red'};}else {style = {color: '#0000cd'};}return {children: value,props: {style: style}}}"
                                 },
                                 {
                                     "title": "备注",
                                     "dataIndex": "desc",
-                                    "render": "descRender"
+                                    "render": "function(value, record, index){return{children:value,props:{style:{color: 'green'}}}}"
                                 }
                             ],
                             "data": [
@@ -151,7 +151,8 @@
                                     "desc": "1"
                                 }
                             ],
-                            "render": "tableRender"
+                            "title": "123",
+                            "render": "function(value, record, index){return{children:value,props:{style:{color: 'blue'}}}}"
                         },
                         "layout": {
                             "x": 0,

kanban-client/app/src/Charts/ECharts.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import RenderUtils from '../../utils/RenderUtils.js';
 // 导入echarts
 import ReactEcharts from 'echarts-for-react';
 import {dark} from './Theme/Theme.js';
@@ -8,85 +7,29 @@ export class ReactEchart extends React.Component {
     constructor(props) {
         super(props);
         this.newProps = props;
-        this.getOtion = this.getOtion.bind(this);
-        this.fetchData = this.fetchData.bind(this);
-        this.timerKeys = [];
         this.state = ({
-            option: this.getOtion()
+            theme: this.newProps.theme,
+            option: this.newProps.option
         });
     }
 
-    initOption(option, per) {
-        if(typeof option === 'object') {
-            for(let key in option) {
-                if(key === 'formatter') {
-                    if(typeof option[key] === 'function') {
-                        // do nothing
-                    }else if(option[key].endsWith('Render')) {
-                       option[key] = RenderUtils[option[key]]
-                    }
-                }
-                // 局部刷新预留
-                // if(key === 'fetch') {
-                //     this.timing({
-                //         intervalFunction: RenderUtils[option[key]],
-                //         intervalTime: 1000,
-                //         params: {
-                //             key: per
-                //         }
-                //     });
-                // }
-                this.initOption(option[key], `${per}['${key}']`)
-            }
-        }else {
-            let option_ = this.props.option;
-            return;
-        }
+    static defaultProps = {
+        theme: 'dark'
     }
 
-    getOtion() {
-        const { option } = this.newProps;
-        let opts = Object.assign({},option);
-        this.initOption(opts, 'option_');
-        if(opts.series[0].type === 'bar') {
-            // opts.animation = false;
-            // opts.animationDurationUpdate = 100;
-        }
-
-        return opts;
-    }
-
-    fetchData() {
-        let {option} = this.state;
-        option.title.text = new Date().getSeconds();
-        this.setState({
-            option: option
-        });
-    }
-
-    // 定时任务
-	timing(obj) {
-		this.timerKeys.push(setInterval(function () {
-			obj.intervalFunction(this, this.state, ...obj.params);
-		}.bind(this), obj.intervalTime || 1000));
-	}
-
     componentDidMount() {
     }
+
     componentDidUpdate() {
-        
     }
+
     componentWillUnmount () {
-        let timers = this.timerKeys;
-        for(let i = 0; i < timers.length; i++) {
-            clearInterval(timers[i]);
-        }
     }
 
     componentWillReceiveProps(nextProps) {
         this.newProps = nextProps;
         this.setState({
-            option: this.getOtion()
+            option: this.newProps.option
         });
     }
 
@@ -96,7 +39,7 @@ export class ReactEchart extends React.Component {
             option={this.state.option}
             style={{height: '100%', width: '100%'}}
             className='react-echarts'
-            theme='dark'
+            theme={this.state.theme}
              />
         )
     }

kanban-client/app/src/Form/Form.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FormItem from './FormItem.jsx';
-import renders from '../../utils/RenderUtils.js';
 import '../../assets/Form/index.less';
 
 export default class Form extends React.Component {
@@ -46,17 +45,10 @@ export default class Form extends React.Component {
 
     getHeader() {
         const { fontSize, header, prefixCls, columns } = this.state;
-
-        let hel;
-        if (renders[header]) {
-            hel = renders[header](this.state);
-        } else {
-            hel = header;
-        }
-        if (hel) {
+        if (header) {
             const headerEl = <thead style={{fontSize: fontSize}} className={`${prefixCls}-header`} key="form_header">
                 <tr>
-                    <td className={`${prefixCls}-header-content`} colSpan={'100%'}>{hel}</td>
+                    <td className={`${prefixCls}-header-content`} colSpan={'100%'}>{header}</td>
                 </tr>
             </thead>;
             return headerEl;

kanban-client/app/src/Title/Title.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import renders from '../../utils/RenderUtils.js';
 import '../../assets/Title/index.less';
 
 export default class Title extends React.Component {

kanban-client/app/utils/RenderUtils.js

@@ -76,9 +76,6 @@ function prj_istimeout_render(r, v, i) {
         }
     }
 }
-function perRender(value, index) {
-    return `${(value * 100)}%`
-}
 function ztlbhFetch(th, state, params) {
     let option_ = th.props.option;
     let k = this.params.key;
@@ -148,7 +145,6 @@ let renders = {
     titleRender2,
     formHeaderRender,
     descRender,
-    perRender,
     ztlbhFetch,
     xaixsFetch,
     tableRender,

kanban-client/package.json

@@ -4,34 +4,32 @@
   "description": "boardshow",
   "main": "main.js",
   "scripts": {
-    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
-    "start:dev": "webpack-dev-server --port 8100 --inline --content-base build/ --config webpack.dev.config",
+    "start": "webpack-dev-server --port 8100 --inline --content-base build/ --config webpack.dev.config",
     "start:prod": "webpack && node server.js"
   },
   "keywords": [
-    "board"
+    "board",
+    "react"
   ],
   "author": "zhuth",
   "license": "ISC",
   "dependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-runtime": "^6.23.0",
     "component-classes": "^1.2.6",
     "echarts-for-react": "^1.4.4",
     "element-resize-event": "^2.0.9",
-    "json-loader": "^0.5.4",
+    "jquery": "^1.11.2",
     "lodash.get": "^4.4.2",
     "prop-types": "^15.5.8",
     "rc-util": "4.x",
+    "rc-animate": "^2.3.0",
     "react-grid-layout": "^0.14.7",
     "shallowequal": "^0.2.2",
     "thenby": "^1.2.3",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "warning": "^3.0.0",
-    "less": "^2.7.2",
-    "less-loader": "^4.0.5",
+    "babel-cli": "^6.26.0",
+    "babel-runtime": "^6.23.0",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
@@ -43,16 +41,16 @@
     "babel-register": "^6.24.1",
     "coveralls": "^2.11.15",
     "css3transform": "^1.1.7",
-    "echarts": "^3.6.2",
     "enzyme": "^2.7.0",
     "enzyme-to-json": "^1.4.5",
     "expect.js": "~0.3.1",
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.2",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
     "jest": "^18.1.0",
-    "jquery": "^1.11.2",
     "pre-commit": "1.x",
-    "rc-animate": "^2.3.0",
     "rc-dropdown": "~1.4.10",
     "rc-menu": "~4.13.0",
     "rc-tools": "6.x",
@@ -63,6 +61,7 @@
     "react-hot-loader": "^1.3.1",
     "react-test-renderer": "^15.5.4",
     "url-loader": "^0.5.9",
+    "warning": "^3.0.0",
     "webpack-dev-server": "^2.5.1"
   }
 }

kanban-client/server.js

@@ -1,20 +0,0 @@
-var express = require('express')
-var path = require('path')
-var compression = require('compression')
-
-var app = express()
-
-app.use(compression())
-
-// serve our static stuff like index.css
-app.use(express.static(path.join(__dirname, 'build')))
-
-// send all requests to index.html so browserHistory works
-app.get('*', function (req, res) {
-  res.sendFile(path.join(__dirname, 'build', 'boardshow.html'))
-})
-
-var PORT = process.env.PORT || 8080
-app.listen(PORT, function() {
-  console.log('Production Express server running at localhost:' + PORT)
-})