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`];
  17. this.relations = {
  18. './collapse': {
  19. type: 'ancestor',
  20. linked(target) {
  21. this.parent = target;
  22. const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties;
  23. const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value;
  24. this.setData({
  25. ultimateExpandIcon: expandIcon || this.properties.expandIcon,
  26. ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
  27. });
  28. this.updateExpanded(activeValues);
  29. },
  30. },
  31. };
  32. this.properties = props;
  33. this.data = {
  34. contentHeight: 0,
  35. expanded: false,
  36. classPrefix: name,
  37. classBasePrefix: prefix,
  38. ultimateExpandIcon: false,
  39. ultimateDisabled: false,
  40. };
  41. this.methods = {
  42. set(data) {
  43. this.setData(data);
  44. return new Promise((resolve) => wx.nextTick(resolve));
  45. },
  46. updateExpanded(activeValues) {
  47. if (!this.parent) {
  48. return Promise.resolve()
  49. .then(nextTick)
  50. .then(() => {
  51. const data = { transition: true };
  52. if (this.data.expanded) {
  53. data.contentHeight = 'auto';
  54. }
  55. this.setData(data);
  56. });
  57. }
  58. const { value } = this.properties;
  59. const expanded = activeValues.includes(value);
  60. if (expanded === this.properties.expanded)
  61. return;
  62. this.setData({ expanded });
  63. this.updateStyle(expanded);
  64. },
  65. getRect(selector, all) {
  66. return new Promise((resolve) => {
  67. wx.createSelectorQuery()
  68. .in(this)[all ? 'selectAll' : 'select'](selector)
  69. .boundingClientRect((rect) => {
  70. if (all && Array.isArray(rect) && rect.length) {
  71. resolve(rect);
  72. }
  73. if (!all && rect) {
  74. resolve(rect);
  75. }
  76. })
  77. .exec();
  78. });
  79. },
  80. updateStyle(expanded) {
  81. return this.getRect(`.${name}__content`)
  82. .then((rect) => rect.height)
  83. .then((height) => {
  84. if (expanded) {
  85. return this.set({
  86. contentHeight: height ? `${height}px` : 'auto',
  87. });
  88. }
  89. return this.set({ contentHeight: `${height}px` })
  90. .then(nextTick)
  91. .then(() => this.set({ contentHeight: 0 }));
  92. });
  93. },
  94. onClick() {
  95. const { ultimateDisabled } = this.data;
  96. const { value } = this.properties;
  97. if (ultimateDisabled)
  98. return;
  99. this.parent.switch(value);
  100. },
  101. onTransitionEnd() {
  102. if (this.data.expanded) {
  103. this.setData({
  104. contentHeight: 'auto',
  105. });
  106. }
  107. },
  108. };
  109. }
  110. };
  111. CollapsePanel = __decorate([
  112. wxComponent()
  113. ], CollapsePanel);
  114. export default CollapsePanel;
  115. //# sourceMappingURL=collapse-panel.js.map