dhre-ui-kit 0.0.82 → 0.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/assets/images/caretRight.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.75 3.375L12.375 9L6.75 14.625" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/index.ts

@@ -9,6 +9,7 @@ import CircleTick from './images/circleTick.svg';
 import ArrowLeft from './images/arrowLeft.svg';
 import BellSimple from './images/bellSimple.svg';
 import UploadFile from './images/uploadFileIcon.svg';
+import CaretRight from './images/caretRight.svg';
 
 export {
   CalenderDots,
@@ -22,4 +23,5 @@ export {
   ArrowLeft,
   BellSimple,
   UploadFile,
+  CaretRight,
 };

package/src/components/customSlideButton/custom-slide-button.interface.ts

@@ -0,0 +1,4 @@
+export interface CustomSlideButtonProps {
+  label?: string;
+  onComplete?: () => void;
+}

package/src/components/customSlideButton/index.tsx

@@ -0,0 +1,60 @@
+import React, {useRef} from 'react';
+import {View, PanResponder, Animated, Dimensions} from 'react-native';
+import {CaretRight} from '../../assets/index';
+import {CustomTypography, FontStyle} from '../../index';
+import styles from './styles';
+import {CustomSlideButtonProps} from './custom-slide-button.interface';
+
+const {width} = Dimensions.get('window');
+const BUTTON_WIDTH = 40; // Width of the button
+
+const CustomSlideButton = ({label, onComplete}: CustomSlideButtonProps) => {
+  const pan = useRef(new Animated.Value(0)).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        return gestureState.dx > 0; // Only set when moving right
+      },
+      onPanResponderGrant: () => {},
+      onPanResponderMove: (evt, gestureState) => {
+        if (gestureState.dx < width - BUTTON_WIDTH) {
+          pan.setValue(gestureState.dx);
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (gestureState.dx > width - BUTTON_WIDTH - 100) {
+          // If slid far enough, trigger payment action
+          onComplete && onComplete();
+          Animated.spring(pan, {
+            toValue: width - BUTTON_WIDTH - 10,
+            useNativeDriver: false,
+          }).start();
+        } else {
+          // Otherwise, reset position
+          Animated.spring(pan, {
+            toValue: 0,
+            useNativeDriver: false,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.sliderContainer}>
+      <View style={styles.buttonTextCOntainer}>
+        <CustomTypography text={label} variant={FontStyle.L1_REGULAR} />
+      </View>
+      <Animated.View
+        style={[styles.slider, {transform: [{translateX: pan}]}]}
+        {...panResponder.panHandlers}>
+        <View style={{...styles.button, width: BUTTON_WIDTH}}>
+          <CaretRight />
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default CustomSlideButton;

package/src/components/customSlideButton/styles.ts

@@ -0,0 +1,42 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f8f8f8',
+  },
+  sliderContainer: {
+    width: '100%',
+    height: 48,
+    backgroundColor: '#e0e0e0',
+    borderRadius: 25,
+    overflow: 'hidden',
+    justifyContent: 'center',
+  },
+  slider: {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+  },
+  button: {
+    height: 40,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    margin: 4,
+  },
+  buttonTextCOntainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default styles;

package/src/index.ts

@@ -44,6 +44,7 @@ export {default as OTPInput} from './components/otp';
 export {default as Stepper} from './components/stepper';
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';
+export {default as CustomSlideButton} from './components/customSlideButton';
 
 export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';