lucid-ui
Version:
A UI component library from AppNexus.
64 lines (63 loc) • 2.09 kB
JavaScript
import _ from 'lodash';
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,
selectedDays: [],
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 { selectedDays } = this.state;
this.setState({
selectedDays: _.xorWith(selectedDays, [date], ReactDayPicker.DateUtils.isSameDay),
cursor: date,
});
},
handleDayMouseEnter(day, { disabled }) {
if (disabled) {
this.setState({
cursor: null,
});
}
else {
this.setState({
cursor: day,
});
}
},
handleDayMouseLeave() {
this.setState({
cursor: null,
});
},
render() {
const { selectedDays, cursor, offset } = this.state;
return (React.createElement("section", null,
React.createElement("div", { style: { display: 'flex', maxWidth: 468 } },
React.createElement(Button, { onClick: this.handlePrev }, '<'),
React.createElement(CalendarMonth, { monthOffset: offset, selectedDays: selectedDays, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: ReactDayPicker.DateUtils.isPastDay }),
React.createElement(Button, { onClick: this.handleNext }, '>')),
"selectedDays:",
' ',
_.map(selectedDays, selected => selected.toLocaleDateString('en-US')).join(', ')));
},
});