dhre-ui-kit 0.0.41 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -31,6 +31,7 @@
     "react-native-blob-util": "^0.19.11",
     "react-native-calendars": "^1.1306.0",
     "react-native-country-picker-modal": "^2.0.0",
+    "react-native-element-dropdown": "^2.12.1",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",
     "react-native-paper": "^5.12.5",

package/src/components/countryPicker/CountryPicker.tsx

@@ -37,6 +37,7 @@ interface MobileNumberInputProps {
   getCountryCode: (countryCode: string) => void;
   maxLength: number;
   errorMessage: string;
+  label: string;
 }
 
 const CountryDropDown = ({
@@ -52,11 +53,13 @@ const CountryDropDown = ({
   getCountryCode,
   maxLength,
   errorMessage,
+  label,
 }: MobileNumberInputProps) => {
   const [countryCode, setCountryCode] =
     useState<CountryCode>(defaultCountryCode);
   const [callingCode, setCallingCode] = useState<string>(defaultCallingCode);
   const [pickerVisible, setPickerVisible] = useState<boolean>(false);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
 
   const handleSelect = (country: Country) => {
     setCountryCode(country.cca2);
@@ -82,15 +85,26 @@ const CountryDropDown = ({
             {callingCode}
           </Text>
         </View>
-        <TextInput
-          style={[styles.input, inputStyle]}
-          placeholder={placeholder}
-          keyboardType="phone-pad"
-          value={value}
-          onChangeText={onChangeText}
-          maxLength={maxLength}
-          placeholderTextColor={theme.CONTENT_SECONDRY['light']}
-        />
+        <View style={styles.flex}>
+          {(isFocused || value) && (
+            <CustomTypography
+              variant={'L2_REGULAR'}
+              text={label ?? ''}
+              style={styles.floatingLabel}
+            />
+          )}
+          <TextInput
+            style={[styles.input, inputStyle]}
+            placeholder={!isFocused ? placeholder : ''}
+            keyboardType="phone-pad"
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            maxLength={maxLength}
+            placeholderTextColor={theme.CONTENT_SECONDRY['light']}
+          />
+        </View>
       </View>
       {errorMessage ? (
         <CustomTypography
@@ -98,7 +112,7 @@ const CountryDropDown = ({
           text={errorMessage ?? ''}
           style={{
             ...styles.errorStyle,
-            color: '#EB0542', // need to check with BA
+            color: '#EB0542', // need to check this color with designer
           }}
         />
       ) : null}
@@ -107,11 +121,15 @@ const CountryDropDown = ({
 };
 
 const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
     borderColor: DHRE_COLORS_TEXT.DH_BLACK,
     borderWidth: 1,
+    height: verticalScale(48),
     borderRadius: moderateScale(8),
     paddingHorizontal: horizontalScale(10),
     paddingVertical: verticalScale(8),
@@ -133,6 +151,16 @@ const styles = StyleSheet.create({
     borderLeftColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
     paddingLeft: horizontalScale(8),
   },
+  floatingLabel: {
+    position: 'absolute',
+    left: horizontalScale(-88),
+    top: verticalScale(-16),
+    fontSize: moderateScale(12),
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingHorizontal: horizontalScale(4),
+    zIndex: 1,
+  },
   errorStyle: {
     marginTop: verticalScale(4),
   },

package/src/components/dropDown/DropDown.tsx

@@ -0,0 +1,139 @@
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+  TextStyle,
+  ImageStyle,
+} from 'react-native';
+import {Dropdown} from 'react-native-element-dropdown';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import theme from '../../theme/themes';
+
+interface CustomDropdownProps {
+  data: {[key: string]: string}[];
+  labelField?: string;
+  valueField?: string;
+  label?: string;
+  placeholder?: string;
+  containerStyle?: ViewStyle;
+  dropdownStyle?: ViewStyle;
+  placeholderStyle?: TextStyle;
+  selectedTextStyle?: TextStyle;
+  iconStyle?: ImageStyle;
+  labelStyle?: TextStyle;
+  defaultValue?: string;
+  iconColor?: string;
+  itemTextStyle?: TextStyle;
+  onValueChange?: (value: string) => void;
+}
+
+const CustomDropdown: React.FC<CustomDropdownProps> = ({
+  data,
+  labelField = 'label',
+  valueField = 'value',
+  label,
+  placeholder,
+  containerStyle,
+  dropdownStyle,
+  placeholderStyle,
+  selectedTextStyle,
+  iconStyle,
+  labelStyle,
+  defaultValue,
+  iconColor,
+  itemTextStyle,
+  onValueChange,
+}) => {
+  const [value, setValue] = useState<string | undefined>(defaultValue);
+  const [isFocus, setIsFocus] = useState<boolean>(false);
+
+  const renderLabel = () => {
+    if (value || isFocus) {
+      return (
+        <Text
+          style={[
+            styles.label,
+            labelStyle,
+            isFocus && {color: theme.BORDER_INVERTED['light']},
+          ]}>
+          {label}
+        </Text>
+      );
+    }
+    return null;
+  };
+
+  const handleValueChange = (item: {[key: string]: string}) => {
+    const newValue = item[valueField];
+    setValue(newValue);
+    setIsFocus(false);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && renderLabel()}
+      <Dropdown
+        style={[
+          styles.dropdown,
+          dropdownStyle,
+          isFocus && {borderColor: theme.BORDER_INVERTED['light']},
+        ]}
+        placeholderStyle={[styles.placeholderStyle, placeholderStyle]}
+        selectedTextStyle={[styles.selectedTextStyle, selectedTextStyle]}
+        iconStyle={[styles.iconStyle, iconStyle]}
+        data={data ?? []}
+        labelField={labelField}
+        valueField={valueField}
+        placeholder={!isFocus ? placeholder : ''}
+        value={value}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={handleValueChange}
+        iconColor={iconColor}
+        dropdownPosition="bottom"
+        itemTextStyle={itemTextStyle}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.SURFACE_STATIC['light'],
+    marginVertical: verticalScale(4), // External margin
+  },
+  dropdown: {
+    height: verticalScale(48),
+    borderColor: theme.BORDER_PRIMARY['light'],
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: horizontalScale(12),
+    backgroundColor: theme.SURFACE_STATIC['light'],
+  },
+  label: {
+    position: 'absolute',
+    backgroundColor: theme.SURFACE_STATIC['light'],
+    left: horizontalScale(10),
+    top: verticalScale(-8),
+    zIndex: 10,
+    paddingHorizontal: horizontalScale(4),
+    fontSize: verticalScale(12),
+  },
+  placeholderStyle: {
+    fontSize: verticalScale(16),
+  },
+  selectedTextStyle: {
+    fontSize: verticalScale(16),
+  },
+  iconStyle: {
+    width: horizontalScale(20),
+    height: verticalScale(20),
+  },
+});
+
+export default CustomDropdown;

package/src/components/dropDown/index.ts

@@ -0,0 +1 @@
+export {default} from './DropDown';

package/src/components/textInput/Textinput.tsx

@@ -58,7 +58,7 @@ const CommonTextInput: React.FC<CommonTextInputProps> = ({
           text={errorMessage ?? ''}
           style={{
             ...styles.errorStyle,
-            color: '#EB0542', // need to check with BA
+            color: '#EB0542', // need to check this color with designer
           }}
         />
       ) : null}
@@ -68,15 +68,22 @@ const CommonTextInput: React.FC<CommonTextInputProps> = ({
 
 const styles = StyleSheet.create({
   input: {
-    marginVertical: verticalScale(12),
+    marginVertical: verticalScale(8),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: 0,
+    height: verticalScale(48),
+    justifyContent: 'center',
   },
   errorInput: {
     marginTop: verticalScale(12),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: 0,
+    height: verticalScale(48),
+    justifyContent: 'center',
   },
   outlineStyle: {
     borderWidth: 1,
+    height: verticalScale(48),
     borderRadius: moderateScale(8),
   },
   errorStyle: {

package/src/index.ts

@@ -35,6 +35,7 @@ export {default as Category} from './components/scrollList';
 export {default as FeedbackForm} from './components/feedback';
 export {default as CountryPicker} from './components/countryPicker';
 export {default as TextInput} from './components/textInput';
+export {default as DropDown} from './components/dropDown';
 
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';