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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _isArray = require('lodash/isArray');

var _isArray2 = _interopRequireDefault(_isArray);

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 getSelectedWeek(val) {
  var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

  var offset = val.getDay();
  return [(0, _utils.goDays)(val, start - offset), (0, _utils.goDays)(val, 6 + start - offset)];
}

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,
      min = props.min,
      max = props.max,
      defaultValue = props.defaultValue,
      startDay = props.startDay;

  // 如果 value 是数组就取数组第一个值，否则就取 value

  var hasValue = (0, _isArray2['default'])(value) ? value[0] : value;

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

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

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

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

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

  /**
   * actived 用来临时存放日期，改变年份和月份的时候只会改动 actived 的值
   * selected 用来存放用户选择的日期，点击日期时会设置 selected 的值
   */

  var ret = void 0;
  if (selected) {
    ret = selected.map(function (item) {
      return (0, _formatDate2['default'])(item, props.format);
    });
  }
  return {
    value: ret,
    actived: actived,
    selected: selected,
    openPanel: openPanel,
    showPlaceholder: showPlaceholder
  };
}

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

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

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

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

    _initialiseProps.call(_this);

    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'])(WeekPicker, [{
    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;
      var props = this.props;
      var weekPicker = void 0;

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

        weekPicker = _react2['default'].createElement(
          'div',
          { className: 'week-picker', ref: function ref(_ref2) {
              return _this2.picker = _ref2;
            } },
          _react2['default'].createElement(
            'div',
            { onMouseOut: this.onMouseOut },
            _react2['default'].createElement(_DatePanel2['default'], {
              range: state.range,
              actived: state.actived,
              selected: state.selected,
              disabledDate: this.isDisabled,
              onHover: this.onHover,
              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: '\u672C\u5468',
            linkCls: linkCls,
            showLink: !isDisabled,
            onClickLink: function onClickLink() {
              return _this2.onSelectDate(_utils.CURRENT_DAY);
            }
          })
        );
      }

      return weekPicker;
    }
  }, {
    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,
                onClick: function onClick(evt) {
                  return evt.preventDefault();
                }
              },
              _react2['default'].createElement(_input2['default'], {
                name: props.name,
                value: state.showPlaceholder ? props.placeholder : state.value.join(' 至 '),
                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 WeekPicker;
}(_react.PureComponent || _react.Component);

WeekPicker.propTypes = (0, _extends3['default'])({}, _constants.commonPropTypes, {
  startDay: _propTypes2['default'].number
});
WeekPicker.defaultProps = (0, _extends3['default'])({}, _constants.commonProps, {
  placeholder: '请选择自然周',
  startDay: 1
});

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

  this.retType = 'string';

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

  this.onHover = function (val) {
    var startDay = _this3.props.startDay;

    var offset = val.getDay();
    var week = [(0, _utils.goDays)(val, -offset + startDay - 1), (0, _utils.goDays)(val, 7 + startDay - offset)];

    _this3.setState({
      range: week
    });
  };

  this.onSelectDate = function (val) {
    var _props = _this3.props,
        onClick = _props.onClick,
        startDay = _props.startDay;

    var week = getSelectedWeek(val, startDay);

    _this3.setState({
      selected: week
    });

    onClick && onClick(week);
  };

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

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

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

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

  this.onClearInput = function (evt) {
    evt.stopPropagation();
    _this3.props.onChange([]);
  };

  this.onMouseOut = function (evt) {
    evt.stopPropagation();
    _this3.setState({
      range: []
    });
  };

  this.onConfirm = function () {
    var selected = _this3.state.selected;
    var _props2 = _this3.props,
        format = _props2.format,
        onClose = _props2.onClose,
        onChange = _props2.onChange;


    if (selected.length === 0) {
      return;
    }

    var tmp = selected.slice();
    if (_this3.isDisabled(tmp[0] || _this3.isDisabled(tmp[1]))) return;

    var value = tmp.map(function (item) {
      return (0, _formatDate2['default'])(item, format);
    });
    _this3.setState({
      value: value,
      openPanel: false,
      showPlaceholder: false,
      range: []
    });

    var ret = tmp.map(function (item) {
      return _this3.getReturnValue(item, format);
    });
    onChange(ret);
    onClose && onClose();
  };

  this.isDisabled = function (val) {
    var _props3 = _this3.props,
        disabledDate = _props3.disabledDate,
        min = _props3.min,
        max = _props3.max,
        format = _props3.format;


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

    return false;
  };

  this.togglePicker = function () {
    var _props4 = _this3.props,
        onOpen = _props4.onOpen,
        onClose = _props4.onClose,
        disabled = _props4.disabled;

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

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

exports['default'] = WeekPicker;