dhre-ui-kit 0.0.36 → 0.0.38

package/__mocks__/setup-tests.ts

@@ -19,3 +19,6 @@ jest.mock('react-native-webview', () => {
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
+jest.mock('react-native-gesture-handler', () => ({
+  PanGestureHandler: jest.fn(({children}) => children),
+}));

package/package.json

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

package/src/components/bottomDrawer/BottomDrawer.interface.ts

@@ -11,6 +11,7 @@ export interface BottomDrawerProps {
   modalContainerStyle?: ViewStyle;
   blurAmount?: number;
   blurViewStyle?: ViewStyle;
+  showBlurView?: boolean;
   leftIcon?: React.ReactElement;
   rightIcon?: React.ReactElement;
   showLeftIcon?: boolean;

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View, Modal} from 'react-native';
+import {PanGestureHandler} from 'react-native-gesture-handler';
 import {BlurView} from '@react-native-community/blur';
 import {BottomDrawerProps} from './BottomDrawer.interface';
 import styles from './BottomDrawer.styles';
@@ -17,6 +18,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
   modalContainerStyle,
   blurAmount = 10,
   blurViewStyle,
+  showBlurView = true,
   showLeftIcon = false,
   showRightIcon = true,
   leftIcon = <ArrowLeft />,
@@ -25,44 +27,55 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
   titleStyle,
   titleVariant = 'B2_REGULAR',
 }) => {
+  const onSwipDown = (event: {nativeEvent: {translationY: number}}) => {
+    const {translationY} = event.nativeEvent;
+    if (translationY > 50) {
+      toggleModal();
+    }
+  };
+
   return (
     <Modal
       animationType="slide"
       transparent={true}
       visible={isModalVisible}
       onRequestClose={toggleModal}>
-      <View style={[styles.mainContainer, style]} testID={testID}>
-        <BlurView
-          style={[styles.blurView, blurViewStyle]}
-          blurType="light"
-          blurAmount={blurAmount}
-        />
-        <View style={[styles.modalContainer, modalContainerStyle]}>
-          <View style={styles.separator} />
-          <View style={styles.headerContainer}>
-            {showLeftIcon &&
-              React.cloneElement(leftIcon, {
-                width: moderateScale(24),
-                height: moderateScale(24),
-                style: styles.leftIconStyle,
-                onPress: onLeftIconPress,
-              })}
-            <CustomTypography
-              variant={titleVariant}
-              text={title}
-              style={{...styles.title, ...titleStyle}}
+      <PanGestureHandler onGestureEvent={onSwipDown}>
+        <View style={[styles.mainContainer, style]} testID={testID}>
+          {showBlurView ? (
+            <BlurView
+              style={[styles.blurView, blurViewStyle]}
+              blurType="light"
+              blurAmount={blurAmount}
             />
-            {showRightIcon &&
-              React.cloneElement(rightIcon, {
-                width: moderateScale(24),
-                height: moderateScale(24),
-                style: styles.rightIconStyle,
-                onPress: toggleModal,
-              })}
+          ) : null}
+          <View style={[styles.modalContainer, modalContainerStyle]}>
+            <View style={styles.separator} />
+            <View style={styles.headerContainer}>
+              {showLeftIcon &&
+                React.cloneElement(leftIcon, {
+                  width: moderateScale(24),
+                  height: moderateScale(24),
+                  style: styles.leftIconStyle,
+                  onPress: onLeftIconPress,
+                })}
+              <CustomTypography
+                variant={titleVariant}
+                text={title}
+                style={{...styles.title, ...titleStyle}}
+              />
+              {showRightIcon &&
+                React.cloneElement(rightIcon, {
+                  width: moderateScale(24),
+                  height: moderateScale(24),
+                  style: styles.rightIconStyle,
+                  onPress: toggleModal,
+                })}
+            </View>
+            {children}
           </View>
-          {children}
         </View>
-      </View>
+      </PanGestureHandler>
     </Modal>
   );
 };

package/src/components/button/Button.interface.ts

@@ -1,18 +1,18 @@
 import {ReactElement} from 'react';
-import {FONT_STYLES} from '../../theme/fonts';
-import {ViewStyle} from 'react-native';
+import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 
-export interface ButtonProps {
-  onPress: () => void;
+export interface CustomButtonProps {
   title: string;
-  buttonType: string;
-  buttonStyle?: ViewStyle;
-  titleStyle?: ViewStyle;
-  iconShown?: boolean;
-  iconStyles?: ViewStyle;
+  onPress: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: TextStyle;
+  leftIcon?: ReactElement<SvgProps>;
+  rightIcon?: ReactElement<SvgProps>;
+  iconStyle?: ViewStyle;
+  titleColor?: string;
+  titleVariant?: string;
+  imagePosition?: 'left' | 'right';
   testID?: string;
-  titleShown?: boolean;
-  variant: keyof typeof FONT_STYLES | string;
-  iconName?: ReactElement<SvgProps>;
+  disabled?: boolean;
 }

package/src/components/button/Button.tsx

@@ -1,28 +1,9 @@
-import React, {ReactElement} from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  View,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-} from 'react-native';
-import {SvgProps} from 'react-native-svg';
+import React from 'react';
+import {StyleSheet, View, Pressable} from 'react-native';
 import CustomText from '../customText';
-
-interface CustomButtonProps {
-  title: string;
-  onPress: () => void;
-  containerStyle?: StyleProp<ViewStyle>;
-  textStyle?: TextStyle;
-  leftIcon?: ReactElement<SvgProps>;
-  rightIcon?: ReactElement<SvgProps>;
-  iconStyle?: ViewStyle;
-  titleColor?: string;
-  titleVariant?: string;
-  imagePosition?: 'left' | 'right';
-  testID?: string;
-}
+import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+import {CustomButtonProps} from './Button.interface';
 
 const CustomButton = ({
   title,
@@ -36,12 +17,19 @@ const CustomButton = ({
   titleColor,
   titleVariant = 'L2_REGULAR',
   imagePosition = 'right',
+  disabled = false,
 }: CustomButtonProps) => {
+  const {theme} = useTheme();
   return (
-    <TouchableOpacity
+    <Pressable
       testID={testID}
-      style={[styles.buttonContainer, containerStyle]}
-      onPress={onPress}>
+      style={[
+        styles.buttonContainer,
+        containerStyle,
+        disabled ? {backgroundColor: theme.SURFACE_DISABLE} : {},
+      ]}
+      onPress={onPress}
+      disabled={disabled}>
       {imagePosition === 'left' && leftIcon && (
         <View style={iconStyle}>
           {React.cloneElement(leftIcon, {width: 20, height: 20})}
@@ -50,7 +38,11 @@ const CustomButton = ({
       <CustomText
         text={title}
         variant={titleVariant}
-        style={[{color: '#A7A7A7'}, textStyle]}
+        style={[
+          {color: '#A7A7A7'},
+          textStyle,
+          disabled ? {color: theme.CONTENT_DISABLE} : {},
+        ]}
         textColor={titleColor}
       />
 
@@ -59,7 +51,7 @@ const CustomButton = ({
           {React.cloneElement(rightIcon, {width: 20, height: 20})}
         </View>
       )}
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -74,4 +66,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CustomButton;
+export default withThemeProvider(CustomButton);

package/src/components/checkBox/CheckBox.tsx

@@ -29,10 +29,7 @@ const Checkbox: React.FC<CheckBoxProps> = ({
         testID={'Checkbox-Press'}
         onPress={handlePress}
         disabled={disable}
-        style={({pressed}) => [
-          styles.directionStyle,
-          {opacity: pressed ? 0.5 : 1},
-        ]}>
+        style={styles.directionStyle}>
         <View style={styles.checkboxContainer}>
           {React.cloneElement(checked ? checkedIcon : uncheckedIcon)}
         </View>