src/TimePicker.jsx

   1 import React, { PropTypes } from 'react';
   2 import Trigger from 'rc-trigger';
   3 import Panel from './Panel';
   4 import placements from './placements';
   5 import moment from 'moment';
   6
   7 function noop() {
   8 }
   9
  10 function refFn(field, component) {
  11   this[field] = component;
  12 }
  13
  14 const Picker = React.createClass({
  15   propTypes: {
  16     prefixCls: PropTypes.string,
  17     clearText: PropTypes.string,
  18     value: PropTypes.object,
  19     defaultOpenValue: PropTypes.object,
  20     disabled: PropTypes.bool,
  21     allowEmpty: PropTypes.bool,
  22     defaultValue: PropTypes.object,
  23     open: PropTypes.bool,
  24     defaultOpen: PropTypes.bool,
  25     align: PropTypes.object,
  26     placement: PropTypes.any,
  27     transitionName: PropTypes.string,
  28     getPopupContainer: PropTypes.func,
  29     placeholder: PropTypes.string,
  30     format: PropTypes.string,
  31     showHour: PropTypes.bool,
  32     showMinute: PropTypes.bool,
  33     showSecond: PropTypes.bool,
  34     style: PropTypes.object,
  35     className: PropTypes.string,
  36     disabledHours: PropTypes.func,
  37     disabledMinutes: PropTypes.func,
  38     disabledSeconds: PropTypes.func,
  39     hideDisabledOptions: PropTypes.bool,
  40     onChange: PropTypes.func,
  41     onOpen: PropTypes.func,
  42     onClose: PropTypes.func,
  43     addon: PropTypes.func,
  44     name: PropTypes.string,
  45   },
  46
  47   getDefaultProps() {
  48     return {
  49       clearText: 'clear',
  50       prefixCls: 'rc-time-picker',
  51       defaultOpen: false,
  52       style: {},
  53       className: '',
  54       align: {},
  55       defaultOpenValue: moment(),
  56       allowEmpty: true,
  57       showHour: true,
  58       showMinute: true,
  59       showSecond: true,
  60       disabledHours: noop,
  61       disabledMinutes: noop,
  62       disabledSeconds: noop,
  63       hideDisabledOptions: false,
  64       placement: 'bottomLeft',
  65       onChange: noop,
  66       onOpen: noop,
  67       onClose: noop,
  68       addon: noop,
  69     };
  70   },
  71
  72   getInitialState() {
  73     this.saveInputRef = refFn.bind(this, 'picker');
  74     this.savePanelRef = refFn.bind(this, 'panelInstance');
  75     const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
  76     return {
  77       open,
  78       value,
  79     };
  80   },
  81
  82   componentWillReceiveProps(nextProps) {
  83     const { value, open } = nextProps;
  84     if ('value' in nextProps) {
  85       this.setState({
  86         value,
  87       });
  88     }
  89     if (open !== undefined) {
  90       this.setState({ open });
  91     }
  92   },
  93
  94   onPanelChange(value) {
  95     this.setValue(value);
  96   },
  97
  98   onPanelClear() {
  99     this.setValue(null);
 100     this.setOpen(false);
 101   },
 102
 103   onVisibleChange(open) {
 104     this.setOpen(open);
 105   },
 106
 107   onEsc() {
 108     this.setOpen(false);
 109     this.focus();
 110   },
 111
 112   onKeyDown(e) {
 113     if (e.keyCode === 40) {
 114       this.setOpen(true);
 115     }
 116   },
 117
 118   setValue(value) {
 119     if (!('value' in this.props)) {
 120       this.setState({
 121         value,
 122       });
 123     }
 124     this.props.onChange(value);
 125   },
 126
 127   getFormat() {
 128     const { format, showHour, showMinute, showSecond } = this.props;
 129     if (format) {
 130       return format;
 131     }
 132     return [
 133       showHour ? 'HH' : '',
 134       showMinute ? 'mm' : '',
 135       showSecond ? 'ss' : '',
 136     ].filter(item => !!item).join(':');
 137   },
 138
 139   getPanelElement() {
 140     const {
 141       prefixCls, placeholder, disabledHours,
 142       disabledMinutes, disabledSeconds, hideDisabledOptions,
 143       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
 144       addon,
 145     } = this.props;
 146     return (
 147       <Panel
 148         clearText={clearText}
 149         prefixCls={`${prefixCls}-panel`}
 150         ref={this.savePanelRef}
 151         value={this.state.value}
 152         onChange={this.onPanelChange}
 153         onClear={this.onPanelClear}
 154         defaultOpenValue={defaultOpenValue}
 155         showHour={showHour}
 156         showMinute={showMinute}
 157         showSecond={showSecond}
 158         onEsc={this.onEsc}
 159         allowEmpty={allowEmpty}
 160         format={this.getFormat()}
 161         placeholder={placeholder}
 162         disabledHours={disabledHours}
 163         disabledMinutes={disabledMinutes}
 164         disabledSeconds={disabledSeconds}
 165         hideDisabledOptions={hideDisabledOptions}
 166         addon={addon}
 167       />
 168     );
 169   },
 170
 171   setOpen(open, callback) {
 172     const { onOpen, onClose } = this.props;
 173     if (this.state.open !== open) {
 174       this.setState({
 175         open,
 176       }, callback);
 177       const event = {
 178         open,
 179       };
 180       if (open) {
 181         onOpen(event);
 182       } else {
 183         onClose(event);
 184       }
 185     }
 186   },
 187
 188   focus() {
 189     this.picker.focus();
 190   },
 191
 192   render() {
 193     const {
 194       prefixCls, placeholder, placement, align,
 195       disabled, transitionName, style, className, showHour,
 196       showMinute, showSecond, getPopupContainer, name,
 197     } = this.props;
 198     const { open, value } = this.state;
 199     let popupClassName;
 200     if (!showHour || !showMinute || !showSecond) {
 201       popupClassName = `${prefixCls}-panel-narrow`;
 202     }
 203     return (
 204       <Trigger
 205         prefixCls={`${prefixCls}-panel`}
 206         popupClassName={popupClassName}
 207         popup={this.getPanelElement()}
 208         popupAlign={align}
 209         builtinPlacements={placements}
 210         popupPlacement={placement}
 211         action={disabled ? [] : ['click']}
 212         destroyPopupOnHide
 213         getPopupContainer={getPopupContainer}
 214         popupTransitionName={transitionName}
 215         popupVisible={open}
 216         onPopupVisibleChange={this.onVisibleChange}
 217       >
 218         <span className={`${prefixCls} ${className}`} style={style}>
 219           <input
 220             className={`${prefixCls}-input`}
 221             ref={this.saveInputRef}
 222             type="text"
 223             placeholder={placeholder}
 224             name={name}
 225             readOnly
 226             onKeyDown={this.onKeyDown}
 227             disabled={disabled} value={value && value.format(this.getFormat()) || ''}
 228           />
 229           <span className={`${prefixCls}-icon`}/>
 230         </span>
 231       </Trigger>
 232     );
 233   },
 234 });
 235
 236 export default Picker;