feat(DateRender.js): 新增type参数支持控制日期的不同展现方式，并完善示例和文档

README.md

@@ -210,7 +210,9 @@ import InputRender from "bee-table/render/InputRender.js"
 #### 配置
 | 参数                | 说明                                       | 类型         | 默认值    |
 | ----------------- | ---------------------------------------- | ---------- | ------ |
-| isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false  |
+| isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false |
+| type  | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
+
 
 注:其他参数参见bee-datepicker组件参数配置
 

demo/demolist/Demo14.js

@@ -18,10 +18,6 @@ import InputRender from "../../build/render/InputRender.js";
 import DateRender from "../../build/render/DateRender.js";
 import SelectRender from "../../build/render/SelectRender.js";
 
-//日期控件引入
-import DatePicker from "bee-datepicker";
-import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
-
 const format = "YYYY-MM-DD";
 const format2 = "YYYY-MM";
 const format3 = "YYYY-MM-DD HH:mm:ss";
@@ -197,6 +193,7 @@ class Demo14 extends React.Component {
           return (
             <DateRender
               value={text}
+              type="MonthPicker"
               isclickTrigger={true}
               format={format2}
               onSelect={this.onSelect}

docs/rendertype.md

@@ -50,7 +50,9 @@ import InputRender from "bee-table/build/render/InputRender.js"
 #### 配置
 | 参数                | 说明                                       | 类型         | 默认值    |
 | ----------------- | ---------------------------------------- | ---------- | ------ |
-| isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false  |
+| isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false |
+| type  | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
+
 
 注:其他参数参见bee-datepicker组件参数配置
 

src/render/DateRender.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import Icon from "bee-icon";
 import DatePicker from "bee-datepicker";
 import moment from "moment";
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 export default class DateRender extends Component {
   state = {
@@ -32,13 +33,29 @@ export default class DateRender extends Component {
   };
   render() {
     const { value, editable } = this.state;
-    let { isclickTrigger } = this.props;
+    let { isclickTrigger, type } = this.props;
     let cellContent = "";
+    let TComponent;
+    switch (type.toLowerCase()) {
+      case "monthpicker":
+        TComponent = MonthPicker;
+        break;
+      // case "rangepicker":
+      //   TComponent = RangePicker;
+      //   break;
+      case "weekpicker":
+        TComponent = WeekPicker;
+        break;
+      default:
+      TComponent = DatePicker;
+        break;
+    }
+    TComponent;
     let date_value = value ? moment(value) : value;
     if (editable) {
       cellContent = isclickTrigger ? (
         <div className="editable-cell-input-wrapper">
-          <DatePicker
+          <TComponent
             {...this.props}
             value={date_value}
             onChange={this.handleChange}
@@ -51,7 +68,7 @@ export default class DateRender extends Component {
         </div>
       ) : (
         <div className="editable-cell-input-wrapper">
-          <DatePicker
+          <TComponent
             {...this.props}
             value={date_value}
             onChange={this.handleChange}
@@ -82,3 +99,6 @@ export default class DateRender extends Component {
     return <div className="editable-cell">{cellContent}</div>;
   }
 }
+DateRender.defaultProps = {
+  type: "DatePicker"
+};