collapse-panel.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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 './props';
  10. import { getRect } from '../common/utils';
  11. const { prefix } = config;
  12. const name = `${prefix}-collapse-panel`;
  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/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. expanded: false,
  39. classPrefix: name,
  40. classBasePrefix: prefix,
  41. ultimateExpandIcon: false,
  42. ultimateDisabled: false,
  43. };
  44. this.methods = {
  45. set(data) {
  46. this.setData(data);
  47. return new Promise((resolve) => wx.nextTick(resolve));
  48. },
  49. updateExpanded(activeValues) {
  50. if (!this.parent) {
  51. return;
  52. }
  53. const { value } = this.properties;
  54. const expanded = activeValues.includes(value);
  55. if (expanded === this.properties.expanded)
  56. return;
  57. this.setData({ expanded });
  58. this.updateStyle(expanded);
  59. },
  60. updateStyle(expanded) {
  61. return getRect(this, `.${name}__content`)
  62. .then((rect) => rect.height)
  63. .then((height) => {
  64. const animation = wx.createAnimation({
  65. duration: 300,
  66. timingFunction: 'ease-in-out',
  67. });
  68. if (expanded) {
  69. animation.height(height).step();
  70. }
  71. else {
  72. animation.height(0).step();
  73. }
  74. this.setData({ animation: animation.export() });
  75. });
  76. },
  77. onClick() {
  78. const { ultimateDisabled } = this.data;
  79. const { value } = this.properties;
  80. if (ultimateDisabled)
  81. return;
  82. this.parent.switch(value);
  83. },
  84. };
  85. }
  86. };
  87. CollapsePanel = __decorate([
  88. wxComponent()
  89. ], CollapsePanel);
  90. export default CollapsePanel;