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

package/src/CustomComponents/CImagePickerSave.js

@@ -0,0 +1,316 @@
+import React, { useState, memo } from 'react';
+import {
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ActivityIndicator,
+    StyleSheet,
+    Dimensions,
+} from 'react-native';
+import { isNUQZ, normalize, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import ComponentStyles from '../CommonStyle/componentStyle';
+// import DocumentPicker from 'react-native-document-picker';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import ReactNativeBlobUtil from 'react-native-blob-util';
+// import ImageCropPicker from 'react-native-image-crop-picker';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+
+
+function CImagePickerSave(props) {
+
+    const navigation = useNavigation();
+    const { width, height } = Dimensions.get('window');
+    const [data, setData] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isMsgShow, setIsMsgShow] = useState(false);
+    const [Msg, setMsg] = useState(false);
+    const [showImage, setShowImage] = useState(ValueCheck(props.imageurl) ? props.imageurl : '');
+
+    const getResolvedPath = async (uri, filen) => {
+
+        const fileBase64 = await ReactNativeBlobUtil.fs.readFile(uri, 'base64');
+        const relativePath = ReactNativeBlobUtil.fs.dirs.CacheDir;
+        const fileName = `${filen}`;
+        const path = `${relativePath}/${fileName}`;
+        await ReactNativeBlobUtil.fs.writeFile(path, fileBase64, 'base64');
+        return { relativePath, fileName, path };
+
+    };
+
+    async function browseFromDevice() {
+        try {
+            const res = await DocumentPicker.pick({
+                type: [DocumentPicker.types.images],
+            });
+            setShowImage(res.uri);
+            let dataset = {
+                uri: res[0].uri,
+                filetype: res[0].type,
+                filename: res[0].name,
+            };
+            console.log('browseFromDevice', JSON.stringify(dataset));
+            // Media_Upload(dataset);
+        } catch (err) {
+            if (DocumentPicker.isCancel(err)) {
+                // User cancelled the picker, exit any dialogs or menus and move on
+            } else {
+                throw err;
+            }
+        }
+    }
+
+    const selectImage = async () => {
+        try {
+            const res = await DocumentPicker.pick({
+                type: [DocumentPicker.types.images],
+            });
+
+            // Assuming the first item is the selected image
+            if (res && res.length > 0) {
+                console.log('res', res[0].uri);
+                cropImage(res[0].uri);
+            }
+        } catch (err) {
+            if (DocumentPicker.isCancel(err)) {
+                console.log('User cancelled the picker');
+            } else {
+                console.log('DocumentPicker Error: ', err);
+            }
+        }
+    };
+
+    const cropImage = (uri) => {
+        ImageCropPicker.openCropper({
+            path: uri,
+            width: 500,
+            height: 500,
+            compressImageQuality: 0.5,
+        })
+            .then(image => {
+                Media_UploadNew(image);
+                console.log('setCroppedImage ', image);
+            })
+            .catch(error => {
+                console.log('Crop error: ', error);
+            });
+    };
+
+    const Media_UploadNew = async item => {
+        var formData = new FormData();
+        formData.append('file', {
+            uri: item.path,
+            type: item.mime,
+            name: item.modificationDate,
+        });
+        let buttonapi = props.savelink;
+        console.log('BUTTONNNNNNN APIIIIIIIIIIIIII', JSON.stringify(buttonapi));
+        NetworkServiceCall('multiform', buttonapi, formData)
+            .then(function (response) {
+                console.log('Response C Single imaggeggeggegeggege', JSON.stringify(response));
+                if (response.httpstatus == 200) {
+                    if (response.data.filesize > 0) {
+                        // setData(response.data.fileuri);
+                        setShowImage(props.imagelink + response.data.fileuri);
+                        props.callBack(response.data.fileuri);
+                        setIsMsgShow(true, setMsg('Image uploaded Successfully.'));
+                        setTimeout(() => {
+                            setIsMsgShow(false);
+                        }, 2000);
+                    } else {
+                        setIsMsgShow(true, setMsg('Image upload failed.'));
+                        // setIsLoading(false);
+                        setTimeout(() => {
+                            setIsMsgShow(false);
+                        }, 2000);
+                    }
+                } else {
+                    setIsMsgShow(true, setMsg('..'));
+                    // setIsLoading(false);
+                    setTimeout(() => {
+                        setIsMsgShow(false);
+                    }, 2000);
+                }
+            });
+    };
+
+    const Media_Upload = async item => {
+        var formData = new FormData();
+        formData.append('file', {
+            uri: item.uri,
+            type: item.filetype,
+            name: item.filename,
+        });
+        let buttonapi = props.savelink;
+        console.log('BUTTONNNNNNN APIIIIIIIIIIIIII', JSON.stringify(buttonapi));
+        NetworkServiceCall('multiform', buttonapi, formData)
+            .then(function (response) {
+                console.log('Response C Single imaggeggeggegeggege', JSON.stringify(response));
+                if (response.httpstatus == 200) {
+                    if (response.data.filesize > 0) {
+                        setData(response.data.fileuri);
+                        props.callBack(response.data.fileuri);
+                        setIsMsgShow(true, setMsg('Success...'));
+                        setTimeout(() => {
+                            setIsMsgShow(false);
+                        }, 2000);
+                    } else {
+                        setIsMsgShow(true, setMsg('...'));
+                        // setIsLoading(false);
+                        setTimeout(() => {
+                            setIsMsgShow(false);
+                        }, 2000);
+                    }
+                } else {
+                    setIsMsgShow(true, setMsg('..'));
+                    // setIsLoading(false);
+                    setTimeout(() => {
+                        setIsMsgShow(false);
+                    }, 2000);
+                }
+            });
+    };
+
+    function ReturnFromCamera(params, d) {
+
+        console.log('ReturnFromCamera', params, d);
+        cropImage(params.uri);
+
+    }
+
+    return (
+        <View style={{ width: '100%' }}>
+            {!isLoading ? (
+                <View style={{ borderWidth: 0, justifyContent: 'center', alignItems: 'center' }}>
+                    <TouchableOpacity
+                        disabled={props.disabled ? props.disabled : false}
+                        onPress={() => {
+                            // navigation.navigate('CPhotoGallery', {
+                            //     savedimages: [{ "filename": showImage }], index: 0
+                            // })
+                            // navigation.navigate('CPhotoGallery', {
+                            //     // heading: 'REGISTRATION FORM EDITED HISTORY',
+                            //     // headingmal: 'രജിസ്‌ട്രേഷൻ ഫോം തിരുത്തിയത്',
+                            //     // headingicon: {
+                            //     //     "name": "file-document-edit",
+                            //     //     "color": "#164c92",
+                            //     //     "icongroup": 3
+                            //     // },
+                            //     index: 0,
+                            //     displayarray: [{ filename: '', filelink: isNUQZ(showImage) ? showImage : "https://png.pngtree.com/png-clipart/20200224/original/pngtree-avatar-icon-profile-icon-member-login-vector-isolated-png-image_5247852.jpg"}]
+                            // })
+                        }
+                            // navigation.navigate('CCaptureImage', {
+                            //     onSelect: Media_Upload,
+                            //     navigation: navigation,
+                            // })
+                        }
+                        style={{
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            // alignItems:'center',
+                            borderWidth: 0.5,
+                            borderRadius: 1000,
+                            elevation: 1,
+                            backgroundColor: 'white',
+                            borderColor: 'grey',
+                            // flex: 1,
+                            width: Dimensions.get('screen').width * 0.22,
+                            height: Dimensions.get('screen').width * 0.22,
+                            // paddingTop: normalize(6),
+                        }}
+
+                    >
+                        {/* <View style={{
+
+                            position: 'absolute',
+                            top: normalize(4), // Adjust position above the image
+                            left: normalize(4),
+                            backgroundColor: 'rgba(255, 255, 255, 0.83)', // Semi-transparent background
+                            padding: 2, // Add some padding for better readability
+                            borderRadius: 5, // Optional: rounded corners for the label
+                        }}>
+                            <Text style={{ color: '#164c92', fontSize: normalize(10), textAlign: 'left', fontWeight: 'normal' }}>{" "}{"Profile"}{" "}</Text>
+                        </View>  */}
+                        <Image
+                            style={{
+                                width: '100%',
+                                // width: normalize(100),
+                                // height: normalize(80),
+                                resizeMode: 'cover',
+                                borderRadius: 1000,
+                                borderWidth: 0,
+                                borderColor: 'black',
+                                opacity: 0.8,
+                            }}
+                            source={{
+                                uri: isNUQZ(showImage) ? showImage : 'https://png.pngtree.com/png-clipart/20200224/original/pngtree-avatar-icon-profile-icon-member-login-vector-isolated-png-image_5247852.jpg', //https://static.vecteezy.com/system/resources/previews/005/544/718/non_2x/profile-icon-design-free-vector.jpg
+                            }}
+                        />
+                    </TouchableOpacity>
+
+                    <View style={{
+                        borderWidth: 0,
+                        justifyContent: 'space-evenly',
+                        alignItems: 'center',
+                        flexDirection: 'row',
+                        width: '100%',
+                    }}>
+                        <TouchableOpacity
+                            disabled={props.disabled ? props.disabled : false}
+                            onPress={() =>
+                                // browseFromDevice()
+                                selectImage()
+                            }
+                            style={{ alignItems: 'center' }}
+                        >
+                            <FontAwesome
+                                name="folder-open"
+                                color="#164c92"
+                                size={25}
+                                style={{ padding: normalize(5) }}
+                            />
+                        </TouchableOpacity>
+
+                        {/* <TouchableOpacity
+                            disabled={props.disabled ? props.disabled : false}
+                            style={{ backgroundColor: 'transparent', alignItems: 'center' }}
+                            onPress={() =>
+                                navigation.navigate('CCameraScreen', {
+                                    onSelect: (s) => ReturnFromCamera(s, 'data'),
+                                    navigation: navigation,
+                                })
+                            }>
+                            <FontAwesome name="camera" color="#164c92" size={25} />
+                        </TouchableOpacity> */}
+
+                    </View>
+                </View>
+            ) : (
+                <View style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }}>
+                    <Text style={{ fontSize: 10 }}> Uploading...</Text>
+                    <ActivityIndicator
+                        size="large"
+                        color="darkblue"
+                        backgroundColor="transparent"
+                    />
+                </View>
+            )
+            }
+            {
+                isMsgShow ? (
+                    <View>
+                        <Text style={ComponentStyles.errorMsgText}>
+                            {Msg}
+                        </Text>
+                    </View>
+                ) : null
+            }
+        </View >
+    );
+}
+
+export default memo(CImagePickerSave);

package/src/CustomComponents/CModalOverlay.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  ScrollView,
+  SafeAreaView,
+  Dimensions,
+} from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const CModalOverlay = ({
+  visible,
+  onClose,
+  children,
+  closeOnTouchOutside = true,
+  containerStyle,
+  childrenWrapperStyle,
+  contentStyle,
+  footer,
+  footerStyle,
+}) => {
+  if (!visible) {return null;}
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      statusBarTranslucent
+    >
+      <SafeAreaView style={styles.safeArea}>
+        <View style={[styles.container, containerStyle]}>
+          {/* Background */}
+          <TouchableWithoutFeedback
+            disabled={!closeOnTouchOutside}
+            onPress={onClose}
+          >
+            <View style={styles.overlayBackground} />
+          </TouchableWithoutFeedback>
+          <View style={[styles.childrenWrapper, childrenWrapperStyle]}>
+            <ScrollView
+              bounces={false}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={[
+                styles.content,
+                contentStyle,
+              ]}
+            >
+              {children}
+            </ScrollView>
+            {footer && (
+              <View style={[footerStyle]}>
+                {footer}
+              </View>
+            )}
+          </View>
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlayBackground: {
+    ...StyleSheet.absoluteFillObject,
+  },
+
+  safeArea: {
+    flex: 1,
+  },
+
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  childrenWrapper: {
+    backgroundColor: '#fff',
+    borderRadius: 0,
+  },
+
+  content: {
+    flexGrow: 1,
+    maxHeight: SCREEN_HEIGHT,
+  },
+});
+
+export default CModalOverlay;