Fix/bug (#1750)

* fix(swipe-action): 修复在 h5 环境下点击事件失效的问题

* fix(tabs): 修复 h5 环境下样式报错的问题

* refactor(types): 完善类型声明

Author: robinv8

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/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/components/list/item/index.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Image, Switch, Text, View } from '@tarojs/components'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
 import { AtListItemProps } from '../../../../types/list'
-import { mergeStyle, isJSXElement } from '../../../common/utils'
+import { mergeStyle } from '../../../common/utils'
 
 export default class AtListItem extends React.Component<AtListItemProps> {
   public static defaultProps: AtListItemProps
@@ -163,16 +163,16 @@ AtListItem.defaultProps = {
 }
 
 AtListItem.propTypes = {
-  note: isJSXElement,
+  note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   disabled: PropTypes.bool,
-  title: isJSXElement,
+  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: isJSXElement,
+  extraText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   extraThumb: PropTypes.string,
   onSwitchChange: PropTypes.func,
   arrow: PropTypes.oneOf(['up', 'down', 'right']),

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

@@ -20,11 +20,10 @@ export default class AtSwipeAction extends React.Component<
   public static propTypes: InferProps<AtSwipeActionProps>
 
   private moveX: number
-  private moveRatio: number
 
   public constructor(props: AtSwipeActionProps) {
     super(props)
-    const { isOpened, moveRatio } = props
+    const { isOpened } = props
     this.state = {
       componentId: uuid(),
       // eslint-disable-next-line no-extra-boolean-cast
@@ -35,7 +34,6 @@ export default class AtSwipeAction extends React.Component<
       maxOffsetSize: 0
     }
     this.moveX = this.state.offsetSize
-    this.moveRatio = moveRatio || 0.5
   }
 
   public componentDidMount(): void {
@@ -148,22 +146,7 @@ export default class AtSwipeAction extends React.Component<
 
   onTouchEnd = e => {
     const { maxOffsetSize } = this.state
-    if (this.moveX === -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) < maxOffsetSize * this.moveRatio) {
+    if (Math.abs(this.moveX) < maxOffsetSize / 2) {
       this._reset(false)
       this.handleClosed(e)
     } else {

packages/taro-ui/src/components/tabs/index.tsx

@@ -169,8 +169,7 @@ export default class AtTabs extends React.Component<AtTabsProps, AtTabsState> {
       transformStyle = `translate3d(-${current * 100}%, 0px, 0px)`
     }
     Object.assign(bodyStyle, {
-      transform: transformStyle,
-      '-webkit-transform': transformStyle
+      transform: transformStyle
     })
     if (!animated) {
       bodyStyle.transition = 'unset'

packages/taro-ui/types/list.d.ts

@@ -24,7 +24,7 @@ export interface AtListItemProps extends AtComponent {
   /**
    * 元素的描述信息
    */
-  note?: string
+  note?: JSX.Element | string
   /**
    * 元素的标题
    */

packages/taro-ui/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 {