chore(release): publish 3.3.0

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",

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",

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",

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",

packages/taro-ui-demo/src/pages/action/swipe-action/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { AtButton, AtList, AtListItem, AtSwipeAction } from 'taro-ui'
-import { SwipeActionOption } from 'types/swipe-action'
+import { SwipeActionOption } from 'taro-ui/types/swipe-action'
 import { View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import DocsHeader from '../../components/doc-header'
@@ -33,8 +33,10 @@ interface SwipeActionPageState {
   list: ActionListItem[]
 }
 
+interface SwipeActionPageProps {}
+
 export default class SwipeActionPage extends React.Component<
-  {},
+  SwipeActionPageProps,
   SwipeActionPageState
 > {
   public constructor(props: any) {
@@ -171,7 +173,10 @@ export default class SwipeActionPage extends React.Component<
 
           <View className='panel'>
             <View className='panel__title'>使用变量控制开关</View>
-            <View className='panel__controller' style={{marginBottom: '10px'}}>
+            <View
+              className='panel__controller'
+              style={{ marginBottom: '10px' }}
+            >
               <AtButton size='small' onClick={this.handleStatusClick}>
                 当前状态: {isOpened2 ? '开' : '关'}{' '}
               </AtButton>
@@ -208,6 +213,7 @@ export default class SwipeActionPage extends React.Component<
 
           <View className='panel'>
             <View className='panel__title'>传递点击事件</View>
+
             <View className='panel__content no-padding'>
               <View className='example-item example-item--border'>
                 <AtSwipeAction onClick={this.handleClick} options={OPTIONS}>

packages/taro-ui-docs/markdown/list.md

@@ -182,12 +182,12 @@ import { AtList, AtListItem } from "taro-ui"
 
 | 参数          | 说明             | 类型                                                                 | 可选值               | 默认值    |
 | ------------- | ---------------- | -------------------------------------------------------------------- | -------------------- | --------- |
-| title         | 元素的标题       | JSX.Element                                                          | -                    | -         |
+| title         | 元素的标题       | JSX.Element 、String                                                        | -                    | -         |
 | disabled      | 是否禁用         | Boolean                                                              | -                    | `false`   |
-| note          | 元素的描述信息   | JSX.Element                                                          | -                    | -         |
+| note          | 元素的描述信息   | JSX.Element 、String                                                          | -                    | -         |
 | thumb         | 元素的主要缩略图 | String                                                               | -                    | -         |
 | arrow         | 箭头的方向       | String                                                               | `right`,`top`,`down` | -         |
-| extraText     | 额外信息的文本   | JSX.Element                                                          | -                    | -         |
+| extraText     | 额外信息的文本   | JSX.Element 、String                                                          | -                    | -         |
 | extraThumb    | 额外信息的缩略图 | String                                                               | -                    | -         |
 | isSwitch      | 额外信息是否开关 | Boolean                                                              | -                    | `false`   |
 | switchColor   | 开关的颜色       | String                                                               | -                    | `#6190E8` |

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",

packages/taro-ui/config/rollup.config.js

@@ -9,7 +9,8 @@ import iconsMaker from './iconsMaker.js'
 
 iconsMaker('../rn/assets/iconfont.svg')
 
-const resolveFile = path => NodePath.resolve(__dirname, '..', path)
+const resolveFile = path =>
+  NodePath.resolve(__dirname, '..', path).split(NodePath.sep).join('/')
 
 const externalPackages = [
   'react',

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",

packages/taro-ui/rn/common/utils.ts

@@ -17,14 +17,16 @@ function delayQuerySelector(
   delayTime = 500
 ): Promise<any[]> {
   return new Promise(resolve => {
-    const selector: SelectorQuery = Taro.createSelectorQuery()
-    delay(delayTime).then(() => {
-      selector
-        .select(selectorStr)
-        .boundingClientRect()
-        .exec((res: any[]) => {
-          resolve(res)
-        })
+    Taro.nextTick(() => {
+      const selector: SelectorQuery = Taro.createSelectorQuery()
+      delay(delayTime).then(() => {
+        selector
+          .select(selectorStr)
+          .boundingClientRect()
+          .exec((res: any[]) => {
+            resolve(res)
+          })
+      })
     })
   })
 }
@@ -212,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 {

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)}
         >

packages/taro-ui/rn/components/list/item/index.tsx

@@ -198,16 +198,16 @@ AtListItem.defaultProps = {
 }
 
 AtListItem.propTypes = {
-  note: PropTypes.string,
+  note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   disabled: PropTypes.bool,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   thumb: PropTypes.string,
   onClick: PropTypes.func,
   isSwitch: PropTypes.bool,
   hasBorder: PropTypes.bool,
   switchColor: PropTypes.string,
   switchIsCheck: PropTypes.bool,
-  extraText: PropTypes.string,
+  extraText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   extraThumb: PropTypes.string,
   onSwitchChange: PropTypes.func,
   arrow: PropTypes.oneOf(['up', 'down', 'right']),

packages/taro-ui/rn/components/swipe-action/index.tsx

@@ -21,11 +21,10 @@ export default class AtSwipeAction extends React.Component<
   private maxOffsetSize: number
   private moveX: number
   private eleWidth: number
-  private moveRatio: number
 
   public constructor(props: AtSwipeActionProps) {
     super(props)
-    const { isOpened, maxDistance, areaWidth, moveRatio } = props
+    const { isOpened, maxDistance, areaWidth } = props
     this.maxOffsetSize = maxDistance
     this.state = {
       componentId: uuid(),
@@ -36,7 +35,6 @@ export default class AtSwipeAction extends React.Component<
     }
     this.moveX = this.state.offsetSize
     this.eleWidth = areaWidth
-    this.moveRatio = moveRatio || 0.5
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: AtSwipeActionProps): void {
@@ -108,22 +106,8 @@ export default class AtSwipeAction extends React.Component<
   }
 
   onTouchEnd = e => {
-    if (this.moveX === -this.maxOffsetSize) {
-      this._reset(true)
-      this.handleOpened(e)
-      return
-    }
-    if (this.moveX === 0) {
-      this._reset(false)
-      this.handleClosed(e)
-      return
-    }
-    if (this.state._isOpened && this.moveX < 0) {
-      this._reset(false)
-      this.handleClosed(e)
-      return
-    }
-    if (Math.abs(this.moveX) < this.maxOffsetSize * this.moveRatio) {
+    const { maxOffsetSize } = this.state
+    if (Math.abs(this.moveX) < maxOffsetSize / 2) {
       this._reset(false)
       this.handleClosed(e)
     } else {

packages/taro-ui/src/common/utils.ts

@@ -17,14 +17,16 @@ function delayQuerySelector(
   delayTime = 500
 ): Promise<any[]> {
   return new Promise(resolve => {
-    const selector: SelectorQuery = Taro.createSelectorQuery()
-    delay(delayTime).then(() => {
-      selector
-        .select(selectorStr)
-        .boundingClientRect()
-        .exec((res: any[]) => {
-          resolve(res)
-        })
+    Taro.nextTick(() => {
+      const selector: SelectorQuery = Taro.createSelectorQuery()
+      delay(delayTime).then(() => {
+        selector
+          .select(selectorStr)
+          .boundingClientRect()
+          .exec((res: any[]) => {
+            resolve(res)
+          })
+      })
     })
   })
 }
@@ -212,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 {