zent/lib/datetimepicker/DatePicker.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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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 _assign = require('lodash/assign');

var _assign2 = _interopRequireDefault(_assign);

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 _DatePanel = require('./date/DatePanel');

var _DatePanel2 = _interopRequireDefault(_DatePanel);

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 selected = void 0;
  var actived = void 0;
  var showPlaceholder = void 0;
  var openPanel = props.openPanel,
      value = props.value,
      format = props.format,
      defaultValue = props.defaultValue,
      defaultTime = props.defaultTime;


  if (value) {
    var tmp = (0, _parseDate2['default'])(value, format);

    if (tmp) {
      showPlaceholder = false;
      selected = tmp;
      actived = (0, _date.setTime)(tmp);
    } else {
      // eslint-disable-line
      showPlaceholder = true;
      actived = (0, _date.dayStart)();
    }
  } else {
    showPlaceholder = true;

    /**
     * 当前面板显示优先级：
     * defalutValue > currentDay
     */

    if (defaultValue) {
      actived = (0, _parseDate2['default'])(defaultValue, format);
    } else {
      actived = (0, _date.dayStart)();
    }

    actived = (0, _parseDate2['default'])(actived, format);
  }

  if (defaultTime) {
    actived = (0, _date.setTime)(actived, defaultTime);
  }
  /**
   * actived 用来临时存放日期，改变年份和月份的时候只会改动 actived 的值
   * selected 用来存放用户选择的日期，点击日期时会设置 selected 的值
   * activedTime 用来存放用户选择的时间
   */

  return {
    value: selected && (0, _formatDate2['default'])(selected, props.format),
    actived: actived,
    selected: selected,
    activedTime: selected || actived,
    openPanel: openPanel,
    showPlaceholder: showPlaceholder
  };
}

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

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

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

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

    _this.retType = 'string';

    _this.getDate = function () {
      return _this.state.actived;
    };

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

    _this.onSelectDate = function (val) {
      var onClick = _this.props.onClick;
      var activedTime = _this.state.activedTime;

      if (_this.isDisabled(val)) return;
      // update activedTime here
      _this.setState({
        actived: val,
        selected: val,
        activedTime: (0, _utils.setSameDate)(activedTime, val)
      });
      onClick && onClick(val);
    };

    _this.onChangeTime = function (val, type) {
      var fn = _constants.timeFnMap[type];
      var tmp = new Date(_this.state.activedTime);
      tmp[fn](val);

      _this.setState({
        activedTime: tmp
      });
    };

    _this.onChangeMonth = function (type) {
      var typeMap = {
        prev: -1,
        next: 1
      };

      return function () {
        var actived = _this.state.actived;

        var acp = (0, _utils.goMonths)(actived, typeMap[type]);

        _this.setState({
          actived: acp
        });
      };
    };

    _this.onClearInput = function (evt) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          onBeforeClear = _this$props.onBeforeClear;

      if (onBeforeClear && !onBeforeClear()) return;

      evt.stopPropagation();
      onChange('');
    };

    _this.onConfirm = function () {
      var _this$state = _this.state,
          selected = _this$state.selected,
          activedTime = _this$state.activedTime;
      var _this$props2 = _this.props,
          format = _this$props2.format,
          showTime = _this$props2.showTime,
          onClose = _this$props2.onClose,
          onChange = _this$props2.onChange,
          onBeforeConfirm = _this$props2.onBeforeConfirm;


      if (onBeforeConfirm && !onBeforeConfirm()) return;
      // 如果没有选择日期则默认选中当前日期
      var tmp = selected || new Date();
      if (_this.isDisabled(tmp)) return;

      if (showTime) {
        tmp = new Date(tmp.getFullYear(), tmp.getMonth(), tmp.getDate(), activedTime.getHours(), activedTime.getMinutes(), activedTime.getSeconds());
      }

      _this.setState({
        value: (0, _formatDate2['default'])(tmp, format),
        openPanel: false,
        showPlaceholder: false
      });

      var ret = _this.getReturnValue(tmp, format);
      onChange(ret);
      onClose && onClose();
    };

    _this.isDisabled = function (val) {
      var _this$props3 = _this.props,
          disabledDate = _this$props3.disabledDate,
          min = _this$props3.min,
          max = _this$props3.max,
          format = _this$props3.format;

      if (disabledDate && disabledDate(val)) return true;
      if (min && (0, _date.dayEnd)(val) < (0, _parseDate2['default'])(min, format)) return true;
      if (max && (0, _date.dayStart)(val) > (0, _parseDate2['default'])(max, format)) return true;

      return false;
    };

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

      var openPanel = !_this.state.openPanel;
      if (disabled) return;

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

    var value = props.value,
        valueType = props.valueType;


    if (valueType) {
      _this.retType = valueType.toLowerCase();
    } else if (value) {
      if (typeof value === 'number') _this.retType = 'number';
      if (value instanceof Date) _this.retType = 'date';
    }

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

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


    /**
     * 如果传入为数字，返回值也为数字
     * 如果传入为 Date 的实例，返回值也为 Date 的实例
     * 默认返回 format 格式的字符串
     */

    value: function getReturnValue(date, format) {
      if (this.retType === 'number') {
        return date.getTime();
      }

      if (this.retType === 'date') {
        return date;
      }

      return (0, _formatDate2['default'])(date, format);
    }
  }, {
    key: 'renderPicker',
    value: function renderPicker() {
      var _this2 = this;

      var state = this.state,
          props = this.props,
          format = this.format;

      var showTime = void 0;
      var datePicker = void 0;

      if (props.showTime) {
        showTime = (0, _assign2['default'])({
          min: props.min && (0, _parseDate2['default'])(props.min, format),
          max: props.max && (0, _parseDate2['default'])(props.max, format),
          actived: state.activedTime,
          disabledTime: _constants.noop
        }, {
          disabledTime: props.disabledTime && props.disabledTime(),
          onChange: this.onChangeTime
        });
      }

      // 打开面板的时候才渲染
      if (state.openPanel) {
        var isDisabled = this.isDisabled(_utils.CURRENT_DAY);
        var linkCls = (0, _classnames2['default'])({
          'link--current': true,
          'link--disabled': isDisabled
        });

        datePicker = _react2['default'].createElement(
          'div',
          { className: 'date-picker', ref: function ref(_ref2) {
              return _this2.picker = _ref2;
            } },
          _react2['default'].createElement(_DatePanel2['default'], {
            showTime: showTime,
            actived: state.actived,
            selected: state.selected,
            disabledDate: this.isDisabled,
            onSelect: this.onSelectDate,
            onChange: this.onChangeDate,
            onPrev: this.onChangeMonth('prev'),
            onNext: this.onChangeMonth('next')
          }),
          _react2['default'].createElement(_PanelFooter2['default'], {
            buttonText: props.confirmText,
            onClickButton: this.onConfirm,
            linkText: '\u4ECA\u5929',
            linkCls: linkCls,
            showLink: !isDisabled,
            onClickLink: function onClickLink() {
              return _this2.onSelectDate(_utils.CURRENT_DAY);
            }
          })
        );
      }

      return datePicker;
    }
  }, {
    key: 'render',
    value: function render() {
      var state = this.state,
          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,
                onClick: function onClick(evt) {
                  return evt.preventDefault();
                }
              },
              _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 DatePicker;
}(_react.PureComponent || _react.Component);

DatePicker.propTypes = (0, _extends3['default'])({}, _constants.commonPropTypes, {
  showTime: _propTypes2['default'].bool,
  onBeforeConfirm: _propTypes2['default'].func,
  onBeforeClear: _propTypes2['default'].func
});
DatePicker.defaultProps = (0, _extends3['default'])({}, _constants.commonProps, {
  placeholder: '请选择日期'
});
exports['default'] = DatePicker;