1 import React, { Component } from 'react';
2 import PropTypes from 'prop-types';
3 import moment from 'moment';
5 class Header extends Component {
7 format: PropTypes.string,
8 prefixCls: PropTypes.string,
9 disabledDate: PropTypes.func,
10 placeholder: PropTypes.string,
11 clearText: PropTypes.string,
12 value: PropTypes.object,
13 inputReadOnly: PropTypes.bool,
14 hourOptions: PropTypes.array,
15 minuteOptions: PropTypes.array,
16 secondOptions: PropTypes.array,
17 disabledHours: PropTypes.func,
18 disabledMinutes: PropTypes.func,
19 disabledSeconds: PropTypes.func,
20 onChange: PropTypes.func,
21 onClear: PropTypes.func,
22 onEsc: PropTypes.func,
23 allowEmpty: PropTypes.bool,
24 defaultOpenValue: PropTypes.object,
25 currentSelectPanel: PropTypes.string,
26 focusOnOpen: PropTypes.bool,
27 onKeyDown: PropTypes.func,
30 static defaultProps = {
36 const { value, format } = props;
38 str: value && value.format(format) || '',
44 if (this.props.focusOnOpen) {
45 // Wait one frame for the panel to be positioned before focusing
46 const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout);
47 requestAnimationFrame(() => {
48 this.refs.input.focus();
49 this.refs.input.select();
54 componentWillReceiveProps(nextProps) {
55 const { value, format } = nextProps;
57 str: value && value.format(format) || '',
62 onInputChange = (event) => {
63 const str = event.target.value;
68 format, hourOptions, minuteOptions, secondOptions,
69 disabledHours, disabledMinutes,
70 disabledSeconds, onChange, allowEmpty,
74 const originalValue = this.props.value;
75 const value = this.getProtoValue().clone();
76 const parsed = moment(str, format, true);
77 if (!parsed.isValid()) {
83 value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
85 // if time value not allowed, response warning.
87 hourOptions.indexOf(value.hour()) < 0 ||
88 minuteOptions.indexOf(value.minute()) < 0 ||
89 secondOptions.indexOf(value.second()) < 0
97 // if time value is disabled, response warning.
98 const disabledHourOptions = disabledHours();
99 const disabledMinuteOptions = disabledMinutes(value.hour());
100 const disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
102 (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
103 (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
104 (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
114 originalValue.hour() !== value.hour() ||
115 originalValue.minute() !== value.minute() ||
116 originalValue.second() !== value.second()
118 // keep other fields for rc-calendar
119 const changedValue = originalValue.clone();
120 changedValue.hour(value.hour());
121 changedValue.minute(value.minute());
122 changedValue.second(value.second());
123 onChange(changedValue);
125 } else if (originalValue !== value) {
128 } else if (allowEmpty) {
143 const { onEsc, onKeyDown } = this.props;
144 if (e.keyCode === 27 && onEsc) {
152 this.setState({ str: '' });
153 this.props.onClear();
157 const { prefixCls, allowEmpty } = this.props;
162 className={`${prefixCls}-clear-btn`}
164 title={this.props.clearText}
165 onMouseDown={this.onClear}
170 return this.props.value || this.props.defaultOpenValue;
174 const { prefixCls, placeholder, inputReadOnly } = this.props;
175 const { invalid, str } = this.state;
176 const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
179 className={`${prefixCls}-input ${invalidClass}`}
181 onKeyDown={this.onKeyDown}
183 placeholder={placeholder}
184 onChange={this.onInputChange}
185 readOnly={!!inputReadOnly}
191 const { prefixCls } = this.props;
193 <div className={`${prefixCls}-input-wrap`}>
195 {this.getClearButton()}
201 export default Header;