@hoddy-ui/core 2.0.0 → 2.0.36

package/src/hooks.ts

@@ -1,8 +1,9 @@
 import { useContext } from "react";
-import { Dimensions, Platform } from "react-native";
-import { vs } from "react-native-size-matters";
+import { Platform, useColorScheme } from "react-native";
 import { UIThemeContext } from "./theme";
 import colors from "./theme/colors";
+import { ThemeModes, ThemeTypes } from "./types";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export const useColors = () => {
   const { themeState } = useContext(UIThemeContext);
@@ -13,13 +14,26 @@ export const useTheme = () => {
   const { themeState } = useContext(UIThemeContext);
   return themeState.value;
 };
+
+export const useThemeContext = () => {
+  const { themeState: theme, themeDispatch } = useContext(UIThemeContext);
+  const colorScheme: ThemeTypes = useColorScheme()!;
+
+  const setTheme = (theme: ThemeModes) => {
+    if (theme === "default") {
+      themeDispatch?.({ type: "default", payload: colorScheme });
+    } else {
+      themeDispatch?.({ type: theme });
+    }
+  };
+  return { theme, setTheme };
+};
+
 export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
   const colors = useColors();
-  const theme = useTheme();
   const options: any = {
     stack: {
       headerShown: false,
-
       headerStyle: {
         backgroundColor: colors.white[1],
       },
@@ -37,15 +51,12 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
       headerShown: false,
       headerTintColor: colors.dark.main,
       tabBarStyle: {
-        borderTopColor: theme === "dark" ? colors.light.main : colors.white[2],
+        borderTopColor: colors.white[2],
+        borderColor: colors.white[2],
         borderTopWidth: 1,
-        // shadowColor: "#000",
-        // shadowOffset: { height: -3, width: 0 },
-        // shadowRadius: 7,
-        // shadowOpacity: 0.1,
         backgroundColor: colors.white[1],
       },
-      tabBarActiveTintColor: colors.blue.main,
+      tabBarActiveTintColor: colors.primary.main,
       tabBarInactiveTintColor: colors.textSecondary.main,
       tabBarLabelStyle: {
         // fontSize: ms(12),
@@ -70,9 +81,5 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
     },
   };
 
-  if (Platform.OS === "android") {
-    options.tab.tabBarStyle.height = Dimensions.get("screen").height * 0.08;
-    options.tab.tabBarStyle.paddingBottom = vs(15);
-  }
   return options[type];
 };

package/src/theme/index.tsx

@@ -24,7 +24,7 @@ function themeReducer(
   { type, payload }: ThemeActionTypes
 ): ThemeState {
   // Platform
-
+  AsyncStorage.setItem("theme", type);
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -45,12 +45,20 @@ const ConfigureSystemUI = () => {
     const config = getConfig();
     if (colors) {
       SystemUI.setBackgroundColorAsync(colors.white[1]);
-      if (Platform.OS === "android" && !config.EDGE_TO_EDGE) {
-        NavigationBar.setBackgroundColorAsync(colors.white[1]);
-        if (theme === "dark") {
-          NavigationBar.setButtonStyleAsync("light");
+      if (Platform.OS === "android") {
+        if (config.EDGE_TO_EDGE) {
+          if (theme === "dark") {
+            NavigationBar.setStyle("light");
+          } else {
+            NavigationBar.setStyle("dark");
+          }
         } else {
-          NavigationBar.setButtonStyleAsync("dark");
+          NavigationBar.setBackgroundColorAsync(colors.white[1]);
+          if (theme === "dark") {
+            NavigationBar.setButtonStyleAsync("light");
+          } else {
+            NavigationBar.setButtonStyleAsync("dark");
+          }
         }
       }
     }

package/src/types.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
+  StyleProp,
   TextInputProps,
   TextProps,
   TextStyle,
@@ -54,7 +55,7 @@ export interface ThemeState {
 
 export interface ThemeContext {
   themeState: ThemeState;
-  themeDispatch?: any;
+  themeDispatch?: (action: ThemeActionTypes) => void;
 }
 export interface ThemeProviderProps {
   children: ReactNode;
@@ -117,7 +118,7 @@ export interface LinkButtonProps {
   style?: TextStyle & ViewStyle;
   color?: colorTypes;
   fontSize?: number;
-  fontWeight?: string;
+  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
   disabled?: boolean;
   onPress?: () => void;
 }
@@ -214,7 +215,7 @@ export interface PopupProps {
   open: boolean;
   onClose?: () => void;
   style?: ViewStyle;
-
+  disableAutoKeyboardManagement?: boolean;
   onModalShow?: () => void;
   onModalHide?: () => void;
 }
@@ -229,6 +230,7 @@ export interface SpinnerProps {
 
 export interface TextFieldProps extends TextInputProps {
   label?: string;
+  labelProps?: TypographyProps;
   variant?: "outlined" | "text" | "contained";
   color?: colorTypes;
   size?: "small" | "normal" | "large";
@@ -251,12 +253,13 @@ export interface TextFieldProps extends TextInputProps {
   }[];
   onFocus?: () => void;
   onBlur?: () => void;
+  selectMenuProps?: Partial<SelectMenuProps>;
 }
 
 export interface TypographyProps extends TextProps {
   children: ReactNode;
   color?: colorTypes | (string & {});
-  style?: TextStyle | ViewStyle;
+  style?: StyleProp<TextStyle | ViewStyle>;
   textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
   variant?:
     | "caption"
@@ -273,6 +276,7 @@ export interface TypographyProps extends TextProps {
   numberOfLines?: number;
   adjustsFontSizeToFit?: boolean;
   fontFamily?: string;
+  fontSize?: number;
   fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
 
@@ -291,6 +295,8 @@ export interface SelectMenuProps {
   label?: string;
   secondary?: string;
   helperText?: string;
+  searchEnabled?: boolean;
+  searchPlaceholder?: string;
 }
 
 export interface OTPInputProps {

package/src/utility.ts

@@ -0,0 +1,11 @@
+import { getConfig } from "./config/KeyManager";
+
+export const getFontFamily = (
+  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+) => {
+  return (
+    getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] ||
+    getConfig().TYPOGRAPHY?.fontFamily ||
+    undefined
+  );
+};