dhre-ui-kit 0.0.7 → 0.0.8

package/package.json

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

package/src/components/swipableList/SwipableList.interface.ts

@@ -1,5 +1,5 @@
 import {ReactNode} from 'react';
-import {ViewStyle} from 'react-native';
+import {TextStyle, ViewStyle} from 'react-native';
 
 export interface ListItem {
   id: string;
@@ -33,5 +33,5 @@ export interface SwipableListProps {
   rightPrimaryActionHandler?: (id: string) => void;
   rightPrimaryActionStyle?: ViewStyle;
   itemStyle?: ViewStyle;
-  titleStyle?: ViewStyle;
+  titleStyle?: TextStyle;
 }

package/src/components/swipableList/SwipableList.styles.ts

@@ -5,10 +5,15 @@ export const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  swippableContainer: {paddingVertical: verticalScale(16)},
   actionButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    padding: moderateScale(24),
+    paddingHorizontal: moderateScale(24),
+    paddingVertical: moderateScale(8),
+  },
+  titleStyle: {
+    color: '#fff',
   },
   leftActions: {
     flexDirection: 'row',

package/src/components/swipableList/SwipableList.tsx

@@ -40,11 +40,15 @@ const SwipableList = (props: SwipableListProps) => {
       onPress={onPress}
       style={[styles.actionButton, style]}>
       {icon}
-      <CustomTypography variant="L1_REGULAR" style={titleStyle} text={title} />
+      <CustomTypography
+        variant="L1_REGULAR"
+        style={[styles.titleStyle, titleStyle]}
+        text={title}
+      />
     </Pressable>
   );
 
-  const leftActionHandle = item => (
+  const leftActionHandle = (item: ListItem) => (
     <View style={[styles.leftActions, leftPrimaryActionStyle]}>
       {leftPrimaryActionIcon && (
         <ActionButton
@@ -67,7 +71,7 @@ const SwipableList = (props: SwipableListProps) => {
     </View>
   );
 
-  const rightActionHandle = item => (
+  const rightActionHandle = (item: ListItem) => (
     <View style={[styles.rightActions, rightPrimaryActionStyle]}>
       {rightPrimaryActionIcon && (
         <ActionButton
@@ -85,7 +89,8 @@ const SwipableList = (props: SwipableListProps) => {
     <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
       <Swipeable
         renderLeftActions={() => leftActionHandle(item)}
-        renderRightActions={() => rightActionHandle(item)}>
+        renderRightActions={() => rightActionHandle(item)}
+        containerStyle={styles.swippableContainer}>
         {props?.renderItem(item)}
       </Swipeable>
     </GestureHandlerRootView>

package/src/index.ts

@@ -24,3 +24,4 @@ export {default as CustomHeader} from './components/customHeader';
 export {default as SwipableList} from './components/swipableList';
 export {default as CustomTypography} from './components/customTypography';
 export {default as CustomIcon} from './components/customIcon';
+export * from './utils/stylehelper';

package/src/theme/themes.ts

@@ -53,33 +53,37 @@ const theme = {
     dark: '##CECECE',
   },
 
-  BODER_PRIMARY: {
+  BORDER_PRIMARY: {
     light: '#686868',
     dark: '#404040',
   },
-  BODER_SECONDRY: {
+  BORDER_SECONDRY: {
     light: '#A7A7A7',
     dark: '#686868',
   },
-  BODER_DISABLE: {
+  BORDER_DISABLE: {
     light: '#CECECE',
     dark: '#4F4F4F',
   },
-  BODER_INVERTED: {
+  BORDER_INVERTED: {
     light: '#000000',
     dark: '#FFFFFF',
   },
-  BODER_BRAND_STATIC: {
+  BORDER_BRAND_STATIC: {
     light: '#D92D27',
     dark: '#D92D27',
   },
-  BODER_BRAND_TRANSPARENT_STATIC: {
+  BORDER_BRAND_TRANSPARENT_STATIC: {
     light: '#D92D3E',
     dark: '#D92D3E',
   },
-  BODER_STATIC: {
+  BORDER_STATIC: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
+  BORDER_SEPRATOR: {
+    light: '#282828',
+    dark: '#FFFFFF',
+  },
 };
 export default theme;