@jescon-technologies/react-native-ui-kit 0.0.6 → 0.0.8

package/src/Media/ImageScreen.js

@@ -1,309 +0,0 @@
-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 '../../../../../src/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 '../../../../../src/Common/Global';
-import NetworkServiceCall from '../Common/NetworkServiceCall';
-import SSpeedDial from '../StaticComponents/SSpeedDial';
-
-/*---------------------------------------------------------------------------------------*/
-function ImageScreen(props) {
-  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]);
-          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

@@ -1,250 +0,0 @@
-
-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',
-    },
-});