refactor(swipe-action): 重构 swipe-action 组件

* 废弃 maxDistance、areaWidth 属性

Author: robinv8

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

@@ -1,14 +1,15 @@
 import classNames from 'classnames'
 import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
+import Taro from '@tarojs/taro'
 import { Text, View, MovableArea, MovableView } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import {
   AtSwipeActionProps,
   AtSwipeActionState,
   SwipeActionOption
 } from '../../../types/swipe-action'
-import { uuid } from '../../common/utils'
+import { uuid, delayGetClientRect } from '../../common/utils'
 import AtSwipeActionOptions from './options/index'
 
 export default class AtSwipeAction extends React.Component<
@@ -18,48 +19,86 @@ export default class AtSwipeAction extends React.Component<
   public static defaultProps: AtSwipeActionProps
   public static propTypes: InferProps<AtSwipeActionProps>
 
-  private maxOffsetSize: number
   private moveX: number
-  private eleWidth: number
   private moveRatio: number
 
   public constructor(props: AtSwipeActionProps) {
     super(props)
-    const { isOpened, maxDistance, areaWidth, moveRatio } = props
-    this.maxOffsetSize = maxDistance
+    const { isOpened, moveRatio } = props
     this.state = {
       componentId: uuid(),
       // eslint-disable-next-line no-extra-boolean-cast
-      offsetSize: !!isOpened ? -this.maxOffsetSize : 0,
+      offsetSize: 0,
       _isOpened: !!isOpened,
-      needAnimation: false
+      needAnimation: false,
+      eleWidth: 0,
+      maxOffsetSize: 0
     }
     this.moveX = this.state.offsetSize
-    this.eleWidth = areaWidth
     this.moveRatio = moveRatio || 0.5
   }
 
+  public componentDidMount(): void {
+    this.getAreaWidth()
+  }
+
+  // 当 eleWidth 发生变化时，需要重新计算 maxOffsetSize
+  public componentDidUpdate(_, prevState: AtSwipeActionState): void {
+    const { eleWidth } = this.state
+    if (prevState.eleWidth !== eleWidth) {
+      this.getMaxOffsetSize()
+    }
+  }
+
   public UNSAFE_componentWillReceiveProps(nextProps: AtSwipeActionProps): void {
     const { isOpened } = nextProps
-    const { _isOpened } = this.state
+    const { _isOpened, maxOffsetSize } = this.state
 
     if (isOpened !== _isOpened) {
-      this.moveX = isOpened ? 0 : this.maxOffsetSize
+      this.moveX = isOpened ? 0 : maxOffsetSize
       this._reset(!!isOpened) // TODO: Check behavior
     }
   }
 
+  /**
+   * 获取滑动区域宽度
+   */
+  private async getAreaWidth(): Promise<void> {
+    const systemInfo = await Taro.getSystemInfo()
+    this.setState({
+      eleWidth: systemInfo.windowWidth
+    })
+  }
+
+  /**
+   * 获取最大偏移量
+   */
+  private async getMaxOffsetSize(): Promise<void> {
+    const { componentId } = this.state
+
+    const actionOptionsRect = await delayGetClientRect({
+      selectorStr: `#swipeActionOptions-${componentId}`
+    })
+
+    const maxOffsetSize = actionOptionsRect[0].width
+
+    this.setState({
+      maxOffsetSize
+    })
+  }
+
   private _reset(isOpened: boolean): void {
     if (isOpened) {
+      const { maxOffsetSize } = this.state
       if (process.env.TARO_ENV === 'jd') {
         this.setState({
           _isOpened: true,
-          offsetSize: -this.maxOffsetSize + 0.01
+          offsetSize: -maxOffsetSize + 0.01
         })
       } else {
         this.setState({
           _isOpened: true,
-          offsetSize: -this.maxOffsetSize
+          offsetSize: -maxOffsetSize
         })
       }
     } else {
@@ -108,7 +147,8 @@ export default class AtSwipeAction extends React.Component<
   }
 
   onTouchEnd = e => {
-    if (this.moveX === -this.maxOffsetSize) {
+    const { maxOffsetSize } = this.state
+    if (this.moveX === -maxOffsetSize) {
       this._reset(true)
       this.handleOpened(e)
       return
@@ -123,7 +163,7 @@ export default class AtSwipeAction extends React.Component<
       this.handleClosed(e)
       return
     }
-    if (Math.abs(this.moveX) < this.maxOffsetSize * this.moveRatio) {
+    if (Math.abs(this.moveX) < maxOffsetSize * this.moveRatio) {
       this._reset(false)
       this.handleClosed(e)
     } else {
@@ -137,7 +177,8 @@ export default class AtSwipeAction extends React.Component<
   }
 
   public render(): JSX.Element {
-    const { componentId, offsetSize } = this.state
+    const { componentId, maxOffsetSize, eleWidth, offsetSize } = this.state
+
     const { options, disabled } = this.props
     const rootClass = classNames('at-swipe-action', this.props.className)
 
@@ -146,14 +187,13 @@ export default class AtSwipeAction extends React.Component<
         id={`swipeAction-${componentId}`}
         className={rootClass}
         style={{
-          width: `${this.eleWidth}px`
+          width: `${eleWidth}px`
         }}
       >
         <MovableArea
           className='at-swipe-action__area'
           style={{
-            width: `${this.eleWidth + this.maxOffsetSize}px`,
-            transform: `translate(-${this.maxOffsetSize}px, 0)`
+            width: `${eleWidth}px`
           }}
         >
           <MovableView
@@ -165,8 +205,7 @@ export default class AtSwipeAction extends React.Component<
             onChange={this.onChange}
             disabled={disabled}
             style={{
-              width: `${this.eleWidth}px`,
-              left: `${this.maxOffsetSize}px`
+              width: `${eleWidth + maxOffsetSize}px`
             }}
           >
             {this.props.children}
@@ -175,8 +214,7 @@ export default class AtSwipeAction extends React.Component<
                 options={options}
                 componentId={componentId}
                 customStyle={{
-                  transform: `translate(${this.maxOffsetSize}px, 0)`,
-                  opacity: 1
+                  opacity: maxOffsetSize ? 1 : 0
                 }}
               >
                 {options.map((item, key) => (

packages/taro-ui/src/style/components/list.scss

@@ -34,6 +34,7 @@ $at-list-item-horizontal-padding: 24px;
     color: $at-list-text-color;
     font-size: $font-size-lg;
     line-height: $line-height-zh;
+    width: 100%;
     @include active;
     @include hairline-bottom-relative($left: $spacing-h-lg);
 

packages/taro-ui/types/swipe-action.d.ts

@@ -56,13 +56,15 @@ export interface AtSwipeActionProps extends AtComponent {
 
   /**
    * 滑块最大滑动距离，一般是按钮个数乘以按钮宽度
+   * @deprecated 已废弃，无需设置 maxDistance
    */
-  maxDistance: number
+  maxDistance?: number
 
   /**
    * SwipeAction 组件宽度
+   * @deprecated 已废弃，无需设置 areaWidth
    */
-  areaWidth: number
+  areaWidth?: number
 
   /**
    * 判断是否需要打开的比例阈值，即 滑块滑动距离 / 滑块最大滑动距离， 默认为 0.5
@@ -75,6 +77,8 @@ export interface AtSwipeActionState {
   offsetSize: number
   _isOpened: boolean
   needAnimation: boolean
+  eleWidth: number
+  maxOffsetSize: number
 }
 
 export interface AtSwipeActionOptionsProps extends AtComponent {