dhre-ui-kit 0.0.38 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -30,8 +30,10 @@
     "react-native": "0.74.3",
     "react-native-blob-util": "^0.19.11",
     "react-native-calendars": "^1.1306.0",
+    "react-native-country-picker-modal": "^2.0.0",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",
+    "react-native-paper": "^5.12.5",
     "react-native-pdf": "^6.7.5",
     "react-native-progress": "^5.0.1",
     "react-native-svg": "^15.4.0",

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, Modal} from 'react-native';
+import {View, Modal, KeyboardAvoidingView, Platform} from 'react-native';
 import {PanGestureHandler} from 'react-native-gesture-handler';
 import {BlurView} from '@react-native-community/blur';
 import {BottomDrawerProps} from './BottomDrawer.interface';
@@ -41,40 +41,44 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
       visible={isModalVisible}
       onRequestClose={toggleModal}>
       <PanGestureHandler onGestureEvent={onSwipDown}>
-        <View style={[styles.mainContainer, style]} testID={testID}>
-          {showBlurView ? (
-            <BlurView
-              style={[styles.blurView, blurViewStyle]}
-              blurType="light"
-              blurAmount={blurAmount}
-            />
-          ) : null}
-          <View style={[styles.modalContainer, modalContainerStyle]}>
-            <View style={styles.separator} />
-            <View style={styles.headerContainer}>
-              {showLeftIcon &&
-                React.cloneElement(leftIcon, {
-                  width: moderateScale(24),
-                  height: moderateScale(24),
-                  style: styles.leftIconStyle,
-                  onPress: onLeftIconPress,
-                })}
-              <CustomTypography
-                variant={titleVariant}
-                text={title}
-                style={{...styles.title, ...titleStyle}}
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{flex: 1}}>
+          <View style={[styles.mainContainer, style]} testID={testID}>
+            {showBlurView ? (
+              <BlurView
+                style={[styles.blurView, blurViewStyle]}
+                blurType="light"
+                blurAmount={blurAmount}
               />
-              {showRightIcon &&
-                React.cloneElement(rightIcon, {
-                  width: moderateScale(24),
-                  height: moderateScale(24),
-                  style: styles.rightIconStyle,
-                  onPress: toggleModal,
-                })}
+            ) : null}
+            <View style={[styles.modalContainer, modalContainerStyle]}>
+              <View style={styles.separator} />
+              <View style={styles.headerContainer}>
+                {showLeftIcon &&
+                  React.cloneElement(leftIcon, {
+                    width: moderateScale(24),
+                    height: moderateScale(24),
+                    style: styles.leftIconStyle,
+                    onPress: onLeftIconPress,
+                  })}
+                <CustomTypography
+                  variant={titleVariant}
+                  text={title}
+                  style={{...styles.title, ...titleStyle}}
+                />
+                {showRightIcon &&
+                  React.cloneElement(rightIcon, {
+                    width: moderateScale(24),
+                    height: moderateScale(24),
+                    style: styles.rightIconStyle,
+                    onPress: toggleModal,
+                  })}
+              </View>
+              {children}
             </View>
-            {children}
           </View>
-        </View>
+        </KeyboardAvoidingView>
       </PanGestureHandler>
     </Modal>
   );

package/src/components/countryPicker/CountryPicker.tsx

@@ -0,0 +1,141 @@
+import React, {useState} from 'react';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  Text,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import CountryPicker, {
+  Country,
+  CountryCode,
+} from 'react-native-country-picker-modal';
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import {
+  moderateScale,
+  horizontalScale,
+  verticalScale,
+} from '../../utils/stylehelper';
+import CustomTypography from '../customTypography';
+import theme from '../../theme/themes';
+import {
+  DEFAULT_CALLING_CODE,
+  DEFAULT_COUNTRY_CODE,
+} from '../../utils/constants';
+
+interface MobileNumberInputProps {
+  defaultCountryCode?: CountryCode;
+  defaultCallingCode?: string;
+  placeholder: string;
+  onChangeText: (text: string) => void;
+  value: string;
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  countryPickerStyle?: ViewStyle;
+  callingCodeStyle?: TextStyle;
+  getCountryCode: (countryCode: string) => void;
+  maxLength: number;
+  errorMessage: string;
+}
+
+const CountryDropDown = ({
+  defaultCountryCode = DEFAULT_COUNTRY_CODE,
+  defaultCallingCode = DEFAULT_CALLING_CODE,
+  placeholder,
+  onChangeText,
+  value,
+  containerStyle,
+  inputStyle,
+  countryPickerStyle,
+  callingCodeStyle,
+  getCountryCode,
+  maxLength,
+  errorMessage,
+}: MobileNumberInputProps) => {
+  const [countryCode, setCountryCode] =
+    useState<CountryCode>(defaultCountryCode);
+  const [callingCode, setCallingCode] = useState<string>(defaultCallingCode);
+  const [pickerVisible, setPickerVisible] = useState<boolean>(false);
+
+  const handleSelect = (country: Country) => {
+    setCountryCode(country.cca2);
+    setCallingCode(`+${country.callingCode[0]}`);
+    getCountryCode(`+${country.callingCode[0]}`);
+  };
+
+  return (
+    <>
+      <View style={[styles.container, containerStyle]}>
+        <View style={[styles.countryPickerContainer, countryPickerStyle]}>
+          <CountryPicker
+            withFilter
+            withFlag
+            countryCode={countryCode}
+            withCallingCode
+            onSelect={handleSelect}
+            visible={pickerVisible}
+          />
+          <Text
+            onPress={() => setPickerVisible(true)}
+            style={[styles.callingCode, callingCodeStyle]}>
+            {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>
+      {errorMessage ? (
+        <CustomTypography
+          variant={'L2_REGULAR'}
+          text={errorMessage ?? ''}
+          style={{
+            ...styles.errorStyle,
+            color: '#EB0542', // need to check with BA
+          }}
+        />
+      ) : null}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
+    borderWidth: 1,
+    borderRadius: moderateScale(8),
+    paddingHorizontal: horizontalScale(10),
+    paddingVertical: verticalScale(8),
+    marginTop: verticalScale(20),
+  },
+  countryPickerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: horizontalScale(10),
+  },
+  callingCode: {
+    fontSize: moderateScale(16),
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+  },
+  input: {
+    flex: 1,
+    fontSize: moderateScale(16),
+    borderLeftWidth: 1,
+    borderLeftColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
+    paddingLeft: horizontalScale(8),
+  },
+  errorStyle: {
+    marginTop: verticalScale(4),
+  },
+});
+
+export default CountryDropDown;

package/src/components/countryPicker/index.ts

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

package/src/components/textInput/Textinput.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {StyleSheet, ViewStyle} from 'react-native';
+import {TextInput} from 'react-native-paper';
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import {verticalScale, moderateScale} from '../../utils/stylehelper';
+import CustomTypography from '../customTypography';
+import theme from '../../theme/themes';
+
+interface CommonTextInputProps {
+  label: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholderText?: string;
+  isSecureTextEntry?: boolean;
+  activeBorderColor?: string;
+  inactiveBorderColor?: string;
+  borderRadius?: number;
+  inputStyle?: ViewStyle;
+  keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
+  maxLength?: number;
+  errorMessage?: string;
+}
+
+const CommonTextInput: React.FC<CommonTextInputProps> = ({
+  label,
+  value,
+  onChangeText,
+  isSecureTextEntry = false,
+  keyboardType = 'default',
+  placeholderText,
+  activeBorderColor = theme.CONTENT_PRIMARY['light'],
+  inactiveBorderColor = theme.BORDER_PRIMARY['light'],
+  inputStyle,
+  maxLength,
+  errorMessage,
+}) => {
+  return (
+    <>
+      <TextInput
+        mode="outlined"
+        outlineStyle={{
+          ...styles.outlineStyle,
+          borderColor: value.length ? activeBorderColor : inactiveBorderColor,
+        }}
+        label={label}
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={isSecureTextEntry}
+        keyboardType={keyboardType}
+        theme={{colors: {primary: DHRE_COLORS_TEXT.DH_BLACK}}}
+        style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
+        maxLength={maxLength}
+        placeholder={placeholderText}
+      />
+      {errorMessage ? (
+        <CustomTypography
+          variant={'L2_REGULAR'}
+          text={errorMessage ?? ''}
+          style={{
+            ...styles.errorStyle,
+            color: '#EB0542', // need to check with BA
+          }}
+        />
+      ) : null}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    marginVertical: verticalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  errorInput: {
+    marginTop: verticalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  outlineStyle: {
+    borderWidth: 1,
+    borderRadius: moderateScale(8),
+  },
+  errorStyle: {
+    marginTop: verticalScale(4),
+  },
+});
+
+export default CommonTextInput;

package/src/components/textInput/index.ts

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

package/src/index.ts

@@ -33,6 +33,8 @@ export {default as OurOfficesButton} from './components/OutOfOffice';
 export {default as NotificationBandge} from './components/notificationBandge';
 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 {FONT_STYLES} from './theme/fonts';
 export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';

package/src/utils/constants.ts

@@ -15,3 +15,6 @@ export const BUTTON_TYPES = {
   FUNCTION_NOTICE_TEXT: 'functionNoticeText',
   TEXT: 'Text',
 };
+
+export const DEFAULT_COUNTRY_CODE = 'AE';
+export const DEFAULT_CALLING_CODE = '+971';