chore(release): publish 3.3.0 (#1754)

# [](v3.2.2...v) (2024-01-24) ### Bug Fixes * **divider:** 解决单位编译不正确的问题 [#1725](#1725) ([3243e13](3243e13)) * **swipe-action:** 修复在 h5 环境下点击事件失效的问题 ([1ef87d2](1ef87d2)) * **tabs:** 修复 h5 环境下样式报错的问题 ([8ea0de3](8ea0de3)) * 解决小程序下无法获取元素信息的问题 ([8927199](8927199)), closes [#1734](#1734) * 解决未居中的问题 ([28e47b6](28e47b6)) ### Features * **indexes:** 右侧索引跟随滚动区域高亮 [#1693](#1693) ([0140a61](0140a61)) --------- Co-authored-by: Xia Yuxuan <52569690+Saraph1nes@users.noreply.github.com> Co-authored-by: xiayuxuan <xiayx.leo@qq.com>
jd-opensource · Jan 24, 2024 · 2da93bb · 2da93bb
1 parent 9383a54
commit 2da93bb
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 33 deletions.
diff --git a/examples/about-sass-version/package.json b/examples/about-sass-version/package.json
@@ -52,7 +52,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "taro-hooks": "latest",
-    "taro-ui": "^3.2.2"
+    "taro-ui": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

diff --git a/examples/lazy-load-component/package.json b/examples/lazy-load-component/package.json
@@ -52,7 +52,7 @@
     "@tarojs/taro": "3.6.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "taro-ui": "^3.2.2"
+    "taro-ui": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

diff --git a/packages/taro-ui-demo-rn/package.json b/packages/taro-ui-demo-rn/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "taro-ui-demo-rn",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Taro UI demo",
   "author": "O2Team <aotu.io>",
   "homepage": "https://taro-ui.taro.zone",

diff --git a/packages/taro-ui-demo/package.json b/packages/taro-ui-demo/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "taro-ui-demo",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Taro UI demo",
   "author": "O2Team <aotu.io>",
   "homepage": "https://taro-ui.taro.zone",

diff --git a/packages/taro-ui-docs/package.json b/packages/taro-ui-docs/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "taro-ui-docs",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Taro UI docs",
   "author": "O2Team <aotu.io>",
   "homepage": "https://taro-ui.taro.zone",

diff --git a/packages/taro-ui/package.json b/packages/taro-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taro-ui",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "UI KIT for Taro",
   "module": "dist/index.esm.js",
   "main": "dist/index.js",

diff --git a/packages/taro-ui/rn/common/utils.ts b/packages/taro-ui/rn/common/utils.ts
@@ -214,13 +214,8 @@ function handleTouchScroll(flag: any): void {
 
 function pxTransform(size: number): string {
   if (!size) return ''
-  const designWidth = 750
-  const deviceRatio = {
-    640: 2.34 / 2,
-    750: 1,
-    828: 1.81 / 2
-  }
-  return `${size / deviceRatio[designWidth]}rpx`
+
+  return Taro.pxTransform(size)
 }
 
 function objectToString(style: object | string): string {

diff --git a/packages/taro-ui/rn/components/indexes/index.tsx b/packages/taro-ui/rn/components/indexes/index.tsx
@@ -31,6 +31,7 @@ export default class AtIndexes extends React.Component<
   private listId: string
   private timeoutTimer: NodeJS.Timeout | number | undefined
   private listRef: any
+  private indexMap: { key: string; startHeight: number; endHeight: number }[]
 
   public constructor(props: AtIndexesProps) {
     super(props)
@@ -39,7 +40,8 @@ export default class AtIndexes extends React.Component<
       _scrollTop: 0,
       _tipText: '',
       _isShowToast: false,
-      isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
+      isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB,
+      currentIndex: -1
     }
     // 右侧导航高度
     this.menuHeight = 0
@@ -50,6 +52,7 @@ export default class AtIndexes extends React.Component<
     // 当前索引
     this.currentIndex = -1
     this.listId = isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}`
+    this.indexMap = []
   }
 
   private handleClick = (item: Item): void => {
@@ -136,23 +139,65 @@ export default class AtIndexes extends React.Component<
     }
   }
 
-  private initData(): void {
+  private async initData(): Promise<void> {
     delayQuerySelector('.at-indexes__menu').then(rect => {
       const len = this.props.list.length
       this.menuHeight = rect[0].height
       this.startTop = rect[0].top
       this.itemHeight = Math.floor(this.menuHeight / (len + 1))
     })
+
+    const headerHeight =
+      (await delayQuerySelector('#at-indexes__top'))?.[0]?.height || 0
+    const itemHeight =
+      (await delayQuerySelector('.at-list__item'))?.[0].height || 0
+    const titleHeight =
+      (await delayQuerySelector('.at-indexes__list-title'))?.[0].height || 0
+
+    this.indexMap = []
+    this.props.list.forEach((dataList, i) => {
+      if (i === 0) {
+        this.indexMap.push({
+          key: dataList.key,
+          startHeight: headerHeight,
+          endHeight:
+            dataList.items.length * itemHeight + headerHeight + titleHeight
+        })
+      } else {
+        const prev = this.indexMap[i - 1]
+        this.indexMap.push({
+          key: dataList.key,
+          startHeight: prev.endHeight,
+          endHeight:
+            prev.endHeight + dataList.items.length * itemHeight + titleHeight
+        })
+      }
+    })
   }
 
   private handleScroll(e: CommonEvent): void {
     if (e && e.detail) {
+      const scrollTop = e.detail.scrollTop
+
       this.setState({
-        _scrollTop: e.detail.scrollTop
+        _scrollTop: scrollTop
       })
+
+      this.getAnchorIndex(scrollTop)
     }
   }
 
+  // 根据滚动高度，判断当前应该显示的索引值
+  private getAnchorIndex(scrollTop: number) {
+    const index = this.indexMap.findIndex(item => {
+      return scrollTop >= item.startHeight && scrollTop < item.endHeight
+    })
+
+    this.setState({
+      currentIndex: index
+    })
+  }
+
   public UNSAFE_componentWillReceiveProps(nextProps: AtIndexesProps): void {
     if (nextProps.list.length !== this.props.list.length) {
       this.initData()
@@ -178,7 +223,8 @@ export default class AtIndexes extends React.Component<
       _scrollIntoView,
       _tipText,
       _isShowToast,
-      isWEB
+      isWEB,
+      currentIndex
     } = this.state
 
     const toastStyle = { minWidth: pxTransform(100) }
@@ -189,7 +235,9 @@ export default class AtIndexes extends React.Component<
       const targetView = `at-indexes__list-${key}`
       return (
         <View
-          className='at-indexes__menu-item'
+          className={classNames('at-indexes__menu-item', {
+            'at-indexes__menu-item--active': currentIndex === i
+          })}
           key={key}
           onClick={this.jumpTarget.bind(this, targetView, i + 1)}
         >

diff --git a/packages/taro-ui/src/common/utils.ts b/packages/taro-ui/src/common/utils.ts
@@ -214,13 +214,8 @@ function handleTouchScroll(flag: any): void {
 
 function pxTransform(size: number): string {
   if (!size) return ''
-  const designWidth = 750
-  const deviceRatio = {
-    640: 2.34 / 2,
-    750: 1,
-    828: 1.81 / 2
-  }
-  return `${size / deviceRatio[designWidth]}rpx`
+
+  return Taro.pxTransform(size)
 }
 
 function objectToString(style: object | string): string {

diff --git a/packages/taro-ui/src/components/indexes/index.tsx b/packages/taro-ui/src/components/indexes/index.tsx
@@ -31,6 +31,7 @@ export default class AtIndexes extends React.Component<
   private listId: string
   private timeoutTimer: NodeJS.Timeout | number | undefined
   private listRef: any
+  private indexMap: { key: string; startHeight: number; endHeight: number }[]
 
   public constructor(props: AtIndexesProps) {
     super(props)
@@ -39,7 +40,8 @@ export default class AtIndexes extends React.Component<
       _scrollTop: 0,
       _tipText: '',
       _isShowToast: false,
-      isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
+      isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB,
+      currentIndex: -1
     }
     // 右侧导航高度
     this.menuHeight = 0
@@ -50,6 +52,7 @@ export default class AtIndexes extends React.Component<
     // 当前索引
     this.currentIndex = -1
     this.listId = isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}`
+    this.indexMap = []
   }
 
   private handleClick = (item: Item): void => {
@@ -136,23 +139,65 @@ export default class AtIndexes extends React.Component<
     }
   }
 
-  private initData(): void {
+  private async initData(): Promise<void> {
     delayQuerySelector('.at-indexes__menu').then(rect => {
       const len = this.props.list.length
       this.menuHeight = rect[0].height
       this.startTop = rect[0].top
       this.itemHeight = Math.floor(this.menuHeight / (len + 1))
     })
+
+    const headerHeight =
+      (await delayQuerySelector('#at-indexes__top'))?.[0]?.height || 0
+    const itemHeight =
+      (await delayQuerySelector('.at-list__item'))?.[0].height || 0
+    const titleHeight =
+      (await delayQuerySelector('.at-indexes__list-title'))?.[0].height || 0
+
+    this.indexMap = []
+    this.props.list.forEach((dataList, i) => {
+      if (i === 0) {
+        this.indexMap.push({
+          key: dataList.key,
+          startHeight: headerHeight,
+          endHeight:
+            dataList.items.length * itemHeight + headerHeight + titleHeight
+        })
+      } else {
+        const prev = this.indexMap[i - 1]
+        this.indexMap.push({
+          key: dataList.key,
+          startHeight: prev.endHeight,
+          endHeight:
+            prev.endHeight + dataList.items.length * itemHeight + titleHeight
+        })
+      }
+    })
   }
 
   private handleScroll(e: CommonEvent): void {
     if (e && e.detail) {
+      const scrollTop = e.detail.scrollTop
+
       this.setState({
-        _scrollTop: e.detail.scrollTop
+        _scrollTop: scrollTop
       })
+
+      this.getAnchorIndex(scrollTop)
     }
   }
 
+  // 根据滚动高度，判断当前应该显示的索引值
+  private getAnchorIndex(scrollTop: number) {
+    const index = this.indexMap.findIndex(item => {
+      return scrollTop >= item.startHeight && scrollTop < item.endHeight
+    })
+
+    this.setState({
+      currentIndex: index
+    })
+  }
+
   public UNSAFE_componentWillReceiveProps(nextProps: AtIndexesProps): void {
     if (nextProps.list.length !== this.props.list.length) {
       this.initData()
@@ -173,8 +218,14 @@ export default class AtIndexes extends React.Component<
 
   public render(): JSX.Element {
     const { className, customStyle, animation, topKey, list } = this.props
-    const { _scrollTop, _scrollIntoView, _tipText, _isShowToast, isWEB } =
-      this.state
+    const {
+      _scrollTop,
+      _scrollIntoView,
+      _tipText,
+      _isShowToast,
+      isWEB,
+      currentIndex
+    } = this.state
 
     const toastStyle = { minWidth: pxTransform(100) }
     const rootCls = classNames('at-indexes', className)
@@ -184,7 +235,9 @@ export default class AtIndexes extends React.Component<
       const targetView = `at-indexes__list-${key}`
       return (
         <View
-          className='at-indexes__menu-item'
+          className={classNames('at-indexes__menu-item', {
+            'at-indexes__menu-item--active': currentIndex === i
+          })}
           key={key}
           onClick={this.jumpTarget.bind(this, targetView, i + 1)}
         >

diff --git a/packages/taro-ui/src/style/components/indexes.scss b/packages/taro-ui/src/style/components/indexes.scss
@@ -27,6 +27,12 @@
     color: $at-indexes-nav-color;
     font-size: $at-indexes-nav-font-size;
     text-align: center;
+
+    &--active {
+      background-color: $at-indexes-nav-color;
+      color: $color-white;
+      border-radius: $border-radius-md;
+    }
   }
 
   &__body {

diff --git a/packages/taro-ui/src/style/components/input-number.scss b/packages/taro-ui/src/style/components/input-number.scss
@@ -37,14 +37,14 @@ $at-input-number-btn-padding-lg: 20px;
 
   &__input,
   input {
-    display: inline-block;
+    display: flex;
     width: $at-input-number-width-min;
     height: auto;
     border-radius: 0;
     color: $at-input-number-text-color;
     font-size: $at-input-number-font-size;
     text-align: center;
-    line-height: $line-height-zh;
+    align-items: center;
     @include border-thin($width: 1PX, $directions: left right);
   }
 

diff --git a/packages/taro-ui/types/indexes.d.ts b/packages/taro-ui/types/indexes.d.ts
@@ -68,6 +68,7 @@ export interface AtIndexesState {
   _tipText: string
   _isShowToast: boolean
   isWEB: boolean
+  currentIndex: number
 }
 
 declare const AtIndexes: ComponentClass<AtIndexesProps>