合计高阶组件 by zhanghaoyu

demo/demolist/Demo15.js

@@ -12,19 +12,21 @@ import Animate from "bee-animate";
 import Icon from "bee-icon";
 import Input from "bee-form-control";
 import Checkbox from "bee-checkbox";
-import Select from 'bee-select';
+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";
 
 //日期控件引入
-import DatePicker from 'bee-datepicker';
-import MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';
+import DatePicker from "bee-datepicker";
+import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
 
-const format = 'YYYY-MM-DD';
-const format2 = 'YYYY-MM';
+const format = "YYYY-MM-DD";
+const format2 = "YYYY-MM";
 
-const dateInputPlaceholder = '选择日期';
-const dateInputPlaceholder2 = '选择年月';
+const dateInputPlaceholder = "选择日期";
+const dateInputPlaceholder2 = "选择年月";
 
 class Demo15 extends React.Component {
   constructor(props) {
@@ -63,12 +65,12 @@ class Demo15 extends React.Component {
         title: "姓名",
         dataIndex: "name",
         key: "name",
-        width: "10%",
+        width: "100px",
         render: (text, record, index) => (
           <InputRender
             value={text}
             isclickTrigger={true}
-            onChange={this.onCellChange(index, "name")}
+            onChange={this.onInputChange(index, "name")}
           />
         )
       },
@@ -76,7 +78,7 @@ class Demo15 extends React.Component {
         title: "年龄",
         dataIndex: "age",
         key: "age",
-        width: "10%",
+        width: "100px",
         render: (text, record, index) => (
           <Checkbox
             checked={record.age}
@@ -88,13 +90,13 @@ class Demo15 extends React.Component {
         title: "你懂的",
         dataIndex: "address",
         key: "address",
-        width: "10%",
+        width: "200px",
         render: (text, record, index) => {
           return (
-            <Select
-              defaultValue="lucy"
-              style={{ width: 100, marginRight: 6 }}
-              onChange={this.handleChange}
+            <SelectRender
+              isclickTrigger={true}
+              value="lucy"
+              onChange={this.onSelectChange}
             >
               <Option value="jack">boyuzhou</Option>
               <Option value="lucy">renhualiu</Option>
@@ -102,69 +104,59 @@ class Demo15 extends React.Component {
                 Disabled
               </Option>
               <Option value="yiminghe">yuzhao</Option>
-            </Select>
+            </SelectRender>
           );
         }
       },
-      { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: "10%",
-      render:()=>{
-         return(
+      {
+        title: "日期",
+        dataIndex: "datepicker",
+        key: "datepicker",
+        width: "200px",
+        render: () => {
+          return (
             <DatePicker
               format={format}
-            
               onSelect={this.onSelect}
-    
               onChange={this.onChange}
-    
-              placeholder = {dateInputPlaceholder}>
-              </DatePicker>
-         ) 
+              placeholder={dateInputPlaceholder}
+            />
+          );
         }
       },
-      { title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: "10%",
-      render:()=>{
-         return(
+      {
+        title: "年月",
+        dataIndex: "MonthPicker",
+        key: "MonthPicker",
+        width: "200px",
+        render: () => {
+          return (
             <MonthPicker
               format={format2}
-            
               onSelect={this.onSelect}
-    
               onChange={this.onChange}
-    
-              placeholder = {dateInputPlaceholder2}>
-              </MonthPicker>
-         ) 
-        }
-      },
-      { title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: "10%",
-      render:()=>{
-         return(
-          <WeekPicker placeholder="选择周"/>
-         ) 
-        }
-      },
-      { title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: "10%",
-      render:()=>{
-         return(
-          <RangePicker
-          
-              format={format}
-
-              onSelect={this.onSelect}
-
-              onChange={this.onChange}
-
-              placeholder={'选择年月'}
-
+              placeholder={dateInputPlaceholder2}
             />
-         ) 
+          );
+        }
+      },
+      {
+        title: "周",
+        dataIndex: "WeekPicker",
+        key: "WeekPicker",
+        render: () => {
+          return <WeekPicker placeholder="选择周" />;
         }
       }
-      
     ];
   }
-  handleChange = value => {
-    console.log(`selected ${value}`);
+
+  onInputChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
   };
   onCheckChange = (index, key) => {
     return value => {
@@ -173,12 +165,8 @@ class Demo15 extends React.Component {
       this.setState({ dataSource });
     };
   };
-  onCellChange = (index, key) => {
-    return value => {
-      const dataSource = [...this.state.dataSource];
-      dataSource[index][key] = value;
-      this.setState({ dataSource });
-    };
+  onSelectChange = value => {
+    console.log(`selected ${value}`);
   };
   onDelete = index => {
     return () => {
@@ -213,12 +201,12 @@ class Demo15 extends React.Component {
     );
   };
 
-  onSelect = (d) =>{
-      console.log(d)
+  onSelect = d => {
+    console.log(d);
   };
 
-  onChange = (d) => {
-      console.log(d)
+  onChange = d => {
+    console.log(d);
   };
 
   render() {

demo/demolist/Demo7.js

@@ -5,16 +5,13 @@
 *
 */
 
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
+import React, { Component } from "react";
+import Table from "../../src";
 
 const columns7 = [
-  { title: "用户名", dataIndex: "a", key: "a"},
-  { id: "123", title: "性别", dataIndex: "b", key: "b"},
-  { title: "年龄", dataIndex: "c", key: "c"},
+  { title: "用户名", dataIndex: "a", key: "a" },
+  { id: "123", title: "性别", dataIndex: "b", key: "b" },
+  { title: "年龄", dataIndex: "c", key: "c" },
   {
     title: "操作",
     dataIndex: "",
@@ -26,47 +23,41 @@ const columns7 = [
 ];
 
 const data7 = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "令狐冲", b: "01班", c: "文学系", key: "1" },
+  { a: "杨过", b: "01班", c: "外语系", key: "2" },
+  { a: "郭靖", b: "02班", c: "美术系", key: "3" }
 ];
 
 const columns7_1 = [
-  { title: "用户名", dataIndex: "a", key: "a"},
-  { id: "123", title: "班级", dataIndex: "b", key: "b"},
-  { title: "系别", dataIndex: "c", key: "c"}
+  { title: "用户名", dataIndex: "a", key: "a" },
+  { id: "123", title: "班级", dataIndex: "b", key: "b" },
+  { title: "系别", dataIndex: "c", key: "c" }
 ];
 
 class Demo7 extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
-      children_data : []
-    }
+      children_data: []
+    };
   }
   rowclick = (record, index) => {
-    console.log(record)
-    console.log(index)
-    if(record.a === '令狐冲'){
+    console.log(record);
+    console.log(index);
+    if (record.a === "令狐冲") {
       this.setState({
-        children_data: [
-          { a: "令狐冲", b: "01班", c: '文学系', key: "1" },
-        ]
-      })
-    }else if(record.a === '杨过'){
+        children_data: [{ a: "令狐冲", b: "男", c: 41, key: "1" }]
+      });
+    } else if (record.a === "杨过") {
       this.setState({
-        children_data: [
-          { a: "杨过", b: "01班", c: '外语系', key: "2" },
-        ]
-      })
-    }else if(record.a === '郭靖'){
+        children_data: [{ a: "杨过", b: "男", c: 67, key: "2" }]
+      });
+    } else if (record.a === "郭靖") {
       this.setState({
-        children_data: [
-          { a: "郭靖", b: "02班", c: '美术系', key: "3" }
-        ]
-      })
-    }
+        children_data: [{ a: "郭靖", b: "男", c: 25, key: "3" }]
+      });
     }
+  };
   render() {
     return (
       <div>

src/render/DateRender.js

@@ -0,0 +1,67 @@
+import React, { Component } from "react";
+import Icon from "bee-icon";
+import DatePicker from "bee-datepicker";
+
+export default class DateRender extends Component {
+  state = {
+    value: this.props.value,
+    editable: false
+  };
+  handleChange = e => {
+      debugger;
+    const value = e.target.value;
+    this.setState({ value });
+  };
+  check = () => {
+    this.setState({ editable: false });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  };
+  edit = () => {
+    this.setState({ editable: true });
+  };
+  handleKeydown = event => {
+    console.log(event.keyCode);
+    if (event.keyCode == 13) {
+      this.check();
+    }
+  };
+  render() {
+    const { value, editable } = this.state;
+    let { isclickTrigger } = this.props;
+    let cellContent = "";
+    if (editable) {
+      cellContent = isclickTrigger ? (
+        <div className="editable-cell-input-wrapper">
+          <DatePicker onChange={this.handleChange} />
+        </div>
+      ) : (
+        <div className="editable-cell-input-wrapper">
+          <DatePicker {...this.props} onChange={this.handleChange}/>
+          <Icon
+            type="uf-correct"
+            className="editable-cell-icon-check"
+            onClick={this.check}
+          />
+        </div>
+      );
+    } else {
+      cellContent = isclickTrigger ? (
+        <div className="editable-cell-text-wrapper" onClick={this.edit}>
+          {value || " "}
+        </div>
+      ) : (
+        <div className="editable-cell-text-wrapper">
+          {value || " "}
+          <Icon
+            type="uf-pencil"
+            className="editable-cell-icon"
+            onClick={this.edit}
+          />
+        </div>
+      );
+    }
+    return <div className="editable-cell">{cellContent}</div>;
+  }
+}

src/render/InputRender.js

@@ -8,7 +8,7 @@ export default class InputRender extends Component {
     editable: false
   };
   handleChange = e => {
-    const value = e.target.value;
+    const value = e;
     this.setState({ value });
   };
   check = () => {
@@ -21,7 +21,6 @@ export default class InputRender extends Component {
     this.setState({ editable: true });
   };
   handleKeydown = event => {
-    console.log(event.keyCode);
     if (event.keyCode == 13) {
       this.check();
     }

src/render/SelectRender.js

@@ -0,0 +1,84 @@
+import React, { Component } from "react";
+import Icon from "bee-icon";
+import Select from "bee-select";
+
+export default class SelectRender extends Component {
+  state = {
+    value: this.props.value,
+    editable: false
+  };
+  handleChange = e => {
+    const value = e;
+    let self = this;
+    if (self.props.onChange) {
+      self.props.onChange(value);
+    }
+    this.setState({ value: value });
+    setTimeout(function() {
+      self.setState({ editable: false });
+    }, 0);
+  };
+  check = () => {
+    this.setState({ editable: false });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  };
+  edit = () => {
+    this.setState({ editable: true });
+  };
+  render() {
+    const { value, editable } = this.state;
+    let { isclickTrigger } = this.props;
+    let cellContent = "";
+    if (editable) {
+      cellContent = isclickTrigger ? (
+        <div className="editable-cell-input-wrapper">
+          <Select
+            {...this.props}
+            value={this.state.value}
+            onChange={this.handleChange}
+          >
+            {this.props.children}
+          </Select>
+          <Icon
+            type="uf-correct"
+            className="editable-cell-icon-check"
+            onClick={this.check}
+          />
+        </div>
+      ) : (
+        <div className="editable-cell-input-wrapper">
+          <Select
+            {...this.props}
+            value={this.state.value}
+            onChange={this.handleChange}
+          >
+            {this.props.children}
+          </Select>
+          <Icon
+            type="uf-correct"
+            className="editable-cell-icon-check"
+            onClick={this.check}
+          />
+        </div>
+      );
+    } else {
+      cellContent = isclickTrigger ? (
+        <div className="editable-cell-text-wrapper" onClick={this.edit}>
+          {value || " "}
+        </div>
+      ) : (
+        <div className="editable-cell-text-wrapper">
+          {value || " "}
+          <Icon
+            type="uf-pencil"
+            className="editable-cell-icon"
+            onClick={this.edit}
+          />
+        </div>
+      );
+    }
+    return <div className="editable-cell">{cellContent}</div>;
+  }
+}