lucid-ui
Version:
A UI component library from AppNexus.
77 lines (76 loc) • 2.62 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import ReactDayPicker from 'react-day-picker';
import { Button } from '../../../index';
import CalendarMonth from '../CalendarMonth';
export default createClass({
getInitialState() {
return {
offset: 0,
selectMode: 'from',
from: null,
to: null,
cursor: null,
};
},
handlePrev() {
this.setState({
offset: this.state.offset - 1,
});
},
handleNext() {
this.setState({
offset: this.state.offset + 1,
});
},
handleDayClick(date, { disabled }) {
if (disabled) {
return;
}
const { selectMode } = this.state;
if (selectMode === 'to') {
this.setState({
to: date,
cursor: date,
});
}
else {
this.setState({
from: date,
selectMode: 'to',
cursor: date,
});
}
},
handleDayMouseEnter(day, { disabled }) {
if (disabled) {
this.setState({
cursor: null,
});
}
else {
this.setState({
cursor: day,
});
}
},
handleDayMouseLeave() {
this.setState({
cursor: null,
});
},
render() {
const { selectMode, from, to, cursor, offset } = this.state;
return (React.createElement("section", null,
React.createElement("div", { style: { display: 'flex', maxWidth: 800 } },
React.createElement(Button, { onClick: this.handlePrev }, '<'),
React.createElement(CalendarMonth, { monthOffset: offset, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: ReactDayPicker.DateUtils.isPastDay }),
React.createElement(CalendarMonth, { monthOffset: offset + 1, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: ReactDayPicker.DateUtils.isPastDay }),
React.createElement(Button, { onClick: this.handleNext }, '>')),
"from: ",
from && from.toLocaleDateString('en-US'),
", to:",
' ',
to && to.toLocaleDateString('en-US')));
},
});