iep-ui/lib/vc-calendar/src/quarter/QuarterPanel.js

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

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _vueTypes = require('../../../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _BaseMixin = require('../../../_util/BaseMixin');

var _BaseMixin2 = _interopRequireDefault(_BaseMixin);

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

function noop() {}
function goYear(direction) {
  var next = this.sValue.clone();
  next.add(direction, 'years');
  this.setState({
    sValue: next
  });
}

function chooseDecade(e, event) {
  var next = this.sValue.clone();
  var quarter = parseInt(e.replace('Q', ''));
  next.quarter(quarter);
  this.__emit('select', next, e);
  event.preventDefault();
}

exports['default'] = {
  mixins: [_BaseMixin2['default']],
  props: {
    locale: _vueTypes2['default'].object,
    value: _vueTypes2['default'].object,
    defaultValue: _vueTypes2['default'].object,
    rootPrefixCls: _vueTypes2['default'].string,
    renderFooter: _vueTypes2['default'].func
  },
  data: function data() {
    this.nextCentury = goYear.bind(this, 1);
    this.previousCentury = goYear.bind(this, -1);
    return {
      sValue: this.value || this.defaultValue
    };
  },

  watch: {
    value: function value(val) {
      this.sValue = val;
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];

    var value = this.sValue;
    var _$props = this.$props,
        locale = _$props.locale,
        renderFooter = _$props.renderFooter;

    var currentQuarter = value.quarter();
    var currentYear = value.year();
    var prefixCls = this.rootPrefixCls + '-quarter-panel';
    var decades = ['Q1', 'Q2', 'Q3', 'Q4'];
    var decadesEls = decades.map(function (row, decadeIndex) {
      var _classNameMap;

      var classNameMap = (_classNameMap = {}, (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-cell', 1), (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-selected-cell', row === 'Q' + currentQuarter), _classNameMap);
      var clickHandler = chooseDecade.bind(_this, row);
      return h(
        'td',
        { key: decadeIndex, on: {
            'click': clickHandler
          },
          attrs: { role: 'gridcell' },
          'class': classNameMap },
        [h(
          'a',
          { 'class': prefixCls + '-quarter' },
          [row]
        )]
      );
    });

    var footer = renderFooter && renderFooter('quarter');

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        'div',
        { 'class': prefixCls + '-header' },
        [h('a', {
          'class': prefixCls + '-prev-century-btn',
          attrs: { role: 'button',

            title: locale.previousCentury
          },
          on: {
            'click': this.previousCentury
          }
        }), h(
          'div',
          { 'class': prefixCls + '-century' },
          ['' + currentYear + locale.year]
        ), h('a', {
          'class': prefixCls + '-next-century-btn',
          attrs: { role: 'button',

            title: locale.nextCentury
          },
          on: {
            'click': this.nextCentury
          }
        })]
      ), h(
        'div',
        { 'class': prefixCls + '-body' },
        [h(
          'table',
          { 'class': prefixCls + '-table', attrs: { cellSpacing: '0', role: 'grid' }
          },
          [h(
            'tbody',
            { 'class': prefixCls + '-tbody' },
            [decadesEls]
          )]
        )]
      ), footer && h(
        'div',
        { 'class': prefixCls + '-footer' },
        [footer]
      )]
    );
  }
};