@hoddy-ui/core 2.5.16 → 2.5.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "2.5.16",
+  "version": "2.5.18",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Popup.tsx

@@ -29,7 +29,7 @@ import Typography from "./Typography";
 
 export const Popup: React.FC<PopupProps> = ({
   title,
-  sheet,
+  sheet = true,
   bare = false,
   keyboardVerticalOffset,
   children,

package/src/Components/SelectMenu.tsx

@@ -1,11 +1,11 @@
 import { MaterialIcons } from "@expo/vector-icons";
 import React, { useCallback, useState } from "react";
-import { FlatList, Modal, TouchableOpacity, View } from "react-native";
+import { FlatList, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { SelectMenuProps } from "../types";
-import Button from "./Button";
+import { Popup } from "./Popup";
 import TextField from "./TextField";
 import Typography from "./Typography";
 
@@ -19,22 +19,15 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
   label,
   secondary,
   helperText,
+  searchEnabled = false,
+  searchPlaceholder = "Search",
 }) => {
   const colors = useColors();
   const { bottom } = useSafeAreaInsets();
 
   const [search, setSearch] = useState("");
   const styles: any = ScaledSheet.create({
-    root: {
-      backgroundColor: colors.white[1],
-      flex: 1,
-    },
-    content: {
-      flex: 1,
-      paddingHorizontal: "10@ms",
-    },
     header: {
-      paddingTop: "80@ms",
       marginBottom: "20@vs",
     },
 
@@ -46,11 +39,6 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
       alignItems: "center",
       marginBottom: "10@vs",
     },
-    footer: {
-      paddingBottom: bottom,
-      paddingHorizontal: "15@ms",
-      paddingTop: "15@ms",
-    },
   });
 
   const renderItem = useCallback(
@@ -70,6 +58,7 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
         {item.start && <View style={{ marginRight: 10 }}>{item.start}</View>}
         <View style={{ flex: 1 }}>
           <Typography
+            variant="body2"
             style={{
               color: item.value === value ? colors.blue.light : colors.black[2],
             }}
@@ -102,51 +91,39 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
     [value, colors]
   );
   return (
-    <Modal visible={open} animationType="slide" onRequestClose={onClose}>
-      <View style={styles.root}>
-        <View style={styles.content}>
-          <View style={styles.header}>
-            <Typography variant="h5" gutterBottom={5} fontWeight={700}>
-              {label}
+    <Popup open={open} onClose={onClose} title={label}>
+      <View style={styles.content}>
+        <View style={styles.header}>
+          {helperText && (
+            <Typography variant="body2" color="textSecondary" gutterBottom={5}>
+              {helperText}
             </Typography>
-            {helperText ? (
-              <Typography variant="body2" color="textSecondary">
-                {helperText}
-              </Typography>
-            ) : null}
-
+          )}
+          {searchEnabled && (
             <TextField
-              label="Search"
+              label={searchPlaceholder}
               value={search}
               type="search"
               onChangeText={setSearch}
               variant="outlined"
             />
-          </View>
-          <FlatList
-            removeClippedSubviews
-            keyExtractor={(item) => item.value}
-            renderItem={renderItem}
-            data={options
-              .filter((item) =>
-                search.length > 1
-                  ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
-                  : item
-              )
-              .sort((a, b) => a.label.localeCompare(b.label))}
-          />
-        </View>
-        <View style={styles.footer}>
-          <Button
-            color="error"
-            variant="outlined"
-            fullWidth
-            title="Close"
-            onPress={onClose}
-          />
+          )}
         </View>
+        <FlatList
+          removeClippedSubviews
+          keyExtractor={(item) => item.value}
+          bounces={false}
+          renderItem={renderItem}
+          data={options
+            .filter((item) =>
+              search.length > 1
+                ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
+                : item
+            )
+            .sort((a, b) => a.label.localeCompare(b.label))}
+        />
       </View>
-    </Modal>
+    </Popup>
   );
 };
 

package/src/Components/TextField.tsx

@@ -5,15 +5,13 @@ import {
   ScaledSheet,
   moderateScale,
   ms,
-  mvs,
   verticalScale,
 } from "react-native-size-matters";
-import { getConfig } from "../config/KeyManager";
 import { useColors } from "../hooks";
 import { TextFieldProps } from "../types";
+import { getFontFamily } from "../utility";
 import SelectMenu from "./SelectMenu";
 import Typography from "./Typography";
-import { getFontFamily } from "../utility";
 
 const TextField: React.FC<TextFieldProps> = ({
   label,
@@ -37,6 +35,7 @@ const TextField: React.FC<TextFieldProps> = ({
   gutterBottom = 0,
   end,
   options,
+  selectMenuProps,
   ...props
 }) => {
   const colors = useColors();
@@ -271,6 +270,7 @@ const TextField: React.FC<TextFieldProps> = ({
           label={label}
           helperText={helperText}
           onChange={onChangeText!}
+          {...selectMenuProps}
         />
       )}
     </>
@@ -302,6 +302,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       end,
       options,
       multiline,
+      selectMenuProps,
       ...props
     },
     ref
@@ -517,6 +518,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             label={label}
             helperText={helperText}
             onChange={onChangeText!}
+            {...selectMenuProps}
           />
         )}
       </>

package/src/hooks.ts

@@ -41,7 +41,6 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
       tabBarStyle: {
         borderTopColor: theme === "dark" ? colors.light.main : colors.white[2],
         borderTopWidth: 1,
-        paddingBottom: bottom,
         backgroundColor: colors.white[1],
       },
       tabBarActiveTintColor: colors.blue.main,

package/src/types.ts

@@ -253,6 +253,7 @@ export interface TextFieldProps extends TextInputProps {
   }[];
   onFocus?: () => void;
   onBlur?: () => void;
+  selectMenuProps?: Partial<SelectMenuProps>;
 }
 
 export interface TypographyProps extends TextProps {
@@ -294,6 +295,8 @@ export interface SelectMenuProps {
   label?: string;
   secondary?: string;
   helperText?: string;
+  searchEnabled?: boolean;
+  searchPlaceholder?: string;
 }
 
 export interface OTPInputProps {