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

package/src/Components/STextInputNew.js

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