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

package/src/HOC/HOverlayCentered.js

@@ -0,0 +1,140 @@
+import React, { useEffect } from 'react';
+import { View, Dimensions,Text } from 'react-native';
+import Overlay from 'react-native-modal-overlay';
+import Icons from '../Common/Icons';
+import { normalize } from '../CommonStyle/componentStyle';
+
+const HOverlayCentered = (WrapComponent) => {
+
+    const { width, height } = Dimensions.get('window');
+    return function (props) {
+        useEffect(() => {
+            let isMounted = true;
+        });
+
+        function getPopupContainerStyle() {
+            return (
+                props.overlaystyle
+            );
+        }
+
+        return (
+            <Overlay
+                visible={true}
+                onClose={() => props.visibility != undefined ? props.visibility(false) : null}
+                closeOnTouchOutside={ props.disableOnTouch ? false : true}
+                animationType="fadeInUp"
+                // containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.233)' }}
+                containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.233)' }}
+                animationDuration={500}
+                childrenWrapperStyle={getPopupContainerStyle()}>
+                <View style={{ flex: 1 }} >
+
+                    {props.position && props.position != null && props.position != undefined ?
+                        null
+                        :
+                        <View
+                            style={{
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                width: Dimensions.get('screen').width,
+                                borderWidth: 0,
+                                borderTopLeftRadius: 10,
+                                paddingVertical: normalize(5),
+                                borderTopRightRadius: 10,
+                            }}>
+
+                            <View style={{
+                                width: '10%',
+                                borderWidth: 0,
+                            }}>
+                                <Text>{''}</Text>
+                            </View>
+
+
+                            <View style={{
+                                flex: 1,
+                                width: '80%',
+                                borderWidth: 0,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
+                                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                                    {props.overlayheading != null && props.overlayheading != undefined ?
+                                        <Icons.FontAwesome5
+                                            name={props.overlayicon != null && props.overlayicon != undefined ? props.overlayicon : 'file'}
+                                            color={'#000000'}
+                                            size={normalize(11)}
+                                            style={{ marginHorizontal: normalize(5) }}
+                                        />
+                                        : null}
+                                    <Text style={{ color: '#000000', fontSize: normalize(11), fontWeight: 'bold', textAlign: 'center' }}>{props.overlayheading != null && props.overlayheading != undefined ? props.overlayheading : ''}</Text>
+                                </View>
+                            </View>
+
+                            <View style={{
+                                width: '10%',
+                                borderWidth: 0,
+                            }}>
+                                <Text>{' '}</Text>
+                            </View>
+                        </View>
+                    }
+                    <WrapComponent
+                        {...props}
+                    />
+                    {props.position && props.position != null && props.position != undefined && props.position == true ?
+                        <View
+                            style={{
+                                position: 'absolute',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                width: Dimensions.get('screen').width,
+                                borderWidth: 0,
+                                borderTopLeftRadius: 10,
+                                paddingVertical: normalize(5),
+                                borderTopRightRadius: 10,
+                            }}>
+
+                            <View style={{
+                                width: '10%',
+                                borderWidth: 0,
+                            }}>
+                                <Text>{''}</Text>
+                            </View>
+                            <View style={{
+                                flex: 1,
+                                width: '80%',
+                                borderWidth: 0,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
+                                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                                    {props.overlayheading != null && props.overlayheading != undefined ?
+                                        <Icons.FontAwesome5
+                                            name={props.overlayicon != null && props.overlayicon != undefined ? props.overlayicon : 'file'}
+                                            color={'#000000'}
+                                            size={normalize(11)}
+                                            style={{ marginHorizontal: normalize(5) }}
+                                        />
+                                        : null}
+                                    <Text style={{ color: '#000000', fontSize: normalize(11), fontWeight: 'bold', textAlign: 'center' }}>{props.overlayheading != null && props.overlayheading != undefined ? props.overlayheading : ''}</Text>
+                                </View>
+                            </View>
+                            <View style={{
+                                width: '10%',
+                                borderWidth: 0,
+                            }}>
+                                <Text>{' '}</Text>
+                            </View>
+                        </View>
+                        : null}
+                </View>
+            </Overlay>
+        );
+    };
+};
+
+export default HOverlayCentered;

package/src/HOC/HShadowButton.js

@@ -0,0 +1,45 @@
+import { Text, TouchableOpacity } from 'react-native';
+import { isBNU, isNU, isNUQ, normalize } from '../CommonStyle/ComponentFunctions';
+import HOCIcons from './HOCIcons';
+import { Global } from '../Common/Global';
+
+
+export default function HShadowButton(props) {
+
+    return (
+        <TouchableOpacity
+            disabled={props.disabled ? true : false}
+            onPress={() => {
+                isNU(props.buttonCallback) ? props.buttonCallback(true) : null;
+            }}
+            style={isNU(props.buttonstyle) ? props.buttonstyle : {}}>
+            {props.useicon ?
+                <HOCIcons.Icons
+                    icongroup={isNU(props.icongroup) ? props.icongroup : 5}
+                    name={isBNU(props.iconname) ? props.iconname : 'file-alt'}
+                    color={isNU(props.iconcolor) ? props.iconcolor : Global.AppTheme.primary_color}
+                    size={isNU(props.iconsize) ? props.iconsize : normalize(15)}
+                    style={props.iconstyle ? props.iconstyle : {}}
+                />
+                : null}
+            {props.usetext ?
+                <Text
+                    numberOfLines={1}
+                    adjustsFontSizeToFit={true}
+                    style={
+                        props.textstyle ?
+                            props.textstyle :
+                            {
+                                color: Global.AppTheme.primary_color,
+                                fontSize: normalize(6),
+                                textAlign: 'center',
+                            }
+                    }
+                >
+                    {isNUQ(props.displaytext) ? props.displaytext : null}
+                </Text>
+                : null}
+        </TouchableOpacity>
+    );
+
+}

package/src/HOC/HShadowCountButton.js

@@ -0,0 +1,82 @@
+
+import { Text, TouchableOpacity, View, Platform } from 'react-native';
+import { isBNU, isNU, isNUQ, normalize } from '../CommonStyle/ComponentFunctions';
+import HOCIcons from './HOCIcons';
+import { Global } from '../Common/Global';
+import React from 'react';
+
+
+export default function HShadowCountButton(props) {
+  return (
+    <TouchableOpacity
+      key={props.i}
+      disabled={props.disabled ? true : false}
+      onPress={() => {
+        isNU(props.buttonCallback) ? props.buttonCallback(true) : null;
+      }}
+      style={isNU(props.buttonstyle) ? props.buttonstyle : {}}>
+      {props.count ? (
+        <View
+          style={{
+            position: 'absolute',
+            right: normalize(10),
+            top: normalize(-5),
+            backgroundColor: 'white',
+            alignItems: 'center',
+            borderRadius: 20,
+            width: normalize(15),
+            borderWidth: 0.5,
+            zIndex: 10,
+          }}>
+          <Text
+            style={{
+              color: 'black',
+              fontSize: normalize(11),
+              fontWeight: 'bold',
+            }}>
+            {props.countValue || 0}
+          </Text>
+        </View>
+      ) : null}
+      {props.useicon ? (
+        <HOCIcons.Icons
+          icongroup={isNU(props.icongroup) ? props.icongroup : 5}
+          name={isBNU(props.iconname) ? props.iconname : 'file-alt'}
+          color={
+            isNU(props.iconcolor)
+              ? props.iconcolor
+              : Global.AppTheme.primary_color
+          }
+          size={
+            Platform.OS === 'web'
+              ? 20   // desktop equivalent
+              : isNU(props.iconsize)
+                ? props.iconsize
+                : normalize(15)
+          }
+          style={props.iconstyle ? props.iconstyle : {}}
+        />
+      ) : null}
+      {props.usetext ? (
+        <Text
+          numberOfLines={1}
+          adjustsFontSizeToFit={true}
+          style={
+            props.textstyle
+              ? props.textstyle
+              : {
+                color: Global.AppTheme.primary_color,
+                fontSize:
+                  Platform.OS === 'web'
+                    ? 12   // desktop readable size
+                    : normalize(6), // android unchanged
+                textAlign: 'center',
+              }
+          }>
+          {isNUQ(props.displaytext) ? props.displaytext : null}
+        </Text>
+      ) : null}
+
+    </TouchableOpacity>
+  );
+}

package/src/HOC/OptionOverlay.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, Modal, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+
+const OptionOverlay = ({ visible, onClose, children }, props) => {
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      onRequestClose={onClose}
+      animationType="none"
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View style={{
+              width: '95%', // Adjust this width as needed
+              height: props && props.height ? props.height : '80%',
+              // padding: 2,
+              backgroundColor: 'white',
+              borderRadius: 10,
+            }}>
+              {children}
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
+  },
+  content: {
+    width: '95%', // Adjust this width as needed
+    height: '80%',
+    // padding: 2,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    // elevation: 5,
+  },
+});
+
+export default OptionOverlay;

package/src/Media/AudioScreen.js

@@ -0,0 +1,347 @@
+import React, {useState, useEffect, memo, useContext} from 'react';
+import {
+  SafeAreaView,
+  Image,
+  StyleSheet,
+  Dimensions,
+  Button,
+  FlatList,
+  Text,
+  View,
+  TouchableOpacity,
+  ActivityIndicator,
+  PermissionsAndroid,
+} from 'react-native';
+import {audioURL, APIURL} from '../Common/apiConstants';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import CAudioPlay from '../Media/CAudioPlay';
+// import DocumentPicker from 'react-native-document-picker';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import Sound from 'react-native-sound';
+import SSpeedDial from '../StaticComponents/SSpeedDial';
+import {Global} from '../Common/Global';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+
+function AudioScreen(props) {
+  const navigation = useNavigation();
+  const {responseJSON, setResponseJSON} = useContext(
+    EmrResponseComponentContext,
+  );
+  const [data, setData] = useState(
+    props?.data?.savedaudio ? props.data.savedaudio : null,
+    //props.route.params.gallery.savedaudio
+  );
+  // console.log("savedaudio",JSON.stringify(data));
+  const [refreshCount, setrefreshCount] = useState(1); // TO refresh the page when add something on page
+  const [mediaUrlLink, setMediaUrlLink] = useState(false);
+  const [isAudioShow, setAudioShow] = useState(false);
+  const [deleteAudio, setDeleteAudio] = useState(false);
+  const [open, setOpen] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [process, setProcess] = useState('');
+  const [disablesave, setDisablesave] = useState(true);
+  useEffect(() => {
+    props.setData(data);
+  }, [data]);
+
+  function firebaseimagesave() {
+    console.log('firebaseimagesaveeeeeeeeee', data);
+    data.map(item => {
+      if (item.uritype == false) {
+        firebaseupload(item);
+      }
+    });
+  }
+
+  const firebaseupload = async item => {
+    console.log('firebaseupload', item.uri);
+  };
+
+  function deleteSelectedAudio(itemid) {
+    data
+      .filter(item => item.deletestatus === true)
+      .forEach(item => data.splice(data.indexOf(item), 1));
+    setDeleteAudio(!deleteAudio);
+    setrefreshCount(refreshCount + 1);
+  }
+  function changeStatus(data) {
+    data.item.deletestatus = !data.item.deletestatus;
+    setrefreshCount(refreshCount + 1);
+  }
+
+  function retrievefirebaseimage(data) {}
+
+  function renderAudio(data) {
+    // retrievefirebaseimage(data)
+    return data.item.filename ? (
+      <View style={{flexDirection: 'row'}}>
+        <View style={{alignItems: 'center', flexDirection: 'row'}}>
+          <TouchableOpacity onLongPress={() => setDeleteAudio(true)}>
+            <CAudioPlay
+              audio={audioURL + data.item.filename}
+              component={data.item.file}
+              navigation={props.navigation}
+              deleterequest={val =>
+                val == undefined ? null : Delete_Media(val)
+              }
+            />
+          </TouchableOpacity>
+
+          {deleteAudio ? (
+            <TouchableOpacity onPress={() => changeStatus(data)}>
+              <View style={{justifyContent: 'center', alignItems: 'center'}}>
+                <Fontisto
+                  name={
+                    !data.item.deletestatus
+                      ? 'checkbox-passive'
+                      : 'checkbox-active'
+                  }
+                  size={25}
+                  color={!data.item.deletestatus ? 'lightgrey' : 'blue'}
+                />
+              </View>
+            </TouchableOpacity>
+          ) : null}
+        </View>
+      </View>
+    ) : null;
+  }
+
+  const getResolvedPath = async (uri, filen) => {
+    const fileBase64 = await ReactNativeBlobUtil.fs.readFile(uri, 'base64');
+    const relativePath = ReactNativeBlobUtil.fs.dirs.CacheDir;
+    //const fileName = `${Date.now()}.aac`
+    const fileName = `${filen}`;
+    const path = `${relativePath}/${fileName}`;
+
+    // Create temporary file
+    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.audio],
+        });
+
+        const {relativePath, fileName, path} = await getResolvedPath(
+          res[0].uri,
+          res[0].name,
+        );
+        console.log('res[0].uri', JSON.stringify(res[0].uri));
+        console.log('res[0].name', JSON.stringify(res[0].name));
+        console.log('relativePath', JSON.stringify(relativePath));
+        console.log('fileName', JSON.stringify(fileName));
+        console.log('path', JSON.stringify(path));
+        let dataset = {
+          uri: 'file://' + path,
+          filetype: res[0].type,
+          filename: res[0].name,
+          uritype: false,
+        };
+        console.log('dataset', JSON.stringify(dataset));
+        const localAudio = new Sound(fileName, relativePath, error => {
+          if (error) {
+            console.log('failed to load the sound', error);
+            return;
+          }
+          // Loaded audio successfully
+          const audioDuration = localAudio.getDuration();
+          if (!audioDuration) {return;} // Audio length could not be estimated
+        });
+
+        Media_Upload(dataset);
+      } catch (err) {
+        if (DocumentPicker.isCancel(err)) {
+          // User cancelled the picker, exit any dialogs or menus and move on
+        } else {
+          throw err;
+        }
+      }
+    }
+  }
+
+  async function Media_Upload(image) {
+    setLoading(true);
+    let date = new Date().getDate(); //Current Date
+    let month = new Date().getMonth() + 1; //Current Month
+    let year = new Date().getFullYear(); //Current Year
+    let hours = new Date().getHours(); //Current Hours
+    let min = new Date().getMinutes(); //Current Minutes
+    let sec = new Date().getSeconds(); //Current Seconds
+    let millisec = new Date().getMilliseconds(); //Current milliSeconds
+    let uniquename = '.aac';
+
+    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) {
+      //console.log("dataset.uritype>>>>>>>>>>>>>",dataset.uritype);
+      if (dataset2.uri) {
+        //console.log("dataset.uri>>>>>>>>>>>>>>>",dataset.uri);
+        var formData = new FormData();
+        formData.append('file', {
+          uri: dataset2.uri,
+          type: 'audio/aac',
+          name: dataset2.filename,
+        });
+        // console.log("formData>>>>>>>>>>>>>",JSON.stringify(formData));
+
+        NetworkServiceCall(
+          'multiform',
+          APIURL + 'file/fileupload/emr/audio',
+          formData,
+        )
+          .then(function (responsedata) {
+            // console.log("responsedata>>>>>>>>>>>>>>>",JSON.stringify(responsedata));
+            if (responsedata.httpstatus == 200) {
+              console.log(
+                'responsedata.httpstatus>>>>>>>>>>>>>>>',
+                JSON.stringify(responsedata.httpstatus),
+              );
+              dataset2.filename = responsedata.data.fileuri;
+              // data.push(dataset2)
+              // props.setData([...data, dataset2]);
+              console.log(
+                'img66666666666666666666666666666666666666',
+                dataset2.filename,
+              );
+              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);
+              setOpen(false);
+              //props.route.params.onSelect(true)
+            } else {
+              setLoading(false);
+              setOpen(false);
+            }
+          })
+          .catch(error => {
+            //  console.log("errorrrrrrrrrr",JSON.stringify(error))
+            setLoading(false);
+          });
+      }
+    }
+  }
+
+  function RecordAudio() {
+    console.log('record audiooooooooooooooo');
+    navigation.navigate('RecordAudio', {onSelect: Media_Upload});
+  }
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.itemContainer}>
+        {deleteAudio ? (
+          <TouchableOpacity
+            style={{alignItems: 'center', padding: 10}}
+            onPress={deleteSelectedAudio}>
+            <View>
+              <AntDesign name="delete" size={30} color={'red'} />
+            </View>
+          </TouchableOpacity>
+        ) : null}
+        <FlatList
+          data={data}
+          renderItem={renderAudio}
+          contentContainerStyle={{alignItems: 'center', paddingTop: 10}}
+          keyExtractor={item => item.fileid}
+        />
+        <View>
+          {loading ? (
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: '#fff',
+                alignItems: 'center',
+                padding: 10,
+              }}>
+              <ActivityIndicator size="large" color="#0000ff" />
+            </View>
+          ) : null}
+        </View>
+
+        <SSpeedDial
+          buttons={[
+            {
+              functionid: 1,
+              color: 'darkblue',
+              iconname: 'add',
+              title: 'Browse',
+            },
+            {
+              functionid: 2,
+              color: 'darkblue',
+              iconname: 'audiotrack',
+              title: 'Record Audio',
+            },
+          ]}
+          callBack={val => (val == undefined ? null : getFunctions(val))}
+        />
+      </View>
+    </View>
+  );
+
+  function getFunctions(key) {
+    switch (key) {
+      case 1:
+        browseFromDevice();
+        break;
+      case 2:
+        RecordAudio();
+        break;
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+  },
+});
+
+export default memo(AudioScreen);