(SwipeAction): 增加actionViewStyle & rectButtonStyle属性

uiwjs · Mar 6, 2023 · f704140 · f704140
1 parent e6e766d
commit f704140
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/example/examples/src/routes/SwipeAction/index.tsx b/example/examples/src/routes/SwipeAction/index.tsx
@@ -45,6 +45,7 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
             <Card title="左右滑动，显示按钮" style={styles.card}>
               <SwipeAction
                 buttonWidth={80}
+                rectButtonStyle={{marginLeft: -20, marginRight: 20}}
                 ref={ref => (this.newRef = ref)}
                 right={right}
                 onSwipeableRightOpen={() => console.log('right')}
@@ -71,5 +72,7 @@ const styles = StyleSheet.create({
   },
   view: {
     height: 30,
+    backgroundColor: 'red',
+    marginRight: 20,
   },
 });
diff --git a/packages/core/src/Drawer/index.tsx b/packages/core/src/Drawer/index.tsx
@@ -33,7 +33,6 @@ export interface DrawerState {
 }
 
 export default function Drawer(props: DrawerProps) {
-  console.log(333);
   const getInitPosition = () => {
     const { drawerWidth, placement, drawerHeight } = props;
     const xy = { x: 0, y: 0 };

diff --git a/packages/core/src/SwipeAction/README.md b/packages/core/src/SwipeAction/README.md
@@ -133,6 +133,9 @@ export default Demo;
 | `right` | 右边滑动出来的元素 | Array<`ColumnProps`> | - |
 | `left` | 左边滑动出来的元素 | Array<`ColumnProps`> | - |
 | `buttonWidth` | 按钮宽度 |  number | 60 |
+| `actionViewStyle` | 弹出框样式 |  ViewStyle | - |
+| `rectButtonStyle` | 弹出button样式 |  ViewStyle | - |
+
 
 ### ColumnProps
 | 参数 | 说明 | 类型 | 默认值 |

diff --git a/packages/core/src/SwipeAction/index.tsx b/packages/core/src/SwipeAction/index.tsx
@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, forwardRef, useRef } from 'react';
-import { Animated, StyleSheet, View, Text, I18nManager } from 'react-native';
+import { Animated, StyleSheet, View, Text, I18nManager, ViewStyle } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable, { SwipeableProps } from 'react-native-gesture-handler/Swipeable';
 
@@ -23,14 +23,16 @@ export interface SwipeActionProps extends SwipeableProps {
   left?: Array<Column>;
   /** 按钮宽度 默认60 */
   buttonWidth?: number;
+  actionViewStyle?: ViewStyle;
+  rectButtonStyle?: ViewStyle;
   children?: React.ReactNode;
 }
 
 const SwipeAction = (
   props: SwipeActionProps,
   ref: React.ForwardedRef<Partial<React.LegacyRef<Swipeable>> | undefined | null>,
 ) => {
-  const { right = [], left = [], buttonWidth = 60, children, ...others } = props;
+  const { right = [], left = [], buttonWidth = 60, children, actionViewStyle, rectButtonStyle, ...others } = props;
   const swipeableRef: React.MutableRefObject<null> = useRef(null);
 
   useImperativeHandle(ref, () => ({ swipeable: swipeableRef.current }));
@@ -48,7 +50,7 @@ const SwipeAction = (
     const length = buttons.length;
     const width = buttonWidth * length;
     return (
-      <View style={[styles.viewActions, { width: width }]}>
+      <View style={[styles.viewActions, { width: width, ...actionViewStyle }]}>
         {buttons &&
           buttons.map(({ text, color, onPress, disabled, render }, idx) => {
             const x = isLeft ? -idx * buttonWidth : (length - idx) * buttonWidth;
@@ -60,7 +62,7 @@ const SwipeAction = (
             return (
               <Animated.View key={idx} style={{ flex: 1, transform: [{ translateX: trans }] }}>
                 <RectButton
-                  style={[styles.rightAction, { backgroundColor: color }]}
+                  style={[styles.rightAction, { backgroundColor: color, ...rectButtonStyle }]}
                   onPress={() => {
                     if (disabled && disabled) {
                       return;