CustomTime.js

import React from 'react';
import TimePicker from 'rc-time-picker';
import _ from 'lodash';

import 'rc-time-picker/assets/index.css';
import './CustomTime.scss';

function maybe(fn, value) {
  if (_.isFunction(fn)) {
    fn(value);
  }
}

class CustomTime extends React.PureComponent {
  constructor(props) {
    super(props);
    //
    this.popupContainer = null;
  }
  componentWillMount() {
    if (this.props.value && this.props.onChange) {
      this.props.onChange(this.props.value);
    }
  }
  handleValueChange(value) {
    maybe(this.props.onChange, value);
    maybe(this.prrops.onClose, {open: false});
  }
  onRef(ref) {
    if (ref !== null) {
      this.popupContainer = ref;
    }
  }
  render() {
    const {
      defaultOpenValue,
      placeholder,
      open,
      onClose,
      onOpen,
      showSecond,
      value,
      disabledHours,
      disabledMinutes
    } = this.props;

    return (
      <div>
        <TimePicker
          value={value || null}
          placeholder={placeholder}
          open={open}
          onClose={onClose}
          onOpen={onOpen}
          onChange={::this.handleValueChange}
          showSecond={showSecond || false}
          disabledHours={disabledHours}
          disabledMinutes={disabledMinutes}
          defaultOpenValue={defaultOpenValue}
          getPopupContainer={() => this.popupContainer}
        />
        <div ref={::this.onRef}/>
      </div>
    );
  }
}

CustomTime.displayName = 'CustomTime';

CustomTime.propTypes = {
  defaultOpenValue: React.PropTypes.object,
  disableHours: React.PropTypes.array,
  disableMinutes: React.PropTypes.array,
  placeholder: React.PropTypes.string,
  showSecond: React.PropTypes.bool,
  open: React.PropTypes.bool,
  onChange: React.PropTypes.func,
  onClose: React.PropTypes.func,
  onOpen: React.PropTypes.func,
  value: React.PropTypes.object
};

CustomTime.defaultProps = {
  disabledHours() {
    return [];
  },
  disabledMinutes() {
    return [];
  }
};

export default CustomTime;