feat(DateRender.js): 新增type参数支持控制日期的不同展现方式,并完善示例和文档
This commit is contained in:
parent
1401010cec
commit
0b814f8470
|
@ -211,6 +211,8 @@ import InputRender from "bee-table/render/InputRender.js"
|
|||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| type | 控制日期的显示格式,DatePicker、MonthPicker或者WeekPicker,暂时不支持RangePicker | string | "DatePicker" |
|
||||
|
||||
|
||||
注:其他参数参见bee-datepicker组件参数配置
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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组件参数配置
|
||||
|
||||
|
|
|
@ -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"
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue