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

package/src/Media/CImageZoom.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+// import { useDimensions } from '@react-native-community/hooks'
+import { View, Image, TouchableOpacity, StyleSheet, Dimensions} from 'react-native';
+// import ImageZoom from 'react-native-image-pan-zoom';
+import ComponentStyles from '../CommonStyle/componentStyle';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+export default function CustomImageZoom(props) {
+    const [isloading, setIsLoading] = useState(true);
+    const { width, height } = Dimensions.get('window');
+
+    return (
+        <CModalOverlay
+            visible={isloading}
+            onClose={() => props.visibility(false)}
+            transparent={true}
+            containerStyle={getOverlayContainerStyle()}
+            animationDuration={500}
+            closeOnTouchOutside={true}
+        >
+            <View style={getCloseButtonContainer()}>
+                <TouchableOpacity onPress={() => props.visibility(false)}
+                style={{ width: '100%', alignItems: 'flex-end' }}>
+                    <AntDesign name="close" size={30} />
+                </TouchableOpacity>
+            </View>
+            <View style={layoutstyles.zoom_image_container}>
+                {/* <ImageZoom
+                    cropWidth={width * 0.90}
+                    cropHeight={height * 0.85}
+                    imageWidth={width}
+                    imageHeight={height}
+                > */}
+                    <Image
+                        style={getZoomImageStyle()}
+                        source={{ uri: props.image }}
+                    />
+                {/* </ImageZoom> */}
+            </View>
+        </CModalOverlay>
+    );
+
+
+    function getZoomImageStyle() {
+        return (
+            {
+                width: width, height: height * 0.90, resizeMode: 'contain',
+            }
+        );
+    }
+    function getOverlayContainerStyle() {
+        return (
+            {
+                ...ComponentStyles.View_col_center,
+                backgroundColor: '#fff',
+                height: height, width: width,
+            }
+        );
+    }
+    function getCloseButtonContainer() {
+        return (
+            {
+                width: width * 0.90,
+                ...ComponentStyles.View_col_flexend,
+            }
+        );
+    }
+}
+const layoutstyles = StyleSheet.create({
+    close_button_style: {
+        height: '10%', width: 30, alignItems: 'flex-end', backgroundColor: 'black',
+    },
+    zoom_image_container: {
+        justifyContent: 'center',
+        alignItems: 'center', height: '95%',
+    },
+});
+
+{/**
+url is passed from parent component
+*/}

package/src/Media/CSingleImage.js

@@ -0,0 +1,391 @@
+import React, { useState, memo } from 'react';
+import {
+    Text,
+    View,
+    Image,
+    TouchableOpacity,
+    ActivityIndicator,
+    StyleSheet,
+    Dimensions,
+    PermissionsAndroid,
+    Platform,
+} from 'react-native';
+import { colors } from '../CommonStyle/commonStyle';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import DocumentPicker from 'react-native-document-picker';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import { APIURL, EMRAPI, imageURL } from '../Common/apiConstants';
+import { isNU, LoaderIndicator, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+//import PhotoEditor from 'react-native-photo-editor';
+import { Global } from '../Common/Global';
+
+function CSingleImage(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(props.imageurl != undefined && props.imageurl != null && props.imageurl != '' ? props.imageurl
+        : 'https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg');
+    console.log('showImage', showImage);
+    const [pathPE, setPathPE] = useState();
+
+    const isPermitted = async () => {
+        if (Platform.OS === 'android') {
+            try {
+                const granted = await PermissionsAndroid.request(
+                    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+                );
+                return granted === PermissionsAndroid.RESULTS.GRANTED;
+            } catch (err) {
+                alert('Write permission error', err);
+                return false;
+            }
+        } else {
+            return true;
+        }
+    };
+
+    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}`;
+
+        // Create temporary file
+        await ReactNativeBlobUtil.fs.writeFile(path, fileBase64, 'base64');
+        return { relativePath, fileName, path };
+    };
+
+    const browseFromDevice = async () => {
+        if (await isPermitted()) {
+            try {
+                const fileDetails = await DocumentPicker.pick({
+                    type: [DocumentPicker.types.images],
+                });
+                const { relativePath, fileName, path } = await getResolvedPath(
+                    fileDetails[0].uri,
+                    fileDetails[0].name,
+                );
+                let fileid_autogenerate = 123;
+                let dataset = {
+                    fileid: fileid_autogenerate,
+                    uri: 'file://' + path,
+                    filename: fileDetails[0].name + Date(),
+                    uritype: false,
+                };
+                if (Platform.OS == 'ios') {
+                    props.route.params.onSelect({
+                        uri: dataset.uri,
+                        filename: 'image',
+                        filetype: 'image/jpeg',
+                    });
+                    props.navigation.goBack();
+                }
+                else {
+                    // PhotoEditor.Edit({
+                    //     path: path,
+                    //     hiddenControls: ['sticker', 'save'],
+                    //     onDone: () => {
+                    //         setPathPE(path)
+                    //         Media_Upload(dataset);
+                    //     },
+                    // });
+                }
+            } catch (error) {
+                console.log('EROOROOOROROROOROROROROOROROROOROOR', error);
+                notifyMessage(
+                    DocumentPicker.isCancel(error)
+                        ? 'Canceled'
+                        : 'Unknown Error: ' + JSON.stringify(error), 2
+                );
+            }
+        }
+    };
+
+    function getcontainerStyle() {
+        return {
+            ...layoutstyles.container_style,
+            width: props.width != undefined ? props.width : '38%',
+        };
+    }
+
+    // Add to folder
+    const Media_Upload = async item => {
+
+        setIsLoading(true);
+        let uniquename = '.jpg';
+        var formData = new FormData();
+        formData.append('file', {
+            uri: item.uri,
+            type: 'image/jpeg',
+            name: uniquename,
+        });
+        let buttonapi = props.doctorprofile ? EMRAPI.saveDoctorProfile : APIURL + 'file/fileupload/emr/image';
+        console.log('buttonapi', buttonapi);
+        NetworkServiceCall('multiform', buttonapi, formData)
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    if (response.data.filesize > 0) {
+                        setData(response.data.fileuri);
+                        if (props.doctorprofile) {
+                            setShowImage(props.profilelink + response.data.fileuri);
+                        }
+                        else {
+                            setShowImage(imageURL + response.data.fileuri);
+                        }
+                        props.callBack(response.data.fileuri);
+                        setIsMsgShow(true, setMsg('Success...'));
+                        setIsLoading(false);
+                        setTimeout(() => {
+                            setIsMsgShow(false);
+                        }, 2000);
+                    } else {
+                        setIsLoading(false);
+                        setIsMsgShow(true, setMsg('...'));
+                        setTimeout(() => {
+                            setIsMsgShow(false);
+                        }, 2000);
+                    }
+                } else {
+                    setIsLoading(false);
+                    setIsMsgShow(true, setMsg('..'));
+                    setTimeout(() => {
+                        setIsMsgShow(false);
+                    }, 2000);
+                }
+            });
+    };
+
+    function CaptureImageWithoutEdit() {
+        // navigation.navigate('CCaptureImageWithoutEdit', {
+        //     onSelect: Media_Upload
+        // });
+
+        navigation.navigate('CCaptureImageWithoutEdit', {
+            'hidebuttons': false,
+            'cameratype': 'back',
+            onSelect: (s) => s && isNU(s) ? Media_Upload(s) : null,
+        });
+    }
+
+    async function getPhotoEditor() {
+        console.log('SHOW IMAGE URL:', showImage);
+
+        if (!showImage) {
+            notifyMessage('Image URL is not available.');
+            return;
+        }
+
+        try {
+            // Use NetworkServiceCall to fetch the image
+            const response = await NetworkServiceCall('get', showImage, null, null, 60000);
+
+            if (response.httpstatus === 200 && response.data) {
+                const imgData = response.data; // Must be base64 or ArrayBuffer
+
+                // Save the image locally
+                const fileName = `photo_${Math.floor(Math.random() * 10000)}.jpg`;
+                const imgPath = `${ReactNativeBlobUtil.fs.dirs.CacheDir}/${fileName}`;
+                await ReactNativeBlobUtil.fs.writeFile(imgPath, imgData, 'base64');
+
+                console.log('The file saved to', imgPath);
+                setPathPE(imgPath);
+
+                const dataset = {
+                    fileid: Math.floor(Math.random() * 10),
+                    uri: 'file://' + imgPath,
+                    filename: '.jpg',
+                    uritype: false,
+                };
+
+                // Uncomment to use PhotoEditor
+                // PhotoEditor.Edit({
+                //     path: imgPath,
+                //     hiddenControls: ['sticker', 'save'],
+                //     onDone: () => {
+                //         setPathPE(imgPath);
+                //         Media_Upload(dataset);
+                //     },
+                // });
+            } else {
+                console.log('Failed to fetch image:', response);
+                notifyMessage('Failed to fetch image');
+            }
+        } catch (error) {
+            console.log('Error fetching image:', error);
+            notifyMessage('Image download failed');
+        }
+    }
+
+
+    function getTableStyle() {
+        return {
+            width: props.width != undefined ? props.width : '38%',
+            flexDirection: 'row',
+        };
+    }
+
+    return (
+        <View style={props.table != undefined ? getTableStyle() : getcontainerStyle()}>
+            <View style={props.table != undefined ? { flexDirection: 'row', width: normalize(65) } : {}}>
+                <TouchableOpacity
+                    onPress={() => getPhotoEditor()}
+                    disabled={Platform.OS == 'ios' && isLoading ? true : false}
+                    style={props.table != undefined ? { borderRadius: 10 } : layoutstyles.image_container_style}>
+                    {props.table != undefined ?
+                        <Image style={{ width: normalize(40), height: normalize(40), borderRadius: 10 }}
+                            source={{
+                                uri: showImage,
+                                headers: {
+                                    Authorization: `Bearer ${Global.JWTToken}`,
+                                },
+                            }}
+                        />
+                        :
+                        <Image style={
+                            props.customimagestyle ?
+                                props.customimagestyle :
+                                {
+                                    width: '100%',
+                                    height: normalize(110),
+                                    borderRadius: 20,
+                                    resizeMode: 'cover',
+                                }}
+                            source={{
+                                uri: showImage,
+                                headers: {
+                                    Authorization: `Bearer ${Global.JWTToken}`,
+                                },
+                            }}
+                        />}
+                    {isLoading ?
+                        <View style={{ position: 'absolute', justifyContent: 'center', alignItems: 'center' }}>
+                            <LoaderIndicator
+                            />
+                        </View>
+                        : null}
+                </TouchableOpacity>
+
+                <View style={layoutstyles.options_row}>
+                    <TouchableOpacity onPress={() => browseFromDevice()}
+                        style={{ backgroundColor: 'transparent', width: '50%', alignItems: 'center' }}
+                    >
+                        <FontAwesome name="folder-open" color={Global.AppTheme.primary_color} size={25} />
+                    </TouchableOpacity>
+
+                    {props.hidephoto != undefined && props.hidephoto ? null :
+                        <TouchableOpacity
+                            style={{ backgroundColor: 'transparent', width: '50%', alignItems: 'center', marginLeft: 5 }}
+                            onPress={() => CaptureImageWithoutEdit()}>
+                            <FontAwesome name="camera" color={Global.AppTheme.primary_color} size={25} />
+                        </TouchableOpacity>}
+
+                </View>
+            </View>
+        </View >
+    );
+}
+const layoutstyles = StyleSheet.create({
+    container_style: {
+        ...ComponentStyles.View_col_center,
+        padding: normalize(5),
+        paddingBottom: 0,
+        // height: normalize(165),
+        alignItems: 'flex-start',
+    },
+    image_container_style: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderColor: colors.color_componentBordercolor,
+        borderWidth: 1,
+        borderRadius: 15,
+        borderColor: 'lightgrey',
+        // height:Dimensions.get('screen').height*0.1
+    },
+    image_style: {
+        width: '100%',
+        height: normalize(110),
+        // resizeMode:'stretch',
+        borderRadius: 20,
+    },
+    options_row: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        padding: normalize(5),
+        paddingBottom: 0,
+    },
+    option_text: {
+        fontSize: normalize(12),
+        // color: '#000059',
+        color: 'white',
+    },
+});
+export default memo(CSingleImage);
+
+// Add to folder
+// const Media_Upload = async item => {
+//     setShowImage(item.uri)
+//     var formData = new FormData();
+//     formData.append('file', {
+//         uri: item.uri,
+//         type: item.filetype,
+//         name: item.filename,
+//     });
+//     NetworkServiceCall('multiform', APIURL + 'file/fileupload/patientphoto', formData)
+//         .then(function (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);
+//             }
+//         });
+// };
+
+// To browse
+// 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,
+//         };
+//         Media_Upload(dataset);
+//     } catch (err) {
+//         if (DocumentPicker.isCancel(err)) {
+//             // User cancelled the picker, exit any dialogs or menus and move on
+//         } else {
+//             throw err;
+//         }
+//     }
+// }

package/src/Media/CSketchCanvas.js

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import SketchCanvas from '@terrylinla/react-native-sketch-canvas';
+
+
+export default function CSketchCanvas(props) {
+    return (
+        <View style={styles.container}>
+            {/* <View style={{ flex: 1, flexDirection: 'row' }}>
+                <SketchCanvas
+                    localSourceImagePath={"https://camo.githubusercontent.com/52de4f8da02befa1677e05033d6393eab9aaf6d0a3e834e193ba54a244a180e3/68747470733a2f2f692e696d6775722e636f6d2f3471706958386d2e706e67"}
+                    containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
+                    canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
+                    defaultStrokeIndex={0}
+                    defaultStrokeWidth={5}
+                    closeComponent={<View style={styles.functionButton}><Text style={{ color: 'white' }}>Close</Text></View>}
+                    undoComponent={<View style={styles.functionButton}><Text style={{ color: 'white' }}>Undo</Text></View>}
+                    clearComponent={<View style={styles.functionButton}><Text style={{ color: 'white' }}>Clear</Text></View>}
+                    eraseComponent={<View style={styles.functionButton}><Text style={{ color: 'white' }}>Eraser</Text></View>}
+                    strokeComponent={color => (
+                        <View style={[{ backgroundColor: color }, styles.strokeColorButton]} />
+                    )}
+                    strokeSelectedComponent={(color, index, changed) => {
+                        return (
+                            <View style={[{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton]} />
+                        )
+                    }}
+                    strokeWidthComponent={(w) => {
+                        return (<View style={styles.strokeWidthButton}>
+                            <View style={{
+                                backgroundColor: 'white', marginHorizontal: 2.5,
+                                width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2
+                            }} />
+                        </View>
+                        )
+                    }}
+                    saveComponent={<View style={styles.functionButton}><Text style={{ color: 'white' }}>Save</Text></View>}
+                    savePreference={() => {
+                        return {
+                            folder: 'RNSketchCanvas',
+                            filename: String(Math.ceil(Math.random() * 100000000)),
+                            transparent: false,
+                            imageType: 'png'
+                        }
+                    }}
+                />
+            </View> */}
+
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+                <SketchCanvas
+                    localSourceImagePath={'file:///...'}
+                    style={{ flex: 1 }}
+                    strokeColor={'red'}
+                    strokeWidth={7}
+                />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF',
+    },
+    strokeColorButton: {
+        marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
+    },
+    strokeWidthButton: {
+        marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
+        justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A',
+    },
+    functionButton: {
+        marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60,
+        backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5,
+    },
+});

package/src/Media/CVideoPlay.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { View, StatusBar } from 'react-native';
+import VideoPlayer from 'react-native-video-controls';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import { Global } from '../Common/Global';
+
+export default function CVideoPlay(props) {
+    // console.log("videoplayer", JSON.stringify(props))
+    const navigation = useNavigation();
+
+    const [video, setVideo] = useState(props.route.params.video);
+    console.log('video',video);
+    return (
+        <View style={{ flex: 1 }}>
+            <StatusBar
+                translucent
+                backgroundColor={'transparent'}
+                barStyle="dark-content"
+            />
+            <VideoPlayer
+                source={{
+                    uri: video,
+                    headers: { Authorization: `Bearer ${Global.JWTToken}` },
+                }}
+                onBack={() => navigation.goBack()}
+            />
+        </View>
+    );
+}