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

2017-11-01 15:59:26 +08:00 · 2017-11-01 15:59:26 +08:00 · 83e92a7b52
parent aca27dc18e
commit 83e92a7b52
9 changed files with 258 additions and 76 deletions
--- a/demo/TableDemo.scss
+++ b/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";
--- a/demo/demolist/Demo14.js
+++ b/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 => {
--- a/demo/demolist/Demo15.js
+++ b/demo/demolist/Demo15.js
@ -1,64 +1,33 @@
 /**
-*
-* @title 嵌套子表格
-* @description 通过expandedRowRender参数来实现子表格
-*
-*/
-
+ *
+ * @title 编辑态表格（包含校验）
+ * @description 块级布局
+ *
+ */
 import React, { Component } from "react";
-import Table from "../../src";
-
-const columns15 = [
-  { 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 data15 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
-];
-
+import ReactDOM from "react-dom";
+import Form from "bee-form";
+import FormControl from "bee-form-control";
+import Label from "bee-label";
+import FormGroup from "bee-form-group";
 class Demo15 extends Component {
-  expandedRowRender = () => {
-    return (
-      <Table
-        columns={columns15}
-        data={data15}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
-      />
-    );
+  check = (flag, obj) => {
+    console.log(flag);
+    console.log(obj);
  };
  render() {
    return (
-      <Table
-        columns={columns15}
-        data={data15}
-        expandedRowRender={this.expandedRowRender}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
-      />
+      <Form.FormItem
+       mesClassName="mesclassname"
+        labelName="姓名"
+        isRequire={true}
+        method="blur"
+        reg={/^[0-9]+$/}
+        check={this.check}
+      >
+        <FormControl name="age" placeholder="请输入数字" />
+      </Form.FormItem>
    );
  }
 }
-
 export default Demo15;
--- a/demo/demolist/Demo16.js
+++ b/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;
--- a/demo/index.js
+++ b/demo/index.js
--- a/docs/rendertype.md
+++ b/docs/rendertype.md
@ -4,14 +4,28 @@
 ## 如何引用
 import InputRender from "bee-table/render/DateRender.js"

+## 安装依赖包
+
+
 ### InputRender
 输入框类型render

 #### 配置
-| 参数             | 说明             | 类型       | 默认值   |
-| -------------- | -------------- | -------- | ----- |
-| value          | render的值       | string   | 无     |
-| isclickTrigger | 是否使用点击触发编辑状态   | boolean  | false |
-| onChange       | 当值发生改变的时候触发的方法 | Function | 无     |
-| format         | Currency:货币数字; | string | 无 |
+| 参数                | 说明                                       | 类型         | 默认值    |
+| ----------------- | ---------------------------------------- | ---------- | ------ |
+| name              | 该输入框获取数据时的key值，该值不能设置重复且必填               | string     | -      |
+| placeholder       | 输入框的提示信息                                 | string     | -      |
+| value             | 输入框中的显示值                                 | 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     | -      |
+

--- a/package.json
+++ b/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",
--- a/src/Table.scss
+++ b/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;
+}
--- a/src/render/InputRender.js
+++ b/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 (this.props.onChange) {
-      this.props.onChange(this.state.value);
+    if (typeof this.flag === "undefined" || this.flag) {
+      this.props.check(this.flag, this.obj);
+      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;