zent/lib/datetimepicker/time/TimePanel.js

一套前端设计语言和基于React的实现

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

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 _utils = require('../utils');

var _HourPanel = require('./HourPanel');

var _HourPanel2 = _interopRequireDefault(_HourPanel);

var _MinutePanel = require('./MinutePanel');

var _MinutePanel2 = _interopRequireDefault(_MinutePanel);

var _SecondPanel = require('./SecondPanel');

var _SecondPanel2 = _interopRequireDefault(_SecondPanel);

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

var stateMap = {
  hour: 'openHour',
  minute: 'openMinute',
  second: 'openSecond'
};

var disabledMap = {
  hour: 'disabledHour',
  minute: 'disabledMinute',
  second: 'disabledSecond'
};

var TimePanel = function (_ref) {
  (0, _inherits3['default'])(TimePanel, _ref);

  function TimePanel() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, TimePanel);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref2 = TimePanel.__proto__ || Object.getPrototypeOf(TimePanel)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
      openHour: false,
      openMinute: false,
      openSecond: false
    }, _this.openPanel = function (type) {
      return function () {
        var key = stateMap[type];
        _this.setState((0, _defineProperty3['default'])({}, key, true));
      };
    }, _this.hidePanel = function (type) {
      return function () {
        var key = stateMap[type];
        _this.setState((0, _defineProperty3['default'])({}, key, false));
      };
    }, _this.isDisabled = function (type) {
      var _this$props = _this.props,
          disabledTime = _this$props.disabledTime,
          min = _this$props.min,
          max = _this$props.max,
          actived = _this$props.actived;

      var fns = void 0;
      if (disabledTime) {
        return disabledTime[disabledMap[type]];
      } else if (min && (0, _utils.isSameDate)(min, actived)) {
        fns = {
          hour: function hour(val) {
            return val < min.getHours();
          },
          minute: function minute(val) {
            return actived.getHours() === min.getHours() && val < min.getMinutes();
          },
          second: function second(val) {
            return actived.getHours() === min.getHours() && actived.getMinutes() === min.getMinutes() && val < min.getSeconds();
          }
        };
        return fns[type];
      } else if (max && (0, _utils.isSameDate)(max, actived)) {
        fns = {
          hour: function hour(val) {
            return val > max.getHours();
          },
          minute: function minute(val) {
            return val > max.getMinutes();
          },
          second: function second(val) {
            return val > max.getSeconds();
          }
        };
        return fns[type];
      }
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(TimePanel, [{
    key: 'onSelectTime',
    value: function onSelectTime(type) {
      var _this2 = this;

      return function (val) {
        _this2.props.onChange(val, type);
        _this2.hidePanel(type)();
      };
    }
  }, {
    key: 'render',
    value: function render() {
      var state = this.state,
          props = this.props;
      var openHour = state.openHour,
          openMinute = state.openMinute,
          openSecond = state.openSecond;
      var actived = props.actived;


      return _react2['default'].createElement(
        'div',
        { className: 'time-panel' },
        openHour && _react2['default'].createElement(_HourPanel2['default'], {
          selected: actived,
          isDisabled: this.isDisabled('hour'),
          onSelect: this.onSelectTime('hour'),
          hidePanel: this.hidePanel('hour')
        }),
        openMinute && _react2['default'].createElement(_MinutePanel2['default'], {
          selected: actived,
          isDisabled: this.isDisabled('minute'),
          onSelect: this.onSelectTime('minute'),
          hidePanel: this.hidePanel('minute')
        }),
        openSecond && _react2['default'].createElement(_SecondPanel2['default'], {
          selected: actived,
          isDisabled: this.isDisabled('second'),
          onSelect: this.onSelectTime('second'),
          hidePanel: this.hidePanel('second')
        }),
        _react2['default'].createElement(
          'div',
          { className: 'time-panel__preview' },
          _react2['default'].createElement(
            'span',
            { className: 'time__number', onClick: this.openPanel('hour') },
            (0, _utils.padLeft)(actived.getHours()),
            ' \u65F6'
          ),
          _react2['default'].createElement(
            'span',
            { className: 'time__number', onClick: this.openPanel('minute') },
            (0, _utils.padLeft)(actived.getMinutes()),
            ' \u5206'
          ),
          _react2['default'].createElement(
            'span',
            { className: 'time__number', onClick: this.openPanel('second') },
            (0, _utils.padLeft)(actived.getSeconds()),
            ' \u79D2'
          )
        )
      );
    }
  }]);
  return TimePanel;
}(_react.PureComponent || _react.Component);

TimePanel.propTypes = {
  onChange: _propTypes2['default'].func,
  actived: _propTypes2['default'].instanceOf(Date)
};
exports['default'] = TimePanel;