iep-ui/lib/date-progress-slider/main.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 _panelPicker = require('./panelPicker');

var _panelPicker2 = _interopRequireDefault(_panelPicker);

var _slider = require('./slider');

var _slider2 = _interopRequireDefault(_slider);

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

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

exports['default'] = {
  name: 'IepDateProgressSlider',
  props: (0, _propsUtil.mergeProps)({
    prefixCls: _vueTypes2['default'].string,
    theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
    tipFormat: _vueTypes2['default'].string.def('YYYY-MM-DD HH:mm:ss'),
    track: _vueTypes2['default'].oneOf(['all', 'odd', 'even', 'bothEnds']).def('bothEnds'),
    trackStrictly: _vueTypes2['default'].bool.def(false),
    isPart: _vueTypes2['default'].bool.def(false),
    trackFunc: _vueTypes2['default'].func,
    type: {
      type: Array,
      'default': function _default() {
        return ['minute', 'hour', 'day', 'week', 'month', 'year'];
      }
    },
    pickerVisible: _vueTypes2['default'].bool.def(true)
  }, _slider2['default'].props),
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      panelMode: 'minute',
      sliderValue: []
    };
  },
  created: function created() {
    this.sliderValue = this.value;
  },

  methods: {
    changeMode: function changeMode(e) {
      this.panelMode = e;
      this.$emit('changeMode', e);
    },
    sliderChange: function sliderChange(e) {
      this.$emit('change', e);
    },
    sliderEnd: function sliderEnd(e) {
      this.$emit('sliderEnd', e);
    },
    sliderStart: function sliderStart(e) {
      this.$emit('sliderStart', e);
    },
    beforeSliderStart: function beforeSliderStart(e) {
      this.$emit('beforeSliderStart', e);
    },
    trackChange: function trackChange(e) {
      this.$emit('trackChange', e);
    },
    sliderKeyboardChange: function sliderKeyboardChange(e) {
      this.$emit('sliderKeyboardChange', e);
    },
    panelChange: function panelChange(e) {
      this.sliderValue = e;
      this.$emit('changePicker', e);
    },
    reset: function reset() {
      this.$refs.slider.reset();
    }
  },
  watch: {
    value: {
      handler: function handler(e) {
        this.sliderValue = e;
      },

      deep: true,
      immediate: true
    },
    mode: {
      handler: function handler(e) {
        this.panelMode = e;
      },

      immediate: true,
      deep: true
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var props = this.$props;
    var customizePrefixCls = props.prefixCls,
        theme = props.theme,
        isPart = props.isPart;

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('date-progress-slider', customizePrefixCls);
    var wrapperCls = (0, _classnames2['default'])([prefixCls, prefixCls + '-' + theme, this.panelMode === 'hour' && isPart ? prefixCls + '-part' : '']);

    var sliderProps = {
      props: (0, _extends3['default'])({}, props, {
        mode: this.panelMode,
        value: this.sliderValue
      })
    };

    var panelProps = {
      props: (0, _extends3['default'])({}, props, {
        type: this.type,
        value: this.sliderValue
      })
    };

    return h(
      'div',
      { 'class': wrapperCls },
      [h(_panelPicker2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([panelProps, {
        on: {
          'mode': function mode(e) {
            return _this.changeMode(e);
          },
          'change': function change(e) {
            return _this.panelChange(e);
          }
        }
      }])), h(_slider2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([{
        attrs: {
          'reset-color': true
        }
      }, sliderProps, {
        ref: 'slider',
        on: {
          'sliderChange': function sliderChange(e) {
            return _this.sliderChange(e);
          },
          'sliderStart': function sliderStart(e) {
            return _this.sliderStart(e);
          },
          'sliderEnd': function sliderEnd(e) {
            return _this.sliderEnd(e);
          },
          'beforeSliderStart': function beforeSliderStart(e) {
            return _this.beforeSliderStart(e);
          },
          'trackChange': function trackChange(e) {
            return _this.trackChange(e);
          },
          'sliderKeyboardChange': function sliderKeyboardChange(e) {
            return _this.sliderKeyboardChange(e);
          }
        }
      }]))]
    );
  }
};