@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.2

package/src/StaticComponents/SSpeedDial.js

@@ -0,0 +1,303 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Modal,
+  FlatList,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+export default function SSpeedDial(props) {
+  const { buttons } = props;
+  const [open, setOpen] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0)).current;
+  const windowHeight = Dimensions.get('window').height;
+
+  const toggleMenu = () => {
+    if (open) {
+      // Close animation
+      Animated.parallel([
+        Animated.timing(rotateAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setOpen(false);
+        setModalVisible(false);
+      });
+    } else {
+      // Open animation
+      setOpen(true);
+      setModalVisible(true);
+      Animated.parallel([
+        Animated.timing(rotateAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+          delay: 100,
+        }),
+      ]).start();
+    }
+  };
+
+  const handleButtonPress = (functionid) => {
+    // Close menu first
+    Animated.parallel([
+      Animated.timing(rotateAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setOpen(false);
+      setModalVisible(false);
+      // Then call the callback
+      if (props.callBack) {
+        props.callBack(functionid);
+      }
+    });
+  };
+
+  const rotateInterpolate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '45deg'],
+  });
+
+  const scaleInterpolate = scaleAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  const renderActionButton = ({ item, index }) => {
+    const translateY = scaleAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -(index + 1) * 70], // Adjust spacing between buttons
+    });
+
+    return (
+      <Animated.View
+        style={[
+          styles.actionButtonContainer,
+          {
+            transform: [
+              { translateY },
+              { scale: scaleInterpolate },
+            ],
+          },
+        ]}
+      >
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            { backgroundColor: item.color || 'darkblue' },
+          ]}
+          onPress={() => handleButtonPress(item.functionid)}
+        >
+          <MaterialIcons name={item.iconname} size={24} color="#fff" />
+        </TouchableOpacity>
+        {item.title && (
+          <View style={styles.titleContainer}>
+            <Text style={styles.titleText}>{item.title}</Text>
+          </View>
+        )}
+      </Animated.View>
+    );
+  };
+
+  return (
+    <>
+      <Modal
+        transparent={true}
+        visible={modalVisible}
+        animationType="none"
+        onRequestClose={() => {
+          setModalVisible(false);
+          setOpen(false);
+        }}
+      >
+        <TouchableWithoutFeedback onPress={toggleMenu}>
+          <View style={styles.modalOverlay} />
+        </TouchableWithoutFeedback>
+
+        <View style={styles.modalContent}>
+          {buttons && buttons.map((item, index) => (
+            <View key={index} style={styles.actionRow}>
+              <View style={styles.titleLeftContainer}>
+                <Text style={styles.titleLeftText}>{item.title}</Text>
+              </View>
+              <TouchableOpacity
+                style={[
+                  styles.modalActionButton,
+                  { backgroundColor: item.color || 'darkblue' },
+                ]}
+                onPress={() => handleButtonPress(item.functionid)}
+              >
+                <MaterialIcons name={item.iconname} size={24} color="#fff" />
+              </TouchableOpacity>
+            </View>
+          ))}
+        </View>
+      </Modal>
+
+      {/* Main Floating Button */}
+      <TouchableOpacity
+        style={styles.mainButton}
+        onPress={toggleMenu}
+        activeOpacity={0.8}
+      >
+        <Animated.View style={{ transform: [{ rotate: rotateInterpolate }] }}>
+          <MaterialIcons name={open ? 'close' : 'edit'} size={28} color="#fff" />
+        </Animated.View>
+      </TouchableOpacity>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Modal Styles
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    position: 'absolute',
+    bottom: 80, // Position above the main button
+    right: 20,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    padding: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    minWidth: 200,
+  },
+  actionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginVertical: 8,
+    paddingHorizontal: 10,
+  },
+  titleLeftContainer: {
+    flex: 1,
+    marginRight: 15,
+  },
+  titleLeftText: {
+    fontSize: 16,
+    color: '#333',
+    textAlign: 'right',
+  },
+  modalActionButton: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+  },
+
+  // Main Button Styles
+  mainButton: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: 'darkblue',
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    zIndex: 1000,
+  },
+
+  // Alternative layout for action buttons (if you prefer vertical layout)
+  actionButtonContainer: {
+    position: 'absolute',
+    bottom: 80,
+    right: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  actionButton: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 3,
+  },
+  titleContainer: {
+    position: 'absolute',
+    right: 60,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 5,
+  },
+  titleText: {
+    color: 'white',
+    fontSize: 14,
+  },
+});
+
+// USAGE remains the same:
+// <SSpeedDial
+//   buttons={[
+//     {
+//       "functionid": 1,
+//       "color": "darkblue",
+//       "iconname": "add",
+//       "title": "Browse",
+//     },
+//     {
+//       "functionid": 2,
+//       "color": "darkblue",
+//       "iconname": "audiotrack",
+//       "title": "Record Audio",
+//     }
+//   ]}
+//   callBack={val => val == undefined ? null : getFunctions(val)}
+// />

package/src/StaticComponents/STextInput.js

@@ -0,0 +1,289 @@
+import React, { useState } from 'react';
+import { View, TextInput, Dimensions, TouchableOpacity, Text } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { Global } from '../Common/Global';
+import { normalize } from '../CommonStyle/componentStyle';
+import CText from '../CustomComponents/CText';
+
+const STextInput = (props) => {
+    const [text, setText] = useState('');
+    const [colorBg, setColorBg] = useState(false);
+    // const [data, setData] = useState(props.data != undefined ? props.data : {
+    //     itemwidth: "92%",
+    //     displaytext: "Name",
+    //     iconname: 'home',
+    //     value: 45,
+    //     type: 'number-pad',
+    //     editable: true,
+    //     placeholder: "Name",
+    //     decimal: 2
+    // })
+
+    const data = props.data != undefined ? props.data : {
+        itemwidth: '92%',
+        displaytext: 'Name',
+        iconname: 'home',
+        value: 45,
+        type: 'number-pad',
+        editable: true,
+        placeholder: 'Name',
+        decimal: 2,
+    };
+
+    return (
+        <View style={{
+            marginHorizontal: normalize(5),
+        }}>
+            {data.displaytext != undefined ?
+                <CText style={{ fontSize: normalize(12), color: 'black', paddingHorizontal: 5 }}>{data.displaytext != undefined ? data.displaytext : 'Default'}</CText> : null}
+
+            <View style={{ flexDirection: 'row',alignItems:'center' }}>
+                <View style={{ flexDirection: 'row', borderWidth: 1, borderRadius: 5, alignItems: 'center', backgroundColor: '#fff', elevation: 3, borderColor: colorBg ? '#8ec6ff' : 'lightgrey' }}>
+                    {props.hideicon ? null : <FontAwesome5 name={data.iconname != undefined ? data.iconname : 'file-alt'} size={normalize(15)} color={Global.AppTheme.primary_color} style={{ paddingHorizontal: 5, width: normalize(25) }} />}
+                    <TextInput
+                        style={{
+                            width: data.itemwidth != undefined ? data.itemwidth : Dimensions.get('screen').width * 0.25,
+                            padding: normalize(5),
+                            fontSize: normalize(14),
+                            height: data.disableheight ? null : data.height != undefined ? normalize(100) : normalize(30),
+                            paddingBottom: 3,
+                            color:'black',
+                        }}
+                        onChangeText={val => ChangeValue(val)}
+                        multiline={true}
+                        onFocus={() => setColorBg(true)}
+                        onEndEditing={(val) => props.onEndEditing != undefined ? props.onEndEditing(val) : () => getFocusOut()}
+                        onSubmitEditing={props.onSubmitEditing != undefined ? (val) => props.onSubmitEditing(val) : null}
+                        autoCapitalize={data.capitalize != undefined ? data.capitalize : 'none'}
+                        textAlign={data.alignment != undefined ? data.alignment : data.type == 'number-pad' ? 'right' : 'left'}
+                        keyboardType={data.type != undefined ? data.type : 'default'}
+                        maxLength={data.maxlength != undefined ? data.maxlength : 200}
+                        editable={data.editable != undefined ? data.editable : true}
+                        placeholder={data.placeholder != undefined ? data.placeholder : null}
+                        {...props}
+                    >{data.value != undefined ? data.value : ''}</TextInput>
+                </View>
+
+                {props.unit != undefined && props.unit != null && props.unit != '' ?
+                    <TouchableOpacity
+                        disabled={props.tprcallback ? false : true}
+                        onPress={() => {
+                            props.tprcallback ? props.tprcallback(true) : null;
+                        }}
+                        style={{
+                            borderStyle: props.tprcallback ? 'solid' : 'dotted',
+                            elevation: props.tprcallback ? 3 : 0,
+                            borderRadius: 5,
+                            alignItems: 'center',
+                            height: normalize(30),
+                            justifyContent: 'center',
+                            borderWidth: 1,
+                            marginLeft: 1,
+                            width: normalize(30),
+                            backgroundColor: '#f7f7f7',
+                            borderColor: Global.AppTheme.primary_color,
+                        }}>
+                        <Text numberOfLines={1} adjustsFontSizeToFit style={{
+                            fontWeight: 'bold', color: data.errorStatus != undefined
+                                && data.errorStatus ? 'red' : Global.AppTheme.primary_color, fontSize: normalize(12),
+                        }}>{props.unit}</Text>
+                        {/* <Text style={{
+                            fontSize: normalize(8),
+                            color: 'black'
+                        }}>
+                            {"Setup"}
+                        </Text> */}
+                    </TouchableOpacity> : null}
+            </View>
+        </View>
+    );
+
+    function getFocusOut() {
+        setColorBg(false);
+    }
+
+    function ChangeValue(changevalue) {
+
+        if (props.normalTextInput) {
+            setText(changevalue);
+            (props.callBack != undefined ? (props.callBack(changevalue)) : console.log('non changed'));
+        }
+        else {
+
+            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)) : console.log('non changed'));
+        }
+    }
+
+    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 STextInput;
+
+
+

package/src/StaticComponents/STextInputProps.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { TextInput, StyleSheet } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+
+const STextInputProps = (props) => {
+    const [colorBg, setColorBg] = useState(false);
+    function getFocusOut() {
+        setColorBg(false);
+    }
+    return (
+        <TextInput
+            style={[props.style, { borderColor: colorBg ? '#90ff00' : 'rgba(68, 60, 150,0.5)' }]}
+            keyboardType={props.keyboardType}
+            onChangeText={props.onChangeText}
+            placeholder={props.placeholder}
+            editable={props.editable}
+            onBlur={() => getFocusOut()}
+            onEndEditing={props.onEndEditing != undefined ? props.onEndEditing : null}
+            onFocus={() => setColorBg(true)}
+        >{props.value}</TextInput>
+    );
+
+    function getFocusOut(params) {
+        setColorBg(false);
+    }
+};
+
+const styles = StyleSheet.create({
+    input: {
+        height: normalize(40),
+        margin: 12,
+        borderWidth: 1,
+    },
+});
+
+export default STextInputProps;