| 1 |
- {"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"]}
|
