iep-ui/lib/vc-calendar/src/range-calendar/CalendarPart.js

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

'use strict';

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

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

var _BaseMixin2 = _interopRequireDefault(_BaseMixin);

var _propsUtil = require('../../../_util/props-util');

var _vnode = require('../../../_util/vnode');

var _CalendarHeader = require('../calendar/CalendarHeader');

var _CalendarHeader2 = _interopRequireDefault(_CalendarHeader);

var _DateTable = require('../date/DateTable');

var _DateTable2 = _interopRequireDefault(_DateTable);

var _DateInput = require('../date/DateInput');

var _DateInput2 = _interopRequireDefault(_DateInput);

var _index = require('../util/index');

var _QuarterPanel = require('../quarter/QuarterPanel');

var _QuarterPanel2 = _interopRequireDefault(_QuarterPanel);

var _Calendar = require('../Calendar');

var _Calendar2 = _interopRequireDefault(_Calendar);

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

// 周

// 年
// 月
// 季度
function noop() {}

var CalendarPart = {
  mixins: [_BaseMixin2['default']],
  props: {
    prefixCls: _vueTypes2['default'].string,
    value: _vueTypes2['default'].any,
    hoverValue: _vueTypes2['default'].any,
    selectedValue: _vueTypes2['default'].any,
    picker: _vueTypes2['default'].string.def('date'),
    direction: _vueTypes2['default'].any,
    locale: _vueTypes2['default'].any,
    showDateInput: _vueTypes2['default'].bool,
    showTimePicker: _vueTypes2['default'].bool,
    showWeekNumber: _vueTypes2['default'].bool,
    format: _vueTypes2['default'].any,
    usableRangeDateTime: _vueTypes2['default'].array,
    placeholder: _vueTypes2['default'].any,
    disabledDate: _vueTypes2['default'].any,
    timePicker: _vueTypes2['default'].any,
    disabledTime: _vueTypes2['default'].any,
    disabledMonth: _vueTypes2['default'].any,
    mode: _vueTypes2['default'].any, // onInputSelect: PropTypes.func,
    timePickerDisabledTime: _vueTypes2['default'].object,
    enableNext: _vueTypes2['default'].any,
    enablePrev: _vueTypes2['default'].any,
    clearIcon: _vueTypes2['default'].any,
    dateRender: _vueTypes2['default'].func,
    inputMode: _vueTypes2['default'].string,
    inputReadOnly: _vueTypes2['default'].bool
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var props = this.$props;
    var prefixCls = props.prefixCls,
        value = props.value,
        hoverValue = props.hoverValue,
        selectedValue = props.selectedValue,
        mode = props.mode,
        direction = props.direction,
        locale = props.locale,
        picker = props.picker,
        format = props.format,
        placeholder = props.placeholder,
        disabledDate = props.disabledDate,
        usableRangeDateTime = props.usableRangeDateTime,
        timePicker = props.timePicker,
        disabledTime = props.disabledTime,
        timePickerDisabledTime = props.timePickerDisabledTime,
        showTimePicker = props.showTimePicker,
        enablePrev = props.enablePrev,
        enableNext = props.enableNext,
        disabledMonth = props.disabledMonth,
        showDateInput = props.showDateInput,
        dateRender = props.dateRender,
        showWeekNumber = props.showWeekNumber,
        showClear = props.showClear,
        inputMode = props.inputMode,
        inputReadOnly = props.inputReadOnly;

    var clearIcon = (0, _propsUtil.getComponentFromProp)(this, 'clearIcon');

    var _getListeners = (0, _propsUtil.getListeners)(this),
        _getListeners$inputCh = _getListeners.inputChange,
        inputChange = _getListeners$inputCh === undefined ? noop : _getListeners$inputCh,
        _getListeners$inputSe = _getListeners.inputSelect,
        inputSelect = _getListeners$inputSe === undefined ? noop : _getListeners$inputSe,
        _getListeners$valueCh = _getListeners.valueChange,
        valueChange = _getListeners$valueCh === undefined ? noop : _getListeners$valueCh,
        _getListeners$panelCh = _getListeners.panelChange,
        panelChange = _getListeners$panelCh === undefined ? noop : _getListeners$panelCh,
        _getListeners$select = _getListeners.select,
        select = _getListeners$select === undefined ? noop : _getListeners$select,
        _getListeners$dayHove = _getListeners.dayHover,
        dayHover = _getListeners$dayHove === undefined ? noop : _getListeners$dayHove,
        _getListeners$yearHov = _getListeners.yearHover,
        yearHover = _getListeners$yearHov === undefined ? noop : _getListeners$yearHov;

    var shouldShowTimePicker = showTimePicker && timePicker;
    var disabledTimeConfig = shouldShowTimePicker && disabledTime ? (0, _index.getTimeConfig)(selectedValue, disabledTime) : null;
    var rangeClassName = prefixCls + '-range';
    var newProps = {
      locale: locale,
      value: value,
      prefixCls: prefixCls,
      showTimePicker: showTimePicker
    };
    var index = direction === 'left' ? 0 : 1;
    var timePickerEle = null;
    if (shouldShowTimePicker) {
      var timePickerProps = (0, _propsUtil.getOptionProps)(timePicker);
      timePickerEle = (0, _vnode.cloneElement)(timePicker, {
        props: (0, _extends3['default'])({
          showHour: true,
          showMinute: true,
          showSecond: true
        }, timePickerProps, disabledTimeConfig, timePickerDisabledTime, {
          defaultOpenValue: value,
          value: selectedValue[index]
        }),
        on: {
          change: inputChange
        }
      });
    }

    var dateInputElement = showDateInput && h(_DateInput2['default'], {
      attrs: {
        format: format,
        locale: locale,
        prefixCls: prefixCls,
        timePicker: timePicker,
        disabledDate: disabledDate,
        placeholder: placeholder,
        disabledTime: disabledTime,
        value: value,
        showClear: showClear || false,
        selectedValue: selectedValue[index],

        clearIcon: clearIcon,
        inputMode: inputMode,
        inputReadOnly: inputReadOnly
      },
      on: {
        'change': inputChange,
        'select': inputSelect
      }
    });
    var headerProps = {
      props: (0, _extends3['default'])({}, newProps, {
        mode: mode,
        picker: picker,
        enableNext: enableNext,
        enablePrev: enablePrev,
        isDisabledMonth: !(picker === 'date' || picker === 'datetime'),
        disabledMonth: disabledMonth
      }),
      on: {
        valueChange: valueChange,
        panelChange: panelChange,
        select: function select(e) {
          _this.$emit('valueChange', e);
          _this.$emit('inputChange', e);
        }
      }
    };
    var tableProps = {
      props: (0, _extends3['default'])({}, newProps, {
        hoverValue: hoverValue,
        picker: picker,
        selectedValue: selectedValue,
        dateRender: dateRender,
        usableRangeDateTime: usableRangeDateTime,
        disabledDate: disabledDate,
        showWeekNumber: showWeekNumber,
        rangeYear: true
      }),
      on: {
        select: select,
        dayHover: dayHover,
        yearHover: yearHover
      }
    };
    var renderPickerPanel = function renderPickerPanel() {
      switch (picker) {
        case 'date':
          return h(_DateTable2['default'], tableProps);
        case 'datetime':
          return h(_DateTable2['default'], tableProps);
        case 'quarter':
          return h(_QuarterPanel2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([tableProps, {
            attrs: { rootPrefixCls: prefixCls }
          }]));
        case 'week':
          return h(
            'div',
            { 'class': prefixCls + '-range-week-panel' },
            [h(_Calendar2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([{
              attrs: {
                showWeekNumber: true,
                prefixCls: prefixCls,
                format: format,
                value: tableProps.props.value,
                locale: locale.lang,
                mode: 'week',
                showDateInput: false,
                showToday: false,
                disabledDate: disabledDate,
                renderFooter: _this.renderFooter
              }
            }, {
              on: {
                // onMonthSelect={this.onSelect}
                // onValueChange={this.setValue}
                // onYearChange={this.yearChange}
                select: function select(e) {
                  _this.$emit('valueChange', e);
                  _this.$emit('inputChange', e);
                },
                dayHover: dayHover,
                yearHover: yearHover
              }
            }]))]
          );
      }
    };
    return h(
      'div',
      {
        'class': rangeClassName + '-part ' + rangeClassName + '-' + direction + ' ' + rangeClassName + '-' + picker
      },
      [dateInputElement, h(
        'div',
        { style: { outline: 'none' } },
        [h(_CalendarHeader2['default'], headerProps), showTimePicker ? h(
          'div',
          { 'class': prefixCls + '-time-picker' },
          [h(
            'div',
            { 'class': prefixCls + '-time-picker-panel' },
            [timePickerEle]
          )]
        ) : null, h(
          'div',
          { 'class': prefixCls + '-body' },
          [renderPickerPanel()]
        )]
      )]
    );
  }
};

exports['default'] = CalendarPart;