iep-ui/es/date-progress-slider/main.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 PanelPicker from './panelPicker';
import Slider from './slider';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import classNames from 'classnames';
import { mergeProps } from '../_util/props-util';

export default {
  name: 'IepDateProgressSlider',
  props: mergeProps({
    prefixCls: PropTypes.string,
    theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
    tipFormat: PropTypes.string.def('YYYY-MM-DD HH:mm:ss'),
    track: PropTypes.oneOf(['all', 'odd', 'even', 'bothEnds']).def('bothEnds'),
    trackStrictly: PropTypes.bool.def(false),
    isPart: PropTypes.bool.def(false),
    trackFunc: PropTypes.func,
    type: {
      type: Array,
      'default': function _default() {
        return ['minute', 'hour', 'day', 'week', 'month', 'year'];
      }
    },
    pickerVisible: PropTypes.bool.def(true)
  }, Slider.props),
  inject: {
    configProvider: { 'default': function _default() {
        return 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 = classNames([prefixCls, prefixCls + '-' + theme, this.panelMode === 'hour' && isPart ? prefixCls + '-part' : '']);

    var sliderProps = {
      props: _extends({}, props, {
        mode: this.panelMode,
        value: this.sliderValue
      })
    };

    var panelProps = {
      props: _extends({}, props, {
        type: this.type,
        value: this.sliderValue
      })
    };

    return h(
      'div',
      { 'class': wrapperCls },
      [h(PanelPicker, _mergeJSXProps([panelProps, {
        on: {
          'mode': function mode(e) {
            return _this.changeMode(e);
          },
          'change': function change(e) {
            return _this.panelChange(e);
          }
        }
      }])), h(Slider, _mergeJSXProps([{
        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);
          }
        }
      }]))]
    );
  }
};