{"version":3,"sources":["../src/tabs/tabs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAe,MAAM,qBAAqB,CAAC;AAelE,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,cAAc;IAC9C,SAAS,WAAgB;IAEzB,eAAe,WAKb;IAEF,SAAS;;;2BAGU,GAAG;;;MAapB;IAEF,UAAU,+BAAS;IAEnB,eAAe;;;QAKb;IAEF,SAAS;;;MAUP;IAEF,IAAI;;;;;;;;;;;;MAUF;IAEF,OAAO;IAIP,QAAQ;IAqBR,UAAU;IAQV,qBAAqB,CAAC,IAAI,KAAA;IAQ1B,eAAe,CAAC,KAAK,EAAE,MAAM;IAe7B,cAAc;IASd,QAAQ,CAAC,KAAK,SAAY;IAuC1B,QAAQ,CAAC,KAAK,EAAE,GAAG;IAMnB,YAAY,CAAC,KAAK,EAAE,GAAG;IAIvB,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,UAAU;IASV,WAAW,CAAC,KAAK,KAAA;IAOjB,oBAAoB,CAAC,MAAM,EAAE,MAAM;CAYpC","file":"tabs.d.ts","sourcesContent":["import dom from '../behaviors/dom';\nimport touch from '../behaviors/touch';\nimport { SuperComponent, wxComponent } from '../common/src/index';\nimport props from './props';\nimport config from '../common/config';\n\nconst { prefix } = config;\nconst name = `${prefix}-tabs`;\n\nenum Position {\n  top = 'top',\n  right = 'right',\n  bottom = 'bottom',\n  left = 'left',\n}\nconst trackLineWidth = 30;\n@wxComponent()\nexport default class Tabs extends SuperComponent {\n  behaviors = [dom, touch];\n\n  externalClasses = [\n    `${prefix}-class`,\n    `${prefix}-class-item`,\n    `${prefix}-class-active`,\n    `${prefix}-class-track`,\n  ];\n\n  relations = {\n    './tab-panel': {\n      type: 'descendant' as 'descendant',\n      linked(target: any) {\n        this.children.push(target);\n        target.index = this.children.length - 1;\n        this.updateTabs();\n      },\n      unlinked() {\n        this.children = this.children.map((child: any, index: number) => {\n          child.index = index;\n          return child;\n        });\n        this.updateTabs();\n      },\n    },\n  };\n\n  properties = props;\n\n  controlledProps = [\n    {\n      key: 'value',\n      event: 'change',\n    },\n  ];\n\n  observers = {\n    value(name) {\n      if (name !== this.getCurrentName()) {\n        this.setCurrentIndexByName(name);\n      }\n    },\n\n    animation(v) {\n      this.setData({ animate: v });\n    },\n  };\n\n  data = {\n    prefix,\n    classPrefix: name,\n    tabs: [],\n    currentIndex: -1,\n    trackStyle: '',\n    isScrollX: true,\n    isScrollY: false,\n    direction: 'X',\n    animate: { duration: 0 },\n  };\n\n  created() {\n    this.children = this.children || [];\n  }\n\n  attached() {\n    wx.nextTick(() => {\n      this.setTrack();\n    });\n\n    // 根据placement判断scroll-view滚动方向\n    const { placement } = this.properties;\n    let isScrollX = false;\n    let isScrollY = false;\n    if ((placement as any) === Position.top || (placement as any) === Position.bottom) {\n      isScrollX = true;\n    } else {\n      isScrollY = true;\n    }\n    this.setData({\n      isScrollX,\n      isScrollY,\n      direction: isScrollX ? 'X' : 'Y',\n    });\n  }\n\n  updateTabs() {\n    const { children } = this;\n    this.setData({\n      tabs: children.map((child: any) => child.data),\n    });\n    this.setCurrentIndexByName(this.properties.value);\n  }\n\n  setCurrentIndexByName(name) {\n    const { children } = this;\n    const index = children.findIndex((child: any) => child.getComputedName() === `${name}`);\n    if (index > -1) {\n      this.setCurrentIndex(index);\n    }\n  }\n\n  setCurrentIndex(index: number) {\n    if (index <= -1 || index >= this.children.length) return;\n    this.children.forEach((child: any, idx: number) => {\n      const isActive = index === idx;\n      if (isActive !== child.data.active) {\n        child.render(isActive, this);\n      }\n    });\n    if (this.data.currentIndex === index) return;\n    this.setData({\n      currentIndex: index,\n    });\n    this.setTrack();\n  }\n\n  getCurrentName() {\n    if (this.children) {\n      const activeTab = this.children[this.data.currentIndex];\n      if (activeTab) {\n        return activeTab.getComputedName();\n      }\n    }\n  }\n\n  setTrack(color = '#0052d9') {\n    if (!this.properties.showBottomLine) return;\n    const { children } = this;\n    if (!children) return;\n    const { currentIndex, isScrollX, direction } = this.data;\n    if (currentIndex <= -1) return;\n    this.gettingBoundingClientRect(`.${prefix}-tabs__item`, true)\n      .then((res: any) => {\n        const rect = res[currentIndex];\n        if (!rect) return;\n        let count = 0;\n        let distance = 0;\n        // eslint-disable-next-line no-restricted-syntax\n        for (const item of res) {\n          if (count < currentIndex) {\n            distance += isScrollX ? item.width : item.height;\n            count += 1;\n          }\n        }\n\n        if (isScrollX) {\n          distance += (rect.width - trackLineWidth) / 2;\n        }\n        let trackStyle = `background-color: ${color};\n        -webkit-transform: translate${direction}(${distance}px);\n        transform: translate${direction}(${distance}px);\n        -webkit-transition-duration: 0.3s;\n        transition-duration: 0.3s;\n      `;\n        trackStyle += isScrollX ? `width: ${trackLineWidth}px;` : `height: ${rect.height}px;`;\n        this.setData({\n          trackStyle,\n        });\n      })\n      .catch((err) => {\n        this.triggerEvent('error', err);\n      });\n  }\n\n  onTabTap(event: any) {\n    const { index } = event.currentTarget.dataset;\n\n    this.changeIndex(index);\n  }\n\n  onTouchStart(event: any) {\n    this.touchStart(event);\n  }\n\n  onTouchMove(event: any) {\n    this.touchMove(event);\n  }\n\n  onTouchEnd() {\n    const { direction, deltaX, offsetX } = this;\n    const minSwipeDistance = 50;\n    if (direction === 'horizontal' && offsetX >= minSwipeDistance) {\n      const index = this.getAvailableTabIndex(deltaX);\n      this.changeIndex(index);\n    }\n  }\n\n  changeIndex(index) {\n    const currentTab = this.data.tabs[index];\n    if (!currentTab?.disabled && index !== this.data.currentIndex) {\n      this._trigger('change', { value: currentTab.value });\n    }\n  }\n\n  getAvailableTabIndex(deltaX: number) {\n    const step = deltaX > 0 ? -1 : 1;\n    const { currentIndex, tabs } = this.data;\n    const len = tabs.length;\n    for (let i = step; currentIndex + step >= 0 && currentIndex + step < len; i += step) {\n      const newIndex = currentIndex + i;\n      if (newIndex >= 0 && newIndex < len && tabs[newIndex] && !tabs[newIndex].disabled) {\n        return newIndex;\n      }\n    }\n    return -1;\n  }\n}\n"]}