iep-ui/lib/iep-scroll-tabs/IepScrollTabs.js

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

'use strict';

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

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

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

var _tabs = require('../tabs');

var _tabs2 = _interopRequireDefault(_tabs);

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

exports['default'] = {
  name: 'IepScrollTabs',
  props: {
    prefixCls: _vueTypes2['default'].string,
    direction: _vueTypes2['default'].oneOf(['horizontal', 'vertical']).def('horizontal'),
    activeKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
    bordered: _vueTypes2['default'].bool.def(true)
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      cacheActiveKey: null,
      disabledAnimated: true
    };
  },

  watch: {
    activeKey: {
      handler: function handler(e) {
        this.cacheActiveKey = e;
      },

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

    this.$nextTick(function () {
      setTimeout(function () {
        _this.disabledAnimated = false;
      }, 500);
    });
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $slots = this.$slots,
        $props = this.$props,
        cacheActiveKey = this.cacheActiveKey;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-scroll-tabs', customizePrefixCls);
    var children = (0, _propsUtil.filterEmpty)($slots['default']);
    var direction = $props.direction,
        bordered = $props.bordered;

    var tabPaneVNodes = children.map(function (item) {
      return h(
        _tabs2['default'].TabPane,
        { key: item.key },
        [h(
          'template',
          { slot: 'tab' },
          [item]
        )]
      );
    });

    var cls = 'ant-iep-scroll-tabs-nav-no-animated';

    var tabsProps = {
      props: {
        tabPosition: direction === 'vertical' ? 'left' : 'top',
        activeKey: cacheActiveKey
      },
      on: {
        tabClick: function tabClick(e) {
          _this2.cacheActiveKey = e;
          _this2.$emit('change', e);
        }
      }
    };
    return h(
      'div',
      { 'class': [prefixCls, prefixCls + '-' + direction, !bordered ? [prefixCls + '-border-hide'] : '', this.disabledAnimated ? cls : ''] },
      [h(
        _tabs2['default'],
        tabsProps,
        [tabPaneVNodes]
      )]
    );
  }
};