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

package/src/Media/DrawingScreen.js

@@ -0,0 +1,582 @@
+import React, {useState, useEffect, memo, useContext} from 'react';
+import {
+  Image,
+  StyleSheet,
+  FlatList,
+  Dimensions,
+  Text,
+  View,
+  TouchableOpacity,
+  ImageBackground,
+  ActivityIndicator,
+  PermissionsAndroid,
+  Platform,
+} from 'react-native';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import CImageZoom from '../Media/CImageZoom';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import {APIURL, imageURL, drawingURL} from '../Common/apiConstants';
+// import DocumentPicker from 'react-native-document-picker';
+import ComponentStyles, {normalize} from '../CommonStyle/componentStyle';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import {notifyMessage} from '../CommonStyle/ComponentFunctions';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import {Global} from '../Common/Global';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+/*---------------------------------------------------------------------------------------*/
+function DrawingScreen(props) {
+  const {responseJSON, setResponseJSON} = useContext(
+    EmrResponseComponentContext,
+  );
+  const navigation = useNavigation();
+  const windowWidth = Dimensions.get('window').width;
+  const windowHeight = Dimensions.get('window').height;
+  const [data, setData] = useState(
+    props.data.saveddoc ? props.data.saveddoc : null,
+  );
+  console.log('props.data.saveddoc', JSON.stringify(data));
+  const [isImageShow, setImageShow] = useState(false);
+  const [mediaUrlLink, setMediaUrlLink] = useState(false);
+  const [refreshCount, setrefreshCount] = useState(1);
+  const [deleteImage, setDeleteImage] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [drawview, setDrawView] = useState(false);
+  const [process, setProcess] = useState('');
+  const [disablesave, setDisablesave] = useState(true);
+
+  useEffect(() => {
+    props.setData(data);
+  }, [data]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setrefreshCount(refreshCount + 1);
+    }, 2000);
+  }, []);
+
+  const SaveDrawing = async (success, pathk) => {
+    setDrawView(false);
+    console.log('Save drawing function called');
+
+    if (await isPermitted()) {
+      try {
+        var pathname = pathk;
+        var NewPathName = pathname.slice(-12);
+        console.log('newpathname', NewPathName);
+
+        const {relativePath, fileName, path} = await getResolvedPath(
+          pathk,
+          NewPathName,
+        );
+
+        console.log('path', path);
+        let fileid_autogenerate =
+          data != null && data.length > 0 ? data.length : 0;
+        let dataset = {
+          fileid: fileid_autogenerate + 1,
+          uri: 'file://' + path,
+          filename: NewPathName + Date(),
+          uritype: false,
+        };
+
+        setLoading(false);
+        Media_Upload(dataset);
+
+      } catch (error) {
+        notifyMessage(
+          DocumentPicker.isCancel(error)
+            ? 'Canceled'
+            : 'Unknown Error: ' + JSON.stringify(error),
+          2,
+        );
+      }
+    }
+  };
+
+  /*---------------------------------------------------------------------------------------*/
+  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;
+    }
+  };
+  /*---------------------------------------------------------------------------------------*/
+  function deleteSelectedImage() {
+    data
+      .filter(item => item.deletestatus === true)
+      .forEach(item => data.splice(data.indexOf(item), 1));
+    setDeleteImage(!deleteImage);
+    setrefreshCount(refreshCount + 1);
+  }
+  /*---------------------------------------------------------------------------------------*/
+  function ImageZoom(data) {
+    data.item.uritype
+      ? setMediaUrlLink(data.item.uri)
+      : setMediaUrlLink(data.item.uri);
+    setImageShow(true);
+  }
+  /*---------------------------------------------------------------------------------------*/
+  function changeStatus(data) {
+    data.item.deletestatus = !data.item.deletestatus;
+    setrefreshCount(refreshCount + 1);
+  }
+  /*---------------------------------------------------------------------------------------*/
+  function renderImage(renderdata) {
+    return (
+      <View>
+        {renderdata.item.filename ? (
+          <TouchableOpacity
+            style={{
+              height: windowHeight * 0.15,
+              width: windowWidth * 0.3,
+              margin: 5,
+              backgroundColor: '#e1e4e8',
+              borderRadius: 5,
+            }}
+            onPress={() =>
+              navigation.navigate('CImageGallery', {
+                savedimages: data,
+                index: renderdata.index,
+              })
+            }
+            onLongPress={() => setDeleteImage(true)}>
+            <Image
+              style={{
+                width: '100%',
+                height: '100%',
+                borderRadius: normalize(10),
+              }}
+              source={{
+                uri: imageURL + renderdata.item.filename,
+              }}
+            />
+          </TouchableOpacity>
+        ) : null}
+        {isImageShow ? (
+          <CImageZoom
+            image={mediaUrlLink}
+            navigation={navigation}
+            visibility={val => (val == undefined ? null : setImageShow(val))}
+            mediaupload={Media_Upload}
+          />
+        ) : null}
+        {deleteImage ? (
+          <TouchableOpacity onPress={() => changeStatus(renderdata)}>
+            <View style={{justifyContent: 'center', alignItems: 'center'}}>
+              <Fontisto
+                name={
+                  !renderdata.item.deletestatus
+                    ? 'checkbox-passive'
+                    : 'checkbox-active'
+                }
+                size={25}
+                color={!renderdata.item.deletestatus ? 'lightgrey' : 'blue'}
+              />
+            </View>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    );
+  }
+  /*---------------------------------------------------------------------------------------*/
+  const getResolvedPath = async (uri, filen) => {
+    console.log('getResolvedPath', 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};
+  };
+  /*---------------------------------------------------------------------------------------*/
+
+  const startDrawing = () => {
+    setDrawView(true);
+  };
+
+  const browseFromDevice = async () => {
+    if (await isPermitted()) {
+      try {
+        setLoading(true);
+        const fileDetails = await DocumentPicker.pick({
+          type: [DocumentPicker.types.images],
+        });
+
+        const {relativePath, fileName, path} = await getResolvedPath(
+          fileDetails[0].uri,
+          fileDetails[0].name,
+        );
+
+        let fileid_autogenerate =
+          data != null && data.length > 0 ? data.length : 0;
+        let dataset = {
+          fileid: fileid_autogenerate + 1,
+          uri: 'file://' + path,
+          filename: fileDetails[0].name + Date(),
+          uritype: false,
+        };
+
+        setLoading(false);
+        Media_Upload(dataset);
+
+      } catch (error) {
+        notifyMessage(
+          DocumentPicker.isCancel(error)
+            ? 'Canceled'
+            : 'Unknown Error: ' + JSON.stringify(error),
+          2,
+        );
+      }
+    }
+  };
+
+  async function Media_Upload(image) {
+    console.log('imageeeeeeeeeee upload', JSON.stringify(image));
+    let date = new Date().getDate();
+    let month = new Date().getMonth() + 1;
+    let year = new Date().getFullYear();
+    let hours = new Date().getHours();
+    let min = new Date().getMinutes();
+    let sec = new Date().getSeconds();
+    let millisec = new Date().getMilliseconds();
+    let uniquename = `${millisec}` + '.png';
+
+    let fileid_autogenerate = data != null && data.length > 0 ? data.length : 0;
+    let dataset2 = {
+      fileid: fileid_autogenerate + 1,
+      filename: uniquename,
+      filetype: image.filetype,
+      uri: image.uri,
+      uritype: false,
+    };
+
+    if (!dataset2.uritype) {
+      if (dataset2.uri) {
+        var formData = new FormData();
+        formData.append('file', {
+          uri: dataset2.uri,
+          type: 'image/png',
+          name: dataset2.filename,
+        });
+
+        console.log('formData>>>>>>>>>>>>>', JSON.stringify(formData));
+
+        // Replace NetworkServiceCall with your actual API call
+        // NetworkServiceCall(
+        //   'multiform',
+        //   APIURL + 'file/fileupload/emr/image',
+        //   formData,
+        // )
+        //   .then(function (responsedata) {
+        //     console.log('responsedata>>>>>>>>>>>>>>>', JSON.stringify(responsedata));
+        //     if (responsedata.httpstatus == 200) {
+        //       dataset2.filename = responsedata.data.fileuri;
+        //       setData(
+        //         data != null
+        //           ? prevData => [...prevData, dataset2.filename]
+        //           : [dataset2.filename],
+        //       );
+        //       responseJSON.consultationEdit.editStatus = true;
+        //       setrefreshCount(refreshCount + 1);
+        //       props.editStatus(1);
+        //       props.data.usertype =
+        //         Global.PatientDetails != undefined &&
+        //         Global.PatientDetails.usertype != undefined &&
+        //         Global.PatientDetails.usertype != null
+        //           ? Global.PatientDetails.usertype
+        //           : 'Z';
+        //       props.data.suuser =
+        //         Global.userData != undefined &&
+        //         Global.userData.suuser != undefined &&
+        //         Global.userData.suuser != null
+        //           ? Global.userData.suuser
+        //           : 0;
+        //       setLoading(false);
+        //     } else {
+        //       setLoading(false);
+        //     }
+        //   })
+        //   .catch(error => {
+        //     console.log('errorrrrrrrrrr', JSON.stringify(error));
+        //     setLoading(false);
+        //   });
+
+        // For now, just add to local state
+        setData(
+          data != null
+            ? [...data, dataset2]
+            : [dataset2],
+        );
+        setrefreshCount(refreshCount + 1);
+        setLoading(false);
+      }
+    }
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.itemContainer}>
+        {/* Delete Button */}
+        {deleteImage && (
+          <TouchableOpacity
+            style={styles.deleteButton}
+            onPress={deleteSelectedImage}>
+            <AntDesign name="delete" size={30} color={'red'} />
+            <Text style={styles.deleteText}>Delete Selected</Text>
+          </TouchableOpacity>
+        )}
+
+        {/* Images Grid */}
+        {!drawview && (
+          <FlatList
+            data={data}
+            contentContainerStyle={{alignItems: 'center', marginTop: 10}}
+            renderItem={renderImage}
+            keyExtractor={item => item.fileid}
+            numColumns={3}
+          />
+        )}
+
+        {/* Drawing Canvas */}
+        {drawview && (
+          <View style={styles.container}>
+            <View style={{flex: 1, flexDirection: 'row'}}>
+              <RNSketchCanvas
+                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>
+                }
+                onClosePressed={() => {
+                  setDrawView(false);
+                }}
+                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: ReactNativeBlobUtil.fs.dirs.CacheDir,
+                    filename: String(Math.ceil(Math.random() * 100000000)),
+                    transparent: false,
+                    imageType: 'png',
+                  };
+                }}
+                onSketchSaved={(success, pathk) => {
+                  SaveDrawing(success, pathk);
+                  console.log('success,path', success, pathk);
+                }}
+                onPathsChange={pathsCount => {
+                  console.log('pathsCount', pathsCount);
+                }}
+                permissionDialogTitle={'PERMISSION'}
+                permissionDialogMessage={'App needs access to Storage data'}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Loading Indicator */}
+        {loading && (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color="#0000ff" />
+          </View>
+        )}
+      </View>
+
+      {/* Bottom Action Bar */}
+      {!drawview && (
+        <View style={styles.bottomActionBar}>
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={startDrawing}>
+            <MaterialIcons name="edit" color={'white'} size={normalize(24)} />
+            <Text style={styles.actionButtonText}>Draw</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={browseFromDevice}>
+            <MaterialIcons name="insert-photo" color={'white'} size={normalize(24)} />
+            <Text style={styles.actionButtonText}>Browse</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={() => {
+              // Add camera functionality here
+              // CaptureImage();
+            }}>
+            <FontAwesome name="camera" color={'white'} size={normalize(24)} />
+            <Text style={styles.actionButtonText}>Camera</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[styles.actionButton, disablesave && styles.disabledButton]}
+            disabled={disablesave}
+            onPress={() => {
+              // Save functionality
+              // firebaseimagesave();
+            }}>
+            <FontAwesome name="save" color={'white'} size={normalize(24)} />
+            <Text style={styles.actionButtonText}>Save</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+}
+/*---------------------------------------------------------------------------------------*/
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  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,
+  },
+  deleteButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#ffebee',
+    marginHorizontal: 10,
+    borderRadius: 5,
+    marginTop: 10,
+  },
+  deleteText: {
+    marginLeft: 10,
+    color: 'red',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+  bottomActionBar: {
+    flexDirection: 'row',
+    backgroundColor: 'darkblue',
+    height: normalize(60),
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  actionButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 5,
+  },
+  actionButtonText: {
+    color: 'white',
+    fontSize: normalize(10),
+    marginTop: 3,
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+});
+/*---------------------------------------------------------------------------------------*/
+export default memo(DrawingScreen);