新增autofocus的下拉框、增加示例

build/render/SelectRender.js

@@ -71,6 +71,8 @@ var SelectRender = function (_Component) {
   }
 
   SelectRender.prototype.render = function render() {
+    var _this2 = this;
+
     var _state = this.state,
         value = _state.value,
         editable = _state.editable;
@@ -87,6 +89,16 @@ var SelectRender = function (_Component) {
           _beeSelect2["default"],
           _extends({}, this.props, {
             value: this.state.value,
+            onBlur: function onBlur(value) {
+              console.log(value);
+              // this.props.onBlur();
+            },
+
+            onFocus: function onFocus(value) {
+              console.log(value);
+              // this.props.onBlur();
+            },
+
             onChange: this.handleChange
           }),
           this.props.children
@@ -103,6 +115,12 @@ var SelectRender = function (_Component) {
           _beeSelect2["default"],
           _extends({}, this.props, {
             value: this.state.value,
+            onBlur: function onBlur() {
+              _this2.setState({
+                editable: true
+              });
+              _this2.props.onBlur();
+            },
             onChange: this.handleChange
           }),
           this.props.children

demo/demolist/Demo19.js

@@ -0,0 +1,246 @@
+/**
+*
+* @title 编辑态表格
+* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
+*
+*/
+
+import Button from "bee-button";
+import React, { Component } from "react";
+import Table from "../../src";
+import Animate from "bee-animate";
+import Tooltip from "bee-tooltip";
+import Icon from "bee-icon";
+import Input from "bee-form-control";
+import Checkbox from "bee-checkbox";
+import Select from "bee-select";
+import InputRender from "../../build/render/InputRender.js";
+import DateRender from "../../build/render/DateRender.js";
+import SelectRender from "../../build/render/SelectRender.js";
+
+const format = "YYYY-MM-DD";
+const format2 = "YYYY-MM";
+const format3 = "YYYY-MM-DD HH:mm:ss";
+
+const dateInputPlaceholder = "选择日期";
+const dateInputPlaceholder2 = "选择年月";
+const dataSource = [
+  {
+    key: "boyuzhou",
+    value: "jack"
+  },
+  {
+    key: "renhualiu",
+    value: "lucy"
+  },
+  {
+    key: "yuzhao",
+    value: "yiminghe"
+  }
+];
+class Demo19 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [
+        {
+          key: "0",
+          name: "沉鱼",
+          number: "10",
+          age: "y",
+          address: "jack",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "1",
+          name: "落雁",
+          number: "100",
+          age: "y",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "2",
+          name: "闭月",
+          number: "1000",
+          age: "n",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "3",
+          name: "羞花",
+          number: "9999",
+          age: "y",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        }
+      ],
+      count: 4
+    };
+    this.columns = [ 
+      {
+        title: "货币输入",
+        dataIndex: "number",
+        key: "number",
+        width: "150px",
+        render: (text, record, index) => (
+          <InputRender
+            format="Currency"
+            name="name"
+            placeholder="请输入姓名"
+            value={text}
+            isclickTrigger={true}
+            check={this.check}
+            onChange={this.onInputChange(index, "name")}
+            isRequire={true}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
+          />
+        )
+      },
+       
+      {
+        title:(<div>下拉框的div</div>),
+        dataIndex: "address",
+        key: "address",
+        width: "200px",
+        render: (text, record, index) => {
+          return (
+            <SelectRender
+              dataSource={dataSource}
+              isclickTrigger={true}
+              value={text}
+              onChange={this.onSelectChange(index, "address")}
+              onFocus={this.handFocus}
+              onBlur={this.onBlur}
+              autofocus
+            >
+              <Option value="jack">boyuzhou</Option>
+              <Option value="lucy">renhualiu</Option>
+              <Option value="disabled" disabled>
+                Disabled
+              </Option>
+              <Option value="yiminghe">yuzhao</Option>
+            </SelectRender>
+          );
+        }
+      }
+    ];
+  }
+  check = (flag, obj) => {
+    console.log(flag);
+    console.log(obj);
+  };
+
+  handFocus = (value,e) => {
+    console.log(value+` 获取焦点事件`);
+  };
+  onBlur = (value,e) => {
+    console.log(value+` onBlur`);
+  };
+
+  onInputChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onCheckChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onSelectChange = (index, key) => {
+    return value => {
+      console.log(`selected ${value}`);
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onDateChange = d => {
+    console.log(d);
+  };
+  onDateSelect = d => {
+    console.log(d);
+  };
+  onDelete = index => {
+    return () => {
+      const dataSource = [...this.state.dataSource];
+      dataSource.splice(index, 1);
+      this.setState({ dataSource });
+    };
+  };
+  handleAdd = () => {
+    const { count, dataSource } = this.state;
+    const newData = {
+      key: count,
+      name: `凤姐 ${count}`,
+      age: 32,
+      address: "jack",
+      datepicker: "2017-06-12",
+      MonthPicker: "2017-02"
+    };
+    this.setState({
+      dataSource: [...dataSource, newData],
+      count: count + 1
+    });
+  };
+
+  getBodyWrapper = body => {
+    return (
+      <Animate
+        transitionName="move"
+        component="tbody"
+        className={body.props.className}
+      >
+        {body.props.children}
+      </Animate>
+    );
+  };
+  getData = () => {
+    console.log(this.state.dataSource);
+  };
+  render() {
+    const { dataSource } = this.state;
+    const columns = this.columns;
+    return (
+      <div>
+        <Button
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.handleAdd}
+        >
+          添加一行
+        </Button>
+        <Button
+          style={{marginLeft:"5px"}}
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.getData}
+        >
+          获取数据
+        </Button>
+        <Table
+          data={dataSource}
+          columns={columns}
+          getBodyWrapper={this.getBodyWrapper}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo19;

dist/demo.css

@@ -6766,7 +6766,7 @@ ul {
     zoom: 1; }
     .u-select .u-select-arrow:before {
       display: block;
-      font-family: "uf" !important;
+      font-family: "uf";
       content: "\e609";
       transition: transform 0.2s ease; }
   .u-select .u-select-selection {
@@ -6975,7 +6975,7 @@ ul {
     width: auto;
     padding: 0; }
     .u-select-selection--multiple .u-select-search--inline .u-select-search-field {
-      width: 0.75em !important; }
+      width: 0.75em; }
   .u-select-selection--multiple .u-select-selection-rendered {
     margin-left: 5px;
     margin-bottom: -3px;
@@ -7032,7 +7032,7 @@ ul {
     padding: 0 0 0 8px; }
   .u-select-selection--multiple .u-select-selection-choice-remove:before {
     display: block;
-    font-family: "uf" !important; }
+    font-family: "uf"; }
   .u-select-selection--multiple .u-select-selection-choice-remove {
     filter: none; }
   .u-select-selection--multiple .u-select-selection-choice-remove {
@@ -7040,7 +7040,7 @@ ul {
   .u-select-selection--multiple .u-select-selection-choice-remove:hover {
     color: #404040; }
   .u-select-selection--multiple .u-select-selection-choice-remove:before {
-    font-family: 'uf' !important;
+    font-family: 'uf';
     content: "\e602"; }
 
 .u-select-open .u-select-arrow {

package.json

@@ -1,88 +1,88 @@
 {
- "name": "bee-table",
+  "name": "bee-table",
- "version": "1.1.2",
+  "version": "1.1.2",
- "description": "Table ui component for react",
+  "description": "Table ui component for react",
- "keywords": [
+  "keywords": [
-  "react",
+    "react",
-  "react-component",
+    "react-component",
-  "bee-table",
+    "bee-table",
-  "iuap-design",
+    "iuap-design",
-  "tinper-bee",
+    "tinper-bee",
-  "Table"
+    "Table"
- ],
- "engines": {
-  "node": ">=4.0.0"
- },
- "jest": {
-  "moduleFileExtensions": [
-   "js",
-   "jsx"
   ],
-  "transform": {
+  "engines": {
-   "^.+\\.js$": "babel-jest"
+    "node": ">=4.0.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  },
+  "homepage": "https://github.com/tinper-bee/bee-table.git",
+  "author": "Yonyou FED",
+  "repository": "http://github.com/tinper-bee/bee-table",
+  "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "config": {
+    "port": 3000,
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "scripts": {
+    "dev": "bee-tools run start",
+    "build": "bee-tools run build",
+    "lint": "bee-tools run lint",
+    "test": "jest",
+    "chrome": "bee-tools run chrome",
+    "coveralls": "jest",
+    "browsers": "bee-tools run browsers",
+    "pub": "bee-tools run pub",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+  },
+  "dependencies": {
+    "bee-loading": "^1.0.3",
+    "bee-select": "file:///Users/jony/workspaces/yonyou/component/bee-select",
+    "classnames": "^2.2.5",
+    "object-path": "^0.11.3",
+    "shallowequal": "^1.0.2",
+    "tinper-bee-core": "latest",
+    "warning": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0",
+    "react-dom": "^15.3.0 || ^16.0",
+    "prop-types": "15.6.0"
+  },
+  "devDependencies": {
+    "babel-jest": "^22.0.4",
+    "bee-animate": "latest",
+    "bee-button": "latest",
+    "bee-checkbox": "^1.0.8",
+    "bee-datepicker": "latest",
+    "bee-form": "^1.0.8",
+    "bee-form-control": "latest",
+    "bee-icon": "latest",
+    "bee-input-group": "latest",
+    "bee-layout": "latest",
+    "bee-pagination": "latest",
+    "bee-panel": "latest",
+    "bee-popconfirm": "^1.0.1",
+    "bee-tools": "latest",
+    "bee-tooltip": "^1.0.2",
+    "chai": "^3.5.0",
+    "console-polyfill": "~0.2.1",
+    "cz-conventional-changelog": "^2.1.0",
+    "enzyme": "^2.9.1",
+    "es5-shim": "~4.1.10",
+    "jest": "^22.0.4",
+    "react": "^15.5.0",
+    "react-addons-test-utils": "^15.5.0",
+    "react-dom": "^15.5.0"
   }
- },
- "homepage": "https://github.com/tinper-bee/bee-table.git",
- "author": "Yonyou FED",
- "repository": "http://github.com/tinper-bee/bee-table",
- "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
- "license": "MIT",
- "main": "./build/index.js",
- "config": {
-  "port": 3000,
-  "commitizen": {
-   "path": "./node_modules/cz-conventional-changelog"
-  }
- },
- "scripts": {
-  "dev": "bee-tools run start",
-  "build": "bee-tools run build",
-  "lint": "bee-tools run lint",
-  "test": "jest",
-  "chrome": "bee-tools run chrome",
-  "coveralls": "jest",
-  "browsers": "bee-tools run browsers",
-  "pub": "bee-tools run pub",
-  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
- },
- "dependencies": {
-  "bee-loading": "^1.0.3",
-  "classnames": "^2.2.5",
-  "object-path": "^0.11.3",
-  "shallowequal": "^1.0.2",
-  "tinper-bee-core": "latest",
-  "warning": "^3.0.0"
- },
- "peerDependencies": {
-  "react": "^15.3.0 || ^16.0",
-  "react-dom": "^15.3.0 || ^16.0",
-  "prop-types": "15.6.0"
- },
- "devDependencies": {
-  "babel-jest": "^22.0.4",
-  "bee-animate": "latest",
-  "bee-button": "latest",
-  "bee-checkbox": "^1.0.8",
-  "bee-datepicker": "latest",
-  "bee-form": "^1.0.8",
-  "bee-form-control": "latest",
-  "bee-icon": "latest",
-  "bee-input-group": "latest",
-  "bee-layout": "latest",
-  "bee-pagination": "latest",
-  "bee-panel": "latest",
-  "bee-popconfirm": "^1.0.1",
-  "bee-select": "latest",
-  "bee-tools": "latest",
-  "bee-tooltip": "^1.0.2",
-  "chai": "^3.5.0",
-  "console-polyfill": "~0.2.1",
-  "cz-conventional-changelog": "^2.1.0",
-  "enzyme": "^2.9.1",
-  "es5-shim": "~4.1.10",
-  "jest": "^22.0.4",
-  "react": "^15.5.0",
-  "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^15.5.0"
- }
 }

src/render/SelectRender.js

@@ -40,6 +40,16 @@ export default class SelectRender extends Component {
           <Select
             {...this.props}
             value={this.state.value}
+            onBlur={(value)=>{
+              console.log(value);
+              // this.props.onBlur();
+            }}
+
+            onFocus={(value)=>{
+              console.log(value);
+              // this.props.onBlur();
+            }}
+
             onChange={this.handleChange}
           >
             {this.props.children}
@@ -55,6 +65,12 @@ export default class SelectRender extends Component {
           <Select
             {...this.props}
             value={this.state.value}
+            onBlur={()=>{ 
+              this.setState({
+              editable:true
+            });
+            this.props.onBlur();
+          }}
             onChange={this.handleChange}
           >
             {this.props.children}