-import React, {PropTypes} from 'react';
-import ReactDOM from 'react-dom';
+import React, { PropTypes } from 'react';
import Trigger from 'rc-trigger';
-import {createChainedFunction} from 'rc-util';
import Panel from './module/Panel';
import placements from './util/placements';
import CommonMixin from './mixin/CommonMixin';
+import { getFormatter } from './util/index';
function noop() {
}
propTypes: {
prefixCls: PropTypes.string,
locale: PropTypes.object,
- children: PropTypes.func,
- disabled: PropTypes.bool,
value: PropTypes.object,
+ disabled: PropTypes.bool,
+ allowEmpty: PropTypes.bool,
+ defaultValue: PropTypes.object,
open: PropTypes.bool,
+ defaultOpen: PropTypes.bool,
align: PropTypes.object,
placement: PropTypes.any,
transitionName: PropTypes.string,
+ getPopupContainer: PropTypes.func,
placeholder: PropTypes.string,
- formatter: PropTypes.object,
- hourOptions: PropTypes.array,
- minuteOptions: PropTypes.array,
- secondOptions: PropTypes.array,
+ formatter: PropTypes.any,
+ showHour: PropTypes.bool,
+ style: PropTypes.object,
+ className: PropTypes.string,
+ showSecond: PropTypes.bool,
+ disabledHours: PropTypes.func,
+ disabledMinutes: PropTypes.func,
+ disabledSeconds: PropTypes.func,
+ hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onOpen: PropTypes.func,
onClose: PropTypes.func,
getDefaultProps() {
return {
- open: false,
+ prefixCls: 'rc-time-picker',
+ defaultOpen: false,
+ style: {},
+ className: '',
align: {},
+ allowEmpty: true,
+ showHour: true,
+ showSecond: true,
+ disabledHours: noop,
+ disabledMinutes: noop,
+ disabledSeconds: noop,
+ hideDisabledOptions: false,
placement: 'bottomLeft',
onChange: noop,
onOpen: noop,
getInitialState() {
this.savePanelRef = refFn.bind(this, 'panelInstance');
- const { open, value } = this.props;
- return { open, value };
+ const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
+ return {
+ open,
+ value,
+ };
},
componentWillReceiveProps(nextProps) {
const { value, open } = nextProps;
- if (value !== undefined) {
- this.setState({value});
+ if ('value' in nextProps) {
+ this.setState({
+ value,
+ });
}
if (open !== undefined) {
- this.setState({open});
+ this.setState({ open });
}
},
onPanelChange(value) {
- const props = this.props;
- this.setState({
- value: value,
- });
- props.onChange(value);
+ this.setValue(value);
},
onPanelClear() {
+ this.setValue(null);
this.setOpen(false);
},
onVisibleChange(open) {
- this.setOpen(open, () => {
- if (open) {
- ReactDOM.findDOMNode(this.refs.picker).blur();
- ReactDOM.findDOMNode(this.panelInstance).focus();
+ this.setOpen(open);
+ },
+
+ onEsc() {
+ this.setOpen(false);
+ this.refs.picker.focus();
+ },
+
+ onKeyDown(e) {
+ if (e.keyCode === 40) {
+ this.setOpen(true);
+ }
+ },
+
+ setValue(value) {
+ if (!('value' in this.props)) {
+ this.setState({
+ value,
+ });
+ }
+ this.props.onChange(value);
+ },
+
+ getFormatter() {
+ const formatter = this.props.formatter;
+ const locale = this.props.locale;
+ if (formatter) {
+ if (formatter === this.lastFormatter) {
+ return this.normalFormatter;
+ }
+ this.normalFormatter = getFormatter(formatter, locale);
+ this.lastFormatter = formatter;
+ return this.normalFormatter;
+ }
+ if (!this.props.showSecond) {
+ if (!this.notShowSecondFormatter) {
+ this.notShowSecondFormatter = getFormatter('HH:mm', locale);
}
- });
+ return this.notShowSecondFormatter;
+ }
+ if (!this.props.showHour) {
+ if (!this.notShowHourFormatter) {
+ this.notShowHourFormatter = getFormatter('mm:ss', locale);
+ }
+ return this.notShowHourFormatter;
+ }
+ if (!this.normalFormatter) {
+ this.normalFormatter = getFormatter('HH:mm:ss', locale);
+ }
+ return this.normalFormatter;
},
- getPanel() {
- const { prefixCls, value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
+ getPanelElement() {
+ const {
+ prefixCls, defaultValue, locale, placeholder, disabledHours,
+ disabledMinutes, disabledSeconds, hideDisabledOptions,
+ allowEmpty, showHour, showSecond,
+ } = this.props;
return (
<Panel
- prefixCls={prefixCls}
- defaultValue={value}
+ prefixCls={`${prefixCls}-panel`}
+ ref={this.savePanelRef}
+ value={this.state.value}
+ onChange={this.onPanelChange}
+ gregorianCalendarLocale={locale.calendar}
+ onClear={this.onPanelClear}
+ defaultValue={defaultValue}
+ showHour={showHour}
+ onEsc={this.onEsc}
+ showSecond={showSecond}
locale={locale}
- formatter={formatter}
+ allowEmpty={allowEmpty}
+ formatter={this.getFormatter()}
placeholder={placeholder}
- hourOptions={hourOptions}
- minuteOptions={minuteOptions}
- secondOptions={secondOptions}
+ disabledHours={disabledHours}
+ disabledMinutes={disabledMinutes}
+ disabledSeconds={disabledSeconds}
+ hideDisabledOptions={hideDisabledOptions}
/>
);
},
- getPanelElement() {
- const panel = this.getPanel();
- const extraProps = {
- ref: this.savePanelRef,
- defaultValue: this.state.value || panel.props.defaultValue,
- onChange: createChainedFunction(panel.props.onChange, this.onPanelChange),
- onClear: createChainedFunction(panel.props.onClear, this.onPanelClear),
- };
-
- return React.cloneElement(panel, extraProps);
- },
-
setOpen(open, callback) {
- const {onOpen, onClose} = this.props;
+ const { onOpen, onClose } = this.props;
if (this.state.open !== open) {
this.setState({
- open: open,
+ open,
}, callback);
const event = {
- open: open,
+ open,
};
if (open) {
onOpen(event);
},
render() {
- const { prefixCls, placement, align, disabled, transitionName, children, formatter } = this.props;
+ const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
const { open, value } = this.state;
-
+ let popupClassName;
+ if (!showHour || !showSecond) {
+ popupClassName = `${prefixCls}-panel-narrow`;
+ }
return (
<Trigger
- prefixCls={prefixCls}
+ prefixCls={`${prefixCls}-panel`}
+ popupClassName={popupClassName}
popup={this.getPanelElement()}
popupAlign={align}
builtinPlacements={placements}
popupPlacement={placement}
action={disabled ? [] : ['click']}
destroyPopupOnHide
+ getPopupContainer={getPopupContainer}
popupTransitionName={transitionName}
popupVisible={open}
onPopupVisibleChange={this.onVisibleChange}
>
- <span className={`${prefixCls}-picker`}>
- <input ref="picker" type="text" placeholder="请选择时间" readOnly disabled={disabled} value={value && formatter.format(value)} />
- <span className={`${prefixCls}-picker-icon`} />
+ <span className={`${prefixCls} ${className}`} style={style}>
+ <input
+ className={`${prefixCls}-input`}
+ ref="picker" type="text" placeholder={placeholder}
+ readOnly
+ onKeyDown={this.onKeyDown}
+ disabled={disabled} value={value && this.getFormatter().format(value) || ''}
+ />
+ <span className={`${prefixCls}-icon`}/>
</span>
</Trigger>
);