@jescon-technologies/react-native-ui-kit 0.0.5 → 0.0.7

package/src/Media/DrawingScreen.js

@@ -1,578 +0,0 @@
-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 '../../../../../src/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 {Global} from '../../../../../src/Common/Global';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-
-/*---------------------------------------------------------------------------------------*/
-function DrawingScreen(props) {
-  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);