91 lines
1.7 KiB
JavaScript
91 lines
1.7 KiB
JavaScript
import {
|
|
WeaDatePicker
|
|
} from "ecCom";
|
|
|
|
export default class MonthYear extends React.Component {
|
|
/**
|
|
* @DateTime 2019-05-21
|
|
* 概述：获取年月元素的样式
|
|
* @param {String} key 当前渲染项的key值
|
|
* @param {Number} index 当前渲染项的索引值
|
|
* @return {Object} 当前渲染项的样式
|
|
*/
|
|
getMonthYearStyle = (key, index) => {
|
|
const style = {
|
|
cursor: 'pointer',
|
|
};
|
|
|
|
const {
|
|
monthYear
|
|
} = this.props, {
|
|
cKey
|
|
} = monthYear;
|
|
|
|
if (cKey === key) {
|
|
Object.assign(style, {
|
|
color: '#2db7f5',
|
|
});
|
|
}
|
|
if (index > 0) {
|
|
Object.assign(style, {
|
|
marginLeft: 15
|
|
});
|
|
}
|
|
return style;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
MONTHYEAR,
|
|
monthYear
|
|
} = this.props, {
|
|
datas,
|
|
onMonthYearClick,
|
|
onDatePickerChange,
|
|
resetMonthYear
|
|
} = MONTHYEAR, {
|
|
cKey,
|
|
date
|
|
} = monthYear;
|
|
|
|
const total = {
|
|
position: 'absolute',
|
|
marginTop: 13,
|
|
zIndex: 1000,
|
|
}
|
|
|
|
const month_year = {
|
|
display: 'inline-block',
|
|
padding: '0 20px',
|
|
}
|
|
|
|
const refresh = {
|
|
marginLeft: 5,
|
|
cursor: 'pointer',
|
|
}
|
|
|
|
return (
|
|
<div style={total}>
|
|
<div style={month_year}>
|
|
{
|
|
datas.map( (data,index) => {
|
|
const {key,title} = data;
|
|
return (
|
|
<span onClick={() => onMonthYearClick(key)} style={this.getMonthYearStyle(key,index) }>{title}</span>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
<WeaDatePicker
|
|
arrow
|
|
type={cKey === '0' ? 'year' : 'month'}
|
|
date={date}
|
|
onChange={value => onDatePickerChange(value)}
|
|
/>
|
|
<span onClick={() => resetMonthYear()} style={refresh}>
|
|
<i className='icon-coms-Refresh' />
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
} |