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 |
| type | 控制日期的显示格式DatePicker、MonthPicker或者WeekPicker暂时不支持RangePicker | string | "DatePicker" |
注:其他参数参见bee-datepicker组件参数配置

View File

@ -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}

View File

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

View File

@ -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"
};