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

This commit is contained in:
huyueb 2018-01-08 14:49:47 +08:00
parent 1401010cec
commit 0b814f8470
4 changed files with 30 additions and 9 deletions

View File

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

View File

@ -18,10 +18,6 @@ import InputRender from "../../build/render/InputRender.js";
import DateRender from "../../build/render/DateRender.js"; import DateRender from "../../build/render/DateRender.js";
import SelectRender from "../../build/render/SelectRender.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 format = "YYYY-MM-DD";
const format2 = "YYYY-MM"; const format2 = "YYYY-MM";
const format3 = "YYYY-MM-DD HH:mm:ss"; const format3 = "YYYY-MM-DD HH:mm:ss";
@ -197,6 +193,7 @@ class Demo14 extends React.Component {
return ( return (
<DateRender <DateRender
value={text} value={text}
type="MonthPicker"
isclickTrigger={true} isclickTrigger={true}
format={format2} format={format2}
onSelect={this.onSelect} onSelect={this.onSelect}

View File

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

View File

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