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

package/src/CustomComponents/CCustomTextInput.js

@@ -1,336 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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>
-    );
-}