collapse-panel.js 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. const { value, expandIcon, disabled } = target.properties;
  25. this.setData({
  26. ultimateExpandIcon: this.properties.expandIcon == null ? expandIcon : this.properties.expandIcon,
  27. ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
  28. });
  29. this.updateExpanded(value);
  30. },
  31. },
  32. };
  33. this.properties = props;
  34. this.data = {
  35. prefix,
  36. expanded: false,
  37. classPrefix: name,
  38. classBasePrefix: prefix,
  39. ultimateExpandIcon: false,
  40. ultimateDisabled: false,
  41. };
  42. this.observers = {
  43. disabled(v) {
  44. this.setData({ ultimateDisabled: !!v });
  45. },
  46. };
  47. this.methods = {
  48. updateExpanded(activeValues = []) {
  49. if (!this.$parent) {
  50. return;
  51. }
  52. const { value } = this.properties;
  53. const { defaultExpandAll } = this.$parent.data;
  54. const expanded = defaultExpandAll ? !this.data.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: 0,
  66. timingFunction: 'ease-in-out',
  67. });
  68. if (expanded) {
  69. animation.height(height).top(0).step({ duration: 300 }).height('auto').step();
  70. }
  71. else {
  72. animation.height(height).top(1).step({ duration: 1 }).height(0).step({ duration: 300 });
  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. if (this.$parent.data.defaultExpandAll) {
  83. this.updateExpanded();
  84. }
  85. else {
  86. this.$parent.switch(value);
  87. }
  88. },
  89. };
  90. }
  91. };
  92. CollapsePanel = __decorate([
  93. wxComponent()
  94. ], CollapsePanel);
  95. export default CollapsePanel;