@jescon-technologies/react-native-ui-kit 0.0.6 → 0.0.8

package/src/Components/STextInputNew.js

@@ -1,510 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {
-  View,
-  TextInput,
-  Dimensions,
-  TouchableOpacity,
-  Text,
-} from 'react-native';
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-import {height, normalize} from '../CommonStyle/componentStyle';
-import CText from '../CustomComponents/CText';
-import {MaterialCommunityIcons} from '../Common/Icons';
-// import { Text } from 'react-native-animatable';
-import SHelpDescription from './SHelpDescription';
-import {Global} from '../../../../../src/Common/Global';
-import {Menu, MenuOptions, MenuTrigger} from 'react-native-popup-menu';
-import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
-
-const STextInputNew = props => {
-  const [text, setText] = useState('');
-  const [colorBg, setColorBg] = useState(false);
-  const dynamicMenuRef = useRef(null);
-  const inputRef = useRef(null);
-  // const [menuVisible, setMenuVisible] = useState(false);
-  // const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-  const data =
-    props.data != undefined
-      ? props.data
-      : {
-          itemwidth: '100%',
-          displaytext: 'Name',
-          iconname: 'home',
-          value: 45,
-          type: 'number-pad',
-          editable: true,
-          placeholder: 'Name',
-          decimal: 2,
-        };
-
-  const validateEmail = email => {
-    console.log('EMAIL validation------------------');
-    // Regular expression for basic email validation
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    console.log('EMAIL validation------------------', emailRegex.test(email));
-    return emailRegex.test(email);
-  };
-
-  const validateMobileNumber = number => {
-    // Regular expression for a 10-digit mobile number
-    const mobileRegex = /^\d{10}$/;
-    return mobileRegex.test(number);
-  };
-
-  // useEffect(() => {
-  //     setData(props.data != undefined ? props.data : {
-  //         itemwidth: "100%",
-  //         displaytext: "Name",
-  //         iconname: 'home',
-  //         value: 45,
-  //         type: 'number-pad',
-  //         editable: true,
-  //         placeholder: "Name",
-  //         decimal: 2
-  //     })
-  // }, [props])
-
-  const handleIconPress = () => {
-    if (inputRef.current) {
-      inputRef.current.measure((fx, fy, width, height, px, py) => {
-        setMenuPosition({top: py + height, left: px});
-        setMenuVisible(!menuVisible); // Toggle menu visibility
-      });
-    }
-  };
-
-  //     let widthValue;
-
-  // if (data.itemwidth !== undefined) {
-  //     // Check if it's a percentage
-  //     if (typeof data.itemwidth === 'string' && data.itemwidth.endsWith('%')) {
-  //         const numericValue = parseFloat(data.itemwidth); // Extract numeric part
-  //         widthValue = `${numericValue + 4}%`; // Append your value
-  //     } else {
-  //         // Otherwise treat it as a number (pixels)
-  //         widthValue = `${parseFloat(data.itemwidth) + 4}px`; // or use 'px' if you want pixels
-  //     }
-  // } else {
-  //     widthValue = '100%';
-  // }
-
-  return (
-    <View
-      style={{
-        borderWidth: 0,
-        width: data.itemwidth != undefined ? data.itemwidth : '100%',
-      }}>
-      {/* <View style={{}}> */}
-      {data.displaytext != undefined ? (
-        <CText
-          style={{
-            fontSize: normalize(11),
-            color: 'black',
-            paddingHorizontal: normalize(5),
-            borderWidth: 0,
-            height: normalize(15),
-          }}>
-          {data.required == true ? (
-            <Text
-              style={{
-                color: 'red',
-                fontSize: normalize(13),
-                fontWeight: 'bold',
-              }}>
-              *{' '}
-            </Text>
-          ) : null}
-          {data.displaytext != undefined ? data.displaytext : 'Default'}
-        </CText>
-      ) : null}
-
-      {/* <View style={{ flexDirection: 'row' }}> */}
-      <View
-        style={{
-          flexDirection: 'row',
-          borderWidth: 1,
-          borderRadius: data.borderRadius != undefined ? data.borderRadius : 5,
-          alignItems: 'center',
-          backgroundColor: data.backgroundColor ? data.backgroundColor : '#fff',
-          elevation: 0,
-          borderColor: colorBg ? 'darkblue' : 'lightgrey',
-        }}>
-        {data.iconname != undefined || data.iconName != undefined ? (
-          <Menu ref={dynamicMenuRef}>
-            <MenuTrigger
-              disabled={false}
-              customStyles={{
-                triggerWrapper: {
-                  borderWidth: 0,
-                  borderRadius: 10,
-                  elevation: 0,
-                },
-              }}>
-              <TouchableOpacity
-                disabled={true}
-                style={{width: normalize(22), paddingLeft: normalize(3)}}>
-                {data.iconname != undefined ? (
-                  <FontAwesome5
-                    name={data.iconname}
-                    size={normalize(
-                      data.iconsize != undefined ? data.iconsize : 15,
-                    )}
-                    color={data.iconcolor ? data.iconcolor : 'darkblue'}
-                    style={{
-                      paddingHorizontal: 5,
-                      width: normalize(26),
-                      justifyContent: 'flex-end',
-                    }}
-                  />
-                ) : data.iconName ? (
-                  <MaterialCommunityIcons
-                    name={data.iconName}
-                    size={normalize(18)}
-                    color={data.iconcolor ? data.iconcolor : 'darkblue'}
-                    style={{
-                      paddingHorizontal: 5,
-                      width: normalize(26),
-                      justifyContent: 'flex-end',
-                    }}
-                  />
-                ) : null}
-              </TouchableOpacity>
-            </MenuTrigger>
-            <MenuOptions
-              optionsContainerStyle={{
-                marginTop: normalize(28),
-                marginLeft: 0,
-                borderWidth: 0,
-                width:
-                  data.itemwidth != undefined
-                    ? parseFloat(data.itemwidth) - normalize(5) + '%'
-                    : '100%',
-              }}>
-              {props.columnid != undefined ? (
-                <SHelpDescription
-                  column={props.columnid != undefined ? props.columnid : 0}
-                  width={
-                    data.itemwidth != undefined
-                      ? parseFloat(data.itemwidth) - normalize(5) + '%'
-                      : '100%'
-                  }
-                />
-              ) : null}
-            </MenuOptions>
-          </Menu>
-        ) : null}
-        <TextInput
-          style={{
-            padding: normalize(5),
-            color: data.color != undefined ? data.color : 'black',
-            fontWeight: data.fontWeight != undefined ? data.fontWeight : 'bold',
-            borderWidth: 0,
-            fontSize:
-              data.fontSize != undefined ? data.fontSize : normalize(11),
-            height: data.height != undefined ? data.height : normalize(36),
-            width: '70%', // widthe changed from 90% to 70 %
-          }}
-          onChangeText={val => ChangeValue(val, props.validationkey)}
-          multiline={true}
-          onFocus={() => (setColorBg(true), (Global.HelpId = data.columnid))}
-          onEndEditing={
-            props.onEndEditing != undefined
-              ? props.onEndEditing
-              : () => getFocusOut()
-          }
-          autoCapitalize={
-            data.capitalize != undefined ? data.capitalize : 'characters'
-          }
-          textAlign={data.textAlign != undefined ? data.textAlign : 'left'}
-          keyboardType={data.type != undefined ? data.type : 'default'}
-          maxLength={data.maxlength != undefined ? data.maxlength : 500}
-          editable={data.editable != undefined ? data.editable : true}
-          placeholder={data.placeholder != undefined ? data.placeholder : null}
-          placeholderTextColor={
-            data.placeholderTextColor != undefined
-              ? data.placeholderTextColor
-              : 'gray'
-          }
-          {...props}>
-          {data.value != undefined ? data.value : ''}
-        </TextInput>
-        {/* {console.log("data.unit", JSON.stringify(data.editable))} */}
-      </View>
-
-      {/* {props.unit != undefined && props.unit != null && props.unit != "" ?
-                        <View style={{
-                            borderStyle: 'dotted', borderRadius:data.borderRadius?data.borderRadius: 5, alignItems: 'center', height: normalize(28), justifyContent: 'center',
-                            borderWidth: 1, marginLeft: 1, width: normalize(35), backgroundColor: '#f7f7f7', borderColor: 'darkblue'
-                        }}>
-                            <CText style={{
-                                fontWeight: 'bold', color: data.errorStatus != undefined
-                                    && data.errorStatus ? 'red' : 'darkblue', fontSize: normalize(12),
-                            }}>{props.unit}</CText>
-
-                        </View> : null} */}
-      {/* </View> */}
-
-      {/* </View> */}
-    </View>
-    // <View style={{ borderWidth: 0, width: data.itemwidth ? (parseFloat(data.itemwidth) + 4) + '%' : '100%' }}>
-    //     {data.displaytext && (
-    //         <Text style={{ fontSize: 11, color: 'black', paddingHorizontal: 5, height: 15 }}>
-    //             {data.required && <Text style={{ color: 'red', fontSize: 13, fontWeight: 'bold' }}>* </Text>}
-    //             {data.displaytext || "Default"}
-    //         </Text>
-    //     )}
-
-    //     <View style={{
-    //         flexDirection: 'row',
-    //         borderWidth: 1,
-    //         borderRadius: data.borderRadius || 5,
-    //         alignItems: 'center',
-    //         backgroundColor: data.backgroundColor || '#fff',
-    //         borderColor: 'lightgrey',
-    //     }}>
-    //         {data.iconname || data.iconName ? (
-    //             <TouchableOpacity onPress={handleIconPress} style={{ paddingLeft: 3 }}>
-    //                 {data.iconname ? (
-    //                     <FontAwesome5 name={data.iconname} size={15} color={data.iconcolor || "darkblue"} />
-    //                 ) : data.iconName ? (
-    //                     <MaterialCommunityIcons name={data.iconName} size={18} color={data.iconcolor || "darkblue"} />
-    //                 ) : null}
-    //             </TouchableOpacity>
-    //         ) : null}
-
-    //         <TextInput
-    //             ref={inputRef}
-    //             style={{
-    //                 padding: 5,
-    //                 color: data.color || 'black',
-    //                 fontWeight: data.fontWeight || 'bold',
-    //                 borderWidth: 0,
-    //                 fontSize: data.fontSize || 12,
-    //                 height: data.height || 36,
-    //                 flex: 1 // Allow the TextInput to grow and take available space
-    //             }}
-    //             onChangeText={val => ChangeValue(val, props.validationkey)}
-    //             multiline={true}
-    //             onFocus={() => setColorBg(true)}
-    //             onEndEditing={props.onEndEditing || getFocusOut}
-    //             autoCapitalize={data.capitalize || 'characters'}
-    //             textAlign={data.textAlign || 'left'}
-    //             keyboardType={data.type || 'default'}
-    //             maxLength={data.maxlength || 500}
-    //             editable={data.editable !== undefined ? data.editable : true}
-    //             placeholder={data.placeholder || null}
-    //             {...props}
-    //         >
-    //             {data.value || ""}
-    //         </TextInput>
-
-    //         {menuVisible && (
-    //             <Menu
-    //                 style={{
-    //                     position: 'absolute',
-    //                     top: menuPosition.top,
-    //                     left: menuPosition.left,
-    //                     borderWidth: 1,
-    //                     width: data.itemwidth ? (parseFloat(data.itemwidth) + 4) + '%': '100%',
-    //                 }}
-    //             >
-    //                 <MenuOptions>
-    //                     {props.columnid !== undefined && <SHelpDescription column={props.columnid} />}
-    //                 </MenuOptions>
-    //             </Menu>
-    //         )}
-    //     </View>
-    // </View>
-  );
-
-  function getFocusOut() {
-    setColorBg(false);
-  }
-
-  function ChangeValue(changevalue, validationkey) {
-    let datatype = data.datatype != undefined ? data.datatype : 'integer';
-    let _error = changevalue == '' ? false : validate(changevalue, datatype);
-    data.errorStatus = _error == false ? false : true;
-    setText(changevalue);
-    // props.callBack != undefined ? props.callBack(changevalue) : null
-
-    switch (validationkey) {
-      case 1:
-        validateEmail(text);
-        props.callBack != undefined
-          ? props.callBack(changevalue, validateEmail(text))
-          : null;
-        break;
-
-      default:
-        props.callBack != undefined ? props.callBack(changevalue) : null;
-        break;
-    }
-  }
-
-  function validate(text, datatype) {
-    let status = true;
-    switch (datatype) {
-      case 'integer':
-        let integerRegex = /^[0-9]*$/;
-        if (integerRegex.exec(text)) {
-          if (data.minvalue == null && data.maxvalue == null) {
-            status = false;
-          } else if (data.minvalue == null) {
-            if (data.maxvalue == '') {
-              status = false;
-            } else {
-              if (text <= data.maxvalue) {
-                status = false;
-              } else {
-                status = true;
-              }
-            }
-          } else if (data.maxvalue == null) {
-            if (data.minvalue == '') {
-              status = false;
-            } else {
-              if (text >= data.minvalue) {
-                status = false;
-              } else {
-                status = true;
-              }
-            }
-          } else if (data.minvalue == '' && data.maxvalue == '') {
-            status = false;
-          } else if (data.minvalue == '') {
-            if (text <= data.maxvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          } else if (data.maxvalue == '') {
-            if (text >= data.minvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          } else {
-            if (text >= data.minvalue && text <= data.maxvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          }
-        } else {
-          status = true;
-        }
-        break;
-      case 'password':
-        let passwordRegex = /[0-9a-zA-Z]/;
-        if (passwordRegex.exec(text)) {status = false;}
-        else {status = true;}
-        break;
-      case 'string':
-        let stringRegex = /^[a-zA-Z0-9.!#$%&@\s]*$/;
-        if (stringRegex.exec(text)) {
-          let minvalue = data.minvalue;
-          let maxvalue = data.maxvalue;
-          let length = text == null ? 0 : text.length;
-          if (minvalue == null && maxvalue == null) {
-            status = false;
-          } else if (minvalue == null) {
-            if (maxvalue == '') {
-              status = false;
-            } else {
-              if (length <= maxvalue) {
-                status = false;
-              } else {
-                status = true;
-              }
-            }
-          } else if (maxvalue == null) {
-            if (minvalue == '') {
-              status = false;
-            } else {
-              if (length >= minvalue) {
-                status = false;
-              } else {
-                status = true;
-              }
-            }
-          } else if (minvalue == '' && maxvalue == '') {
-            status = false;
-          } else if (minvalue == '') {
-            if (length <= maxvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          } else if (maxvalue == '') {
-            if (length >= minvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          } else {
-            if (length >= minvalue && length <= maxvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          }
-        } else {
-          status = true;
-        }
-        break;
-      case 'numeric':
-        let numericRegex = /^[0-9.]*$/;
-        if (numericRegex.exec(text)) {
-          if (data.minvalue == null && data.maxvalue == null) {
-            status = false;
-          } else if (data.minvalue == null) {
-            if (data.maxvalue == '') {
-              status = false;
-            } else {
-              if (text <= data.maxvalue) {
-                status = false;
-              } else {
-                status = true;
-              }
-            }
-          } else if (data.maxvalue == null) {
-            if (data.minvalue == '') {
-              status = false;
-            } else {
-              if (text >= data.minvalue) {
-                status = false;
-              } else {
-                status = true;
-              }
-            }
-          } else if (data.minvalue == '' && data.maxvalue == '') {
-            status = false;
-          } else if (data.minvalue == '') {
-            if (text <= data.maxvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          } else if (data.maxvalue == '') {
-            if (text >= data.minvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          } else {
-            if (text >= data.minvalue && text <= data.maxvalue) {
-              status = false;
-            } else {
-              status = true;
-            }
-          }
-        } else {
-          status = true;
-        }
-        break;
-    }
-    return status;
-  }
-};
-export default STextInputNew;