2016-05-29 13:47:27 +03:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
2016-04-10 19:53:44 +03:00
|
|
|
import classnames from 'classnames';
|
2016-05-21 21:52:48 +03:00
|
|
|
import { themr } from 'react-css-themr';
|
2016-05-28 23:04:00 +03:00
|
|
|
import { DATE_PICKER } from '../identifiers.js';
|
|
|
|
import events from '../utils/events.js';
|
|
|
|
import time from '../utils/time.js';
|
2015-09-07 02:59:11 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
import InjectIconButton from '../button/IconButton.js';
|
|
|
|
import InjectInput from '../input/Input.js';
|
|
|
|
import InjectDialog from '../dialog/Dialog.js';
|
|
|
|
import calendarFactory from './Calendar.js';
|
|
|
|
import datePickerDialogFactory from './DatePickerDialog.js';
|
2015-09-07 02:59:11 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
const factory = (Input, DatePickerDialog) => {
|
2016-05-29 13:47:27 +03:00
|
|
|
class DatePicker extends Component {
|
2016-05-28 23:04:00 +03:00
|
|
|
static propTypes = {
|
2016-05-29 13:47:27 +03:00
|
|
|
autoOk: PropTypes.bool,
|
|
|
|
className: PropTypes.string,
|
|
|
|
error: PropTypes.string,
|
|
|
|
icon: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.element
|
2016-05-28 23:04:00 +03:00
|
|
|
]),
|
2016-05-29 13:47:27 +03:00
|
|
|
inputClassName: PropTypes.string,
|
|
|
|
inputFormat: PropTypes.func,
|
|
|
|
label: PropTypes.string,
|
2016-08-01 14:44:26 +03:00
|
|
|
locale: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.object
|
|
|
|
]),
|
2016-05-29 13:47:27 +03:00
|
|
|
maxDate: PropTypes.object,
|
|
|
|
minDate: PropTypes.object,
|
2016-06-09 20:21:22 +03:00
|
|
|
name: PropTypes.string,
|
2016-05-29 13:47:27 +03:00
|
|
|
onChange: PropTypes.func,
|
2016-07-10 14:42:35 +03:00
|
|
|
onEscKeyDown: PropTypes.func,
|
2016-06-21 01:25:04 +03:00
|
|
|
onKeyPress: PropTypes.func,
|
2016-07-10 14:42:35 +03:00
|
|
|
onOverlayClick: PropTypes.func,
|
2016-08-04 21:48:52 +03:00
|
|
|
readonly: PropTypes.bool,
|
2016-08-01 14:44:26 +03:00
|
|
|
sundayFirstDayOfWeek: React.PropTypes.bool,
|
2016-05-29 13:47:27 +03:00
|
|
|
theme: PropTypes.shape({
|
2016-06-04 00:44:33 +03:00
|
|
|
input: PropTypes.string
|
2016-05-28 23:04:00 +03:00
|
|
|
}),
|
2016-05-29 13:47:27 +03:00
|
|
|
value: PropTypes.oneOfType([
|
|
|
|
PropTypes.instanceOf(Date),
|
|
|
|
PropTypes.string
|
2016-05-28 23:04:00 +03:00
|
|
|
])
|
|
|
|
};
|
2015-09-07 02:59:11 +03:00
|
|
|
|
2016-08-01 14:21:32 +03:00
|
|
|
static defaultProps = {
|
|
|
|
locale: 'en',
|
|
|
|
sundayFirstDayOfWeek: false
|
2016-05-28 23:04:00 +03:00
|
|
|
};
|
2015-09-07 02:59:11 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
state = {
|
|
|
|
active: false
|
|
|
|
};
|
2015-11-10 16:27:00 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
handleDismiss = () => {
|
|
|
|
this.setState({active: false});
|
|
|
|
};
|
2015-11-07 05:36:51 +03:00
|
|
|
|
2016-08-04 21:48:52 +03:00
|
|
|
handleInputFocus = (event) => {
|
|
|
|
events.pauseEvent(event);
|
|
|
|
this.setState({active: true});
|
|
|
|
};
|
|
|
|
|
|
|
|
handleInputBlur = (event) => {
|
|
|
|
events.pauseEvent(event);
|
|
|
|
this.setState({active: false});
|
|
|
|
};
|
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
handleInputMouseDown = (event) => {
|
|
|
|
events.pauseEvent(event);
|
|
|
|
this.setState({active: true});
|
|
|
|
};
|
2015-09-07 02:59:11 +03:00
|
|
|
|
2016-06-21 01:25:04 +03:00
|
|
|
handleInputKeyPress = (event) => {
|
|
|
|
if (event.charCode === 13) {
|
|
|
|
events.pauseEvent(event);
|
|
|
|
this.setState({active: true});
|
|
|
|
}
|
|
|
|
if (this.props.onKeyPress) this.props.onKeyPress(event);
|
|
|
|
};
|
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
handleSelect = (value, event) => {
|
|
|
|
if (this.props.onChange) this.props.onChange(value, event);
|
|
|
|
this.setState({active: false});
|
|
|
|
};
|
2015-11-16 11:56:05 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
render () {
|
2016-08-07 14:43:07 +03:00
|
|
|
const { autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
|
|
|
|
onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
|
|
|
|
...others } = this.props;
|
2016-07-10 14:42:35 +03:00
|
|
|
const finalInputFormat = inputFormat || time.formatDate;
|
2016-05-28 23:04:00 +03:00
|
|
|
const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
|
2016-08-01 14:21:32 +03:00
|
|
|
const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
|
2016-05-28 23:04:00 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div data-react-toolbox='date-picker'>
|
|
|
|
<Input
|
2016-06-21 01:25:04 +03:00
|
|
|
{...others}
|
2016-05-28 23:04:00 +03:00
|
|
|
className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
|
2016-08-04 21:48:52 +03:00
|
|
|
disabled={readonly}
|
2016-05-28 23:04:00 +03:00
|
|
|
error={this.props.error}
|
2016-08-04 21:48:52 +03:00
|
|
|
icon={this.props.icon}
|
2016-05-28 23:04:00 +03:00
|
|
|
label={this.props.label}
|
2016-08-04 21:48:52 +03:00
|
|
|
name={this.props.name}
|
|
|
|
onFocus={this.handleInputFocus}
|
|
|
|
onKeyPress={this.handleInputKeyPress}
|
|
|
|
onMouseDown={this.handleInputMouseDown}
|
2016-05-28 23:04:00 +03:00
|
|
|
readOnly
|
|
|
|
type='text'
|
|
|
|
value={formattedDate}
|
|
|
|
/>
|
|
|
|
<DatePickerDialog
|
|
|
|
active={this.state.active}
|
2016-07-10 14:42:35 +03:00
|
|
|
autoOk={autoOk}
|
2016-05-28 23:04:00 +03:00
|
|
|
className={this.props.className}
|
2016-08-07 14:43:07 +03:00
|
|
|
locale={locale}
|
2016-07-10 14:42:35 +03:00
|
|
|
maxDate={maxDate}
|
|
|
|
minDate={minDate}
|
2016-06-06 20:37:51 +03:00
|
|
|
name={this.props.name}
|
2016-05-28 23:04:00 +03:00
|
|
|
onDismiss={this.handleDismiss}
|
2016-07-10 14:42:35 +03:00
|
|
|
onEscKeyDown={onEscKeyDown}
|
|
|
|
onOverlayClick={onOverlayClick}
|
2016-05-28 23:04:00 +03:00
|
|
|
onSelect={this.handleSelect}
|
2016-08-07 14:43:07 +03:00
|
|
|
sundayFirstDayOfWeek={sundayFirstDayOfWeek}
|
2016-05-28 23:04:00 +03:00
|
|
|
theme={this.props.theme}
|
|
|
|
value={date}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2015-09-07 02:59:11 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-28 23:04:00 +03:00
|
|
|
return DatePicker;
|
|
|
|
};
|
|
|
|
|
|
|
|
const Calendar = calendarFactory(InjectIconButton);
|
|
|
|
const DatePickerDialog = datePickerDialogFactory(InjectDialog, Calendar);
|
|
|
|
const DatePicker = factory(InjectInput, DatePickerDialog);
|
|
|
|
|
|
|
|
export default themr(DATE_PICKER)(DatePicker);
|
2016-07-21 17:47:03 +03:00
|
|
|
export {
|
|
|
|
DatePickerDialog as DatePickerDialog,
|
|
|
|
factory as datePickerFactory
|
|
|
|
};
|
2016-05-28 23:04:00 +03:00
|
|
|
export { DatePicker };
|