zent/lib/datetimepicker/MonthPicker.js

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

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _input2 = _interopRequireDefault(_input);

var _popover = require('../popover');

var _popover2 = _interopRequireDefault(_popover);

var _formatDate = require('zan-utils/date/formatDate');

var _formatDate2 = _interopRequireDefault(_formatDate);

var _parseDate = require('zan-utils/date/parseDate');

var _parseDate2 = _interopRequireDefault(_parseDate);

var _getWidth = require('../utils/getWidth');

var _getWidth2 = _interopRequireDefault(_getWidth);

var _MonthPanel = require('./month/MonthPanel');

var _MonthPanel2 = _interopRequireDefault(_MonthPanel);

var _PanelFooter = require('./common/PanelFooter');

var _PanelFooter2 = _interopRequireDefault(_PanelFooter);

var _utils = require('./utils/');

var _date = require('./utils/date');

var _constants = require('./constants/');

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

function extractStateFromProps(props) {
  var showPlaceholder = void 0;
  var selected = void 0;
  var actived = void 0;
  var format = props.format,
      value = props.value,
      defaultValue = props.defaultValue;


  if (value) {
    var tmp = (0, _parseDate2['default'])(value, format);
    if (tmp) {
      showPlaceholder = false;
      selected = actived = tmp;
    } else {
      // eslint-disable-line
      showPlaceholder = true;
      selected = actived = (0, _date.dayStart)();
    }
  } else {
    showPlaceholder = true;
    if (defaultValue) {
      actived = (0, _parseDate2['default'])(defaultValue, format);
    } else {
      actived = (0, _date.dayStart)();
    }
    selected = actived = (0, _parseDate2['default'])(actived, format);
  }

  return {
    value: (0, _formatDate2['default'])(selected, format),
    actived: actived,
    selected: selected,
    openPanel: false,
    showPlaceholder: showPlaceholder
  };
}

var _ref3 = _react2['default'].createElement('span', { className: 'zenticon zenticon-calendar-o' });

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

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

    var _this = (0, _possibleConstructorReturn3['default'])(this, (MonthPicker.__proto__ || Object.getPrototypeOf(MonthPicker)).call(this, props));

    _this.onChangeMonth = function (val) {
      _this.setState({
        actived: val
      });
    };

    _this.onSelectMonth = function (val) {
      var onClick = _this.props.onClick;

      _this.setState({
        selected: val,
        actived: val
      });

      onClick && onClick(val);
    };

    _this.onClearInput = function (evt) {
      evt.stopPropagation();
      _this.props.onChange('');
    };

    _this.onConfirm = function () {
      var format = _this.props.format;
      var selected = _this.state.selected;

      var value = (0, _formatDate2['default'])(selected, format);

      _this.setState({
        value: value,
        openPanel: false,
        showPlaceholder: false
      });
      _this.props.onChange(value);
    };

    _this.isDisabled = function (val) {
      var year = _this.state.actived.getFullYear();
      var dateStr = year + '-' + (val + 1);
      var ret = (0, _parseDate2['default'])(dateStr, 'YYYY-MM');

      var _this$props = _this.props,
          disabledDate = _this$props.disabledDate,
          min = _this$props.min,
          max = _this$props.max,
          format = _this$props.format;


      if (disabledDate && disabledDate(ret)) return true;
      if (min && ret < (0, _parseDate2['default'])(min, format)) return true;
      if (max && ret > (0, _parseDate2['default'])(max, format)) return true;

      return false;
    };

    _this.togglePicker = function () {
      var _this$props2 = _this.props,
          onOpen = _this$props2.onOpen,
          onClose = _this$props2.onClose,
          disabled = _this$props2.disabled;

      var openPanel = !_this.state.openPanel;

      if (disabled) return;

      openPanel ? onOpen && onOpen() : onClose && onClose();
      _this.setState({
        openPanel: !_this.state.openPanel
      });
    };

    _this.state = extractStateFromProps(props);
    return _this;
  }

  (0, _createClass3['default'])(MonthPicker, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(next) {
      var state = extractStateFromProps(next);
      this.setState(state);
    }
  }, {
    key: 'renderPicker',
    value: function renderPicker() {
      var _this2 = this;

      var state = this.state;
      var props = this.props;

      var monthPicker = void 0;
      if (state.openPanel) {
        monthPicker = _react2['default'].createElement(
          'div',
          { className: 'month-picker', ref: function ref(_ref2) {
              return _this2.picker = _ref2;
            } },
          _react2['default'].createElement(_MonthPanel2['default'], {
            actived: state.actived,
            selected: state.selected,
            onChange: this.onChangeMonth,
            onSelect: this.onSelectMonth,
            disabledDate: this.isDisabled
          }),
          _react2['default'].createElement(_PanelFooter2['default'], {
            buttonText: props.confirmText,
            linkText: '\u5F53\u524D\u6708',
            linkCls: 'link--current',
            onClickLink: function onClickLink() {
              return _this2.onSelectMonth(_utils.CURRENT);
            },
            onClickButton: this.onConfirm
          })
        );
      }

      return monthPicker;
    }
  }, {
    key: 'render',
    value: function render() {
      var state = this.state;
      var props = this.props;
      var wrapperCls = props.prefix + '-datetime-picker ' + props.className;
      var inputCls = (0, _classnames2['default'])({
        'picker-input': true,
        'picker-input--filled': !state.showPlaceholder,
        'picker-input--disabled': props.disabled
      });
      var widthStyle = (0, _getWidth2['default'])(props.width);

      return _react2['default'].createElement(
        'div',
        { style: widthStyle, className: wrapperCls },
        _react2['default'].createElement(
          _popover2['default'],
          {
            cushion: 5,
            visible: state.openPanel,
            onVisibleChange: this.togglePicker,
            className: props.prefix + '-datetime-picker-popover ' + props.className + '-popover',
            position: _constants.popPositionMap[props.popPosition.toLowerCase()]
          },
          _react2['default'].createElement(
            _popover2['default'].Trigger.Click,
            null,
            _react2['default'].createElement(
              'div',
              { style: widthStyle, className: inputCls },
              _react2['default'].createElement(_input2['default'], {
                name: props.name,
                value: state.showPlaceholder ? props.placeholder : state.value,
                onChange: _constants.noop,
                disabled: props.disabled
              }),
              _ref3,
              _react2['default'].createElement('span', {
                onClick: this.onClearInput,
                className: 'zenticon zenticon-close-circle'
              })
            )
          ),
          _react2['default'].createElement(
            _popover2['default'].Content,
            null,
            this.renderPicker()
          )
        )
      );
    }
  }]);
  return MonthPicker;
}(_react.PureComponent || _react.Component);

MonthPicker.PropTypes = (0, _extends3['default'])({}, _constants.commonPropTypes);
MonthPicker.defaultProps = (0, _extends3['default'])({}, _constants.commonProps, {
  placeholder: '请选择月份',
  format: 'YYYY-MM'
});
exports['default'] = MonthPicker;