diff --git a/packages/core/src/controls/Swipe/Swipe.tsx b/packages/core/src/controls/Swipe/Swipe.tsx index 258411e6..6e6bf8ec 100644 --- 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 = ({active, disabled, onPress}) => { - const [styles, theme] = useStyles(stylesCreate, disabled); +const Swipe: FC = ({ + 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 = ({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 = ({active, disabled, onPress}) => { return ( - + ); }; diff --git a/packages/core/src/controls/Swipe/__tests__/Swipe.test.tsx b/packages/core/src/controls/Swipe/__tests__/Swipe.test.tsx index 18db222c..a832bbd6 100644 --- 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( + , + ); + 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 index aafdc645..f3aa316e 100644 --- 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 index 2728b640..ff96873d 100644 --- 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; + switcherStyle?: StyleProp; }