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

package/src/Media/ImageScreen.js

@@ -0,0 +1,313 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  FlatList,
+  Dimensions,
+  Text,
+  View,
+  TouchableOpacity,
+  ActivityIndicator,
+  PermissionsAndroid,
+  RefreshControl,
+  Platform,
+  Image,
+} 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, imageURLHIS } from '../Common/apiConstants';
+import DocumentPicker from 'react-native-document-picker';
+import { normalize } from '../CommonStyle/componentStyle';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import PhotoEditor from 'react-native-photo-editor';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import { Global } from '../Common/Global';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import SSpeedDial from '../StaticComponents/SSpeedDial';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+
+/*---------------------------------------------------------------------------------------*/
+function ImageScreen(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?.savedimages || []);
+  const [isImageShow, setImageShow] = useState(false);
+  const [mediaUrlLink, setMediaUrlLink] = useState(false);
+  const [refreshCount, setrefreshCount] = useState(1);
+  const [pulltorefresh, setPullToRefresh] = useState(false);
+  const [deleteImage, setDeleteImage] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    props.setData(data);
+  }, [data]);
+
+  /*---------------------------------------------------------------------------------------*/
+  function deleteSelectedImage() {
+    const updated = data.filter(item => !item.deletestatus);
+    setData(updated);
+    props.editStatus(1);
+    setDeleteImage(false);
+    setrefreshCount(refreshCount + 1);
+  }
+
+  function changeStatus(renderdata) {
+    renderdata.item.deletestatus = !renderdata.item.deletestatus;
+    setrefreshCount(refreshCount + 1);
+  }
+
+  function renderImage(renderdata) {
+    const image = imageURLHIS + renderdata.item;
+
+    return (
+      <View>
+        <TouchableOpacity
+          style={styles.imageBox(windowHeight, windowWidth)}
+          onPress={() =>
+            navigation.navigate('CImageGallery', {
+              savedimages: data,
+              index: renderdata.index,
+            })
+          }
+          onLongPress={() => setDeleteImage(true)}
+        >
+          <Image
+            style={styles.fastImage}
+            source={{
+              uri:
+                renderdata.item && renderdata.item !== null
+                  ? image
+                  : 'https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg',
+              headers: { Authorization: `Bearer ${Global.JWTToken}` },
+              priority: FastImage.priority.high,
+              cache: FastImage.cacheControl.web,
+            }}
+          />
+        </TouchableOpacity>
+
+        {isImageShow && (
+          <CImageZoom
+            image={mediaUrlLink}
+            navigation={navigation}
+            visibility={val => (val ? setImageShow(val) : null)}
+            mediaupload={Media_Upload}
+          />
+        )}
+
+        {deleteImage && (
+          <TouchableOpacity onPress={() => changeStatus(renderdata)}>
+            <View style={styles.checkboxContainer}>
+              <Fontisto
+                name={!renderdata.item.deletestatus ? 'checkbox-passive' : 'checkbox-active'}
+                size={25}
+                color={!renderdata.item.deletestatus ? 'lightgrey' : 'blue'}
+              />
+            </View>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+
+  /*---------------------------------------------------------------------------------------*/
+  const getResolvedPath = async (uri, filen) => {
+    const fileBase64 = await ReactNativeBlobUtil.fs.readFile(uri, 'base64');
+    const relativePath = ReactNativeBlobUtil.fs.dirs.CacheDir;
+    const path = `${relativePath}/${filen}`;
+    await ReactNativeBlobUtil.fs.writeFile(path, fileBase64, 'base64');
+    return { relativePath, fileName: filen, path };
+  };
+
+  /*---------------------------------------------------------------------------------------*/
+  const firebasebrowse = async () => {
+    try {
+      const fileDetails = await DocumentPicker.pick({
+        type: [DocumentPicker.types.images],
+      });
+
+      const picked = fileDetails[0];
+      const extension = picked.name.split('.').pop().toLowerCase();
+      const mimeType =
+        picked.type ||
+        (extension === 'png' ? 'image/png' : 'image/jpeg');
+
+      const { path } = await getResolvedPath(picked.uri, picked.name);
+
+      const dataset = {
+        fileid: data.length + 1,
+        uri: 'file://' + path,
+        filename: picked.name,
+        filetype: mimeType,
+        uritype: false,
+      };
+
+      PhotoEditor.Edit({
+        path: path,
+        hiddenControls: ['sticker', 'save'],
+        onDone: () => Media_Upload(dataset),
+      });
+    } catch (error) {
+      notifyMessage(
+        DocumentPicker.isCancel(error) ? 'Canceled' : 'Unknown Error: ' + JSON.stringify(error),
+        2
+      );
+    }
+  };
+
+  /*---------------------------------------------------------------------------------------*/
+  async function Media_Upload(image) {
+    setLoading(true);
+
+    const dataset2 = {
+      fileid: data.length + 1,
+      filename: image.filename,
+      filetype: image.filetype,
+      uri: image.uri,
+      uritype: false,
+    };
+
+    if (!dataset2.uritype && dataset2.uri) {
+      const formData = new FormData();
+      formData.append('file', {
+        uri: dataset2.uri,
+        type: dataset2.filetype,
+        name: dataset2.filename,
+      });
+
+      try {
+        const responsedata = await NetworkServiceCall(
+          'multiform',
+          APIURL + 'invfile/fileupload/emr/image',
+          formData
+        );
+
+        if (responsedata.httpstatus === 200) {
+          dataset2.filename = responsedata.data.fileuri;
+
+          setData(prev => [...prev, dataset2.filename]);
+          responseJSON.consultationEdit.editStatus = true;
+
+          props.editStatus(1);
+          props.data.usertype =
+            Global.PatientDetails?.usertype ?? 'Z';
+          props.data.suuser = Global.userData?.suuser ?? 0;
+        }
+      } catch (error) {
+        console.log('Upload error:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }
+
+  /*---------------------------------------------------------------------------------------*/
+  function CaptureImageWithoutEdit() {
+    navigation.navigate('CCaptureImageWithoutEdit', { onSelect: Media_Upload });
+  }
+
+  /*---------------------------------------------------------------------------------------*/
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={styles.itemContainer}>
+        {deleteImage && (
+          <TouchableOpacity
+            style={{ alignItems: 'center', padding: 10 }}
+            onPress={deleteSelectedImage}
+          >
+            <AntDesign name="delete" size={30} color={'red'} />
+          </TouchableOpacity>
+        )}
+
+        <FlatList
+          data={data}
+          contentContainerStyle={{ alignItems: 'center', marginTop: 10 }}
+          renderItem={renderImage}
+          keyExtractor={(item, index) => index.toString()}
+          numColumns={3}
+          removeClippedSubviews={true}
+          initialNumToRender={50}
+          maxToRenderPerBatch={10}
+          refreshControl={
+            <RefreshControl
+              refreshing={pulltorefresh}
+              size={'large'}
+              tintColor={'blue'}
+              colors={['red', 'green', 'cyan', 'black']}
+              progressBackgroundColor={'white'}
+              onRefresh={() => setrefreshCount(refreshCount + 1)}
+            />
+          }
+        />
+
+        <View style={{ alignSelf: 'center' }}>
+          <Text style={{ fontSize: normalize(16) }}>
+            {data?.length > 0 ? `${data.length} IMAGE(S)` : null}
+          </Text>
+        </View>
+
+        {loading && (
+          <View style={styles.loadingBox}>
+            <ActivityIndicator size="large" color="#0000ff" />
+          </View>
+        )}
+
+        <SSpeedDial
+          buttons={[
+            { functionid: 1, color: 'darkblue', iconname: 'add', title: 'Browse' },
+            { functionid: 2, color: 'darkblue', iconname: 'camera', title: 'Capture & edit' },
+          ]}
+          callBack={val => (val ? getFunctions(val) : null)}
+        />
+      </View>
+    </View>
+  );
+
+  /*---------------------------------------------------------------------------------------*/
+  function getFunctions(key) {
+    switch (key) {
+      case 1:
+        firebasebrowse();
+        break;
+      case 2:
+        CaptureImageWithoutEdit();
+        break;
+    }
+  }
+}
+
+/*---------------------------------------------------------------------------------------*/
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  imageBox: (windowHeight, windowWidth) => ({
+    height: windowHeight * 0.15,
+    width: windowWidth * 0.3,
+    margin: 5,
+    backgroundColor: '#e1e4e8',
+    borderRadius: 5,
+  }),
+  fastImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: normalize(10),
+  },
+  checkboxContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingBox: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+/*---------------------------------------------------------------------------------------*/
+export default ImageScreen;

package/src/Media/RecordAudio.js

@@ -0,0 +1,250 @@
+
+import React from 'react';
+import {
+    AppRegistry,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View,
+    ActivityIndicator,
+    Dimensions,
+    KeyboardAvoidingView,
+    TouchableHighlight,
+    Image, Platform, PermissionsAndroid,
+} from 'react-native';
+// import AudioRecorderPlayer from 'react-native-audio-recorder-player';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { AudioRecorder, AudioUtils } from 'react-native-audio';
+import { Stopwatch, Timer } from 'react-native-stopwatch-timer';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+// const audioRecorderPlayer = new AudioRecorderPlayer();
+export default class RecordAudio extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            recordSecs: null,
+            recordTime: null,
+            currentPositionSec: null,
+            currentDurationSec: null,
+            playTime: null,
+            duration: null,//startAudio: false,playAudio:false,
+
+            messages: [],
+            startAudio: false,
+            hasPermission: false,
+            audioPath: `${
+                AudioUtils.DocumentDirectoryPath
+                }/${this.messageIdGenerator()}test.aac`,
+            playAudio: false,
+            fetchChats: false,
+            audioFile: '',
+            AudFileName: null,
+            audioSettings: {
+                SampleRate: 22050,
+                Channels: 1,
+                AudioQuality: 'Low',
+                AudioEncoding: 'aac',
+                MeteringEnabled: true,
+                IncludeBase64: true,
+                AudioEncodingBitRate: 32000,
+            },
+
+            stopwatchStart: false,
+            stopwatchReset: false,
+        };
+        this.toggleStopwatch = this.toggleStopwatch.bind(this);
+        this.resetStopwatch = this.resetStopwatch.bind(this);
+    }
+    componentWillMount() {
+
+    }
+    componentDidMount() {
+        this.checkPermission().then(async hasPermission => {
+            this.setState({ hasPermission });
+            if (!hasPermission) {return;}
+            await AudioRecorder.prepareRecordingAtPath(
+                this.state.audioPath,
+                this.state.audioSettings
+            );
+            AudioRecorder.onProgress = data => {
+
+            };
+            AudioRecorder.onFinished = data => {
+                let fileName = data.audioFileURL.substr(data.audioFileURL.lastIndexOf('/') + 1);
+                this.props.navigation.goBack();
+                this.props.route.params.onSelect({
+                   // uri: data.audioFileURL,
+                   uri: data.audioFileURL,
+                    filename: fileName,
+                    type: 'audio/mpeg',
+                });
+            };
+        });
+    }
+    componentWillUnmount() {
+        this.setState({
+            messages: [],
+        });
+    }
+    checkPermission() {
+        if (Platform.OS !== 'android') {
+            return Promise.resolve(true);
+        }
+        const rationale = {
+            title: 'Microphone Permission',
+            message:
+                'AudioExample needs access to your microphone so you can record audio.',
+        };
+        return PermissionsAndroid.request(
+            PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+            rationale
+        ).then(result => {
+
+            return result === true || result === PermissionsAndroid.RESULTS.GRANTED;
+        });
+    }
+
+
+
+    handleAvatarPress = props => {
+        // add navigation to user's profile
+    };
+    handleAudio = async () => {
+        this.setState({ stopwatchStart: !this.state.stopwatchStart, stopwatchReset: false });
+        const { user } = this.props;
+        if (!this.state.startAudio) {
+            this.setState({
+                startAudio: true,
+            });
+            await AudioRecorder.startRecording();
+        } else {
+            this.setState({ startAudio: false });
+            await AudioRecorder.stopRecording();
+            const { audioPath } = this.state;
+            const fileName = `${this.messageIdGenerator()}.aac`;
+            const file = {
+                uri: audioPath,// Platform.OS === "ios" ? audioPath : `file://${audioPath}`,
+                name: fileName,
+                type: 'audio/aac',
+            };
+            this.setState({ audioFile: file.uri, AudFileName: file.name });
+        }
+    };
+    messageIdGenerator() {
+        // generates uuid.
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+            let r = (Math.random() * 16) | 0,
+                v = c == 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+
+    renderAndroidMicrophone() {
+        if (Platform.OS === 'android') {
+            return (
+                <Ionicons
+                    name="ios-mic"
+                    size={35}
+                    hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}
+                    color={this.state.startAudio ? 'red' : 'black'}
+                    style={{
+                        bottom: 50,
+                        right: Dimensions.get('window').width / 2,
+                        position: 'absolute',
+                        shadowColor: '#000',
+                        shadowOffset: { width: 0, height: 0 },
+                        shadowOpacity: 0.5,
+                        zIndex: 2,
+                        backgroundColor: 'transparent',
+                    }}
+                    onPress={this.handleAudio}
+                />
+            );
+        }
+    }
+    renderLoading() {
+        if (!this.state.messages.length && !this.state.fetchChats) {
+            return (
+                <View style={{ marginTop: 100 }}>
+                    {/* <ActivityIndicator color="black" animating size="large" /> */}
+                </View>
+            );
+        }
+    }
+    toggleStopwatch() {
+        this.setState({ stopwatchStart: !this.state.stopwatchStart, stopwatchReset: false });
+    }
+
+    resetStopwatch() {
+        this.setState({ stopwatchStart: false, stopwatchReset: true });
+    }
+
+    render() {
+        return (
+            <TouchableOpacity style={layoutstyles.main_container}
+                onPress={() => this.props.navigation.goBack()}
+            >
+                <TouchableOpacity style={layoutstyles.child_container}>
+                {this.state.stopwatchStart ?
+                <View style={layoutstyles.stop_watch_container}>
+                        <Stopwatch laps msecs start={this.state.stopwatchStart}
+                            reset={this.state.stopwatchReset}
+                            options={options}
+                        />
+                    </View>
+                    : null
+                    }
+                    <View style={layoutstyles.start_or_stop_container}>
+                        <TouchableHighlight underlayColor={'transparent'} onPress={this.handleAudio}>
+                            {!this.state.stopwatchStart ?
+                                <View style={layoutstyles.start_or_stop_icon}>
+                                    <FontAwesome name="circle" size={70} color={'red'} />
+                                    <Text>START</Text>
+                                </View>
+                                :
+                                <View style={layoutstyles.start_or_stop_icon}>
+                                    <FontAwesome name="stop" size={60} color={'black'} />
+                                    <Text>STOP</Text>
+                                </View>
+                            }
+                        </TouchableHighlight>
+                    </View>
+                </TouchableOpacity>
+            </TouchableOpacity>
+        );
+    }
+}
+const options = {
+    text: {
+        fontSize: 40,
+        color: '#000',
+    },
+};
+const layoutstyles = StyleSheet.create({
+    main_container: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.50)',
+        justifyContent: 'center', alignItems: 'center',
+    },
+    stop_watch_container: {
+        flex: 2,
+        width: '100%',
+        height: 200,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+    child_container: {
+        flex: 0.25,// 0.3
+        backgroundColor: '#fff', width: '100%',
+        borderRadius: 7, borderWidth: 0.5, borderColor: 'black',
+    },
+    start_or_stop_container: {
+        flex: 3, width: '100%', height: 200,
+        justifyContent: 'center', alignItems: 'center',
+    },
+    start_or_stop_icon: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});