dhre-ui-kit 0.0.37 → 0.0.38

package/package.json

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

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);