drip-ui/lib/collapse-item/index.js

Lightweight Mobile UI Components built on Vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _raf = require("../utils/raf");

var _create = _interopRequireDefault(require("../utils/create"));

var _findParent = _interopRequireDefault(require("../mixins/find-parent"));

var _default = (0, _create["default"])({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      "class": [_vm.b(), {
        'drip-hairline--top': _vm.index
      }]
    }, [_c('cell', _vm._b({
      "class": _vm.b('title', {
        disabled: _vm.disabled,
        expanded: _vm.expanded
      }),
      on: {
        "click": _vm.onClick
      }
    }, 'cell', _vm.$props, false), [_vm._t("title", null, {
      slot: "title"
    }), _vm._t("icon", null, {
      slot: "icon"
    }), _vm._t("value"), _vm._t("right-icon", null, {
      slot: "right-icon"
    })], 2), _vm.inited ? _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.show,
        expression: "show"
      }],
      ref: "wrapper",
      "class": _vm.b('wrapper'),
      on: {
        "transitionend": _vm.onTransitionEnd
      }
    }, [_c('div', {
      ref: "content",
      "class": _vm.b('content')
    }, [_vm._t("default")], 2)]) : _vm._e()], 1);
  },
  name: 'collapse-item',
  mixins: [_findParent["default"]],
  props: {
    name: [String, Number],
    icon: String,
    label: String,
    title: [String, Number],
    value: [String, Number],
    disabled: Boolean,
    border: {
      type: Boolean,
      "default": true
    },
    isLink: {
      type: Boolean,
      "default": true
    }
  },
  data: function data() {
    return {
      show: null,
      inited: null
    };
  },
  computed: {
    items: function items() {
      return this.parent.items;
    },
    index: function index() {
      return this.items.indexOf(this);
    },
    currentName: function currentName() {
      return this.isDef(this.name) ? this.name : this.index;
    },
    expanded: function expanded() {
      var _this = this;

      if (!this.parent) {
        return null;
      }

      var value = this.parent.value;
      return this.parent.accordion ? value === this.currentName : value.some(function (name) {
        return name === _this.currentName;
      });
    }
  },
  created: function created() {
    this.findParent('drip-collapse');
    this.items.push(this);
    this.show = this.expanded;
    this.inited = this.expanded;
  },
  destroyed: function destroyed() {
    this.items.splice(this.index, 1);
  },
  watch: {
    expanded: function expanded(_expanded, prev) {
      var _this2 = this;

      if (prev === null) {
        return;
      }

      if (_expanded) {
        this.show = true;
        this.inited = true;
      }

      this.$nextTick(function () {
        var _this2$$refs = _this2.$refs,
            content = _this2$$refs.content,
            wrapper = _this2$$refs.wrapper;

        if (!content || !wrapper) {
          return;
        }

        var contentHeight = content.clientHeight + 'px';
        wrapper.style.height = _expanded ? 0 : contentHeight;
        (0, _raf.raf)(function () {
          wrapper.style.height = _expanded ? contentHeight : 0;
        });
      });
    }
  },
  methods: {
    onClick: function onClick() {
      if (this.disabled) {
        return;
      }

      var parent = this.parent;
      var name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
      var expanded = !this.expanded;
      this.parent["switch"](name, expanded);
    },
    onTransitionEnd: function onTransitionEnd() {
      if (!this.expanded) {
        this.show = false;
      } else {
        this.$refs.wrapper.style.height = null;
      }
    }
  }
});

exports["default"] = _default;