| | |
| | | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { |
| | | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; |
| | | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); |
| | | 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; |
| | | return c > 3 && r && Object.defineProperty(target, key, r), r; |
| | | }; |
| | | import { SuperComponent, wxComponent } from '../common/src/index'; |
| | | import config from '../common/config'; |
| | | import props from './props'; |
| | | import { getRect } from '../common/utils'; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-collapse-panel`; |
| | | let CollapsePanel = class CollapsePanel extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`]; |
| | | this.options = { |
| | | multipleSlots: true, |
| | | }; |
| | | this.relations = { |
| | | '../collapse/collapse': { |
| | | type: 'ancestor', |
| | | linked(target) { |
| | | const { value, expandIcon, disabled } = target.properties; |
| | | this.setData({ |
| | | ultimateExpandIcon: expandIcon || this.properties.expandIcon, |
| | | ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled, |
| | | }); |
| | | this.updateExpanded(value); |
| | | }, |
| | | }, |
| | | }; |
| | | this.properties = props; |
| | | this.data = { |
| | | prefix, |
| | | expanded: false, |
| | | classPrefix: name, |
| | | classBasePrefix: prefix, |
| | | ultimateExpandIcon: false, |
| | | ultimateDisabled: false, |
| | | }; |
| | | this.methods = { |
| | | updateExpanded(activeValues = []) { |
| | | if (!this.$parent || this.data.ultimateDisabled) { |
| | | return; |
| | | } |
| | | const { value } = this.properties; |
| | | const { defaultExpandAll } = this.$parent.data; |
| | | const expanded = defaultExpandAll ? !this.data.expanded : activeValues.includes(value); |
| | | if (expanded === this.properties.expanded) |
| | | return; |
| | | this.setData({ expanded }); |
| | | this.updateStyle(expanded); |
| | | }, |
| | | updateStyle(expanded) { |
| | | return getRect(this, `.${name}__content`) |
| | | .then((rect) => rect.height) |
| | | .then((height) => { |
| | | const animation = wx.createAnimation({ |
| | | duration: 0, |
| | | timingFunction: 'ease-in-out', |
| | | }); |
| | | if (expanded) { |
| | | animation.height(height).top(0).step({ duration: 300 }).height('auto').step(); |
| | | } |
| | | else { |
| | | animation.height(height).top(1).step({ duration: 1 }).height(0).step({ duration: 300 }); |
| | | } |
| | | this.setData({ animation: animation.export() }); |
| | | }); |
| | | }, |
| | | onClick() { |
| | | const { ultimateDisabled } = this.data; |
| | | const { value } = this.properties; |
| | | if (ultimateDisabled) |
| | | return; |
| | | if (this.$parent.data.defaultExpandAll) { |
| | | this.updateExpanded(); |
| | | } |
| | | else { |
| | | this.$parent.switch(value); |
| | | } |
| | | }, |
| | | }; |
| | | } |
| | | }; |
| | | CollapsePanel = __decorate([ |
| | | wxComponent() |
| | | ], CollapsePanel); |
| | | export default CollapsePanel; |
| | | import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-collapse-panel`;let CollapsePanel=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-header`],this.options={multipleSlots:!0},this.relations={"../collapse/collapse":{type:"ancestor",linked(e){const{value:t,expandIcon:a,disabled:s}=e.properties;this.setData({ultimateExpandIcon:null==this.properties.expandIcon?a:this.properties.expandIcon,ultimateDisabled:null==this.properties.disabled?s:this.properties.disabled}),this.updateExpanded(t)}}},this.properties=props,this.data={prefix:prefix,expanded:!1,classPrefix:name,classBasePrefix:prefix,ultimateExpandIcon:!1,ultimateDisabled:!1},this.observers={disabled(e){this.setData({ultimateDisabled:!!e})}},this.methods={updateExpanded(e=[]){if(!this.$parent)return;const{value:t}=this.properties,{defaultExpandAll:a}=this.$parent.data,s=a?!this.data.expanded:e.includes(t);s!==this.properties.expanded&&(this.setData({expanded:s}),this.updateStyle(s))},updateStyle(e){return getRect(this,`.${name}__content`).then(e=>e.height).then(t=>{const a=wx.createAnimation({duration:0,timingFunction:"ease-in-out"});e?a.height(t).top(0).step({duration:300}).height("auto").step():a.height(t).top(1).step({duration:1}).height(0).step({duration:300}),this.setData({animation:a.export()})})},onClick(){const{ultimateDisabled:e}=this.data,{value:t}=this.properties;e||(this.$parent.data.defaultExpandAll?this.updateExpanded():this.$parent.switch(t))}}}};CollapsePanel=__decorate([wxComponent()],CollapsePanel);export default CollapsePanel; |