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

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

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../../../_util/vue-types';
import BaseMixin from '../../../_util/BaseMixin';
import { getComponentFromProp, getListeners, getOptionProps } from '../../../_util/props-util';
import { cloneElement } from '../../../_util/vnode';
import CalendarHeader from '../calendar/CalendarHeader';
import DateTable from '../date/DateTable';
import DateInput from '../date/DateInput';
import { getTimeConfig } from '../util/index';
// 年
// 月
// 季度
import QuarterPanel from '../quarter/QuarterPanel';
import Calendar from '../Calendar';

// 周

function noop() {}

var CalendarPart = {
  mixins: [BaseMixin],
  props: {
    prefixCls: PropTypes.string,
    value: PropTypes.any,
    hoverValue: PropTypes.any,
    selectedValue: PropTypes.any,
    picker: PropTypes.string.def('date'),
    direction: PropTypes.any,
    locale: PropTypes.any,
    showDateInput: PropTypes.bool,
    showTimePicker: PropTypes.bool,
    showWeekNumber: PropTypes.bool,
    format: PropTypes.any,
    usableRangeDateTime: PropTypes.array,
    placeholder: PropTypes.any,
    disabledDate: PropTypes.any,
    timePicker: PropTypes.any,
    disabledTime: PropTypes.any,
    disabledMonth: PropTypes.any,
    mode: PropTypes.any, // onInputSelect: PropTypes.func,
    timePickerDisabledTime: PropTypes.object,
    enableNext: PropTypes.any,
    enablePrev: PropTypes.any,
    clearIcon: PropTypes.any,
    dateRender: PropTypes.func,
    inputMode: PropTypes.string,
    inputReadOnly: PropTypes.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 = getComponentFromProp(this, 'clearIcon');

    var _getListeners = 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 ? 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 = getOptionProps(timePicker);
      timePickerEle = cloneElement(timePicker, {
        props: _extends({
          showHour: true,
          showMinute: true,
          showSecond: true
        }, timePickerProps, disabledTimeConfig, timePickerDisabledTime, {
          defaultOpenValue: value,
          value: selectedValue[index]
        }),
        on: {
          change: inputChange
        }
      });
    }

    var dateInputElement = showDateInput && h(DateInput, {
      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: _extends({}, 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: _extends({}, 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(DateTable, tableProps);
        case 'datetime':
          return h(DateTable, tableProps);
        case 'quarter':
          return h(QuarterPanel, _mergeJSXProps([tableProps, {
            attrs: { rootPrefixCls: prefixCls }
          }]));
        case 'week':
          return h(
            'div',
            { 'class': prefixCls + '-range-week-panel' },
            [h(Calendar, _mergeJSXProps([{
              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(CalendarHeader, headerProps), showTimePicker ? h(
          'div',
          { 'class': prefixCls + '-time-picker' },
          [h(
            'div',
            { 'class': prefixCls + '-time-picker-panel' },
            [timePickerEle]
          )]
        ) : null, h(
          'div',
          { 'class': prefixCls + '-body' },
          [renderPickerPanel()]
        )]
      )]
    );
  }
};

export default CalendarPart;