Merge pull request #282 from lad-tech/263-fix-swipe

fix(Swipe): added props
lad-tech · Sep 9, 2024 · e171c6f · e171c6f
2 parents 7b10f5a + 6aed2a6
commit e171c6f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 21 deletions.
diff --git a/packages/core/src/controls/Swipe/Swipe.tsx b/packages/core/src/controls/Swipe/Swipe.tsx
@@ -17,8 +17,16 @@ import {ISwipe} from './types';
 const leftPos = -20;
 const rightPos = 20;
 
-const Swipe: FC<ISwipe> = ({active, disabled, onPress}) => {
-  const [styles, theme] = useStyles(stylesCreate, disabled);
+const Swipe: FC<ISwipe> = ({
+  active,
+  disabled,
+  onPress,
+  activeColor,
+  passiveColor,
+  containerStyle,
+  switcherStyle,
+}) => {
+  const [styles, {colors}] = useStyles(stylesCreate, disabled);
   const defaultState = active ? rightPos : leftPos;
 
   const pan = useRef(new Animated.Value(defaultState)).current;
@@ -91,7 +99,10 @@ const Swipe: FC<ISwipe> = ({active, disabled, onPress}) => {
 
   const backgroundColor = pan.interpolate({
     inputRange: [leftPos, rightPos],
-    outputRange: [theme.colors.ElementMuted, theme.colors.ElementBase],
+    outputRange: [
+      passiveColor || colors.ElementMuted,
+      activeColor || colors.ElementBase,
+    ],
     extrapolate: 'clamp',
   });
 
@@ -103,11 +114,13 @@ const Swipe: FC<ISwipe> = ({active, disabled, onPress}) => {
 
   return (
     <Animated.View
-      style={[styles.container, {backgroundColor}]}
+      style={[styles.container, containerStyle, {backgroundColor}]}
       needsOffscreenAlphaCompositing={true}
       accessibilityLabel={LABELS.swipe}
       {...panResponder.panHandlers}>
-      <Animated.View style={[styles.switcher, {transform: [{translateX}]}]} />
+      <Animated.View
+        style={[styles.switcher, switcherStyle, {transform: [{translateX}]}]}
+      />
     </Animated.View>
   );
 };

diff --git a/packages/core/src/controls/Swipe/__tests__/Swipe.test.tsx b/packages/core/src/controls/Swipe/__tests__/Swipe.test.tsx
@@ -103,4 +103,21 @@ describe.skip('Swipe', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+  it('should renders correctly with activeColor', function () {
+    const {getByLabelText, toJSON} = render(
+      <Swipe
+        active={false}
+        onPress={onPress}
+        activeColor={'red'}
+        containerStyle={{height: 22, width: 44}}
+        switcherStyle={{borderRadius: 24}}
+      />,
+    );
+    const panHandler = getByLabelText(LABELS.swipe);
+
+    act(() => {
+      panHandler.props.onPanResponderRelease(eventMock, {dx: 0});
+    });
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/packages/core/src/controls/Swipe/stylesCreate.ts b/packages/core/src/controls/Swipe/stylesCreate.ts
@@ -1,20 +1,22 @@
 import {createStyles} from '../../styles';
 import px from '../../styles/utils/px';
 
-const stylesCreate = createStyles(({spaces, colors}, disabled: boolean) => ({
-  container: {
-    width: px(50),
-    height: px(30),
-    borderRadius: spaces.Space20,
-    padding: spaces.Space2,
-    opacity: disabled ? 0.4 : 1,
-  },
-  switcher: {
-    flex: 1,
-    aspectRatio: 1,
-    backgroundColor: colors.ElementWhite,
-    borderRadius: px(25),
-  },
-}));
+const stylesCreate = createStyles(
+  ({spaces, colors}, disabled: boolean | undefined) => ({
+    container: {
+      width: px(50),
+      height: px(30),
+      borderRadius: spaces.Space20,
+      padding: spaces.Space2,
+      opacity: disabled ? 0.4 : 1,
+    },
+    switcher: {
+      flex: 1,
+      aspectRatio: 1,
+      backgroundColor: colors.ElementWhite,
+      borderRadius: px(25),
+    },
+  }),
+);
 
 export default stylesCreate;
diff --git a/packages/core/src/controls/Swipe/types.ts b/packages/core/src/controls/Swipe/types.ts
@@ -1,5 +1,11 @@
+import {StyleProp, ViewStyle} from 'react-native';
+
 export interface ISwipe {
   active: boolean;
-  disabled: boolean;
+  disabled?: boolean;
   onPress: (isActive: boolean) => void;
+  activeColor?: string;
+  passiveColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  switcherStyle?: StyleProp<ViewStyle>;
 }