-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import Header from './Header';
import Combobox from './Combobox';
import moment from 'moment';
function noop() {
}
-function generateOptions(length, disabledOptions, hideDisabledOptions) {
+function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
const arr = [];
- for (let value = 0; value < length; value++) {
+ for (let value = 0; value < length; value += step) {
if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
arr.push(value);
}
return arr;
}
-const Panel = React.createClass({
- propTypes: {
+class Panel extends Component {
+ static propTypes = {
clearText: PropTypes.string,
prefixCls: PropTypes.string,
className: PropTypes.string,
value: PropTypes.object,
placeholder: PropTypes.string,
format: PropTypes.string,
+ inputReadOnly: PropTypes.bool,
disabledHours: PropTypes.func,
disabledMinutes: PropTypes.func,
disabledSeconds: PropTypes.func,
onEsc: PropTypes.func,
allowEmpty: PropTypes.bool,
showHour: PropTypes.bool,
+ showMinute: PropTypes.bool,
showSecond: PropTypes.bool,
onClear: PropTypes.func,
+ use12Hours: PropTypes.bool,
+ hourStep: PropTypes.number,
+ minuteStep: PropTypes.number,
+ secondStep: PropTypes.number,
addon: PropTypes.func,
- },
+ focusOnOpen: PropTypes.bool,
+ onKeyDown: PropTypes.func,
+ };
- getDefaultProps() {
- return {
- prefixCls: 'rc-time-picker-panel',
- onChange: noop,
- onClear: noop,
- disabledHours: noop,
- disabledMinutes: noop,
- disabledSeconds: noop,
- defaultOpenValue: moment(),
- addon: noop,
- };
- },
+ static defaultProps = {
+ prefixCls: 'rc-time-picker-panel',
+ onChange: noop,
+ onClear: noop,
+ disabledHours: noop,
+ disabledMinutes: noop,
+ disabledSeconds: noop,
+ defaultOpenValue: moment(),
+ use12Hours: false,
+ addon: noop,
+ onKeyDown: noop,
+ inputReadOnly: false,
+ };
- getInitialState() {
- return {
- value: this.props.value,
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: props.value,
selectionRange: [],
};
- },
+ }
componentWillReceiveProps(nextProps) {
const value = nextProps.value;
value,
});
}
- },
+ }
- onChange(newValue) {
+ onChange = (newValue) => {
this.setState({ value: newValue });
this.props.onChange(newValue);
- },
-
- onClear() {
- this.props.onClear();
- },
+ }
- onCurrentSelectPanelChange(currentSelectPanel) {
+ onCurrentSelectPanelChange = (currentSelectPanel) => {
this.setState({ currentSelectPanel });
- },
+ }
+ // https://github.com/ant-design/ant-design/issues/5829
close() {
this.props.onEsc();
- },
+ }
+
+ disabledHours = () => {
+ const { use12Hours, disabledHours } = this.props;
+ let disabledOptions = disabledHours();
+ if (use12Hours && Array.isArray(disabledOptions)) {
+ if (this.isAM()) {
+ disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h));
+ } else {
+ disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12));
+ }
+ }
+ return disabledOptions;
+ }
+
+ isAM() {
+ const value = (this.state.value || this.props.defaultOpenValue);
+ return value.hour() >= 0 && value.hour() < 12;
+ }
render() {
const {
- prefixCls, className, placeholder, disabledHours, disabledMinutes,
- disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond,
- format, defaultOpenValue, clearText, onEsc, addon,
+ prefixCls, className, placeholder, disabledMinutes,
+ disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
+ format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
+ focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly,
} = this.props;
const {
value, currentSelectPanel,
} = this.state;
- const disabledHourOptions = disabledHours();
+ const disabledHourOptions = this.disabledHours();
const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
value ? value.minute() : null);
- const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
- const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
- const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
+ const hourOptions = generateOptions(
+ 24, disabledHourOptions, hideDisabledOptions, hourStep
+ );
+ const minuteOptions = generateOptions(
+ 60, disabledMinuteOptions, hideDisabledOptions, minuteStep
+ );
+ const secondOptions = generateOptions(
+ 60, disabledSecondOptions, hideDisabledOptions, secondStep
+ );
return (
<div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
- disabledHours={disabledHours}
+ disabledHours={this.disabledHours}
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onChange={this.onChange}
- onClear={this.onClear}
+ onClear={onClear}
allowEmpty={allowEmpty}
+ focusOnOpen={focusOnOpen}
+ onKeyDown={onKeyDown}
+ inputReadOnly={inputReadOnly}
/>
<Combobox
prefixCls={prefixCls}
format={format}
onChange={this.onChange}
showHour={showHour}
+ showMinute={showMinute}
showSecond={showSecond}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
- disabledHours={disabledHours}
+ disabledHours={this.disabledHours}
disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds}
onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
+ use12Hours={use12Hours}
+ isAM={this.isAM()}
/>
{addon(this)}
</div>
);
- },
-});
+ }
+}
export default Panel;