@ohu-mobile/core/lib/Collapse/CollapseItem.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _LoaderTailOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/LoaderTailOutlined"));
var _defineComponent = require("../_utils/defineComponent");
var _Icon = _interopRequireDefault(require("../Icon"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _animate = _interopRequireDefault(require("../_utils/animate"));
var _easing = require("../_utils/easing");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _defineComponent.defineDescendantComponent)('collapse', 'collapse-item').create({
  props: {
    title: (0, _defineComponent.props)(String).default(''),
    hasList: (0, _defineComponent.props)(Boolean).default(false),
    disabled: (0, _defineComponent.props)(Boolean).default(false),
    loading: (0, _defineComponent.props)(Boolean).default(false)
  },
  computed: {
    expandState: function expandState() {
      return this.getExpandState();
    }
  },
  data: function data() {
    return {
      startHeight: -1,
      contentHeight: -1
    };
  },
  methods: {
    getExpandState: function getExpandState() {
      if (this.disabled) return false;
      var key = this.$vnode.key;
      var value = this.ancestor.state;
      if (!key || !value) return false;
      return value instanceof Array ? value.indexOf(key) >= 0 : value === key;
    },
    handleHeaderClick: function handleHeaderClick(expandState) {
      if (this.loading) return;
      if (this.disabled) return;
      var key = this.$vnode.key;
      if (key) {
        this.ancestor.itemChange(key, !expandState);
      }
      if (this.expandState) {
        this.$emit('expand', key);
      } else {
        this.$emit('shrink', key);
      }
    },
    beforeContentEnter: function beforeContentEnter(el) {
      var _this = this;
      el.style.height = 'auto';
      this.$nextTick(function () {
        (0, _animate.default)(el, {
          timingFunction: _easing.easeOutQuint,
          duration: 300,
          done: function done() {
            el.style.height = '';
            _this.$emit('expanded');
          },
          props: {
            height: [0, el.offsetHeight]
          }
        });
      });
    },
    contentLeave: function contentLeave(el, _done) {
      var _this2 = this;
      el.style.height = "".concat(el.offsetHeight, "px");
      (0, _animate.default)(el, {
        timingFunction: _easing.easeOutQuint,
        duration: 300,
        done: function done() {
          el.style.height = '';
          _this2.$emit('shrinked');
          _done();
        },
        props: {
          height: 0
        }
      });
    }
  },
  render: function render() {
    var _this3 = this;
    var h = arguments[0];
    var $slots = this.$slots,
      title = this.title,
      ancestor = this.ancestor,
      expandState = this.expandState,
      hasList = this.hasList,
      disabled = this.disabled;
    var root = this.$rootCls();
    var header = root.element('header');
    var content = root.element('content');
    var contentStyle = {};
    if (!expandState) {
      contentStyle.display = 'none';
      contentStyle.height = '0';
    }
    return h("div", {
      "class": root.is([expandState && 'expand', disabled && 'disabled'])
    }, [h("div", {
      "class": header.is([ancestor.expandIcon ? ancestor.expandIconPosition : '']),
      "attrs": {
        "role": "button",
        "tabindex": -1,
        "aria-expanded": expandState
      },
      "on": {
        "click": function click() {
          return _this3.handleHeaderClick(expandState);
        }
      }
    }, [h("div", {
      "class": header.element('text')
    }, [$slots.title || title]), ancestor.expandIcon && !this.loading && h("div", {
      "class": header.element('icon').is([expandState && 'expand'])
    }, [h(_Icon.default, {
      "attrs": {
        "type": ancestor.expandIcon
      }
    })]), this.loading && h("div", {
      "class": header.element('icon')
    }, [h(_Icon.default, {
      "attrs": {
        "type": _LoaderTailOutlined2.default,
        "spin": true
      }
    })])]), h("transition", {
      "attrs": {
        "css": false
      },
      "on": {
        "beforeEnter": function beforeEnter(el) {
          return _this3.beforeContentEnter(el);
        },
        "leave": function leave(el, done) {
          return _this3.contentLeave(el, done);
        }
      }
    }, [h("div", {
      "class": content,
      "directives": [{
        name: "show",
        value: expandState
      }]
    }, [h(_Divider.default), h("div", {
      "class": content.element('inner').has([hasList && 'list'])
    }, [$slots.default])])])]);
  }
});