@ohu-mobile/core/lib-rem/Tabbar/Tabbar.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
var _variables = require("../_config/variables");
var _defineComponent = require("../_utils/defineComponent");
var _scrollIntoCenter2 = _interopRequireDefault(require("../_utils/scrollIntoCenter"));
var _debounce = _interopRequireDefault(require("../_utils/debounce"));
var _bindEvent = _interopRequireDefault(require("../_utils/bindEvent"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Tabbar = (0, _defineComponent.defineComponent)('tabbar').create({
  props: {
    value: (0, _defineComponent.props)(String, Number).optional,
    border: (0, _defineComponent.props)(Boolean).default(true),
    activeColor: (0, _defineComponent.props)(String).default('primary'),
    inActiveColor: (0, _defineComponent.props)(String).default(_variables.$colorTextBase),
    hasIndicator: (0, _defineComponent.props)(Boolean).default(false),
    indicatorWidth: (0, _defineComponent.props)(Number, String).default(100),
    indicatorHeight: (0, _defineComponent.props)(String).default('2px'),
    indicatorInverse: (0, _defineComponent.props)(Boolean).default(false),
    vertical: (0, _defineComponent.props)(Boolean).default(false),
    scroll: (0, _defineComponent.props)(Boolean).default(false)
  },
  data: function data() {
    return {
      stateValue: this.value,
      childrenRects: [],
      indicatorPositions: {}
    };
  },
  watch: {
    value: function value(changedValue) {
      this.stateValue = changedValue;
    },
    indicatorWidth: function indicatorWidth() {
      this.relayout();
    }
  },
  methods: {
    scrollIntoCenter: function scrollIntoCenter() {
      if (this.scroll && this.stateValue) {
        var indicatorPos = this.indicatorPositions[this.stateValue];
        if (indicatorPos) {
          (0, _scrollIntoCenter2.default)(this.$el, indicatorPos, this.vertical);
        }
      }
    },
    onChange: function onChange(key, index, name) {
      this.stateValue = key;
      this.$emit('change', {
        key: key,
        index: index,
        name: name
      });
      this.$emit('input', this.stateValue);
    },
    computeChildrenRect: function computeChildrenRect() {
      this.childrenRects = this.$children.map(function (child) {
        var el = child.$el;
        var _el$getBoundingClient = el.getBoundingClientRect(),
          width = _el$getBoundingClient.width,
          height = _el$getBoundingClient.height;
        return {
          key: child.selfKey,
          width: width,
          height: height
        };
      });
    },
    computeIndicator: function computeIndicator() {
      var _this = this;
      var currentPosition = 0;
      this.indicatorPositions = this.childrenRects.reduce(function (prev, rect) {
        var size = _this.vertical ? rect.height : rect.width;
        var indicatorWidth = 0;
        if (typeof _this.indicatorWidth === 'number') {
          indicatorWidth = size * _this.indicatorWidth / 100;
        } else {
          indicatorWidth = parseInt(_this.indicatorWidth);
        }
        var indicatorLeft = (size - indicatorWidth) / 2;
        var offset = indicatorLeft + currentPosition;
        currentPosition += size;
        if (rect.key === undefined) return prev;
        if (prev[rect.key.toString()]) return prev;
        prev[rect.key.toString()] = {
          size: indicatorWidth,
          offset: offset
        };
        return prev;
      }, {});
    },
    relayout: function relayout() {
      this.computeChildrenRect();
      this.computeIndicator();
      this.scrollIntoCenter();
    },
    handleResize: function handleResize() {
      var _this2 = this;
      var handler = (0, _debounce.default)(function () {
        _this2.relayout();
      }, 500);
      (0, _bindEvent.default)(this, 'resize', handler);
    }
  },
  mounted: function mounted() {
    if (this.hasIndicator || this.scroll) {
      this.relayout();
      this.handleResize();
    }
  },
  render: function render() {
    var h = arguments[0];
    var root = this.$rootCls();
    var $slots = this.$slots,
      $attrs = this.$attrs,
      inActiveColor = this.inActiveColor,
      border = this.border,
      hasIndicator = this.hasIndicator,
      indicatorHeight = this.indicatorHeight,
      activeColor = this.activeColor,
      vertical = this.vertical,
      indicatorInverse = this.indicatorInverse,
      scroll = this.scroll;
    var tabbarProps = {
      attrs: $attrs,
      class: root.has([border && 'border', hasIndicator && 'indicator']).addClasses([!hasIndicator && 'no-indicator']).is([vertical ? 'vertical' : 'horizontal', scroll && 'scroll', !indicatorInverse ? 'indicator-normal' : 'indicator-inverse']),
      style: {
        color: inActiveColor
      }
    };
    var indicatorStyle = {};
    if (activeColor) {
      indicatorStyle.background = activeColor;
    }
    if (hasIndicator && this.stateValue !== undefined) {
      var indicatorPos = this.indicatorPositions[this.stateValue];
      if (indicatorPos) {
        if (this.vertical) {
          indicatorStyle.width = indicatorHeight;
          indicatorStyle.height = "".concat(indicatorPos.size, "px");
          indicatorStyle.transform = "translateY(".concat(indicatorPos.offset, "px)");
        } else {
          indicatorStyle.width = "".concat(indicatorPos.size, "px");
          indicatorStyle.height = indicatorHeight;
          indicatorStyle.transform = "translateX(".concat(indicatorPos.offset, "px)");
        }
      }
    }
    return h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, tabbarProps]), [$slots.default, hasIndicator && h("span", {
      "class": root.element('indicator'),
      "style": indicatorStyle
    })]);
  }
});
var _default = exports.default = Tabbar;