From aa71566c89ed8ea9967dfd02531018e674c84651 Mon Sep 17 00:00:00 2001
From: wb-fjp324710 <wb-fjp324710@alibaba-inc.com>
Date: Wed, 18 Oct 2017 16:02:22 +0800
Subject: [PATCH] update react15.x

---
 .gitignore                     |   1 -
 .npmignore                     |   1 -
 .travis.yml                    |  13 ++-
 demo/GridDemo.jsx              |  26 +++---
 demo/GridEditDemo.jsx          |  20 +++--
 demo/GridViewModeDemo.jsx      |   8 +-
 demo/RadioField.jsx            |  11 ++-
 demo/TableGroup.jsx            |  29 +++---
 demo/TreeGridDemo.jsx          |  21 ++---
 demo/index.jsx                 |  20 ++---
 package.json                   | 156 +++++++++++++++++----------------
 src/ActionBar/ActionBar.jsx    |  11 ++-
 src/ActionBar/ColumnPicker.jsx |  11 +--
 src/ActionBar/LinkBar.jsx      |   5 +-
 src/ActionBar/SearchBar.jsx    |  14 +--
 src/Cell/CheckBox.jsx          |  13 ++-
 src/Cell/Radio.jsx             |   5 +-
 src/Cell/index.jsx             |  35 ++++----
 src/CollapsedButton.jsx        |  11 +--
 src/Header/MessageIcon.jsx     |   5 +-
 src/Header/index.jsx           |  17 ++--
 src/Mask.jsx                   |   7 +-
 src/Row.jsx                    |  41 ++++-----
 src/Table.jsx                  | 129 +++++++++++++--------------
 src/Tbody.jsx                  |  25 +++---
 src/methods.js                 |   2 +-
 tests/common.spec.jsx          |  47 +++++-----
 tests/inlineedit.spec.jsx      |  55 +++++++-----
 tests/subcomp.spec.jsx         |   7 +-
 tests/tablegroup.spec.jsx      |   6 +-
 tests/tree.spec.jsx            |   7 +-
 31 files changed, 406 insertions(+), 353 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1eb30c5..372e187 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,5 +26,4 @@ spm_modules
 .happypack
 dist
 build
-coverage
 assets/**/*.css
diff --git a/.npmignore b/.npmignore
index 6e6d277..8eee222 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,7 +1,6 @@
 bower_components/
 *.cfg
 node_modules/
-coverage/
 nohup.out
 *.iml
 .idea/
diff --git a/.travis.yml b/.travis.yml
index 93ecf14..5ed592e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,6 +2,11 @@ language: node_js
 
 sudo: false
 
+addons:
+  apt:
+    packages:
+      - xvfb
+
 notification:
   email:
     - wsj7552715@hotmail.com
@@ -17,6 +22,11 @@ before_install:
     exit
   fi
   phantomjs --version
+install:
+  - export DISPLAY=':99.0'
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+  - npm install
+
 
 script:
 - |
@@ -25,7 +35,6 @@ script:
   else
     npm run $TEST_TYPE
   fi
-
 env:
   matrix:
   - TEST_TYPE=test
@@ -34,4 +43,4 @@ env:
 
 matrix:
   allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+  - env: "TEST_TYPE=saucelabs"
\ No newline at end of file
diff --git a/demo/GridDemo.jsx b/demo/GridDemo.jsx
index 186d734..9a6cbc7 100644
--- a/demo/GridDemo.jsx
+++ b/demo/GridDemo.jsx
@@ -6,10 +6,10 @@
  * All rights reserved.
  */
 
-const Button = require('uxcore-button');
-const React = require('react');
+import Button from 'uxcore-button';
 
-const Table = require('../src');
+import React from 'react';
+import Table from '../src';
 
 const urlPrefix = 'http://30.6.61.25:3000/';
 
@@ -50,21 +50,21 @@ class Demo extends React.Component {
       {
         dataKey: 'id',
         title: 'ID',
-        width: 50,
+        width: '50px',
         hidden: true,
       },
       {
         dataKey: 'country',
         // fixed: true,
         title: '国家',
-        width: 200,
+        width: '200px',
         ordered: true,
         hidden: true,
       },
       {
         dataKey: 'city',
         title: '城市',
-        width: 150,
+        width: '150px',
         ordered: true,
         message: '都是中国城市',
         hidden: true,
@@ -80,12 +80,12 @@ class Demo extends React.Component {
       {
         dataKey: 'email',
         title: 'Email',
-        width: 200,
+        width: '200px',
         ordered: true,
       }, {
         dataKey: 'action1',
         title: '操作1',
-        width: 200,
+        width: '200px',
         rightFixed: true,
         type: 'action',
         actions: [{
@@ -109,7 +109,7 @@ class Demo extends React.Component {
       }, {
         dataKey: 'action',
         title: '链接',
-        width: 100,
+        width: '100px',
         render: () => <div><a>111</a></div>,
       },
     ];
@@ -161,17 +161,17 @@ class Demo extends React.Component {
             {
               dataKey: 'class',
               title: '分类',
-              width: 200,
+              width: '200px',
             },
             {
               dataKey: 'dep',
               title: '部门',
-              width: 200,
+              width: '200px',
             },
             {
               dataKey: 'person',
               title: '采购员',
-              width: 200,
+              width: '200px',
             },
           ],
           jsxdata: {
@@ -207,4 +207,4 @@ class Demo extends React.Component {
   }
 }
 
-module.exports = Demo;
+export default Demo;
diff --git a/demo/GridEditDemo.jsx b/demo/GridEditDemo.jsx
index fef2d28..ec1aef9 100644
--- a/demo/GridEditDemo.jsx
+++ b/demo/GridEditDemo.jsx
@@ -6,13 +6,13 @@
  * All rights reserved.
  */
 
-const Validator = require('uxcore-validator');
-const Button = require('uxcore-button');
-const Constants = require('uxcore-const');
-const React = require('react');
-const deepcopy = require('lodash/cloneDeep');
+import Validator from 'uxcore-validator';
 
-const Table = require('../src');
+import Button from 'uxcore-button';
+import Constants from 'uxcore-const';
+import React from 'react';
+import deepcopy from 'lodash/cloneDeep';
+import Table from '../src';
 // const Select = require('uxcore-select2');
 // const RadioGroup = require('uxcore-radiogroup');
 // const RadioField = require('./RadioField');
@@ -55,6 +55,8 @@ class Demo extends React.Component {
       data: mockData,
       showOtherColumn: false,
     };
+    this.getTableValues = this.getTableValues.bind(this);
+    this.handleDataChange = this.handleDataChange.bind(this);
   }
 
 
@@ -312,11 +314,11 @@ class Demo extends React.Component {
     return (
       <div>
         <Table {...renderProps} ref={(c) => { this.table = c; }} />
-        <Button onClick={me.getTableValues.bind(me)}>获取 Table 的值</Button>
-        <Button onClick={me.handleDataChange.bind(me)}>更改 Data</Button>
+        <Button onClick={me.getTableValues}>获取 Table 的值</Button>
+        <Button onClick={me.handleDataChange}>更改 Data</Button>
       </div>
     );
   }
 }
 
-module.exports = Demo;
+export default Demo;
diff --git a/demo/GridViewModeDemo.jsx b/demo/GridViewModeDemo.jsx
index 192feb6..22d4fb0 100644
--- a/demo/GridViewModeDemo.jsx
+++ b/demo/GridViewModeDemo.jsx
@@ -6,10 +6,10 @@
  * All rights reserved.
  */
 
-const React = require('react');
-const Button = require('uxcore-button');
+import React from 'react';
 
-const Table = require('../src');
+import Button from 'uxcore-button';
+import Table from '../src';
 
 const urlPrefix = window.urlPrefix || 'http://30.9.174.1:3000/';
 const mockData = {
@@ -148,4 +148,4 @@ class Demo extends React.Component {
   }
 }
 
-module.exports = Demo;
+export default Demo;
diff --git a/demo/RadioField.jsx b/demo/RadioField.jsx
index 08a1260..5b9dc81 100644
--- a/demo/RadioField.jsx
+++ b/demo/RadioField.jsx
@@ -1,8 +1,7 @@
-const assign = require('object-assign');
-const RadioGroup = require('uxcore-radiogroup');
-const React = require('react');
-
-const Table = require('../src');
+import assign from 'object-assign';
+import RadioGroup from 'uxcore-radiogroup';
+import React from 'react';
+import Table from '../src';
 
 const CellField = Table.CellField;
 
@@ -50,4 +49,4 @@ RadioField.propTypes = assign({}, CellField.propTypes);
 
 RadioField.defaultProps = assign({}, CellField.defaultProps);
 
-module.exports = RadioField;
+export default RadioField;
diff --git a/demo/TableGroup.jsx b/demo/TableGroup.jsx
index 6824fe9..21b5894 100644
--- a/demo/TableGroup.jsx
+++ b/demo/TableGroup.jsx
@@ -5,9 +5,10 @@
  * Copyright 2014-2015, Uxcore Team, Alinw.
  * All rights reserved.
  */
-const Table = require('../src');
-const Button = require('uxcore-button');
-const React = require('react');
+
+import Button from 'uxcore-button';
+import React from 'react';
+import Table from '../src';
 // const urlPrefix = 'http://30.9.174.1:3000/';
 
 // 第一列为radio的demo
@@ -41,12 +42,12 @@ class Demo extends React.Component {
           {
             dataKey: 'id',
             title: 'ID',
-            width: 50,
+            width: '50px',
           },
           {
             dataKey: 'country',
             title: '国家',
-            width: 200,
+            width: '200px',
             ordered: true,
           },
         ],
@@ -54,7 +55,7 @@ class Demo extends React.Component {
       {
         dataKey: 'city',
         title: () => '城市',
-        width: 150,
+        width: '150px',
         ordered: true,
         message: '都是中国城市',
       },
@@ -72,12 +73,12 @@ class Demo extends React.Component {
           {
             dataKey: 'id',
             title: 'ID',
-            width: 50,
+            width: '50px',
           },
           {
             dataKey: 'country',
             title: '国家',
-            width: 200,
+            width: '200px',
             ordered: true,
           },
         ],
@@ -88,12 +89,12 @@ class Demo extends React.Component {
           {
             dataKey: 'id',
             title: 'ID',
-            width: 50,
+            width: '50px',
           },
           {
             dataKey: 'country',
             title: '国家',
-            width: 200,
+            width: '200px',
             ordered: true,
           },
         ],
@@ -104,12 +105,12 @@ class Demo extends React.Component {
           {
             dataKey: 'id',
             title: 'ID',
-            width: 50,
+            width: '50px',
           },
           {
             dataKey: 'country',
             title: '国家',
-            width: 200,
+            width: '200px',
             ordered: true,
           },
         ],
@@ -167,7 +168,7 @@ class Demo extends React.Component {
           });
         },
       },
-      width: 800,
+      width: '800px',
       showSearch: true,
       showColumnPicker: true,
       fetchUrl,
@@ -194,4 +195,4 @@ class Demo extends React.Component {
   }
 }
 
-module.exports = Demo;
+export default Demo;
diff --git a/demo/TreeGridDemo.jsx b/demo/TreeGridDemo.jsx
index 1ae1168..c9be984 100644
--- a/demo/TreeGridDemo.jsx
+++ b/demo/TreeGridDemo.jsx
@@ -6,8 +6,9 @@
  * All rights reserved.
  */
 
-const Table = require('../src');
-const React = require('react');
+import React from 'react';
+import Table from '../src';
+
 
 const urlPrefix = window.urlPrefix || 'http://30.9.174.1:3000/';
 
@@ -25,13 +26,13 @@ class Demo extends React.Component {
       {
         dataKey: 'id',
         title: 'ID',
-        width: 50,
+        width: '50px',
         hidden: true,
       },
       {
         dataKey: 'country',
         title: '国家国家国家国家',
-        width: 200,
+        width: '200px',
         ordered: true,
         type: 'money',
         fixed: true,
@@ -40,7 +41,7 @@ class Demo extends React.Component {
       {
         dataKey: 'city',
         title: '城市',
-        width: 150,
+        width: '150px',
       },
       {
         dataKey: 'firstName',
@@ -53,13 +54,13 @@ class Demo extends React.Component {
       {
         dataKey: 'email',
         title: 'Email',
-        width: 200,
+        width: '200px',
         ordered: true,
       },
       {
         title: '操作',
         type: 'action',
-        width: 200,
+        width: '200px',
         actions: [
           {
             title: '上移',
@@ -74,8 +75,8 @@ class Demo extends React.Component {
     ];
 
     const renderProps = {
-      height: 400,
-      width: 1000,
+      height: '400px',
+      width: '1000px',
       showSearch: true,
       levels: 2,
       fetchUrl: `${urlPrefix}demo/data.json`,
@@ -95,4 +96,4 @@ class Demo extends React.Component {
   }
 }
 
-module.exports = Demo;
+export default Demo;
diff --git a/demo/index.jsx b/demo/index.jsx
index 6e13026..c5612fb 100644
--- a/demo/index.jsx
+++ b/demo/index.jsx
@@ -6,17 +6,17 @@
  * All rights reserved.
  */
 
-const ReactDOM = require('react-dom');
-const React = require('react');
+import ReactDOM from 'react-dom';
 
-const Demo = require('./GridDemo');
-const Demo2 = require('./GridEditDemo');
-const Demo3 = require('./TreeGridDemo');
-const Demo4 = require('./GridViewModeDemo');
-const Demo5 = require('./TableGroup');
+import React from 'react';
+import Demo from './GridDemo';
+import Demo2 from './GridEditDemo';
+import Demo3 from './TreeGridDemo';
+import Demo4 from './GridViewModeDemo';
+import Demo5 from './TableGroup';
 
 ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo'));
-// ReactDOM.render(<Demo2 />, document.getElementById('UXCoreDemo2'));
+ReactDOM.render(<Demo2 />, document.getElementById('UXCoreDemo2'));
 ReactDOM.render(<Demo3 />, document.getElementById('UXCoreDemo3'));
-// ReactDOM.render(<Demo4 />, document.getElementById('UXCoreDemo4'));
-// ReactDOM.render(<Demo5 />, document.getElementById('UXCoreDemo5'));
+ReactDOM.render(<Demo4 />, document.getElementById('UXCoreDemo4'));
+ReactDOM.render(<Demo5 />, document.getElementById('UXCoreDemo5'));
diff --git a/package.json b/package.json
index 76c4dc2..5b862fd 100644
--- a/package.json
+++ b/package.json
@@ -1,79 +1,81 @@
 {
- "name": "uxcore-table",
- "version": "7.4.3",
- "description": "table ui component for react",
- "repository": "https://github.com/uxcore/uxcore-table.git",
- "author": "zhouquan.yezq",
- "main": "build/index.js",
- "scripts": {
-  "start": "uxcore-tools run start",
-  "server": "uxcore-tools run server",
-  "lint": "uxcore-tools run lint",
-  "build": "uxcore-tools run build",
-  "test": "uxcore-tools run test",
-  "coverage": "uxcore-tools run coverage",
-  "pub": "uxcore-tools run pub",
-  "dep": "uxcore-tools run dep",
-  "tnpm-dep": "uxcore-tools run tnpm-dep",
-  "chrome": "uxcore-tools run chrome",
-  "browsers": "uxcore-tools run browsers",
-  "saucelabs": "uxcore-tools run saucelabs",
-  "update": "uxcore-tools run update"
- },
- "bugs": {
-  "url": "http://github.com/uxcore/uxcore-table/issues"
- },
- "keywords": [
-  "react",
-  "react-component",
-  "uxcore-table",
-  "Grid",
-  "uxcore",
-  "gird",
-  "table"
- ],
- "devDependencies": {
-  "console-polyfill": "^0.2.2",
-  "enzyme": "^2.6.0",
-  "es5-shim": "^4.5.8",
-  "expect.js": "~0.3.1",
-  "kuma-base": "1.x",
-  "react": "0.14.x",
-  "react-addons-test-utils": "0.14.x",
-  "react-dom": "0.14.x",
-  "sinon": "^2.0.0-pre.4",
-  "uxcore-kuma": "*",
-  "uxcore-tools": "0.2.x"
- },
- "dependencies": {
-  "classnames": "^2.1.2",
-  "css-animation": "^1.3.2",
-  "deep-equal": "~1.0.1",
-  "lie": "^3.1.0",
-  "lodash": "^4.15.0",
-  "natty-fetch": "~2.1.1",
-  "object-assign": "^4.0.0",
-  "rc-queue-anim": "^0.13.0",
-  "rc-util": "4.x",
-  "uxcore-animate": "^0.2.0",
-  "uxcore-button": "~0.4.0",
-  "uxcore-cell-field": "^0.2.0",
-  "uxcore-checkbox-cell-field": "^0.1.1",
-  "uxcore-const": "~0.0.1",
-  "uxcore-date-cell-field": "^0.4.0",
-  "uxcore-dropdown": "^0.4.0",
-  "uxcore-empty-data": "^0.1.2",
-  "uxcore-formatter": "~0.1.2",
-  "uxcore-icon": "^0.1.10",
-  "uxcore-menu": "~1.4.0",
-  "uxcore-pagination": "~0.6.0",
-  "uxcore-popover": "^0.5.1",
-  "uxcore-radiogroup": "~1.2.0",
-  "uxcore-select2": "~0.4.0",
-  "uxcore-tooltip": "~0.4.0",
-  "uxcore-tree": "^0.2.4",
-  "uxcore-validator": "~0.1.0"
- },
- "contributors": [],
- "license": "MIT"
+  "name": "uxcore-table",
+  "version": "7.4.3",
+  "description": "table ui component for react",
+  "repository": "https://github.com/uxcore/uxcore-table.git",
+  "author": "zhouquan.yezq",
+  "main": "build/index.js",
+  "scripts": {
+    "start": "uxcore-tools run start",
+    "server": "uxcore-tools run server",
+    "lint": "uxcore-tools run lint",
+    "build": "uxcore-tools run build",
+    "test": "uxcore-tools run test",
+    "coverage": "uxcore-tools run coverage",
+    "pub": "uxcore-tools run pub",
+    "dep": "uxcore-tools run dep",
+    "tnpm-dep": "uxcore-tools run tnpm-dep",
+    "chrome": "uxcore-tools run chrome",
+    "browsers": "uxcore-tools run browsers",
+    "saucelabs": "uxcore-tools run saucelabs",
+    "update": "uxcore-tools run update",
+    "tnpm-update": "uxcore-tools run tnpm-update"
+  },
+  "bugs": {
+    "url": "http://github.com/uxcore/uxcore-table/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "uxcore-table",
+    "Grid",
+    "uxcore",
+    "gird",
+    "table"
+  ],
+  "devDependencies": {
+    "console-polyfill": "^0.2.2",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-15": "^1.0.0",
+    "es5-shim": "^4.5.8",
+    "expect.js": "~0.3.1",
+    "kuma-base": "1.x",
+    "react": "15.x",
+    "react-dom": "15.x",
+    "react-test-renderer": "15.x",
+    "uxcore-kuma": "*",
+    "uxcore-tools": "0.2.x"
+  },
+  "dependencies": {
+    "classnames": "^2.1.2",
+    "css-animation": "^1.3.2",
+    "deep-equal": "~1.0.1",
+    "lie": "^3.1.0",
+    "lodash": "^4.15.0",
+    "natty-fetch": "~2.1.1",
+    "object-assign": "^4.0.0",
+    "prop-types": "15.x",
+    "rc-queue-anim": "^0.13.0",
+    "rc-util": "4.x",
+    "uxcore-animate": "^0.2.0",
+    "uxcore-button": "~0.4.0",
+    "uxcore-cell-field": "^0.2.0",
+    "uxcore-checkbox-cell-field": "^0.1.1",
+    "uxcore-const": "~0.0.1",
+    "uxcore-date-cell-field": "^0.4.0",
+    "uxcore-dropdown": "^0.4.0",
+    "uxcore-empty-data": "^0.1.2",
+    "uxcore-formatter": "~0.1.2",
+    "uxcore-icon": "^0.1.10",
+    "uxcore-menu": "~1.4.0",
+    "uxcore-pagination": "~0.6.0",
+    "uxcore-popover": "^0.5.1",
+    "uxcore-radiogroup": "~1.2.0",
+    "uxcore-select2": "~0.4.0",
+    "uxcore-tooltip": "~0.4.0",
+    "uxcore-tree": "^0.2.4",
+    "uxcore-validator": "~0.1.0"
+  },
+  "contributors": [],
+  "license": "MIT"
 }
\ No newline at end of file
diff --git a/src/ActionBar/ActionBar.jsx b/src/ActionBar/ActionBar.jsx
index cf1f1bf..d6fe824 100644
--- a/src/ActionBar/ActionBar.jsx
+++ b/src/ActionBar/ActionBar.jsx
@@ -8,6 +8,7 @@
 
 
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 import Button from 'uxcore-button';
 import React from 'react';
 import SearchBar from './SearchBar';
@@ -16,7 +17,6 @@ import LinkBar from './LinkBar';
 
 class ActionBar extends React.Component {
 
-
   /**
    *  convert ActionBar config from hash to array
    */
@@ -74,7 +74,7 @@ class ActionBar extends React.Component {
     if (this.props.showSearch) {
       const me = this;
       const searchBarProps = {
-        onSearch: me.handleSearch.bind(me),
+        onSearch: me.handleSearch.bind(this),
         key: 'searchbar',
         placeholder: me.props.searchBarPlaceholder,
       };
@@ -126,13 +126,12 @@ class ActionBar extends React.Component {
       </div>
     );
   }
-
 }
 
 ActionBar.propTypes = {
-  showSearch: React.PropTypes.bool,
-  onSearch: React.PropTypes.func,
-  prefixCls: React.PropTypes.string,
+  showSearch: PropTypes.bool,
+  onSearch: PropTypes.func,
+  prefixCls: PropTypes.string,
 };
 
 ActionBar.defaultProps = {
diff --git a/src/ActionBar/ColumnPicker.jsx b/src/ActionBar/ColumnPicker.jsx
index 7a80036..0a589aa 100644
--- a/src/ActionBar/ColumnPicker.jsx
+++ b/src/ActionBar/ColumnPicker.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Tree from 'uxcore-tree';
 import Popover from 'uxcore-popover';
@@ -70,7 +71,7 @@ class ColumnPicker extends React.Component {
             <TreeNode
               key={item.dataKey}
               title={typeof item.title === 'function' ? item.title() : item.title}
-            />
+            />,
           );
         }
       } else if (isGroup) {
@@ -170,10 +171,10 @@ ColumnPicker.defaultProps = {
   columns: [],
 };
 ColumnPicker.propTypes = {
-  prefixCls: React.PropTypes.string,
-  locale: React.PropTypes.string,
-  columns: React.PropTypes.array,
-  handleColumnPickerChange: React.PropTypes.func,
+  prefixCls: PropTypes.string,
+  locale: PropTypes.string,
+  columns: PropTypes.array,
+  handleColumnPickerChange: PropTypes.func,
 };
 
 ColumnPicker.displayName = 'ColumnPicker';
diff --git a/src/ActionBar/LinkBar.jsx b/src/ActionBar/LinkBar.jsx
index 240ee64..3f548a2 100644
--- a/src/ActionBar/LinkBar.jsx
+++ b/src/ActionBar/LinkBar.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class LinkBar extends React.Component {
 
@@ -36,8 +37,8 @@ class LinkBar extends React.Component {
 }
 
 LinkBar.propTypes = {
-  prefixCls: React.PropTypes.string,
-  config: React.PropTypes.array,
+  prefixCls: PropTypes.string,
+  config: PropTypes.array,
 };
 LinkBar.defaultProps = {
   prefixCls: 'kuma-uxtable-linkbar',
diff --git a/src/ActionBar/SearchBar.jsx b/src/ActionBar/SearchBar.jsx
index 637574b..57ab40c 100644
--- a/src/ActionBar/SearchBar.jsx
+++ b/src/ActionBar/SearchBar.jsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class SearchBar extends React.Component {
 
@@ -15,6 +16,9 @@ class SearchBar extends React.Component {
     this.state = {
       searchTxt: '',
     };
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.doSearch = this.doSearch.bind(this);
   }
 
   onKeyDown(e) {
@@ -43,18 +47,18 @@ class SearchBar extends React.Component {
           className="kuma-input"
           placeholder={placeholder}
           value={this.state.value}
-          onKeyDown={this.onKeyDown.bind(this)}
-          onChange={this.handleChange.bind(this)}
+          onKeyDown={this.onKeyDown}
+          onChange={this.handleChange}
         />
-        <i className="kuma-icon kuma-icon-search" onClick={this.doSearch.bind(this)} />
+        <i className="kuma-icon kuma-icon-search" onClick={this.doSearch} />
       </div>
     );
   }
 }
 
 SearchBar.propTypes = {
-  onSearch: React.PropTypes.func,
-  prefixCls: React.PropTypes.string,
+  onSearch: PropTypes.func,
+  prefixCls: PropTypes.string,
 };
 
 SearchBar.defaultProps = {
diff --git a/src/Cell/CheckBox.jsx b/src/Cell/CheckBox.jsx
index b93b7d3..a8dd5bc 100644
--- a/src/Cell/CheckBox.jsx
+++ b/src/Cell/CheckBox.jsx
@@ -4,9 +4,14 @@
 
 import Const from 'uxcore-const';
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 class CheckBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
 
   getValue() {
     return this.checkbox.checked;
@@ -28,7 +33,7 @@ class CheckBox extends React.Component {
   renderHalfChecked() {
     return (
       <span className="kuma-uxtable-row-selector">
-        <i className="half-checked" onClick={this.handleClick.bind(this)} />
+        <i className="half-checked" onClick={this.handleClick} />
       </span>
     );
   }
@@ -67,9 +72,9 @@ class CheckBox extends React.Component {
 
 
 CheckBox.propTypes = {
-  onChange: React.PropTypes.func,
-  checked: React.PropTypes.bool,
-  className: React.PropTypes.string,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 CheckBox.defaultProps = {
diff --git a/src/Cell/Radio.jsx b/src/Cell/Radio.jsx
index a56c2e1..aa63ff6 100644
--- a/src/Cell/Radio.jsx
+++ b/src/Cell/Radio.jsx
@@ -4,6 +4,7 @@
 
 import Const from 'uxcore-const';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class Radio extends React.Component {
 
@@ -42,8 +43,8 @@ class Radio extends React.Component {
 }
 
 Radio.propTypes = {
-  onChange: React.PropTypes.func,
-  checked: React.PropTypes.bool,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
 };
 
 Radio.defaultProps = {
diff --git a/src/Cell/index.jsx b/src/Cell/index.jsx
index 90197a8..2209eb3 100644
--- a/src/Cell/index.jsx
+++ b/src/Cell/index.jsx
@@ -3,6 +3,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import Const from 'uxcore-const';
 import classnames from 'classnames';
 import deepcopy from 'lodash/cloneDeep';
@@ -28,7 +29,11 @@ const fieldsMap = {
 };
 
 class Cell extends React.Component {
-
+  constructor(props) {
+    super(props);
+    this.showSubComp = this.showSubComp.bind(this);
+    this.handleCheckChange = this.handleCheckChange.bind(this);
+  }
   shouldComponentUpdate(nextProps) {
     // 需要考虑的 prop 包括
     // column, rowData, rowIndex(s), index(s), cellIndex(s), hasSubComp(s)
@@ -138,7 +143,7 @@ class Cell extends React.Component {
               (action.callback || (() => {})).bind(me, rowData, me.props.root))}
           >
             {content}
-          </CollapsedButton.Item>
+          </CollapsedButton.Item>,
         );
       }
     });
@@ -160,7 +165,7 @@ class Cell extends React.Component {
       return (
         <span
           className="kuma-uxtable-tree-icon"
-          onClick={this.showSubComp.bind(this)}
+          onClick={this.showSubComp}
         >
           <i
             className={classnames({
@@ -182,7 +187,7 @@ class Cell extends React.Component {
     const width = column.width;
     const mode = props.rowData.__mode__;
     const style = {
-      width: width || 100,
+      width: width || '100px',
       textAlign: props.column.align ? props.column.align : 'left',
     };
     let content = deepcopy(props.rowData);
@@ -195,8 +200,8 @@ class Cell extends React.Component {
         </div>
       );
     } else if (column.type === 'checkbox' || column.type === 'checkboxSelector') {
-      style.paddingRight = 4;
-      style.paddingLeft = 12;
+      style.paddingRight = '4px';
+      style.paddingLeft = '12px';
 
       const checked = me.getCellData();
       let disable = props.rowSelection.isDisabled
@@ -212,12 +217,12 @@ class Cell extends React.Component {
           mode={props.mode}
           align={props.column.align}
           checked={checked}
-          onChange={me.handleCheckChange.bind(me)}
+          onChange={me.handleCheckChange}
         />
       );
     } else if (column.type === 'radioSelector') {
-      style.paddingRight = 4;
-      style.paddingLeft = 12;
+      style.paddingRight = '4px';
+      style.paddingLeft = '12px';
 
       const checked = me.getCellData();
       let disable = props.rowSelection.isDisabled
@@ -233,7 +238,7 @@ class Cell extends React.Component {
           mode={props.mode}
           align={props.column.align}
           checked={checked}
-          onChange={me.handleCheckChange.bind(me)}
+          onChange={me.handleCheckChange}
         />
       );
     } else if (column.type === 'treeIcon') {
@@ -294,11 +299,11 @@ class Cell extends React.Component {
 }
 
 Cell.propTypes = {
-  cellIndex: React.PropTypes.number,
-  hasSubComp: React.PropTypes.bool,
-  rowData: React.PropTypes.object,
-  jsxprefixCls: React.PropTypes.string,
-  showSubCompCallback: React.PropTypes.func,
+  cellIndex: PropTypes.number,
+  hasSubComp: PropTypes.bool,
+  rowData: PropTypes.object,
+  jsxprefixCls: PropTypes.string,
+  showSubCompCallback: PropTypes.func,
 };
 
 Cell.defaultProps = {
diff --git a/src/CollapsedButton.jsx b/src/CollapsedButton.jsx
index 74f1982..6258ac7 100644
--- a/src/CollapsedButton.jsx
+++ b/src/CollapsedButton.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Button from 'uxcore-button';
 import Dropdown from 'uxcore-dropdown';
@@ -222,7 +223,7 @@ class CollapsedButton extends React.Component {
           <a
             onClick={me.handleMenuItemClick.bind(me, child)}
           >{child.props.children}</a>
-        </Menu.Item>
+        </Menu.Item>,
       );
     });
     const menu = (
@@ -301,10 +302,10 @@ CollapsedButton.displayName = 'CollapsedButton';
 CollapsedButton.Item = CollapsedButtonItem;
 
 CollapsedButton.propTypes = {
-  children: React.PropTypes.any,
-  locale: React.PropTypes.string,
-  maxLength: React.PropTypes.number,
-  onClick: React.PropTypes.func,
+  children: PropTypes.any,
+  locale: PropTypes.string,
+  maxLength: PropTypes.number,
+  onClick: PropTypes.func,
 };
 CollapsedButton.defaultProps = {
   maxLength: 3,
diff --git a/src/Header/MessageIcon.jsx b/src/Header/MessageIcon.jsx
index 590f15e..ddeb2b1 100644
--- a/src/Header/MessageIcon.jsx
+++ b/src/Header/MessageIcon.jsx
@@ -1,6 +1,7 @@
 import Icon from 'uxcore-icon';
 import Tooltip from 'uxcore-tooltip';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const MessageIcon = (props) => {
   if (!props.message) {
@@ -19,8 +20,8 @@ const MessageIcon = (props) => {
 };
 
 MessageIcon.propTypes = {
-  message: React.PropTypes.string,
-  prefixCls: React.PropTypes.string,
+  message: PropTypes.string,
+  prefixCls: PropTypes.string,
 };
 
 
diff --git a/src/Header/index.jsx b/src/Header/index.jsx
index 0985fac..894ddb1 100644
--- a/src/Header/index.jsx
+++ b/src/Header/index.jsx
@@ -4,6 +4,7 @@
 import assign from 'object-assign';
 import classnames from 'classnames';
 import React from 'react';
+import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import CheckBox from '../Cell/CheckBox';
 import util from '../util';
@@ -129,22 +130,22 @@ class Header extends React.Component {
     }
     const noBorderColumn = ['jsxchecked', 'jsxtreeIcon', 'jsxwhite'];
     const style = {
-      width: item.width ? item.width : 100,
+      width: item.width ? item.width : '100px',
       textAlign: item.align ? item.align : 'left',
     };
     let v;
     if (hasGroup) {
       assign(style, {
-        height: 100,
+        height: '100px',
         lineHeight: '100px',
       });
     }
 
     if (item.type === 'checkbox' || item.type === 'checkboxSelector') {
       assign(style, {
-        paddingRight: 4,
-        paddingLeft: 12,
-        width: item.width ? item.width : 92,
+        paddingRight: '4px',
+        paddingLeft: '12px',
+        width: item.width ? item.width : '92px',
       });
 
       const checkBoxProps = {
@@ -321,9 +322,9 @@ class Header extends React.Component {
 }
 
 Header.propTypes = {
-  handleColumnPickerChange: React.PropTypes.func,
-  selectAll: React.PropTypes.func,
-  prefixCls: React.PropTypes.string,
+  handleColumnPickerChange: PropTypes.func,
+  selectAll: PropTypes.func,
+  prefixCls: PropTypes.string,
 };
 
 Header.defaultProps = {
diff --git a/src/Mask.jsx b/src/Mask.jsx
index 3f23543..aeabf6c 100644
--- a/src/Mask.jsx
+++ b/src/Mask.jsx
@@ -5,6 +5,7 @@
 
 import classnames from 'classnames';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Mask = (props) => {
   const { visible, text } = props;
@@ -23,9 +24,9 @@ const Mask = (props) => {
 };
 
 Mask.propTypes = {
-  prefixCls: React.PropTypes.string,
-  visible: React.PropTypes.bool,
-  text: React.PropTypes.string,
+  prefixCls: PropTypes.string,
+  visible: PropTypes.bool,
+  text: PropTypes.string,
 };
 
 Mask.defaultProps = {
diff --git a/src/Row.jsx b/src/Row.jsx
index 21fac73..f5e27e8 100644
--- a/src/Row.jsx
+++ b/src/Row.jsx
@@ -6,6 +6,7 @@ import assign from 'object-assign';
 import deepEqual from 'deep-equal';
 import deepcopy from 'lodash/cloneDeep';
 import React from 'react';
+import PropTypes from 'prop-types';
 import Animate from 'uxcore-animate';
 import Cell from './Cell';
 import CheckBox from './Cell/CheckBox';
@@ -25,10 +26,10 @@ class Row extends React.Component {
     ['rowIndex', 'index', 'mode', 'renderModel', 'fixedColumn',
       'levels', 'addRowClassName', 'renderSubComp', 'visible',
       'checkboxColumnKey', 'locale', 'isHover'].forEach((item) => {
-        if (me.props[item] !== nextProps[item]) {
-          shouldUpdate = true;
-        }
-      });
+      if (me.props[item] !== nextProps[item]) {
+        shouldUpdate = true;
+      }
+    });
     if (!shouldUpdate) {
       ['columns', 'rowData', 'rowSelection', 'actions', 'expandedKeys'].forEach((item) => {
         if (!deepEqual(me.props[item], nextProps[item])) {
@@ -328,22 +329,22 @@ class Row extends React.Component {
 
 
 Row.propTypes = {
-  prefixCls: React.PropTypes.string,
-  renderModel: React.PropTypes.string,
-  checkboxColumnKey: React.PropTypes.string,
-  root: React.PropTypes.any,
-  rowData: React.PropTypes.object,
-  rowSelection: React.PropTypes.object,
-  showSubComp: React.PropTypes.bool,
-  last: React.PropTypes.bool,
-  visible: React.PropTypes.bool,
-  isHover: React.PropTypes.bool,
-  level: React.PropTypes.number,
-  levels: React.PropTypes.number,
-  onClick: React.PropTypes.func,
-  onMouseEnter: React.PropTypes.func,
-  index: React.PropTypes.number,
-  height: React.PropTypes.number,
+  prefixCls: PropTypes.string,
+  renderModel: PropTypes.string,
+  checkboxColumnKey: PropTypes.string,
+  root: PropTypes.any,
+  rowData: PropTypes.object,
+  rowSelection: PropTypes.object,
+  showSubComp: PropTypes.bool,
+  last: PropTypes.bool,
+  visible: PropTypes.bool,
+  isHover: PropTypes.bool,
+  level: PropTypes.number,
+  levels: PropTypes.number,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  index: PropTypes.number,
+  height: PropTypes.number,
 };
 
 Row.defaultProps = {
diff --git a/src/Table.jsx b/src/Table.jsx
index f26e993..f5dbe5a 100644
--- a/src/Table.jsx
+++ b/src/Table.jsx
@@ -17,6 +17,7 @@ import classnames from 'classnames';
 import NattyFetch from 'natty-fetch/dist/natty-fetch.pc';
 import Promise from 'lie';
 import React from 'react';
+import PropTypes from 'prop-types';
 import Animate from 'uxcore-animate';
 import { addClass, removeClass } from 'rc-util/lib/Dom/class';
 import { get } from 'rc-util/lib/Dom/css';
@@ -374,8 +375,8 @@ class Table extends React.Component {
     }
 
     const isJsonp = props.isJsonp === undefined
-        ? /\.jsonp/.test(props.fetchUrl)
-        : props.isJsonp;
+      ? /\.jsonp/.test(props.fetchUrl)
+      : props.isJsonp;
     me.request = NattyFetch.create({
       url: props.fetchUrl,
       data: me.getQueryObj(from, props),
@@ -754,20 +755,20 @@ class Table extends React.Component {
         me.checkboxColumn = item;
         me.checkboxColumnKey = item.dataKey;
         item.width = item.width
-          || (/kuma-uxtable-border-line/.test(actualProps.className) ? 40 : 32);
+          || (/kuma-uxtable-border-line/.test(actualProps.className) ? '40px' : '32px');
         item.align = item.align || 'left';
       }
     }
     // filter the column which has a dataKey 'jsxchecked' & 'jsxtreeIcon'
 
     columns = columns.filter(item =>
-      item.dataKey !== 'jsxchecked' && item.dataKey !== 'jsxtreeIcon'
+      item.dataKey !== 'jsxchecked' && item.dataKey !== 'jsxtreeIcon',
     );
 
     if (!!actualProps.rowSelection && !hasCheckboxColumn) {
       me.checkboxColumn = {
         dataKey: 'jsxchecked',
-        width: (/kuma-uxtable-border-line/.test(actualProps.className) ? 40 : 32),
+        width: (/kuma-uxtable-border-line/.test(actualProps.className) ? '40px' : '32px'),
         type: actualProps.rowSelector,
         align: 'right',
       };
@@ -777,7 +778,7 @@ class Table extends React.Component {
       // no rowSelection but has parentHasCheckbox, render placeholder
       columns = [{
         dataKey: 'jsxwhite',
-        width: (/kuma-uxtable-border-line/.test(actualProps.className) ? 40 : 32),
+        width: (/kuma-uxtable-border-line/.test(actualProps.className) ? '40px' : '32px'),
         type: 'empty',
       }].concat(columns);
     }
@@ -785,7 +786,7 @@ class Table extends React.Component {
       && actualProps.renderModel !== 'tree' && !this.hasFixed) {
       columns = [{
         dataKey: 'jsxtreeIcon',
-        width: 36,
+        width: '36px',
         type: 'treeIcon',
       }].concat(columns);
     } else if (actualProps.passedData) {
@@ -793,7 +794,7 @@ class Table extends React.Component {
       // render tree icon placeholder
       columns = [{
         dataKey: 'jsxwhite',
-        width: 34,
+        width: '34px',
         type: 'empty',
       }].concat(columns);
     }
@@ -976,8 +977,8 @@ class Table extends React.Component {
     if (props.height === 'auto' || props.height === '100%') {
       bodyHeight = props.height;
     } else {
-      bodyHeight = parseInt(props.height, 10) - (headerHeight || (hasGroup ? 100 : 50))
-          - actionBarHeight - pagerHeight;
+      bodyHeight = `${parseInt(props.height, 10) - (headerHeight || (hasGroup ? 100 : 50))
+          - actionBarHeight - pagerHeight}px`;
     }
     const renderBodyProps = {
       columns: state.columns,
@@ -1102,7 +1103,7 @@ Table.defaultProps = {
   rowHeight: 76,
   fetchParams: {},
   currentPage: 1,
-  emptyText: <div style={{ lineHeight: 2 }}>暂无数据</div>,
+  emptyText: <div style={{ lineHeight: '2px' }}>暂无数据</div>,
   searchBarPlaceholder: '搜索表格内容',
   loadingText: 'loading',
   fitResponse: response =>
@@ -1128,64 +1129,64 @@ Table.defaultProps = {
 
 // http://facebook.github.io/react/docs/reusable-components.html
 Table.propTypes = {
-  prefixCls: React.PropTypes.string,
-  locale: React.PropTypes.string,
-  size: React.PropTypes.oneOf(['small', 'middle']),
-  jsxcolumns: React.PropTypes.arrayOf(React.PropTypes.object),
-  width: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.number,
+  prefixCls: PropTypes.string,
+  locale: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'middle']),
+  jsxcolumns: PropTypes.arrayOf(PropTypes.object),
+  width: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
   ]),
-  height: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.number,
+  height: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
   ]),
-  headerHeight: React.PropTypes.number,
-  pageSize: React.PropTypes.number,
-  queryKeys: React.PropTypes.array,
-  fetchDataOnMount: React.PropTypes.bool,
-  doubleClickToEdit: React.PropTypes.bool,
-  showColumnPicker: React.PropTypes.bool,
-  showPager: React.PropTypes.bool,
-  isMiniPager: React.PropTypes.bool,
-  showPagerTotal: React.PropTypes.bool,
-  showPagerQuickJumper: React.PropTypes.bool,
-  pagerSizeOptions: React.PropTypes.array,
-  showHeader: React.PropTypes.bool,
-  showMask: React.PropTypes.bool,
-  showSearch: React.PropTypes.bool,
-  searchBarPlaceholder: React.PropTypes.string,
-  loadingText: React.PropTypes.string,
-  subComp: React.PropTypes.element,
-  emptyText: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element,
-    React.PropTypes.object,
+  headerHeight: PropTypes.number,
+  pageSize: PropTypes.number,
+  queryKeys: PropTypes.array,
+  fetchDataOnMount: PropTypes.bool,
+  doubleClickToEdit: PropTypes.bool,
+  showColumnPicker: PropTypes.bool,
+  showPager: PropTypes.bool,
+  isMiniPager: PropTypes.bool,
+  showPagerTotal: PropTypes.bool,
+  showPagerQuickJumper: PropTypes.bool,
+  pagerSizeOptions: PropTypes.array,
+  showHeader: PropTypes.bool,
+  showMask: PropTypes.bool,
+  showSearch: PropTypes.bool,
+  searchBarPlaceholder: PropTypes.string,
+  loadingText: PropTypes.string,
+  subComp: PropTypes.element,
+  emptyText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.object,
   ]),
-  jsxdata: React.PropTypes.object,
-  fetchUrl: React.PropTypes.string,
-  fetchParams: React.PropTypes.object,
-  currentPage: React.PropTypes.number,
-  rowSelector: React.PropTypes.string,
-  actionBar: React.PropTypes.oneOfType([
-    React.PropTypes.array,
-    React.PropTypes.object,
+  jsxdata: PropTypes.object,
+  fetchUrl: PropTypes.string,
+  fetchParams: PropTypes.object,
+  currentPage: PropTypes.number,
+  rowSelector: PropTypes.string,
+  actionBar: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
   ]),
-  linkBar: React.PropTypes.oneOfType([
-    React.PropTypes.array,
-    React.PropTypes.object,
+  linkBar: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
   ]),
-  fitResponse: React.PropTypes.func,
-  processData: React.PropTypes.func,
-  beforeFetch: React.PropTypes.func,
-  onFetchError: React.PropTypes.func,
-  addRowClassName: React.PropTypes.func,
-  shouldResetExpandedKeys: React.PropTypes.func,
-  passedData: React.PropTypes.object,
-  getSavedData: React.PropTypes.bool,
-  onChange: React.PropTypes.func,
-  renderModel: React.PropTypes.string,
-  levels: React.PropTypes.number,
+  fitResponse: PropTypes.func,
+  processData: PropTypes.func,
+  beforeFetch: PropTypes.func,
+  onFetchError: PropTypes.func,
+  addRowClassName: PropTypes.func,
+  shouldResetExpandedKeys: PropTypes.func,
+  passedData: PropTypes.object,
+  getSavedData: PropTypes.bool,
+  onChange: PropTypes.func,
+  renderModel: PropTypes.string,
+  levels: PropTypes.number,
 };
 
 Table.displayName = 'Table';
diff --git a/src/Tbody.jsx b/src/Tbody.jsx
index 1050b9e..5dc9899 100644
--- a/src/Tbody.jsx
+++ b/src/Tbody.jsx
@@ -5,6 +5,7 @@
 import deepcopy from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
+import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import { hasClass } from 'rc-util/lib/Dom/class';
 import EmptyData from 'uxcore-empty-data';
@@ -219,20 +220,20 @@ class Tbody extends React.Component {
 }
 
 Tbody.propTypes = {
-  jsxprefixCls: React.PropTypes.string,
-  fixedColumn: React.PropTypes.string,
-  data: React.PropTypes.array,
-  emptyText: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.object,
+  jsxprefixCls: PropTypes.string,
+  fixedColumn: PropTypes.string,
+  data: PropTypes.array,
+  emptyText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
   ]),
-  height: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.number,
+  height: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
   ]),
-  mask: React.PropTypes.bool,
-  onScroll: React.PropTypes.func,
-  root: React.PropTypes.any,
+  mask: PropTypes.bool,
+  onScroll: PropTypes.func,
+  root: PropTypes.any,
 };
 
 Tbody.defaultProps = {
diff --git a/src/methods.js b/src/methods.js
index 6f22fc2..158af18 100644
--- a/src/methods.js
+++ b/src/methods.js
@@ -200,7 +200,7 @@ function doValidate() {
   const fieldKeys = Object.keys(me.fields);
   fieldKeys.forEach((name) => {
     const fieldPass = me.fields[name]();
-      // if one field fails to pass, the table fails to pass
+    // if one field fails to pass, the table fails to pass
     if (pass) {
       pass = fieldPass;
     }
diff --git a/tests/common.spec.jsx b/tests/common.spec.jsx
index a332605..6b1e11a 100644
--- a/tests/common.spec.jsx
+++ b/tests/common.spec.jsx
@@ -1,10 +1,13 @@
 import expect from 'expect.js';
 import React from 'react';
-import { mount } from 'enzyme';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
 import sinon from 'sinon';
 
 import Table from '../src';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 const common = {
   jsxcolumns: [
     { dataKey: 'id', title: 'ID', width: 50 },
@@ -80,30 +83,30 @@ describe('Table', () => {
       }
     }
     const wrapper = mount(<Demo />);
-    wrapper.node.changeState();
+    wrapper.instance().changeState();
     expect(Table.prototype.componentWillReceiveProps.calledOnce).to.be(true);
-    expect(wrapper.node.table.state.data.data[0].id).to.be('2');
+    expect(wrapper.instance().table.state.data.data[0].id).to.be('2');
   });
   describe('Props', () => {
     let wrapper;
     it('width support number', () => {
       wrapper = mount(<Table width={500} />);
-      expect(wrapper.node.getDom().style.width).to.be('500px');
+      expect(wrapper.instance().getDom().style.width).to.be('500px');
     });
 
     it('width support string', () => {
       wrapper = mount(<Table width="500px" />);
-      expect(wrapper.node.getDom().style.width).to.be('500px');
+      expect(wrapper.instance().getDom().style.width).to.be('500px');
     });
 
     it('height support number', () => {
       wrapper = mount(<Table height={500} />);
-      expect(wrapper.node.getDom().style.height).to.be('500px');
+      expect(wrapper.instance().getDom().style.height).to.be('500px');
     });
 
     it('height support string', () => {
       wrapper = mount(<Table height="500px" />);
-      expect(wrapper.node.getDom().style.height).to.be('500px');
+      expect(wrapper.instance().getDom().style.height).to.be('500px');
     });
 
     it('showColumnPicker', () => {
@@ -113,7 +116,7 @@ describe('Table', () => {
 
     it('showColumnPicker with handleColumnPickerChange', () => {
       wrapper = mount(<Table {...common} showColumnPicker />);
-      wrapper.node.handleColumnPickerChange(['country'], '__common__');
+      wrapper.instance().handleColumnPickerChange(['country'], '__common__');
       expect(wrapper.state('columns').filter(item => item.dataKey === 'id')[0].hidden).to.be(true);
     });
 
@@ -140,22 +143,22 @@ describe('Table', () => {
     it('showPagerTotal', () => {
       const wrapper1 = mount(<Table {...common} />);
       const wrapper2 = mount(<Table {...common} showPagerTotal={false} />);
-      expect(wrapper1.node.getPager().props.showTotal).to.be(true);
-      expect(wrapper2.node.getPager().props.showTotal).to.be(false);
+      expect(wrapper1.instance().getPager().props.showTotal).to.be(true);
+      expect(wrapper2.instance().getPager().props.showTotal).to.be(false);
     });
 
     it('showPagerSizeChanger', () => {
       const wrapper1 = mount(<Table {...common} />);
       const wrapper2 = mount(<Table {...common} showPagerSizeChanger={false} />);
-      expect(wrapper1.node.getPager().props.showSizeChanger).to.be(true);
-      expect(wrapper2.node.getPager().props.showSizeChanger).to.be(false);
+      expect(wrapper1.instance().getPager().props.showSizeChanger).to.be(true);
+      expect(wrapper2.instance().getPager().props.showSizeChanger).to.be(false);
     });
 
     it('isMiniPager', () => {
       const wrapper1 = mount(<Table {...common} />);
       const wrapper2 = mount(<Table {...common} isMiniPager />);
-      expect(wrapper1.find('.mini')).to.have.length(0);
-      expect(wrapper2.find('.mini')).to.have.length(1);
+      expect(wrapper1.find('ul.mini')).to.have.length(0);
+      expect(wrapper2.find('ul.mini')).to.have.length(1);
     });
 
     it('actionBar', () => {
@@ -178,7 +181,7 @@ describe('Table', () => {
           ]}
         />
       );
-      expect(wrapper.find('.kuma-uxtable-actionbar-item')).to.have.length(3);
+      expect(wrapper.find('button.kuma-uxtable-actionbar-item')).to.have.length(3);
     });
 
     it('linkBar', () => {
@@ -220,7 +223,7 @@ describe('Table', () => {
           }}
         />
       );
-      wrapper.find('.kuma-uxtable-row .kuma-checkbox').node.checked = true;
+      wrapper.find('.kuma-uxtable-row .kuma-checkbox').instance().checked = true;
       wrapper.find('.kuma-uxtable-row .kuma-checkbox').simulate('change');
     });
 
@@ -239,9 +242,9 @@ describe('Table', () => {
           }}
         />
       );
-      wrapper.find('.kuma-uxtable-row .kuma-checkbox').node.checked = true;
+      wrapper.find('.kuma-uxtable-row .kuma-checkbox').instance().checked = true;
       wrapper.find('.kuma-uxtable-row .kuma-checkbox').simulate('change');
-      wrapper.find('.kuma-uxtable-row .kuma-checkbox').node.checked = false;
+      wrapper.find('.kuma-uxtable-row .kuma-checkbox').instance().checked = false;
       wrapper.find('.kuma-uxtable-row .kuma-checkbox').simulate('change');
     });
 
@@ -258,7 +261,7 @@ describe('Table', () => {
           }}
         />
       );
-      wrapper.find('.kuma-uxtable-header .kuma-checkbox').node.checked = true;
+      wrapper.find('.kuma-uxtable-header .kuma-checkbox').instance().checked = true;
       wrapper.find('.kuma-uxtable-header .kuma-checkbox').simulate('change');
     });
 
@@ -276,9 +279,9 @@ describe('Table', () => {
           }}
         />
       );
-      wrapper.find('.kuma-uxtable-header .kuma-checkbox').node.checked = true;
+      wrapper.find('.kuma-uxtable-header .kuma-checkbox').instance().checked = true;
       wrapper.find('.kuma-uxtable-header .kuma-checkbox').simulate('change');
-      wrapper.find('.kuma-uxtable-header .kuma-checkbox').node.checked = false;
+      wrapper.find('.kuma-uxtable-header .kuma-checkbox').instance().checked = false;
       wrapper.find('.kuma-uxtable-header .kuma-checkbox').simulate('change');
     });
 
@@ -335,7 +338,7 @@ describe('Table', () => {
           }}
         />
       );
-      wrapper.find('.kuma-uxtable-row .kuma-checkbox').at(0).node.checked = true;
+      wrapper.find('.kuma-uxtable-row .kuma-checkbox').at(0).instance().checked = true;
       wrapper.find('.kuma-uxtable-row .kuma-checkbox').at(0).simulate('change');
     });
 
diff --git a/tests/inlineedit.spec.jsx b/tests/inlineedit.spec.jsx
index 51b5677..f363497 100644
--- a/tests/inlineedit.spec.jsx
+++ b/tests/inlineedit.spec.jsx
@@ -1,9 +1,11 @@
 import expect from 'expect.js';
 import React from 'react';
-import { mount } from 'enzyme';
-
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
 import Table from '../src';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 const common = {
   // jsxcolumns: [
   //   { dataKey: 'id', title: 'ID', width: 50, hidden: true },
@@ -50,7 +52,7 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input').at(0).node.value).to.be('1');
+    expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input').at(0).instance().value).to.be('1');
   });
 
   it('type select', () => {
@@ -99,8 +101,9 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.editRow(wrapper.node.getData().data.data[0], () => {
-      expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(1);
+    wrapper.instance().editRow(wrapper.instance().getData().data.data[0], () => {
+      // expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(1);
+      expect(wrapper.find('.kuma-input')).to.have.length(1);
       done();
     });
   });
@@ -115,8 +118,9 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.editAllRow(() => {
-      expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(1);
+    wrapper.instance().editAllRow(() => {
+      // expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(1);
+      expect(wrapper.find('.kuma-input')).to.have.length(1);
       done();
     });
   });
@@ -130,8 +134,10 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.viewRow(wrapper.node.getData().data.data[0], () => {
-      expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(0);
+    window.wrapper = wrapper;
+    wrapper.instance().viewRow(wrapper.instance().getData().data.data[0], () => {
+      // expect(wrapper.find('li.kuma-uxtable-row').find('div.kuma-uxtable-cell').find('input.kuma-input')).to.have.length(0);
+      expect(wrapper.find('li.kuma-uxtable-row').find('div.kuma-uxtable-cell')).to.have.length(0);
       done();
     });
   });
@@ -145,7 +151,8 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.saveRow(wrapper.node.getData().data.data[0], () => {
+    window.wrapper = wrapper;
+    wrapper.instance().saveRow(wrapper.instance().getData().data.data[0], () => {
       expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(0);
       done();
     });
@@ -160,7 +167,7 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.saveAllRow(() => {
+    wrapper.instance().saveAllRow(() => {
       expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input')).to.have.length(0);
       done();
     });
@@ -175,8 +182,8 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.addEmptyRow(() => {
-      expect(wrapper.node.getData().data.data).to.have.length(2);
+    wrapper.instance().addEmptyRow(() => {
+      expect(wrapper.instance().getData().data.data).to.have.length(2);
       done();
     });
   });
@@ -190,9 +197,9 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.addRow({ id: '2' }, () => {
-      expect(wrapper.node.getData().data.data).to.have.length(2);
-      expect(wrapper.node.getData().data.data[1].id).to.be('2');
+    wrapper.instance().addRow({ id: '2' }, () => {
+      expect(wrapper.instance().getData().data.data).to.have.length(2);
+      expect(wrapper.instance().getData().data.data[1].id).to.be('2');
       done();
     });
   });
@@ -207,8 +214,8 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.delRow(wrapper.node.getData().data.data[0], () => {
-      expect(wrapper.node.getData().data.data).to.have.length(0);
+    wrapper.instance().delRow(wrapper.instance().getData().data.data[0], () => {
+      expect(wrapper.instance().getData().data.data).to.have.length(0);
       done();
     });
   });
@@ -227,8 +234,8 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.moveRowDown(wrapper.node.getData().data.data[0], () => {
-      expect(wrapper.node.getData().data.data[0].id).to.be('2');
+    wrapper.instance().moveRowDown(wrapper.instance().getData().data.data[0], () => {
+      expect(wrapper.instance().getData().data.data[0].id).to.be('2');
       done();
     });
   });
@@ -247,8 +254,8 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    wrapper.node.moveRowUp(wrapper.node.getData().data.data[1], () => {
-      expect(wrapper.node.getData().data.data[0].id).to.be('2');
+    wrapper.instance().moveRowUp(wrapper.instance().getData().data.data[1], () => {
+      expect(wrapper.instance().getData().data.data[0].id).to.be('2');
       done();
     });
   });
@@ -263,7 +270,7 @@ describe('inlineEdit', () => {
         }]}
       />
     );
-    expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input').at(0).node.value).to.be('1');
+    expect(wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input').at(0).instance().value).to.be('1');
   });
 
   it.skip('type select with remote data source', (done) => {
@@ -336,7 +343,7 @@ describe('inlineEdit', () => {
       />
     );
     const input = wrapper.find('.kuma-uxtable-row').find('.kuma-uxtable-cell').find('.kuma-input').at(0);
-    input.node.value = '测试';
+    input.instance().value = '测试';
     input.simulate('change');
   });
 });
diff --git a/tests/subcomp.spec.jsx b/tests/subcomp.spec.jsx
index 5a809dc..1c0615a 100644
--- a/tests/subcomp.spec.jsx
+++ b/tests/subcomp.spec.jsx
@@ -1,10 +1,13 @@
 import expect from 'expect.js';
 import React from 'react';
-import { mount } from 'enzyme';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
 // import sinon from 'sinon';
 
 import Table from '../src';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 const common = {
   jsxcolumns: [
     { dataKey: 'id', title: 'ID', width: 50, hidden: true },
@@ -40,7 +43,7 @@ describe('SubComp', () => {
     wrapper = mount(
       <Table {...common} renderSubComp={() => <div>1</div>} />
     );
-    wrapper.node.toggleSubComp(wrapper.node.getData().data.data[0]);
+    wrapper.instance().toggleSubComp(wrapper.instance().getData().data.data[0]);
     expect(wrapper.find('.kuma-uxtable-subrow').contains(<div>1</div>)).to.be(true);
   });
 });
diff --git a/tests/tablegroup.spec.jsx b/tests/tablegroup.spec.jsx
index 9327c01..c7da077 100644
--- a/tests/tablegroup.spec.jsx
+++ b/tests/tablegroup.spec.jsx
@@ -1,9 +1,11 @@
 import expect from 'expect.js';
 import React from 'react';
-import { mount } from 'enzyme';
-
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
 import Table from '../src';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 const common = {
   jsxcolumns: [
     { dataKey: 'id', title: 'ID', width: 50, hidden: true },
diff --git a/tests/tree.spec.jsx b/tests/tree.spec.jsx
index 4a7e937..bc93eb5 100644
--- a/tests/tree.spec.jsx
+++ b/tests/tree.spec.jsx
@@ -1,10 +1,13 @@
 import expect from 'expect.js';
 import React from 'react';
-import { mount } from 'enzyme';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
 // import sinon from 'sinon';
 
 import Table from '../src';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 const common = {
   jsxcolumns: [
     { dataKey: 'id', title: 'ID', width: 50, hidden: true },
@@ -146,7 +149,7 @@ describe('Tree', () => {
         }}
       />
     );
-    wrapper.find('.kuma-uxtable-row .kuma-checkbox').at(0).node.checked = true;
+    wrapper.find('.kuma-uxtable-row .kuma-checkbox').at(0).instance().checked = true;
     wrapper.find('.kuma-uxtable-row .kuma-checkbox').at(0).simulate('change');
   });