fix(SwipeAction): 修复 SwipeAction 滑动卡顿的问题

Author: luckyadam

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

@@ -29,17 +29,6 @@ export default {
       file: resolveFile(Package.module),
       format: 'es',
       sourcemap: true
-    },
-    {
-      file: resolveFile(Package.browser),
-      format: 'umd',
-      name: 'taro-ui',
-      sourcemap: true,
-      globals: {
-        react: 'React',
-        '@tarojs/components': 'components',
-        '@tarojs/taro': 'Taro'
-      }
     }
   ],
   external: externalPackages,

packages/taro-ui/package.json

@@ -2,7 +2,6 @@
   "name": "taro-ui",
   "version": "3.0.0-alpha.3",
   "description": "UI KIT for Taro",
-  "browser": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "main": "dist/index.js",
   "source": "src/index.ts",

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

@@ -1,20 +1,14 @@
 import classNames from 'classnames'
-import _inRange from 'lodash/inRange'
-import _isEmpty from 'lodash/isEmpty'
 import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
-import { Text, View } from '@tarojs/components'
-import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
+import { Text, View, MovableArea, MovableView } from '@tarojs/components'
+import { CommonEvent } from '@tarojs/components/types/common'
 import {
   AtSwipeActionProps,
   AtSwipeActionState,
   SwipeActionOption
 } from '../../../types/swipe-action'
-import {
-  delayGetClientRect,
-  delayGetScrollOffset,
-  uuid
-} from '../../common/utils'
+import { delayQuerySelector, uuid } from '../../common/utils'
 import AtSwipeActionOptions from './options/index'
 
 export default class AtSwipeAction extends React.Component<
@@ -24,48 +18,22 @@ export default class AtSwipeAction extends React.Component<
   public static defaultProps: AtSwipeActionProps
   public static propTypes: InferProps<AtSwipeActionProps>
 
-  private endValue: number
-  private startX: number
-  private startY: number
   private maxOffsetSize: number
-  private domInfo: any
-  private isMoving: boolean
-  private isTouching: boolean
+  private moveX: number
+  private eleWidth: number
 
   public constructor(props: AtSwipeActionProps) {
     super(props)
     const { isOpened } = props
-    this.endValue = 0
-    this.startX = 0
-    this.startY = 0
     this.maxOffsetSize = 0
-    this.domInfo = {
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0
-    }
-    this.isMoving = false
-    this.isTouching = false
     this.state = {
       componentId: uuid(),
       offsetSize: 0,
-      _isOpened: !!isOpened
+      _isOpened: !!isOpened,
+      needAnimation: false
     }
-  }
-
-  private getDomInfo(): Promise<void> {
-    return Promise.all([
-      delayGetClientRect({
-        delayTime: 0,
-        selectorStr: `#swipeAction-${this.state.componentId}`
-      }),
-      delayGetScrollOffset({ delayTime: 0 })
-    ]).then(([rect, scrollOffset]) => {
-      rect[0].top += scrollOffset[0].scrollTop
-      rect[0].bottom += scrollOffset[0].scrollTop
-      this.domInfo = rect[0]
-    })
+    this.moveX = 0
+    this.eleWidth = 0
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: AtSwipeActionProps): void {
@@ -77,31 +45,49 @@ export default class AtSwipeAction extends React.Component<
     }
   }
 
-  private _reset(isOpened: boolean): void {
-    this.isMoving = false
-    this.isTouching = false
+  public componentDidMount(): void {
+    if (this.eleWidth === 0) {
+      delayQuerySelector(`#swipeAction-${this.state.componentId}`, 0).then(
+        res => {
+          if (res[0]) {
+            this.eleWidth = res[0].width
+          }
+        }
+      )
+    }
+  }
 
+  public componentDidUpdate(): void {
+    delayQuerySelector(`#swipeAction-${this.state.componentId}`, 0).then(
+      res => {
+        if (res[0]) {
+          this.eleWidth = res[0].width
+        }
+      }
+    )
+  }
+
+  private _reset(isOpened: boolean): void {
     if (isOpened) {
-      this.endValue = -this.maxOffsetSize
       this.setState({
         _isOpened: true,
-        offsetSize: -this.maxOffsetSize
+        offsetSize: 0
       })
     } else {
-      this.endValue = 0
-      this.setState({
-        offsetSize: 0,
-        _isOpened: false
-      })
+      this.setState(
+        {
+          offsetSize: this.moveX
+        },
+        () => {
+          this.setState({
+            offsetSize: this.maxOffsetSize,
+            _isOpened: false
+          })
+        }
+      )
     }
   }
 
-  private computeTransform = (value: number): string | null =>
-    // if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
-    //   return !_isNil(value) ? `translate3d(${value}px,0,0)` : null
-    // }
-    value ? `translate3d(${value}px,0,0)` : null
-
   private handleOpened = (event: CommonEvent): void => {
     const { onOpened } = this.props
     if (typeof onOpened === 'function' && this.state._isOpened) {
@@ -116,78 +102,16 @@ export default class AtSwipeAction extends React.Component<
     }
   }
 
-  private handleTouchStart = (e: ITouchEvent): void => {
-    const { clientX, clientY } = e.touches[0]
-
-    if (this.props.disabled) return
-
-    this.getDomInfo()
-
-    this.startX = clientX
-    this.startY = clientY
-    this.isTouching = true
-  }
-
-  private handleTouchMove = (e: ITouchEvent): void => {
-    if (_isEmpty(this.domInfo)) {
-      return
-    }
-
-    const { startX, startY } = this
-    const { top, bottom, left, right } = this.domInfo
-    const { clientX, clientY, pageX, pageY } = e.touches[0]
-
-    const x = Math.abs(clientX - startX)
-    const y = Math.abs(clientY - startY)
-
-    const inDom = _inRange(pageX, left, right) && _inRange(pageY, top, bottom)
-
-    if (!this.isMoving && inDom) {
-      this.isMoving =
-        y === 0 ||
-        x / y >= Number.parseFloat(Math.tan((45 * Math.PI) / 180).toFixed(2))
-    }
-
-    if (this.isTouching && this.isMoving) {
-      e.preventDefault()
-
-      const offsetSize = clientX - this.startX
-      const isRight = offsetSize > 0
-
-      if (this.state.offsetSize === 0 && isRight) return
-
-      const value = this.endValue + offsetSize
-      this.setState({
-        offsetSize: value >= 0 ? 0 : value
-      })
-    }
-  }
-
-  private handleTouchEnd = (event: ITouchEvent): void => {
-    this.isTouching = false
-
-    const { offsetSize } = this.state
-
-    this.endValue = offsetSize
-
-    const breakpoint = this.maxOffsetSize / 2
-    const absOffsetSize = Math.abs(offsetSize)
-
-    if (absOffsetSize > breakpoint) {
-      this._reset(true)
-      this.handleOpened(event)
-      return
-    }
-
-    this._reset(false) // TODO: Check behavior
-    this.handleClosed(event)
-  }
-
   private handleDomInfo = ({ width }: { width: number }): void => {
     const { _isOpened } = this.state
 
     this.maxOffsetSize = width
     this._reset(_isOpened)
+    setTimeout(() => {
+      this.setState({
+        needAnimation: true
+      })
+    }, 0)
   }
 
   private handleClick = (
@@ -206,51 +130,97 @@ export default class AtSwipeAction extends React.Component<
     }
   }
 
+  onTouchEnd = e => {
+    if (this.moveX === 0) {
+      this._reset(true)
+      this.handleOpened(e)
+      return
+    }
+    if (this.moveX === this.maxOffsetSize) {
+      this._reset(false)
+      this.handleClosed(e)
+      return
+    }
+    if (this.state._isOpened && this.moveX > 0) {
+      this._reset(false)
+      this.handleClosed(e)
+      return
+    }
+    if (this.maxOffsetSize - this.moveX < this.maxOffsetSize * 0.4) {
+      this._reset(false)
+      this.handleClosed(e)
+    } else {
+      this._reset(true)
+      this.handleOpened(e)
+    }
+  }
+
+  onChange = e => {
+    this.moveX = e.detail.x
+  }
+
   public render(): JSX.Element {
-    const { offsetSize, componentId } = this.state
+    const { componentId, offsetSize, needAnimation } = this.state
     const { options } = this.props
     const rootClass = classNames('at-swipe-action', this.props.className)
-    const transform = this.computeTransform(offsetSize)
-    const transformStyle: React.CSSProperties = transform ? { transform } : {}
 
     return (
       <View
         id={`swipeAction-${componentId}`}
         className={rootClass}
-        onTouchMove={this.handleTouchMove}
-        onTouchEnd={this.handleTouchEnd}
-        onTouchStart={this.handleTouchStart}
+        style={{
+          width: this.eleWidth === 0 ? '100%' : `${this.eleWidth}px`
+        }}
       >
-        <View
-          className={classNames('at-swipe-action__content', {
-            animtion: !this.isTouching
-          })}
-          style={transformStyle}
+        <MovableArea
+          className='at-swipe-action__area'
+          style={{
+            width:
+              this.eleWidth === 0
+                ? '100%'
+                : `${this.eleWidth + this.maxOffsetSize}px`,
+            transform:
+              this.eleWidth === 0
+                ? `translate(0, 0)`
+                : `translate(-${this.maxOffsetSize}px, 0)`
+          }}
         >
-          {this.props.children}
-        </View>
-
-        {Array.isArray(options) && options.length > 0 ? (
-          <AtSwipeActionOptions
-            options={options}
-            componentId={componentId}
-            onQueryedDom={this.handleDomInfo}
+          <MovableView
+            className='at-swipe-action__content'
+            direction='horizontal'
+            damping={50}
+            x={offsetSize}
+            onTouchEnd={this.onTouchEnd}
+            onChange={this.onChange}
+            animation={needAnimation}
+            style={{
+              width: this.eleWidth === 0 ? '100%' : `${this.eleWidth}px`
+            }}
           >
-            {options.map((item, key) => (
-              <View
-                key={`${item.text}-${key}`}
-                style={item.style}
-                onClick={(e): void => this.handleClick(item, key, e)}
-                className={classNames(
-                  'at-swipe-action__option',
-                  item.className
-                )}
-              >
-                <Text className='option__text'>{item.text}</Text>
-              </View>
-            ))}
-          </AtSwipeActionOptions>
-        ) : null}
+            {this.props.children}
+          </MovableView>
+          {Array.isArray(options) && options.length > 0 ? (
+            <AtSwipeActionOptions
+              options={options}
+              componentId={componentId}
+              onQueryedDom={this.handleDomInfo}
+            >
+              {options.map((item, key) => (
+                <View
+                  key={`${item.text}-${key}`}
+                  style={item.style}
+                  onClick={(e): void => this.handleClick(item, key, e)}
+                  className={classNames(
+                    'at-swipe-action__option',
+                    item.className
+                  )}
+                >
+                  <Text className='option__text'>{item.text}</Text>
+                </View>
+              ))}
+            </AtSwipeActionOptions>
+          ) : null}
+        </MovableArea>
       </View>
     )
   }