iep-ui/es/date-progress-slider/panelPicker.js

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

import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import { IepIcon } from 'rk-web-icon';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import PropTypes from '../_util/vue-types';
import classNames from 'classnames';
import { TimesType } from '../_util/moment-util';
import { isEmpty } from 'lodash';

var dateEnum = {
  minute: '分钟',
  hour: '小时',
  day: '日',
  week: '周',
  month: '月',
  year: '年'
};

export default {
  name: 'IepPanelPicker',
  props: {
    prefixCls: PropTypes.string,
    pickerVisible: PropTypes.bool.def(true),
    value: TimesType,
    theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
    mode: PropTypes.oneOf(['minute', 'hour', 'day', 'week', 'month', 'year']).def('minute'),
    type: {
      type: Array,
      'default': function _default() {
        return ['minute', 'hour', 'day', 'week', 'month', 'year'];
      }
    }
  },
  model: {
    prop: 'value'
  },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      select: 'minute',
      panelValue: undefined,
      panelType: {
        minute: '分钟',
        hour: '小时',
        day: '日',
        week: '周',
        month: '月',
        year: '年'
      }
    };
  },

  watch: {
    type: {
      handler: function handler(e) {
        var panelType = {};
        if (e && !isEmpty(e)) {
          var _iteratorNormalCompletion = true;
          var _didIteratorError = false;
          var _iteratorError = undefined;

          try {
            for (var _iterator = Object.entries(dateEnum)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
              var _ref = _step.value;

              var _ref2 = _slicedToArray(_ref, 2);

              var k = _ref2[0];
              var v = _ref2[1];

              if (this.type.includes(k)) {
                panelType[k] = v;
              }
            }
          } catch (err) {
            _didIteratorError = true;
            _iteratorError = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion && _iterator['return']) {
                _iterator['return']();
              }
            } finally {
              if (_didIteratorError) {
                throw _iteratorError;
              }
            }
          }

          this.panelType = panelType;
          this.select = this.type.includes(this.mode) ? this.mode : Object.keys(panelType)[0];
          this.$emit('mode', this.select);
        } else {
          this.panelType = dateEnum;
          this.select = this.mode;
          this.$emit('mode', this.mode);
        }
      },

      immediate: true
    },
    value: {
      handler: function handler(e) {
        this.panelValue = e;
      }
    },
    mode: {
      handler: function handler(e) {
        this.select = e;
      }
    }
  },
  created: function created() {
    this.panelValue = this.value;
  },

  methods: {
    handleTap: function handleTap(e) {
      this.select = e.tag;
      this.$emit('mode', e.tag);
    },
    onChange: function onChange(val) {
      this.panelValue = val;
      this.$emit('change', val);
    }
  },
  render: function render() {
    var _this = this;

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

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('panel-picker', customizePrefixCls);
    var wrapperCls = classNames([prefixCls, prefixCls + '-' + theme]);

    var leftNodes = Object.keys(this.panelType).map(function (item) {
      return {
        tag: item,
        text: _this.panelType[item]
      };
    }).map(function (item) {
      var itemCls = classNames([prefixCls + '-left-item', item.tag === select ? prefixCls + '-left-item-active' : '']);
      return h(
        'div',
        { 'class': itemCls, on: {
            'click': function click() {
              return _this.handleTap(item);
            }
          }
        },
        [item.tag === select ? h(IepIcon, {
          attrs: { type: 'basic_linear_common_time' }
        }) : null, h('span', [item.text])]
      );
    });

    var rightNodes = function rightNodes() {
      switch (select) {
        case 'minute':
          return h('a-range-picker', {
            attrs: {
              showTime: true,
              format: 'YYYY-MM-DD HH:mm',
              picker: 'datetime',
              allowClear: false,
              value: _this.panelValue
            },
            on: {
              'change': function change(e) {
                return _this.onChange(e);
              }
            }
          });
        case 'hour':
          return h('a-range-picker', {
            attrs: {
              showTime: true,
              format: 'YYYY-MM-DD HH:00',
              picker: 'datetime',
              allowClear: false,
              value: _this.panelValue
            },
            on: {
              'change': function change(e) {
                return _this.onChange(e);
              }
            }
          });
        case 'day':
          return h('a-range-picker', {
            attrs: {
              picker: 'datetime',
              format: 'YYYY-MM-DD',
              allowClear: false,
              value: _this.panelValue
            },
            on: {
              'change': function change(e) {
                return _this.onChange(e);
              }
            }
          });
        case 'week':
          return h('a-range-picker', {
            attrs: {
              picker: 'week',
              allowClear: false,
              value: _this.panelValue
            },
            on: {
              'change': function change(e) {
                return _this.onChange(e);
              }
            }
          });
        case 'month':
          return h('a-range-picker', {
            attrs: {
              picker: 'month',
              allowClear: false,
              value: _this.panelValue
            },
            on: {
              'change': function change(e) {
                return _this.onChange(e);
              }
            }
          });
        case 'year':
          return h('a-range-picker', {
            attrs: {
              picker: 'year',
              allowClear: false,
              value: _this.panelValue,
              format: 'YYYY\u5E74'
            },
            on: {
              'change': function change(e) {
                return _this.onChange(e);
              }
            }
          });
      }
    };

    return h(
      'div',
      { 'class': wrapperCls },
      [h(
        'div',
        { 'class': prefixCls + '-left' },
        [leftNodes]
      ), this.$props.pickerVisible ? h(
        'div',
        { 'class': [prefixCls + '-right', prefixCls + '-' + select + '-right'] },
        [h(IepIcon, {
          attrs: { type: 'basic_linear_common_calendar' }
        }), h(
          'span',
          { 'class': prefixCls + '-right-date' },
          [rightNodes()]
        )]
      ) : null]
    );
  }
};