taro-ui 3.2.2 → 3.3.1

package/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 {

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

package/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']),

package/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 {

package/types/button.d.ts

@@ -1,13 +1,27 @@
-import { MouseEvent, ComponentClass } from 'react'
+import { ComponentClass } from 'react'
 import { CommonEventFunction } from '@tarojs/components/types/common'
 import { ButtonProps } from '@tarojs/components/types/Button'
 
 import AtComponent from './base'
 
-type TaroButtonProps = Pick<ButtonProps, 'formType' | 'openType' |
-  'lang' | 'sessionFrom' | 'sendMessageTitle' | 'sendMessagePath' |
-  'sendMessageImg' | 'showMessageCard' | 'appParameter' | 'onContact' |
-  'onGetUserInfo' | 'onGetPhoneNumber' | 'onOpenSetting' | 'onError'>
+type TaroButtonProps = Pick<
+  ButtonProps,
+  | 'formType'
+  | 'openType'
+  | 'lang'
+  | 'sessionFrom'
+  | 'sendMessageTitle'
+  | 'sendMessagePath'
+  | 'sendMessageImg'
+  | 'showMessageCard'
+  | 'appParameter'
+  | 'onContact'
+  | 'onGetUserInfo'
+  | 'onGetPhoneNumber'
+  | 'onOpenSetting'
+  | 'onError'
+  | 'onChooseAvatar'
+>
 
 export interface AtButtonProps extends AtComponent, TaroButtonProps {
   /**

package/types/indexes.d.ts

@@ -68,6 +68,7 @@ export interface AtIndexesState {
   _tipText: string
   _isShowToast: boolean
   isWEB: boolean
+  currentIndex: number
 }
 
 declare const AtIndexes: ComponentClass<AtIndexesProps>

package/types/list.d.ts

@@ -24,11 +24,11 @@ export interface AtListItemProps extends AtComponent {
   /**
    * 元素的描述信息
    */
-  note?: string
+  note?: JSX.Element | string
   /**
    * 元素的标题
    */
-  title?: string
+  title?: JSX.Element | string
   /**
    * 元素的主要缩略图
    */
@@ -40,7 +40,7 @@ export interface AtListItemProps extends AtComponent {
   /**
    * 额外信息的文本
    */
-  extraText?: string
+  extraText?: JSX.Element | string
   /**
    * 额外信息的缩略图
    */

package/types/swipe-action.d.ts

@@ -65,11 +65,6 @@ export interface AtSwipeActionProps extends AtComponent {
    * @deprecated 已废弃，无需设置 areaWidth
    */
   areaWidth?: number
-
-  /**
-   * 判断是否需要打开的比例阈值，即 滑块滑动距离 / 滑块最大滑动距离， 默认为 0.5
-   */
-  moveRatio?: number
 }
 
 export interface AtSwipeActionState {

package/types/tab-bar.d.ts

@@ -24,17 +24,17 @@ export interface TabItem {
   /**
    * icon className 前缀，用于第三方字体图标库，
    * 比如想使用'fa fa-clock' 的图标，则传入 iconPrefixClass='fa' iconType='clock'，
-   * 参考[拓展图标库详细](https://taro-ui.taro.zone/#/docs/icon)
+   * 参考[拓展图标库详细](https://jd-opensource.github.io/taro-ui/#/docs/icon)
    */
   iconPrefixClass?: string
   /**
    * 未选中时展示的 icon 类型，可扩展第三方字体图标库，
-   * 参考[拓展图标库详细](https://taro-ui.taro.zone/#/docs/icon)
+   * 参考[拓展图标库详细](https://jd-opensource.github.io/taro-ui/#/docs/icon)
    */
   iconType?: string
   /**
    * 选中时展示的 icon 类型，可扩展第三方字体图标库，
-   * 参考[拓展图标库详细](https://taro-ui.taro.zone/#/docs/icon)
+   * 参考[拓展图标库详细](https://jd-opensource.github.io/taro-ui/#/docs/icon)
    */
   selectedIconType?: string
   /**

package/README.md

@@ -1,85 +0,0 @@
-# Taro UI
-
-[![NPM][npm-version-image]][npm-version-url] [![NPM Downloads][npm-downloads-image]][npm-downloads-url] [![david-dm][david-dm-image]][david-dm-url] [![License][license-image]][license-url]
-
-一款基于 `Taro` 框架开发的多端 UI 组件库
-
-## 特性
-
-- 基于 `Taro` 开发 UI 组件
-- 一套组件可以在 `微信小程序`，`支付宝小程序`，`百度小程序`，`H5`，`ReactNative` 多端适配运行
-- 提供友好的 API，可灵活的使用组件 
-
-## 关于 Taro
-
-Taro 是由 [凹凸实验室](https://aotu.io) 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样，Web、ReactNative、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
-
-使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码。
-
-## 体验
-
-请使用微信扫一扫以下体验码
-
-![QRCode](https://user-images.githubusercontent.com/1240899/46650700-25a4e600-cbd0-11e8-90ff-905edb39c340.jpg)
-
-## 相关链接
-
-- [Taro UI 使用文档](https://taro-ui.taro.zone)
-- [Taro UI 官方示例](https://github.com/NervJS/taro-ui-demo)
-- [Taro](https://taro.jd.com/)
-- [Taro 物料市场](https://taro-ext.jd.com)
-- [Taro 论坛 Taro-UI 板块](https://taro-club.jd.com/category/11/taro-ui)
-
-## 安装
-
-### 2.x
-当 Taro 版本 < 3 时，使用 2.x 版本
-
-```bash
-$ npm install taro-ui@2.3.4
-```
-
-### 3.x
-当 Taro 版本 ≥ 3 时，使用 3.x 版本
-
-```bash
-$ npm install taro-ui@latest
-```
-
-## 使用
-
-在代码中 `import` 需要的组件并按照文档说明使用
-
-```js
-import { AtButton } from 'taro-ui'
-```
-
-## 开发交流
-
-[官方微信交流群](https://github.com/NervJS/taro-ui/issues/16)
-
-## 开发计划
-
-[开发计划](./PLANS.md)
-
-## 路线图
-
-![Roadmap][roadmap-image]
-
-## 贡献
-
-如果你在使用 `Taro UI` 时遇到问题，或者有好的建议，欢迎给我们提 `Issue` 或 `Pull Request`。在开始之前，请阅读 [贡献指南](https://github.com/NervJS/taro-ui/blob/master/.github/CONTRIBUTING.md)
-
-## License
-
-MIT
-
-[npm-version-image]: https://img.shields.io/npm/v/taro-ui.svg?style=flat-square
-[npm-version-url]: https://www.npmjs.com/package/taro-ui
-[npm-downloads-image]: https://img.shields.io/npm/dm/taro-ui?style=flat-square
-[npm-downloads-url]: https://www.npmjs.com/package/taro-ui
-[david-dm-image]: https://david-dm.org/NervJS/taro-ui.svg?style=flat-square
-[david-dm-url]: https://david-dm.org/NervJS/taro-ui
-[license-image]: https://img.shields.io/github/license/NervJS/taro-ui?style=flat-square
-[license-url]: https://github.com/NervJS/taro-ui/blob/master/LICENSE
-[roadmap-image]: ./docs/assets/taro-ui-roadmap.svg