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

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

import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import { filterEmpty } from "../_util/props-util";
import Tabs from '../tabs';

export default {
  name: 'IepScrollTabs',
  props: {
    prefixCls: PropTypes.string,
    direction: PropTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),
    activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    bordered: PropTypes.bool.def(true)
  },
  inject: {
    configProvider: { 'default': function _default() {
        return 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 = filterEmpty($slots['default']);
    var direction = $props.direction,
        bordered = $props.bordered;

    var tabPaneVNodes = children.map(function (item) {
      return h(
        Tabs.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(
        Tabs,
        tabsProps,
        [tabPaneVNodes]
      )]
    );
  }
};