121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
import moment from 'moment';
|
|
|
|
import { Form, Grid } from 'semantic-ui-react';
|
|
|
|
import { defaultDateFormat } from '../../constants/constants';
|
|
|
|
class MonthSelector extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const initialDateTime = moment();
|
|
const initialMonth = (initialDateTime.month() === 0) ? 11 : initialDateTime.month() - 1;
|
|
const initialYear = (initialDateTime.month() === 0) ? initialDateTime.year() - 1 : initialDateTime.year();
|
|
|
|
this.state = {
|
|
month: initialMonth,
|
|
year: initialYear,
|
|
monthLabel: props.monthLabel || 'Month',
|
|
yearLabel: props.yearLabel || 'Year',
|
|
};
|
|
}
|
|
|
|
onMonthSelectionChange = (event, data) => {
|
|
const newMonthValue = data.value;
|
|
this.setState({month: newMonthValue});
|
|
};
|
|
|
|
onYearChange = (event) => {
|
|
const newYearValue = event.target.value ? parseInt(event.target.value) : this.state.year;
|
|
this.setState({year: newYearValue});
|
|
};
|
|
|
|
onButtonClick() {
|
|
const { onDatesUpdate } = this.props;
|
|
const { month, year } = this.state;
|
|
|
|
const monthYearMoment = moment().month(month).year(year);
|
|
|
|
if (onDatesUpdate){
|
|
onDatesUpdate({
|
|
startDate: monthYearMoment.clone().startOf('month').format(defaultDateFormat),
|
|
endDate: monthYearMoment.clone().endOf('month').format(defaultDateFormat),
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.onButtonClick();
|
|
}
|
|
|
|
render() {
|
|
const { month, year, monthLabel, yearLabel } = this.state;
|
|
const { inlineButton } = this.props;
|
|
|
|
const buttonLabel = this.props.buttonLabel || 'Save';
|
|
|
|
const buttonRender = (
|
|
<Grid.Column width={inlineButton ? 3 : null}>
|
|
{ inlineButton && <label>{'\u00A0'}</label> }
|
|
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
|
|
</Grid.Column>
|
|
);
|
|
|
|
const monthDropdownOptions = [
|
|
{value: 0, text: 'January'},
|
|
{value: 1, text: 'February'},
|
|
{value: 2, text: 'March'},
|
|
{value: 3, text: 'April'},
|
|
{value: 4, text: 'May'},
|
|
{value: 5, text: 'June'},
|
|
{value: 6, text: 'July'},
|
|
{value: 7, text: 'August'},
|
|
{value: 8, text: 'September'},
|
|
{value: 9, text: 'October'},
|
|
{value: 10, text: 'November'},
|
|
{value: 11, text: 'December'},
|
|
];
|
|
|
|
return (
|
|
<Form>
|
|
<Grid stackable columns={inlineButton ? null : 'equal'}>
|
|
<Grid.Row>
|
|
<Grid.Column width={inlineButton ? 7 : null}>
|
|
<label>{monthLabel}</label>
|
|
<Form.Dropdown
|
|
options={monthDropdownOptions}
|
|
fluid
|
|
selection
|
|
defaultValue={month}
|
|
onChange={this.onMonthSelectionChange}
|
|
/>
|
|
</Grid.Column>
|
|
<Grid.Column width={inlineButton ? 6 : null}>
|
|
<label>{yearLabel}</label>
|
|
<Form.Input
|
|
fluid
|
|
required
|
|
type="number"
|
|
value={year}
|
|
onChange={this.onYearChange}
|
|
/>
|
|
</Grid.Column>
|
|
{
|
|
inlineButton && buttonRender
|
|
}
|
|
</Grid.Row>
|
|
{
|
|
!inlineButton &&
|
|
<Grid.Row>
|
|
{buttonRender}
|
|
</Grid.Row>
|
|
}
|
|
</Grid>
|
|
</Form>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MonthSelector;
|