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

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

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PropTypes from '../../../_util/vue-types';
import BaseMixin from '../../../_util/BaseMixin';
import { hasProp, getListeners } from '../../../_util/props-util';
function noop() {}
function goYear(direction) {
  var next = this.sValue.clone();
  next.add(direction, 'years');
  this.setState({
    sValue: next
  });
}

export default {
  mixins: [BaseMixin],
  props: {
    locale: PropTypes.object,
    value: PropTypes.object,
    defaultValue: PropTypes.object,
    rootPrefixCls: PropTypes.string,
    renderFooter: PropTypes.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;
    }
  },
  methods: {
    chooseDecade: function chooseDecade(e, event) {
      var next = this.sValue.clone();
      var quarter = parseInt(e.replace('Q', ''));
      next.quarter(quarter);
      this.__emit('select', next, e);
      this.setValue(next);
      event.preventDefault();
    },
    setValue: function setValue(value) {
      if (hasProp(this, 'value')) {
        this.setState({
          sValue: value
        });
      }
    }
  },
  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 = {}, _defineProperty(_classNameMap, prefixCls + '-cell', 1), _defineProperty(_classNameMap, prefixCls + '-selected-cell', row === 'Q' + currentQuarter), _classNameMap);
      var clickHandler = _this.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]
      )]
    );
  }
};