初步增加table校验，并增加相关例子和文档

demo/TableDemo.scss

@@ -3,12 +3,15 @@
 @import "../node_modules/bee-layout/src/Layout.scss";
 @import "../node_modules/bee-button/src/Button.scss";
 @import "../node_modules/bee-transition/src/Transition.scss";
-@import "../src/Table.scss";
+// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
-@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
 @import "../node_modules/bee-form-control/src/FormControl.scss";
 @import "../node_modules/bee-pagination/src/Pagination.scss";
 @import "../node_modules/bee-checkbox/src/Checkbox.scss";
 @import "../node_modules/bee-select/src/Select.scss";
+@import "../node_modules/bee-form/src/Form.scss";
+@import "../node_modules/bee-tooltip/src/Tooltip.scss";
+@import "../src/Table.scss";
+
 
 //引入日期控件样式文件
 @import "../node_modules/bee-datepicker/src/datepicker.scss";

demo/demolist/Demo14.js

@@ -9,11 +9,11 @@ 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 Popconfirm from "bee-popconfirm";
 import InputRender from "../../src/render/InputRender.js";
 import DateRender from "../../src/render/DateRender.js";
 import SelectRender from "../../src/render/SelectRender.js";
@@ -81,9 +81,22 @@ class Demo14 extends React.Component {
         width: "150px",
         render: (text, record, index) => (
           <InputRender
+            name="name"
+            placeholder="请输入姓名"
             value={text}
             isclickTrigger={true}
+            check={this.check}
             onChange={this.onInputChange(index, "name")}
+            formItemClassName="formItem-style"
+            mesClassName="errMessage-style"
+            isRequire={true}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
+            reg={/^[0-9]+$/}
           />
         )
       },
@@ -94,10 +107,22 @@ class Demo14 extends React.Component {
         width: "150px",
         render: (text, record, index) => (
           <InputRender
-            value={text}
             format='Currency'
+            name="name"
+            placeholder="请输入姓名"
+            value={text}
             isclickTrigger={true}
-            onChange={this.onInputChange(index, "number")}
+            check={this.check}
+            onChange={this.onInputChange(index, "name")}
+            formItemClassName="formItem-style"
+            mesClassName="errMessage-style"
+            isRequire={true}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
           />
         )
       },
@@ -173,6 +198,10 @@ class Demo14 extends React.Component {
       }
     ];
   }
+  check=(flag, obj)=>{
+    console.log(flag);
+    console.log(obj);
+  }
 
   onInputChange = (index, key) => {
     return value => {

demo/demolist/Demo15.js

@@ -1,64 +1,33 @@
 /**
-*
+ *
-* @title 嵌套子表格
+ * @title 编辑态表格（包含校验）
-* @description 通过expandedRowRender参数来实现子表格
+ * @description 块级布局
-*
+ *
-*/
+ */
-
 import React, { Component } from "react";
-import Table from "../../src";
+import ReactDOM from "react-dom";
-
+import Form from "bee-form";
-const columns15 = [
+import FormControl from "bee-form-control";
-  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+import Label from "bee-label";
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+import FormGroup from "bee-form-group";
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
-  {
-    title: "操作",
-    dataIndex: "d",
-    key: "d",
-    render(text, record, index) {
-      return (
-        <a
-          href="#"
-          onClick={() => {
-            alert("这是第" + index + "列，内容为:" + text);
-          }}
-        >
-          一些操作
-        </a>
-      );
-    }
-  }
-];
-
-const data15 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
-];
-
 class Demo15 extends Component {
-  expandedRowRender = () => {
+  check = (flag, obj) => {
-    return (
+    console.log(flag);
-      <Table
+    console.log(obj);
-        columns={columns15}
-        data={data15}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
-      />
-    );
   };
   render() {
     return (
-      <Table
+      <Form.FormItem
-        columns={columns15}
+       mesClassName="mesclassname"
-        data={data15}
+        labelName="姓名"
-        expandedRowRender={this.expandedRowRender}
+        isRequire={true}
-        title={currentData => <div>标题: 这是一个标题</div>}
+        method="blur"
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
+        reg={/^[0-9]+$/}
-      />
+        check={this.check}
+      >
+        <FormControl name="age" placeholder="请输入数字" />
+      </Form.FormItem>
     );
   }
 }
-
 export default Demo15;

demo/demolist/Demo16.js

@@ -0,0 +1,65 @@
+/**
+*
+* @title 嵌套子表格
+* @description 通过expandedRowRender参数来实现子表格
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const columns16 = [
+  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    render(text, record, index) {
+      return (
+        <a
+          href="#"
+          onClick={() => {
+            alert("这是第" + index + "列，内容为:" + text);
+          }}
+        >
+          一些操作
+        </a>
+      );
+    }
+  }
+];
+
+const data16 = [
+  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+];
+
+class Demo16 extends Component {
+  expandedRowRender = () => {
+    return (
+      <Table
+        columns={columns16}
+        data={data16}
+        title={currentData => <div>标题: 这是一个标题</div>}
+        footer={currentData => <div>表尾: 我是小尾巴</div>}
+      />
+    );
+  };
+  render() {
+    return (
+      <Table
+        columns={columns16}
+        data={data16}
+        expandIconAsCell="true"
+        expandedRowRender={this.expandedRowRender}
+        title={currentData => <div>标题: 这是一个标题</div>}
+        footer={currentData => <div>表尾: 我是小尾巴</div>}
+      />
+    );
+  }
+}
+
+export default Demo16;

docs/rendertype.md

@@ -4,14 +4,28 @@
 ## 如何引用
 import InputRender from "bee-table/render/DateRender.js"
 
+## 安装依赖包
+
+
 ### InputRender
 输入框类型render
 
 #### 配置
-| 参数             | 说明             | 类型       | 默认值   |
+| 参数                | 说明                                       | 类型         | 默认值    |
-| -------------- | -------------- | -------- | ----- |
+| ----------------- | ---------------------------------------- | ---------- | ------ |
-| value          | render的值       | string   | 无     |
+| name              | 该输入框获取数据时的key值，该值不能设置重复且必填               | string     | -      |
-| isclickTrigger | 是否使用点击触发编辑状态   | boolean  | false |
+| placeholder       | 输入框的提示信息                                 | string     | -      |
-| onChange       | 当值发生改变的时候触发的方法 | Function | 无     |
+| value             | 输入框中的显示值                                 | string     | 无      |
-| format         | Currency:货币数字; | string | 无 |
+| isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false  |
+| onChange          | 当值发生改变的时候触发的方法                           | Function   | 无      |
+| format            | 浏览态格式化类型，Currency:货币数字;                  | string     | 无      |
+| formItemClassName | FormItem的class                           | string     | -      |
+| mesClassName      | 校验错误信息的class                             | string     | -      |
+| isRequire         | 是否必填                                     | bool       | false  |
+| check             | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function   | -      |
+| method            | 校验方式，change/blur                         | string     | -      |
+| errorMessage      | 错误提示信息                                   | dom/string | "校验失败" |
+| htmlType          | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string     | -      |
+| reg               | 校验正则，注：设置 htmlType 后 reg 无效              | regExp     | -      |
+
 

package.json

@@ -43,21 +43,23 @@
     "react": "^15.3.0 || ^16.0",
     "react-dom": "^15.3.0 || ^16.0",
     "prop-types": "15.6.0"
-   },
+  },
   "devDependencies": {
     "bee-animate": "latest",
     "bee-button": "latest",
     "bee-checkbox": "latest",
     "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": "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",
     "enzyme": "^2.4.1",

src/Table.scss

@@ -296,3 +296,25 @@ $table-move-in-color: $bg-color-base;
     opacity: 0;
   }
 }
+
+
+
+.formItem-style{
+  height: unset;
+  padding: 0;
+}
+.errMessage-style{
+  display: none;
+  border: none;
+  /* margin-top: 5px; */
+  /* margin-bottom: 5px; */
+  background: transparent;
+  color: #F22C1D;
+  /* padding-left: 12px; */
+  /* padding-right: 12px; */
+  margin: 0;
+  position: absolute;
+  padding: 0;
+  top: 3px;
+  right: 0;
+}

src/render/InputRender.js

@@ -1,6 +1,17 @@
 import React, { Component } from "react";
 import Icon from "bee-icon";
 import Input from "bee-form-control";
+import Form from "bee-form";
+import Tooltip from "bee-tooltip";
+import PropTypes from "prop-types";
+
+const propTypes = {
+  check: PropTypes.func
+};
+
+const defaultProps = {
+  check: () => ""
+};
 
 export default class InputRender extends Component {
   state = {
@@ -12,11 +23,19 @@ export default class InputRender extends Component {
     this.setState({ value });
   };
   check = () => {
-    this.setState({ editable: false });
+    if (typeof this.flag === "undefined" || this.flag) {
-    if (this.props.onChange) {
+      this.props.check(this.flag, this.obj);
-      this.props.onChange(this.state.value);
+      this.setState({ editable: false });
+      if (this.props.onChange) {
+        this.props.onChange(this.state.value);
+      }
+      this.flag = undefined;
     }
   };
+  checkValidate = (flag, obj) => {
+    this.flag = flag;
+    this.obj = obj;
+  };
   edit = () => {
     this.setState({ editable: true });
   };
@@ -57,26 +76,83 @@ export default class InputRender extends Component {
   };
   render() {
     let { value, editable } = this.state;
-    let { isclickTrigger,format } = this.props;
+    let {
+      name,
+      placeholder,
+      isclickTrigger,
+      format,
+      formItemClassName,
+      mesClassName,
+      isRequire,
+      check,
+      method,
+      errorMessage,
+      reg,
+      htmlType
+    } = this.props;
     let cellContent = "";
     if (editable) {
       cellContent = isclickTrigger ? (
         <div className="editable-cell-input-wrapper">
-          <Input
+          {/* <Input
             onChange={this.handleChange}
             onKeyDown={this.handleKeydown}
             onBlur={this.check}
             autoFocus
             value={value}
           />
+           */}
+          <Form.FormItem
+            className={formItemClassName}
+            mesClassName={mesClassName}
+            isRequire={isRequire}
+            change={this.handleChange}
+            blur={this.check}
+            htmlType={htmlType}
+            method={method}
+            errorMessage={errorMessage}
+            reg={reg}
+            check={this.checkValidate}
+          >
+            <Input
+              name={name}
+              placeholder={placeholder}
+              onKeyDown={this.handleKeydown}
+              autoFocus
+              value={value}
+            />
+          </Form.FormItem>
         </div>
       ) : (
         <div className="editable-cell-input-wrapper">
-          <Input
+          {/* <Input
             value={value}
             onChange={this.handleChange}
             onKeyDown={this.handleKeydown}
-          />
+          /> */}
+          <Form.FormItem
+            className="formItem-style"
+            mesClassName="errMessage-style"
+            isRequire={true}
+            change={this.handleChange}
+            blur={this.check}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
+            reg={/^[0-9]+$/}
+            check={this.checkValidate}
+          >
+            <Input
+              name="age"
+              placeholder="请输入数字"
+              onKeyDown={this.handleKeydown}
+              autoFocus
+              value={value}
+            />
+          </Form.FormItem>
           <Icon
             type="uf-correct"
             className="editable-cell-icon-check"
@@ -85,7 +161,7 @@ export default class InputRender extends Component {
         </div>
       );
     } else {
-      if(format && format === "Currency"){
+      if (format && format === "Currency") {
         value = this.formatCurrency(value);
       }
       cellContent = isclickTrigger ? (
@@ -106,3 +182,5 @@ export default class InputRender extends Component {
     return <div className="editable-cell">{cellContent}</div>;
   }
 }
+InputRender.PropTypes = propTypes;
+InputRender.defaultProps = defaultProps;