fix: 兼容swipe-action放入自定义组件时

yymzy · Aug 15, 2024 · 6228449 · 6228449
1 parent 73a514a
commit 6228449
Show file tree

Hide file tree

Showing 5 changed files with 839 additions and 246 deletions.
diff --git a/packages/taro-ui/package.json b/packages/taro-ui/package.json
@@ -56,10 +56,10 @@
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
-    "@tarojs/components": "3.6.6",
-    "@tarojs/react": "3.6.6",
-    "@tarojs/runtime-rn": "3.6.6",
-    "@tarojs/taro": "3.6.6",
+    "@tarojs/components": "3.6.34",
+    "@tarojs/react": "3.6.34",
+    "@tarojs/runtime-rn": "3.6.34",
+    "@tarojs/taro": "3.6.34",
     "@types/classnames": "^2.2.9",
     "@types/node": "~16.6.0",
     "@types/react-native": "^0.64.13",

diff --git a/packages/taro-ui/src/components/swipe-action/index.tsx b/packages/taro-ui/src/components/swipe-action/index.tsx
@@ -58,24 +58,41 @@ export default class AtSwipeAction extends React.Component<
     }
   }
 
+  /**
+   * 获取滑块区域与options操作区域选择器
+   */
+  private getSelectorStr(type: string): string {
+    const { componentId } = this.state
+    const { parentSelector } = this.props
+    return (parentSelector ? `${parentSelector} >>> ` : '') + `#${type}-${componentId}`
+  }
+
   /**
    * 获取滑动区域宽度
    */
   private async getAreaWidth(): Promise<void> {
-    const systemInfo = await Taro.getSystemInfo()
+    const actionRect = await delayGetClientRect({
+      selectorStr: this.getSelectorStr('swipeAction')
+    })
+
+    let eleWidth = actionRect[0].width
+
+    if (!eleWidth) {
+      const systemInfo = await Taro.getSystemInfo()
+      eleWidth = systemInfo.windowWidth;
+    }
+
     this.setState({
-      eleWidth: systemInfo.windowWidth
+      eleWidth
     })
   }
 
   /**
    * 获取最大偏移量
    */
   private async getMaxOffsetSize(): Promise<void> {
-    const { componentId } = this.state
-
     const actionOptionsRect = await delayGetClientRect({
-      selectorStr: `#swipeActionOptions-${componentId}`
+      selectorStr: this.getSelectorStr('swipeActionOptions')
     })
 
     const maxOffsetSize = actionOptionsRect[0].width
@@ -86,32 +103,29 @@ export default class AtSwipeAction extends React.Component<
   }
 
   private _reset(isOpened: boolean): void {
-    if (isOpened) {
-      const { maxOffsetSize } = this.state
-      if (process.env.TARO_ENV === 'jd') {
-        this.setState({
-          _isOpened: true,
-          offsetSize: -maxOffsetSize + 0.01
-        })
+    this.setState({
+      offsetSize: this.moveX
+    }, () => {
+      if (isOpened) {
+        const { maxOffsetSize } = this.state
+        if (process.env.TARO_ENV === 'jd') {
+          this.setState({
+            _isOpened: true,
+            offsetSize: -maxOffsetSize + 0.01
+          })
+        } else {
+          this.setState({
+            _isOpened: true,
+            offsetSize: -maxOffsetSize
+          })
+        }
       } else {
         this.setState({
-          _isOpened: true,
-          offsetSize: -maxOffsetSize
+          offsetSize: 0,
+          _isOpened: false
         })
       }
-    } else {
-      this.setState(
-        {
-          offsetSize: this.moveX
-        },
-        () => {
-          this.setState({
-            offsetSize: 0,
-            _isOpened: false
-          })
-        }
-      )
-    }
+    })
   }
 
   private handleOpened = (event: CommonEvent): void => {
@@ -165,18 +179,20 @@ export default class AtSwipeAction extends React.Component<
     const { options, disabled } = this.props
     const rootClass = classNames('at-swipe-action', this.props.className)
 
+    const areaWidth = eleWidth > 0 ? `${eleWidth}px` : '100%'
+
     return (
       <View
         id={`swipeAction-${componentId}`}
         className={rootClass}
         style={{
-          width: `${eleWidth}px`
+          width: areaWidth
         }}
       >
         <MovableArea
           className='at-swipe-action__area'
           style={{
-            width: `${eleWidth}px`
+            width: areaWidth
           }}
         >
           <MovableView
@@ -191,7 +207,13 @@ export default class AtSwipeAction extends React.Component<
               width: `${eleWidth + maxOffsetSize}px`
             }}
           >
-            {this.props.children}
+            <View
+              style={{
+                width: areaWidth
+              }}
+            >
+              {this.props.children}
+            </View>
             {Array.isArray(options) && options.length > 0 ? (
               <AtSwipeActionOptions
                 options={options}

diff --git a/packages/taro-ui/src/style/components/swipe-action.scss b/packages/taro-ui/src/style/components/swipe-action.scss
@@ -18,6 +18,7 @@
     display: flex;
     height: 100%;
     z-index: 2;
+    min-width: 100%;
 
     &.animtion {
       transition: transform 300ms $timing-func;
@@ -34,6 +35,7 @@
     color: $at-swipe-action-color;
     font-size: $at-swipe-action-font-size;
     width: 120px;
+    box-sizing: border-box;
 
     text-align: center;
     background-color: $at-swipe-action-option-bg-color;
@@ -50,4 +52,4 @@
     z-index: 1;
     opacity: 0;
   }
-}
+}
diff --git a/packages/taro-ui/types/swipe-action.d.ts b/packages/taro-ui/types/swipe-action.d.ts
@@ -65,6 +65,11 @@ export interface AtSwipeActionProps extends AtComponent {
    * @deprecated 已废弃，无需设置 areaWidth
    */
   areaWidth?: number
+
+  /**
+   * 用于兼容获取跨自定义组件的后代元素
+   */
+  parentSelector?: string
 }
 
 export interface AtSwipeActionState {