@jescon-technologies/react-native-ui-kit 0.0.3 → 0.0.5

package/src/CustomComponents/CCustomTextInput.js

@@ -0,0 +1,336 @@
+import React, { memo, useState, useRef, useEffect, useCallback } from 'react';
+import {
+  View,
+  TextInput,
+  Text,
+  Animated,
+  TouchableOpacity,
+  Keyboard,
+} from 'react-native';
+import HOCIcons from '../HOC/HOCIcons';
+import { isNU, isNUQ, isNUQZ, normalize } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+
+const CCustomTextInput = (props) => {
+  // Initialize text from props or empty string
+  const [text, setText] = useState(() => {
+    const initialValue = props?.data?.value;
+    return initialValue !== undefined && initialValue !== null
+      ? String(initialValue)
+      : '';
+  });
+
+  const [infoVisible, setInfoVisible] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const shakeAnimation = useRef(new Animated.Value(0)).current;
+
+  // Destructure props for easier access
+  const {
+    data = {},
+    callBack,
+    onEndEditCallback,
+    validationtype,
+    required = false,
+    disabled = false,
+    info,
+    CloseIcon,
+    CloseCallBack,
+    iconstyle,
+    inputstyle,
+    CCommonHeight,
+    CBorderWidth,
+    CIconCallBack,
+    custompositiontextviewstyle,
+    custompositiontextstyle,
+    ...textInputProps
+  } = props;
+
+  // Merge default data with props data
+  const mergedData = {
+    // itemwidth: "100%",
+    displaytext: 'Name',
+    iconname: 'home',
+    type: 'default',
+    editable: true,
+    placeholder: '',
+    decimal: 2,
+    icongroup: 5,
+    tfontsize: normalize(14),
+    placeholdercolor: '#e1e1e1',
+    alignment: 'left',
+    ...data,
+  };
+
+  // Handle external value changes
+  useEffect(() => {
+    const newValue = props?.data?.value;
+    if (newValue !== undefined && newValue !== null) {
+      setText(String(newValue));
+    }
+  }, [props?.data?.value]);
+
+  // Keyboard listener
+  useEffect(() => {
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        if (isInputFocused) {
+          setIsInputFocused(false);
+          // Call any on blur callback if needed
+          if (onEndEditCallback && isNUQZ(validationtype)) {
+            onEndEditCallback(text);
+          }
+        }
+      }
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+    };
+  }, [isInputFocused, text, validationtype, onEndEditCallback]);
+
+  // Shake animation
+  const shake = useCallback(() => {
+    shakeAnimation.setValue(0);
+    Animated.sequence([
+      Animated.timing(shakeAnimation, {
+        toValue: 10,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+      Animated.timing(shakeAnimation, {
+        toValue: -10,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+      Animated.timing(shakeAnimation, {
+        toValue: 10,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+      Animated.timing(shakeAnimation, {
+        toValue: 0,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [shakeAnimation]);
+
+  // Validation functions
+  const validateEmail = useCallback((email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }, []);
+
+  const validateMobileNumber = useCallback((number) => {
+    const mobileRegex = /^\d{10}$/;
+    return mobileRegex.test(number);
+  }, []);
+
+  // Handle text change
+  const handleTextChange = useCallback((value) => {
+    setText(value);
+    if (callBack) {
+      callBack(value);
+    }
+  }, [callBack]);
+
+  // Handle end editing with validation
+  const handleEndEditing = useCallback(() => {
+    if (!isNUQZ(validationtype)) {return;}
+
+    let isValid = true;
+
+    switch (validationtype) {
+      case 1: // Email validation
+        isValid = validateEmail(text);
+        if (!isValid) {
+          shake();
+          handleTextChange('');
+        }
+        break;
+
+      case 2: // Mobile number validation
+        isValid = validateMobileNumber(text);
+        if (!isValid) {
+          shake();
+          handleTextChange('');
+        } else if (onEndEditCallback) {
+          onEndEditCallback(text);
+        }
+        break;
+
+      case 3: // Generic callback
+        if (onEndEditCallback) {
+          onEndEditCallback(text);
+        }
+        break;
+
+      default:
+        break;
+    }
+  }, [validationtype, text, validateEmail, validateMobileNumber, onEndEditCallback, shake, handleTextChange]);
+
+  // Handle clear button
+  const handleClear = useCallback(() => {
+    handleTextChange('');
+    if (CloseCallBack) {
+      CloseCallBack(true);
+    }
+  }, [handleTextChange, CloseCallBack]);
+
+  // Handle icon press
+  const handleIconPress = useCallback(() => {
+    if (CIconCallBack) {
+      CIconCallBack(mergedData);
+    }
+  }, [CIconCallBack, mergedData]);
+
+  // Calculate styles
+  const containerStyle = inputstyle || {
+    flexDirection: 'row',
+    borderWidth: CBorderWidth ?? 1,
+    borderColor: 'lightgrey',
+    borderRadius: 10,
+    alignItems: 'center',
+    height: CCommonHeight ?? normalize(35),
+  };
+
+  const labelViewStyle = custompositiontextviewstyle || {
+    position: 'absolute',
+    top: normalize(-6),
+    left: normalize(10),
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    zIndex: 1,
+  };
+
+  const labelTextStyle = custompositiontextstyle || {
+    color: '#164c92',
+    fontSize: normalize(10),
+    textAlign: 'left',
+    fontWeight: 'normal',
+  };
+
+  const textInputStyle = {
+    borderWidth: 0,
+    flex: 1,
+    paddingRight: normalize(5),
+    fontSize: mergedData.tfontsize,
+    height: mergedData.textarea ? normalize(60) : normalize(35),
+    color: 'black',
+    fontWeight: mergedData.tfontweight || 'normal',
+    textAlign: mergedData.alignment,
+  };
+
+  return (
+    <Animated.View style={{
+      width: mergedData.itemwidth,
+      marginVertical: normalize(5),
+      transform: [{ translateX: shakeAnimation }],
+    }}>
+      {/* Floating Label */}
+      {isNUQ(mergedData.displaytext) && (
+        <View style={labelViewStyle}>
+          <Text style={labelTextStyle}>
+            {mergedData.displaytext}
+          </Text>
+          {required && (
+            <Text style={{ color: 'red', fontSize: normalize(10) }}>
+              {' *'}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {/* Input Container */}
+      <View style={containerStyle}>
+        {/* Icon */}
+        {iconstyle && (
+          <HOCIcons.Icons
+            icongroup={iconstyle.icongroup ?? 5}
+            name={iconstyle.iconname ?? 'file-alt'}
+            size={iconstyle.iconsize ?? normalize(15)}
+            color={iconstyle.iconcolor ?? 'darkblue'}
+            style={iconstyle.style ?? { paddingHorizontal: 5 }}
+            onPress={handleIconPress}
+          />
+        )}
+
+        {/* TextInput */}
+        <TextInput
+          style={textInputStyle}
+          value={text}
+          onChangeText={handleTextChange}
+          onFocus={() => {
+            setIsInputFocused(true);
+            setInfoVisible(true);
+          }}
+          onBlur={() => {
+            setIsInputFocused(false);
+            setInfoVisible(false);
+            handleEndEditing();
+          }}
+          autoCapitalize={mergedData.capitalize || 'none'}
+          keyboardType={mergedData.type}
+          maxLength={mergedData.maxlength || 200}
+          editable={!disabled}
+          multiline={!!mergedData.textarea}
+          numberOfLines={mergedData.textarea ? 5 : 1}
+          placeholder={mergedData.placeholder || ''}
+          placeholderTextColor={mergedData.placeholdercolor}
+          spellCheck={false}
+          autoCorrect={false}
+          {...textInputProps}
+        />
+
+        {/* Clear Button */}
+        {CloseIcon && (
+          <TouchableOpacity onPress={handleClear}>
+            <HOCIcons.MaterialCommunityIcons
+              name={'close-circle'}
+              color={Global.AppTheme.primary_color}
+              size={normalize(18)}
+              style={{ marginHorizontal: normalize(5) }}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Info Text */}
+      {(infoVisible && isNU(info)) && (
+        <View style={{
+          marginTop: normalize(3),
+          borderRadius: 5,
+          borderWidth: 0,
+          width: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}>
+          <HOCIcons.Entypo
+            icongroup={5}
+            name={'info-with-circle'}
+            size={normalize(10)}
+            color={'grey'}
+            style={{ textAlign: 'center', paddingHorizontal: normalize(3) }}
+          />
+          <Text
+            adjustsFontSizeToFit
+            style={{
+              width: '90%',
+              color: 'grey',
+              fontStyle: 'italic',
+              fontSize: normalize(9),
+              textAlign: 'left',
+            }}
+          >
+            {' '}{info}
+          </Text>
+        </View>
+      )}
+    </Animated.View>
+  );
+};
+
+export default memo(CCustomTextInput);

package/src/CustomComponents/CDetailView.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View, ImageBackground, ScrollView } from 'react-native';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+
+const CDetailView = (props) => {
+  const styles = StyleSheet.create({
+    CDetailView: {
+      flex: 1,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.8,
+      shadowRadius: 2,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      width: '100%',
+      backgroundColor: props.backgroundColor ? props.backgroundColor : 'white',
+    },
+    image: {
+      flex: 1,
+    },
+  });
+
+
+  return (
+    <View style={styles.CDetailView}>
+      <ImageBackground
+        source={props.bgimage != undefined ? { uri: props.bgimage } : { uri: `${APIURL}file/getCommonFile/image/IMA.png` }}
+        resizeMode={props.bgimage != undefined ? 'stretch' : 'contain'}
+        imageStyle={props.bgimage != undefined ? { opacity: 1 } : { opacity: 0.1 }}
+        style={styles.image}
+      >
+        {props.children}
+      </ImageBackground>
+    </View>
+  );
+};
+
+
+
+export default CDetailView;

package/src/CustomComponents/CDropDownList.js

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, FlatList } from 'react-native';
+import { notifyMessage, Loader, isBNUL, isNU } from '../CommonStyle/ComponentFunctions';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import HOCIcons from '../HOC/HOCIcons';
+import {
+    MenuOption,
+} from 'react-native-popup-menu';
+import { normalize } from '../CommonStyle/componentStyle';
+
+export default function CDropDownList(props) {
+
+    useEffect(() => {
+        FetchDropdownList();
+    }, []);
+
+    const [loading, setLoading] = useState(false);
+    const [displayData, setDisplayData] = useState([]);
+    const [refresh, setRefresh] = useState(0);
+    const [searchData, setSearchData] = useState('');
+
+    function FetchDropdownList() {
+        setDisplayData([]);
+        setLoading(true);
+        props.dropdownapi && props.dropdownapi != null && props.dropdownapi != undefined ?
+            (console.log('CDropDownList props.dropdownapi', props.dropdownapi),
+                NetworkServiceCall('get', props.dropdownapi, '').then(
+                    function (response) {
+                        // console.log('CDropDownList response', JSON.stringify(response))
+                        if (
+                            response.httpstatus &&
+                            response.httpstatus != null &&
+                            response.httpstatus != undefined &&
+                            response.httpstatus == 200
+                        ) {
+                            setDisplayData(response.data.data);
+                            setLoading(false);
+                        } else {
+                            notifyMessage('Data Not Found');
+                            setLoading(false);
+                        }
+                    },
+                ))
+            : props.dropdownarray && props.dropdownarray != null && props.dropdownarray != undefined ?
+                (setDisplayData(props.dropdownarray), // Changed props.dropdownarray.data.data to props.dropdownarray
+                    setLoading(false))
+                :
+                setLoading(false);
+    }
+
+    function renderItem(data) {
+
+        return (
+            <MenuOption
+                onSelect={() => {
+                    data.item.selected = true,
+                        setRefresh(refresh + 1),
+                        props.callback(data.item);
+                }}
+                disabled={false}
+                style={{
+                    paddingVertical: normalize(5),
+                    borderWidth: 0.5,
+                    borderColor: 'lightgrey',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }}
+            >
+                {data.item.hideicon ?
+                    null
+                    :
+                    <HOCIcons.Icons
+                        icongroup={isNU(data.item.icongroup) ? data.item.icongroup : 3}
+                        name={data.item.icon ? data.item.icon : data.item.selected ? 'radiobox-marked' : 'circle-double'}//radiobox-marked
+                        color={'black'}
+                        size={normalize(10)}
+                        style={{
+                            marginRight: normalize(4),
+                            borderWidth: 0,
+                            textAlign: 'center',
+                        }}
+                    />
+                }
+                {data.item.badgenumber != null && data.item.badgenumber != undefined ?
+                    <View style={{ borderWidth: 0, borderRadius: 100, height: normalize(14), width: normalize(14), position: 'absolute', backgroundColor: '#912c2c', right: 0, top: 0, justifyContent: 'center', alignItems: 'center' }}>
+                        <Text style={{ fontSize: normalize(10), textAlign: 'center', color: 'white' }}>{data.item.badgenumber}</Text>
+                    </View>
+                    : null}
+
+                <Text
+                    style={{
+                        borderWidth: 0,
+                        fontWeight: data.item.selected ? 'bold' : 'normal',
+                        fontSize: normalize(12),
+                        color: 'black',
+                    }}
+                >
+                    {data.item.displayvalue != null && data.item.displayvalue != undefined ? data.item.displayvalue.toUpperCase() : null}
+                </Text>
+            </MenuOption>
+        );
+    }
+
+    function GetDropdown(data) {
+        const newDropDownData = data != undefined
+            ? data.filter(function (item) {
+                const dataItem = item.displayvalue
+                    ? item.displayvalue.toUpperCase()
+                    : ''.toUpperCase();
+                const textData = searchData.toUpperCase();
+                return dataItem.indexOf(textData) > -1;
+            })
+            : null;
+
+        return (
+            <FlatList
+                keyboardShouldPersistTaps={'handled'}
+                data={newDropDownData}
+                renderItem={renderItem}
+                ListFooterComponent={() => {
+                    return (
+                        <>
+                            {isNU(props.info) ?
+                                <View style={{ marginTop: normalize(3), borderRadius: 5, borderWidth: 0, width: '100%', borderColor: 'lightgrey', flexDirection: 'row', alignItems: 'center', backgroundColor: 'white' }}>
+                                    <HOCIcons.Entypo
+                                        icongroup={5}
+                                        name={'info-with-circle'}
+                                        size={normalize(12)}
+                                        color={'grey'}
+                                        style={{ textAlign: 'center', padding: normalize(3), paddingLeft: normalize(8) }}
+                                    />
+                                    <Text adjustsFontSizeToFit style={{ width: '90%', color: 'grey', fontStyle: 'italic', fontSize: normalize(11), textAlign: 'left' }}>
+                                        {' '}{isNU(props.info) ? props.info : null}
+                                    </Text>
+                                </View>
+                                : null}
+                        </>
+                    );
+                }}
+                // estimatedItemSize={normalize(25)}
+            />
+        );
+    }
+
+    return (
+        <View style={{ borderWidth: 0.5, borderRadius: 5, borderColor: 'lightgrey', backgroundColor: 'white' }}>
+            {loading ? <Loader /> : null}
+            {isBNUL(displayData) ?
+                GetDropdown(displayData)
+                : null}
+        </View>
+    );
+}