yqcloud-ui/es/rc-components/time-picker/TimePicker.js

An enterprise-class UI design language and React-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _trigger = require('../trigger');

var _trigger2 = _interopRequireDefault(_trigger);

var _Panel = require('./Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _placements = require('./placements');

var _placements2 = _interopRequireDefault(_placements);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _icon = require('../../icon');

var _icon2 = _interopRequireDefault(_icon);

var _input = require('../../input');

var _input2 = _interopRequireDefault(_input);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function noop() {}

function refFn(field, component) {
  this[field] = component;
}

var Picker = function (_Component) {
  (0, _inherits3['default'])(Picker, _Component);

  function Picker(props) {
    (0, _classCallCheck3['default'])(this, Picker);

    var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));

    _initialiseProps.call(_this);

    _this.saveInputRef = refFn.bind(_this, 'picker');
    _this.savePanelRef = refFn.bind(_this, 'panelInstance');
    var defaultOpen = props.defaultOpen,
        defaultValue = props.defaultValue,
        _props$open = props.open,
        open = _props$open === undefined ? defaultOpen : _props$open,
        _props$value = props.value,
        value = _props$value === undefined ? defaultValue : _props$value;

    _this.state = {
      open: open,
      value: value
    };
    return _this;
  }

  Picker.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var value = nextProps.value,
        open = nextProps.open;

    if ('value' in nextProps) {
      this.setState({
        value: value
      });
    }
    if (open !== undefined) {
      this.setState({ open: open });
    }
  };

  Picker.prototype.setValue = function setValue(value) {
    if (!('value' in this.props)) {
      this.setState({
        value: value
      });
    }
    this.props.onChange(value);
  };

  Picker.prototype.getFormat = function getFormat() {
    var _props = this.props,
        format = _props.format,
        showHour = _props.showHour,
        showMinute = _props.showMinute,
        showSecond = _props.showSecond,
        use12Hours = _props.use12Hours;

    if (format) {
      return format;
    }

    if (use12Hours) {
      var fmtString = [showHour ? 'h' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
        return !!item;
      }).join(':');

      return fmtString.concat(' a');
    }

    return [showHour ? 'HH' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : ''].filter(function (item) {
      return !!item;
    }).join(':');
  };

  Picker.prototype.getPanelElement = function getPanelElement() {
    var _props2 = this.props,
        prefixCls = _props2.prefixCls,
        placeholder = _props2.placeholder,
        disabledHours = _props2.disabledHours,
        disabledMinutes = _props2.disabledMinutes,
        disabledSeconds = _props2.disabledSeconds,
        hideDisabledOptions = _props2.hideDisabledOptions,
        inputReadOnly = _props2.inputReadOnly,
        allowEmpty = _props2.allowEmpty,
        showHour = _props2.showHour,
        showMinute = _props2.showMinute,
        showSecond = _props2.showSecond,
        defaultOpenValue = _props2.defaultOpenValue,
        clearText = _props2.clearText,
        addon = _props2.addon,
        use12Hours = _props2.use12Hours,
        focusOnOpen = _props2.focusOnOpen,
        onKeyDown = _props2.onKeyDown,
        hourStep = _props2.hourStep,
        minuteStep = _props2.minuteStep,
        secondStep = _props2.secondStep;

    return _react2['default'].createElement(_Panel2['default'], {
      clearText: clearText,
      prefixCls: prefixCls + '-panel',
      ref: this.savePanelRef,
      value: this.state.value,
      inputReadOnly: inputReadOnly,
      onChange: this.onPanelChange,
      onClear: this.onPanelClear,
      defaultOpenValue: defaultOpenValue,
      showHour: showHour,
      showMinute: showMinute,
      showSecond: showSecond,
      onEsc: this.onEsc,
      allowEmpty: allowEmpty,
      format: this.getFormat(),
      placeholder: placeholder,
      disabledHours: disabledHours,
      disabledMinutes: disabledMinutes,
      disabledSeconds: disabledSeconds,
      hideDisabledOptions: hideDisabledOptions,
      use12Hours: use12Hours,
      hourStep: hourStep,
      minuteStep: minuteStep,
      secondStep: secondStep,
      addon: addon,
      focusOnOpen: focusOnOpen,
      onKeyDown: onKeyDown
    });
  };

  Picker.prototype.getPopupClassName = function getPopupClassName() {
    var _props3 = this.props,
        showHour = _props3.showHour,
        showMinute = _props3.showMinute,
        showSecond = _props3.showSecond,
        use12Hours = _props3.use12Hours,
        prefixCls = _props3.prefixCls;

    var popupClassName = this.props.popupClassName;
    // Keep it for old compatibility
    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
      popupClassName += ' ' + prefixCls + '-panel-narrow';
    }
    var selectColumnCount = 0;
    if (showHour) {
      selectColumnCount += 1;
    }
    if (showMinute) {
      selectColumnCount += 1;
    }
    if (showSecond) {
      selectColumnCount += 1;
    }
    if (use12Hours) {
      selectColumnCount += 1;
    }
    popupClassName += ' ' + prefixCls + '-panel-column-' + selectColumnCount;
    return popupClassName;
  };

  Picker.prototype.getBuiltInPlacements = function getBuiltInPlacements() {
    var label = this.props.label;

    var placement_haslabel = {
      'bottomLeft': [0, -19],
      'bottomRight': [0, -19]
    };
    if (label) {
      return (0, _placements.getPlacements)(placement_haslabel);
    }
    return _placements2['default'];
  };

  Picker.prototype.setOpen = function setOpen(open) {
    var _props4 = this.props,
        onOpen = _props4.onOpen,
        onClose = _props4.onClose;

    if (this.state.open !== open) {
      if (!('open' in this.props)) {
        this.setState({ open: open });
      }
      if (open) {
        onOpen({ open: open });
      } else {
        onClose({ open: open });
      }
    }
  };

  Picker.prototype.focus = function focus() {
    this.picker.focus();
  };

  Picker.prototype.blur = function blur() {
    this.picker.blur();
  };

  Picker.prototype.render = function render() {
    var _props5 = this.props,
        prefixCls = _props5.prefixCls,
        placeholder = _props5.placeholder,
        placement = _props5.placement,
        align = _props5.align,
        id = _props5.id,
        disabled = _props5.disabled,
        transitionName = _props5.transitionName,
        style = _props5.style,
        className = _props5.className,
        getPopupContainer = _props5.getPopupContainer,
        name = _props5.name,
        autoComplete = _props5.autoComplete,
        onFocus = _props5.onFocus,
        onBlur = _props5.onBlur,
        autoFocus = _props5.autoFocus,
        inputReadOnly = _props5.inputReadOnly,
        label = _props5.label;
    var _state = this.state,
        open = _state.open,
        value = _state.value;

    var popupClassName = this.getPopupClassName();
    return _react2['default'].createElement(_trigger2['default'], {
      prefixCls: prefixCls + '-panel',
      popupClassName: popupClassName,
      popup: this.getPanelElement(),
      popupAlign: align,
      builtinPlacements: this.getBuiltInPlacements(),
      popupPlacement: placement,
      action: disabled ? [] : ['click'],
      destroyPopupOnHide: true,
      getPopupContainer: getPopupContainer,
      popupTransitionName: transitionName,
      popupVisible: open,
      onPopupVisibleChange: this.onVisibleChange
    }, _react2['default'].createElement('span', { className: prefixCls + ' ' + className, style: style }, _react2['default'].createElement(_input2['default'], {
      className: prefixCls + '-input',
      ref: this.saveInputRef,
      type: 'text',
      label: label,
      placeholder: placeholder,
      name: name,
      onKeyDown: this.onKeyDown,
      disabled: disabled,
      value: value && value.format(this.getFormat()) || '',
      autoComplete: autoComplete,
      onFocus: onFocus,
      onBlur: onBlur,
      suffix: _react2['default'].createElement(_icon2['default'], { type: 'chuangjianshijian', className: prefixCls + '-icon' }),
      autoFocus: autoFocus,
      focused: open,
      onChange: noop,
      readOnly: true,
      id: id
    })));
  };

  return Picker;
}(_react.Component);

Picker.propTypes = {
  prefixCls: _propTypes2['default'].string,
  clearText: _propTypes2['default'].string,
  value: _propTypes2['default'].object,
  defaultOpenValue: _propTypes2['default'].object,
  inputReadOnly: _propTypes2['default'].bool,
  disabled: _propTypes2['default'].bool,
  allowEmpty: _propTypes2['default'].bool,
  defaultValue: _propTypes2['default'].object,
  open: _propTypes2['default'].bool,
  defaultOpen: _propTypes2['default'].bool,
  align: _propTypes2['default'].object,
  placement: _propTypes2['default'].any,
  transitionName: _propTypes2['default'].string,
  getPopupContainer: _propTypes2['default'].func,
  placeholder: _propTypes2['default'].string,
  format: _propTypes2['default'].string,
  showHour: _propTypes2['default'].bool,
  showMinute: _propTypes2['default'].bool,
  showSecond: _propTypes2['default'].bool,
  style: _propTypes2['default'].object,
  className: _propTypes2['default'].string,
  popupClassName: _propTypes2['default'].string,
  disabledHours: _propTypes2['default'].func,
  disabledMinutes: _propTypes2['default'].func,
  disabledSeconds: _propTypes2['default'].func,
  hideDisabledOptions: _propTypes2['default'].bool,
  onChange: _propTypes2['default'].func,
  onOpen: _propTypes2['default'].func,
  onClose: _propTypes2['default'].func,
  onFocus: _propTypes2['default'].func,
  onBlur: _propTypes2['default'].func,
  addon: _propTypes2['default'].func,
  name: _propTypes2['default'].string,
  autoComplete: _propTypes2['default'].string,
  use12Hours: _propTypes2['default'].bool,
  hourStep: _propTypes2['default'].number,
  minuteStep: _propTypes2['default'].number,
  secondStep: _propTypes2['default'].number,
  focusOnOpen: _propTypes2['default'].bool,
  onKeyDown: _propTypes2['default'].func,
  autoFocus: _propTypes2['default'].bool,
  id: _propTypes2['default'].string,
  label: _propTypes2['default'].oneOfType([_propTypes2['default'].node, _propTypes2['default'].string])
};
Picker.defaultProps = {
  clearText: 'clear',
  prefixCls: 'rc-time-picker',
  defaultOpen: false,
  inputReadOnly: false,
  style: {},
  className: '',
  popupClassName: '',
  id: '',
  align: {},
  defaultOpenValue: (0, _moment2['default'])(),
  allowEmpty: true,
  showHour: true,
  showMinute: true,
  showSecond: true,
  disabledHours: noop,
  disabledMinutes: noop,
  disabledSeconds: noop,
  hideDisabledOptions: false,
  placement: 'bottomLeft',
  onChange: noop,
  onOpen: noop,
  onClose: noop,
  onFocus: noop,
  onBlur: noop,
  addon: noop,
  use12Hours: false,
  focusOnOpen: false,
  onKeyDown: noop
};

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onPanelChange = function (value) {
    _this2.setValue(value);
  };

  this.onPanelClear = function () {
    _this2.setValue(null);
    _this2.setOpen(false);
  };

  this.onVisibleChange = function (open) {
    _this2.setOpen(open);
  };

  this.onEsc = function () {
    _this2.setOpen(false);
    _this2.focus();
  };

  this.onKeyDown = function (e) {
    if (e.keyCode === 40) {
      _this2.setOpen(true);
    }
  };
};

exports['default'] = Picker;
module.exports = exports['default'];