collapse-panel.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './collapse-panel-props';
  10. const { prefix } = config;
  11. const name = `${prefix}-collapse-panel`;
  12. const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
  13. let CollapsePanel = class CollapsePanel extends SuperComponent {
  14. constructor() {
  15. super(...arguments);
  16. this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`];
  17. this.options = {
  18. multipleSlots: true,
  19. };
  20. this.relations = {
  21. './collapse': {
  22. type: 'ancestor',
  23. linked(target) {
  24. this.parent = target;
  25. const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties;
  26. const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value;
  27. this.setData({
  28. ultimateExpandIcon: expandIcon || this.properties.expandIcon,
  29. ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
  30. });
  31. this.updateExpanded(activeValues);
  32. },
  33. },
  34. };
  35. this.properties = props;
  36. this.data = {
  37. prefix,
  38. contentHeight: 0,
  39. expanded: false,
  40. classPrefix: name,
  41. classBasePrefix: prefix,
  42. ultimateExpandIcon: false,
  43. ultimateDisabled: false,
  44. };
  45. this.methods = {
  46. set(data) {
  47. this.setData(data);
  48. return new Promise((resolve) => wx.nextTick(resolve));
  49. },
  50. updateExpanded(activeValues) {
  51. if (!this.parent) {
  52. return Promise.resolve()
  53. .then(nextTick)
  54. .then(() => {
  55. const data = { transition: true };
  56. if (this.data.expanded) {
  57. data.contentHeight = 'auto';
  58. }
  59. this.setData(data);
  60. });
  61. }
  62. const { value } = this.properties;
  63. const expanded = activeValues.includes(value);
  64. if (expanded === this.properties.expanded)
  65. return;
  66. this.setData({ expanded });
  67. this.updateStyle(expanded);
  68. },
  69. getRect(selector) {
  70. return new Promise((resolve) => {
  71. wx.createSelectorQuery()
  72. .in(this)
  73. .select(selector)
  74. .boundingClientRect((rect) => {
  75. if (rect) {
  76. resolve(rect);
  77. }
  78. })
  79. .exec();
  80. });
  81. },
  82. updateStyle(expanded) {
  83. return this.getRect(`.${name}__content`)
  84. .then((rect) => rect.height)
  85. .then((height) => {
  86. if (expanded) {
  87. return this.set({
  88. contentHeight: height ? `${height}px` : 'auto',
  89. });
  90. }
  91. return this.set({ contentHeight: `${height}px` })
  92. .then(nextTick)
  93. .then(() => this.set({ contentHeight: 0 }));
  94. });
  95. },
  96. onClick() {
  97. const { ultimateDisabled } = this.data;
  98. const { value } = this.properties;
  99. if (ultimateDisabled)
  100. return;
  101. this.parent.switch(value);
  102. },
  103. onTransitionEnd() {
  104. if (this.data.expanded) {
  105. this.setData({
  106. contentHeight: 'auto',
  107. });
  108. }
  109. },
  110. };
  111. }
  112. };
  113. CollapsePanel = __decorate([
  114. wxComponent()
  115. ], CollapsePanel);
  116. export default CollapsePanel;