index.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports["default"] = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _utils = require("../utils");
  7. var _raf = require("../utils/raf");
  8. var _cell = _interopRequireDefault(require("../cell"));
  9. var _shared = require("../cell/shared");
  10. var _findParent = require("../mixins/find-parent");
  11. var _use = (0, _utils.use)('collapse-item'),
  12. sfc = _use[0],
  13. bem = _use[1];
  14. var CELL_SLOTS = ['title', 'icon', 'right-icon'];
  15. var _default = sfc({
  16. mixins: [_findParent.FindParentMixin],
  17. props: (0, _extends2["default"])({}, _shared.cellProps, {
  18. name: [String, Number],
  19. disabled: Boolean,
  20. isLink: {
  21. type: Boolean,
  22. "default": true
  23. }
  24. }),
  25. data: function data() {
  26. return {
  27. show: null,
  28. inited: null
  29. };
  30. },
  31. computed: {
  32. items: function items() {
  33. return this.parent.items;
  34. },
  35. index: function index() {
  36. return this.items.indexOf(this);
  37. },
  38. currentName: function currentName() {
  39. return (0, _utils.isDef)(this.name) ? this.name : this.index;
  40. },
  41. expanded: function expanded() {
  42. var _this = this;
  43. if (!this.parent) {
  44. return null;
  45. }
  46. var value = this.parent.value;
  47. return this.parent.accordion ? value === this.currentName : value.some(function (name) {
  48. return name === _this.currentName;
  49. });
  50. }
  51. },
  52. created: function created() {
  53. this.findParent('van-collapse');
  54. this.items.push(this);
  55. this.show = this.expanded;
  56. this.inited = this.expanded;
  57. },
  58. destroyed: function destroyed() {
  59. this.items.splice(this.index, 1);
  60. },
  61. watch: {
  62. expanded: function expanded(_expanded, prev) {
  63. var _this2 = this;
  64. if (prev === null) {
  65. return;
  66. }
  67. if (_expanded) {
  68. this.show = true;
  69. this.inited = true;
  70. }
  71. (0, _raf.raf)(function () {
  72. var _this2$$refs = _this2.$refs,
  73. content = _this2$$refs.content,
  74. wrapper = _this2$$refs.wrapper;
  75. if (!content || !wrapper) {
  76. return;
  77. }
  78. var clientHeight = content.clientHeight;
  79. if (clientHeight) {
  80. var contentHeight = clientHeight + "px";
  81. wrapper.style.height = _expanded ? 0 : contentHeight;
  82. (0, _raf.raf)(function () {
  83. wrapper.style.height = _expanded ? contentHeight : 0;
  84. });
  85. } else {
  86. _this2.onTransitionEnd();
  87. }
  88. });
  89. }
  90. },
  91. methods: {
  92. onClick: function onClick() {
  93. if (this.disabled) {
  94. return;
  95. }
  96. var parent = this.parent;
  97. var name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
  98. var expanded = !this.expanded;
  99. this.parent["switch"](name, expanded);
  100. },
  101. onTransitionEnd: function onTransitionEnd() {
  102. if (!this.expanded) {
  103. this.show = false;
  104. } else {
  105. this.$refs.wrapper.style.height = null;
  106. }
  107. }
  108. },
  109. render: function render(h) {
  110. var _this3 = this;
  111. var titleSlots = CELL_SLOTS.reduce(function (slots, name) {
  112. if (_this3.slots(name)) {
  113. slots[name] = function () {
  114. return _this3.slots(name);
  115. };
  116. }
  117. return slots;
  118. }, {});
  119. if (this.slots('value')) {
  120. titleSlots["default"] = function () {
  121. return _this3.slots('value');
  122. };
  123. }
  124. var Title = h(_cell["default"], {
  125. "class": bem('title', {
  126. disabled: this.disabled,
  127. expanded: this.expanded
  128. }),
  129. "on": {
  130. "click": this.onClick
  131. },
  132. "scopedSlots": titleSlots,
  133. "props": (0, _extends2["default"])({}, this.$props)
  134. });
  135. var Content = this.inited && h("div", {
  136. "directives": [{
  137. name: "show",
  138. value: this.show
  139. }],
  140. "ref": "wrapper",
  141. "class": bem('wrapper'),
  142. "on": {
  143. "transitionend": this.onTransitionEnd
  144. }
  145. }, [h("div", {
  146. "ref": "content",
  147. "class": bem('content')
  148. }, [this.slots()])]);
  149. return h("div", {
  150. "class": [bem(), {
  151. 'van-hairline--top': this.index
  152. }]
  153. }, [Title, Content]);
  154. }
  155. });
  156. exports["default"] = _default;