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

package/src/Media/RecordVideo.js

@@ -0,0 +1,223 @@
+import React, { useState, useRef } from 'react';
+import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+// import { RNCamera } from 'react-native-camera';
+import RNFetchBlob from 'rn-fetch-blob';
+
+const RecordVideo = ({ navigation, route }) => {
+  const [path, setPath] = useState('');
+  const [recorded, setRecorded] = useState(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [startRecording, setStartRecording] = useState(false);
+
+  const cameraRef = useRef(null);
+
+  const takeVideo = () => {
+    setStartRecording(true);
+    saveVideo();
+  };
+
+  const saveVideo = async () => {
+    if (cameraRef.current) {
+      const options = {
+        quality: RNCamera.Constants.VideoQuality['4:3'],
+        forceUpOrientation: true,
+      };
+      const data = await cameraRef.current.recordAsync(options);
+      setPath(data.uri);
+      setRecorded(false);
+      setIsRecording(false);
+      stopRecord();
+      console.log('video data', data);
+    }
+  };
+
+  const stopRecord = async () => {
+    setIsRecording(false);
+    setStartRecording(false);
+    cameraRef.current.stopRecording();
+    const str = path;
+    const res = path.length > 0 ? await fetch(str) : null;
+    const blob = res != null ? await res.blob() : null;
+
+    let fileName = str.substr(str.lastIndexOf('/') + 1);
+    let videoPath = str.replace('file:///', '');
+    if (path.length > 0) {
+      navigation.goBack();
+      route.params.onSelect({
+        uri: str,
+        filename: 'video',
+        filetype: blob.type,
+      });
+    }
+  };
+
+  return (
+    <View style={layoutstyles.container}>
+      <RNCamera
+        ref={cameraRef}
+        style={layoutstyles.preview}
+        type={RNCamera.Constants.Type.back}
+        flashMode={RNCamera.Constants.FlashMode.on}
+      />
+      <View style={layoutstyles.child_container}>
+        {!startRecording ? (
+          <TouchableOpacity onPress={takeVideo} style={layoutstyles.capture} />
+        ) : (
+          <TouchableOpacity onPress={stopRecord} style={[layoutstyles.capture, layoutstyles.stop_recording]} />
+        )}
+      </View>
+    </View>
+  );
+};
+
+const layoutstyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: 'black',
+  },
+  child_container: {
+    flex: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    margin: 20,
+  },
+  preview: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  stop_recording: {
+    backgroundColor: 'red',
+  },
+  capture: {
+    flex: 0,
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    padding: 15,
+    paddingHorizontal: 20,
+    alignSelf: 'center',
+    margin: 20,
+    height: 40,
+  },
+});
+
+export default RecordVideo;
+
+
+
+
+
+
+
+
+
+
+
+
+// import React, { Component } from 'react';
+// import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+// import { RNCamera } from 'react-native-camera';
+// import RNFetchBlob from "rn-fetch-blob";
+
+// export default class RecordVideo extends Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             path: "",
+//             recorded: null,
+//             isRecording: null,
+//             startRecording: false
+//         }
+//     }
+//     takeVideo() {
+//         this.setState({ startRecording: true })
+//         this.saveVideo()
+//     }
+//     async saveVideo() {
+
+//         if (this.camera) {
+//             const options = {
+//                 quality: RNCamera.Constants.VideoQuality["4:3"],
+//                 forceUpOrientation: true,
+//             }
+//             const data = await this.camera.recordAsync(options)
+//             this.setState({ path: data.uri })
+//             this.setState({ recorded: false })
+//             this.setState({ isRecording: false })
+//             this.stopRecord()
+//             console.log("video data",data);
+//         }
+//     }
+//     async stopRecord() {
+//         this.setState({ isRecording: false, startRecording: false })
+//         this.camera.stopRecording();
+//         const str = this.state.path;
+//         const res = this.state.path.length > 0 ? await fetch(str) : null;
+//         const blob = res != null ? await res.blob() : null;
+
+//         let fileName = str.substr(str.lastIndexOf('/') + 1);
+//         let videoPath = str.replace('file:///', '');
+//         this.state.path.length > 0 && this.props.navigation.goBack();
+//         this.state.path.length > 0 && this.props.route.params.onSelect({
+//             uri: str,
+//             filename: 'video',
+//             filetype: blob.type,
+//         });
+//     }
+//     render() {
+//         return (
+//             <View style={layoutstyles.container}>
+//                 <RNCamera
+//                     ref={ref => {
+//                         this.camera = ref;
+//                     }}
+//                     style={layoutstyles.preview}
+//                     type={RNCamera.Constants.Type.back}
+//                     flashMode={RNCamera.Constants.FlashMode.on}
+//                 />
+//                 <View style={layoutstyles.child_container}>
+//                     {!this.state.startRecording ?
+//                         <TouchableOpacity onPress={this.takeVideo.bind(this)}
+//                             style={layoutstyles.capture}>
+//                         </TouchableOpacity>
+//                         :
+//                         <TouchableOpacity onPress={this.stopRecord.bind(this)}
+//                             style={[layoutstyles.capture, layoutstyles.stop_recording]}>
+
+//                         </TouchableOpacity>
+//                     }
+//                 </View>
+//             </View>
+//         );
+//     }
+// }
+// const layoutstyles = StyleSheet.create({
+//     container: {
+//         flex: 1,
+//         flexDirection: 'column',
+//         backgroundColor: 'black',
+//     },
+//     child_container: {
+//         flex: 0, flexDirection: 'row',
+//         justifyContent: 'center', margin: 20,
+//     },
+//     preview: {
+//         flex: 1,
+//         justifyContent: 'flex-end',
+//         alignItems: 'center',
+//     },
+//     stop_recording: {
+//         backgroundColor: 'red'
+//     },
+//     capture: {
+//         flex: 0,
+//         backgroundColor: '#fff',
+//         borderRadius: 5,
+//         padding: 15,
+//         paddingHorizontal: 20,
+//         alignSelf: 'center',
+//         margin: 20,
+//         height:40
+//     },
+// });

package/src/Media/VideoScreen.js

@@ -0,0 +1,383 @@
+import React, {useState, useEffect, useContext} from 'react';
+import {
+  SafeAreaView,
+  Image,
+  StyleSheet,
+  Dimensions,
+  Button,
+  FlatList,
+  Text,
+  View,
+  TouchableOpacity,
+  ActivityIndicator,
+  PermissionsAndroid,
+  Platform,
+} from 'react-native';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+// import DocumentPicker from 'react-native-document-picker';
+import {videoURL, APIURL} from '../Common/apiConstants';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import {isNU, notifyMessage} from '../CommonStyle/ComponentFunctions';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import {Global} from '../Common/Global';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export default function VideoScreen(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?.savedvideo ? props.data.savedvideo : '',
+  );
+  console.log('savedvideooooooooooo', data);
+  const [refreshCount, setrefreshCount] = useState(1);
+  const [isVideoShow, setVideoShow] = useState(false);
+  const [deleteVideo, setDeleteVideo] = useState(false);
+  const [filePath, setFilePath] = useState({});
+  const [process, setProcess] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [disablesave, setDisablesave] = useState(true);
+
+  useEffect(() => {
+    props.setData(data);
+  }, [data]);
+
+  function deleteSelectedVideo() {
+    data
+      .filter(item => item.deletestatus === true)
+      .forEach(item => data.splice(data.indexOf(item), 1));
+    setDeleteVideo(!deleteVideo);
+    setrefreshCount(refreshCount + 1);
+  }
+
+  function changeStatus(data) {
+    data.item.deletestatus = !data.item.deletestatus;
+    setrefreshCount(refreshCount + 1);
+  }
+
+  function renderVideo(data) {
+    return (
+      <View>
+        <View>
+          <TouchableOpacity
+            onLongPress={() => setDeleteVideo(true)}
+            onPress={() =>
+              navigation.navigate('CVideoPlay', {
+                video: videoURL + data.item.filename,
+              })
+            }>
+            <Image
+              style={{
+                height: windowHeight * 0.15,
+                width: windowWidth * 0.3,
+                margin: 5,
+                resizeMode: 'cover',
+                borderRadius: 10,
+              }}
+              source={{
+                uri: 'https://media.istockphoto.com/vectors/video-player-screen-with-bar-multimedia-interface-with-player-bar-for-vector-id1252447446?k=6&m=1252447446&s=612x612&w=0&h=he5mazXCrZRAfeJuHvFdu0P5NxfUeV2msDTXUnzJ7AQ=',
+              }}
+            />
+          </TouchableOpacity>
+        </View>
+        {deleteVideo ? (
+          <TouchableOpacity onPress={() => changeStatus(data)}>
+            <View style={{justifyContent: 'center', alignItems: 'center'}}>
+              {!data.item.deletestatus ? (
+                <Fontisto name="checkbox-passive" size={25} color={'black'} />
+              ) : (
+                <Fontisto name="checkbox-active" size={25} color={'blue'} />
+              )}
+            </View>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    );
+  }
+
+  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};
+  };
+
+  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 err', err);
+        return false;
+      }
+    } else {
+      return true;
+    }
+  };
+
+  async function browseFromDevice() {
+    if (await isPermitted()) {
+      try {
+        const res = await DocumentPicker.pick({
+          type: [DocumentPicker.types.video],
+        });
+
+        const {relativePath, fileName, path} = await getResolvedPath(
+          res[0].uri,
+          res[0].name,
+        );
+        console.log('path', path);
+
+        let fileid_autogenerate =
+          data != null && data.length > 0 ? data.length : 0;
+
+        let dataset2 = {
+          fileid: fileid_autogenerate + 1,
+          filename: res[0].name + Date(),
+          filetype: res[0].type,
+          uri: 'file://' + path,
+          uritype: false,
+        };
+
+        Media_Upload(dataset2);
+        setrefreshCount(refreshCount + 1);
+
+      } catch (err) {
+        if (DocumentPicker.isCancel(err)) {
+          // User cancelled the picker
+        } else {
+          notifyMessage('Error selecting video', 2);
+        }
+      }
+    }
+  }
+
+  async function Media_Upload(image) {
+    setLoading(true);
+    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 =
+      `${date}` +
+      `${month}` +
+      `${year}` +
+      `${hours}` +
+      `${min}` +
+      `${sec}` +
+      `${millisec}` +
+      '.mp4';
+
+    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: dataset2.filetype,
+          name: dataset2.filename,
+        });
+
+        // Add your NetworkServiceCall here
+        // NetworkServiceCall(
+        //   'multiform',
+        //   APIURL + 'file/fileupload/emr/video',
+        //   formData,
+        // )
+        //   .then(function (responsedata) {
+        //     console.log('NetworkServiceCall', 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 => {
+        //     setLoading(false);
+        //   });
+
+        // For now, just add to local state
+        setData(
+          data != null
+            ? [...data, dataset2]
+            : [dataset2],
+        );
+        responseJSON.consultationEdit.editStatus = true;
+        setrefreshCount(refreshCount + 1);
+        props.editStatus(1);
+        setLoading(false);
+      }
+    }
+  }
+
+  function RecordVideo() {
+    navigation.navigate('CCaptureImageWithoutEdit', {
+      cameramoduletype: 1, // video
+      hidebuttons: false,
+      cameratype: 'back',
+      onSelect: s => (s && isNU(s) ? Media_Upload(s) : null),
+    });
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.itemContainer}>
+        {/* Delete Button */}
+        {deleteVideo && (
+          <TouchableOpacity
+            style={styles.deleteButton}
+            onPress={deleteSelectedVideo}>
+            <AntDesign name="delete" size={30} color={'red'} />
+            <Text style={styles.deleteText}>Delete Selected</Text>
+          </TouchableOpacity>
+        )}
+
+        {/* Videos Grid */}
+        <FlatList
+          data={data}
+          renderItem={renderVideo}
+          keyExtractor={item => item.id}
+          numColumns={3}
+          contentContainerStyle={{alignItems: 'center', paddingTop: 10}}
+        />
+
+        {/* Loading Indicator */}
+        {loading && (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color="#0000ff" />
+          </View>
+        )}
+      </View>
+
+      {/* Bottom Action Bar */}
+      <View style={styles.bottomActionBar}>
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={browseFromDevice}>
+          <MaterialIcons name="video-library" color={'white'} size={24} />
+          <Text style={styles.actionButtonText}>Browse Video</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={RecordVideo}>
+          <Ionicons name="videocam" color={'white'} size={24} />
+          <Text style={styles.actionButtonText}>Record Video</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.actionButton, disablesave && styles.disabledButton]}
+          disabled={disablesave}
+          onPress={() => {
+            // Save functionality here
+            // firebasevideosave();
+          }}>
+          <FontAwesome name="save" color={'white'} size={24} />
+          <Text style={styles.actionButtonText}>Save</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  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: 60,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  actionButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 5,
+  },
+  actionButtonText: {
+    color: 'white',
+    fontSize: 12,
+    marginTop: 3,
+    textAlign: 'center',
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+});

package/src/StaticComponents/SAlphabet.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList, Dimensions, TouchableOpacity } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+
+export default function SAlphabet(props) {
+    const [alphaindex, setAlphaIndex] = useState(0);
+    return (
+        <View style={{
+            // height: Dimensions.get('window').height * 0.6,
+            marginBottom: Dimensions.get('window').height * 0.01,
+        }}>
+            <FlatList
+                data={['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', '.']}
+                renderItem={renderAlphabet}
+                style={{ paddingBottom: 20 }}
+                contentContainerStyle={{ alignItems: 'center' }}
+                keyExtractor={(item, index) => 'key' + index}
+                initialNumToRender={50}
+                maxToRenderPerBatch={100}
+            />
+        </View>
+    );
+
+    function renderAlphabet({ index, item }) {
+
+        return (
+            <TouchableOpacity style={{
+                width: normalize(25), alignItems: 'center', paddingVertical: 2, borderRadius: normalize(40) / 2,
+                backgroundColor: index == alphaindex ? '#8162fc' : 'white',
+            }}
+                onPress={() => getAlphabetData(item, index)}>
+                <Text style={{
+                    color: index == alphaindex ? 'white' : 'black',
+                    fontWeight: index == alphaindex ? 'bold' : 'normal',
+                }}>{item}</Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getAlphabetData(alpha, index) {
+        setAlphaIndex(index);
+        props.callBack != undefined ? props.callBack({
+            'alpha': alpha,
+            'index': index,
+        }) : null;
+    }
+}

package/src/StaticComponents/SCheckBox.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import { normalize } from '../CommonStyle/componentStyle';
+import CText from '../CustomComponents/CText';
+
+const SCheckBox = (props) => {
+  // Normalize value to boolean for rendering
+  const checked = Number(props.data?.value) === 1;
+
+  const handlePress = () => {
+    if (props.callBack) {
+      // Toggle and send back numeric value (0 or 1)
+      const newValue = checked ? 0 : 1;
+      props.callBack(newValue);
+    }
+  };
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      {props.data?.displaytext && (
+        <CText style={{ color: 'black', fontSize: normalize(14) }}>
+          {props.data.displaytext}
+        </CText>
+      )}
+
+      <TouchableOpacity
+        onPress={handlePress}
+        disabled={props.disabled ?? false}
+        style={{ paddingHorizontal: 5 }}
+      >
+        <AntDesign
+          name={checked ? 'checksquare' : 'checksquareo'}
+          size={normalize(props.data?.size ?? 20)}
+          color={checked ? 'darkblue' : 'grey'}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SCheckBox;