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

package/src/CustomComponents/CSummaryDropDown.js

@@ -0,0 +1,327 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { View, Text, TouchableOpacity, TextInput, FlatList, Dimensions, ScrollView } from 'react-native';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { normalize } from '../CommonStyle/componentStyle';
+import CFooterView from '../CustomComponents/CFooterView';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import { getLoading, isNU, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import CAwesomeButton from '../CustomComponents/CAwesomeButton';
+import SSearchBar from '../StaticComponents/SSearchBar';
+import SAlphabet from '../StaticComponents/SAlphabet';
+import { getListviewItem, getListviewItemText } from '../CommonStyle/PopupStyle';
+import { Global } from '../../../../../src/Common/Global';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import { useNavigation } from '../Navigation/useNavigation';
+
+
+import Loader from '../Custom/Loader';
+
+
+var DropDownALL = [];
+export default function CSummaryDropDown(props) {
+
+    const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+    const hosumrclassificationnature = responseJSON.consultation[responseJSON.natureindex].hosumrclassificationnature;
+    const navigation = useNavigation();
+    const [data, setData] = useState();
+    const [routine, setRoutine] = useState();
+    const [searchData, setSearchData] = useState('');
+    const [parameterName, setParameterName] = useState('');
+    const [refresh, setRefresh] = useState(0);
+    const [stage, setStage] = useState(1);
+    const [selected, setSelected] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    const [tempString, settempString] = useState([]);
+    const [displayData, setDisplayData] = useState([]);
+    const [selectedValue, setSelectedValue] = useState(props.value);
+    const [edituser, setEditUser] = useState();
+
+
+    useEffect(() => {
+        setAlphaFilter(false);
+    });
+
+    useEffect(() => {
+        FetchDropdownList();
+    }, []);
+
+    function FetchDropdownList() {
+        setSearchData('');
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnsummarydropdown ' + Global.userData.hosuconsultant + ',' + hosumrclassificationnature;
+        console.log('JJJJJJJMMMMMMMMMHHHHHHHHHHHHHHHHH3', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.data.data != null && response.data.data != undefined) {
+                    DropDownALL = response.data.data;
+                    setDisplayData(response.data.data);
+                    setIsLoading(false);
+                }
+                else {
+                    setDisplayData([]);
+                    setIsLoading(false);
+                }
+            });
+    }
+
+    function getNavigateToSummary() {
+        navigation.navigate('SummaryTemplate', { type: 1 });
+        props.visibility(false);
+    }
+
+    function getAllTabFunctions(key) {
+        switch (key) {
+            case 'ALL01': getRetrival(1);
+                break;
+            case 'ALL02': getRetrival(2);
+                break;
+            default: break;
+        }
+    }
+
+    function getRetrival(type) {
+
+        var x = tempString.toString();
+        var procedurename = 'rnhomrsummarytemplate '; // rnlatemplatesummaryretrival_01112024 rnlatemplatesummaryretrival
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/' + procedurename + type + ',' + Global.PatientDetails.hopapatient + ',' + Global.userData.hosuconsultant + ',' + hosumrclassificationnature + ',' + x + ',' + Global.ParameterInfo.homrpatientchart;
+        console.log('getRetrival buttonapi', buttonapi);
+
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.data.NewData != null && response.data.NewData != undefined && responseJSON.consultationEdit.NewData != undefined) {
+                    if (type == 1) {
+
+                        // console.log('response.data.NewData', JSON.stringify([response.data.NewData[0]]));
+
+                        const updatedResponseJSON = {
+                            ...responseJSON,
+                            editStatus: true,
+                            consultation: [...responseJSON.consultation],
+                        };
+                        const natureindex = updatedResponseJSON.natureindex ?? 0;
+                        updatedResponseJSON.consultation[natureindex] = {
+                            ...updatedResponseJSON.consultation[natureindex],
+                            editStatus: true,
+                            NewData: [...updatedResponseJSON.consultation[natureindex].NewData],
+                        };
+                        updatedResponseJSON.consultation[natureindex].NewData = [response.data.NewData[0]];
+                        setResponseJSON(updatedResponseJSON);
+
+                        navigation.navigate('ConsultationEdit', { data: updatedResponseJSON.consultation[updatedResponseJSON.natureindex].NewData[0].editArray, parent: updatedResponseJSON.consultation[updatedResponseJSON.natureindex] });
+
+                        setIsLoading(false);
+                        props.visibility(false);
+
+                        // responseJSON.consultationEdit.NewData = [];
+                        // responseJSON.consultationEdit.editStatus = true;
+                        // setTimeout(() => {
+                        //     responseJSON.consultationEdit.NewData.push(response.data.NewData[0]);
+                        //     navigation.navigate('ConsultationEdit', { data: responseJSON.consultationEdit.NewData[0].editArray, parent: responseJSON.consultationEdit });
+                        //     setResponseJSON({
+                        //         ...responseJSON,
+                        //         "consultationEdit": responseJSON.consultationEdit
+                        //     });
+                        //     setIsLoading(false);
+                        //     props.visibility(false);
+                        // });
+
+                    } else {
+                        navigation.navigate('SummaryTemplate', { type: 2, data: response.data.NewData });
+                        setIsLoading(false);
+                        props.visibility(false);
+                    }
+                }
+                else {
+                    setIsLoading(false);
+                    props.visibility(false);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+    }
+
+    function renderItem(data) {
+
+        return (
+            data.item.displayvalue != undefined && data.item.displayvalue != '' ?
+                <TouchableOpacity
+                    style={[getListviewItem(data.item.selected), { flexDirection: 'row', alignItems: 'center' }]}
+                    onPress={() => onSelectItem(data.item, false)}
+                    activeOpacity={0.5}
+                >
+                    <Icons.FontAwesome name="dot-circle-o" color={Global.AppTheme.primary_color} size={normalize(10)}
+                        style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }} />
+                    <Text style={selectedValue != null && selectedValue != undefined ? selectedValue == item.datavalue ? getListviewItemText(true) : getListviewItemText(false) : getListviewItemText(false)}>
+                        {data.item.displayvalue.toUpperCase()}
+                    </Text>
+                </TouchableOpacity>
+                : null
+        );
+    }
+
+    function onSelectItem(datavalue, multiselect) {
+        if (multiselect == true) {
+            if (tempString.includes(datavalue.datavalue)) {
+                datavalue.selected = !datavalue.selected;
+                setSelected(selected + 1);
+                var index = tempString.indexOf(datavalue.datavalue);
+                if (index > -1) {
+                    tempString.splice(index, 1);
+                }
+            } else {
+                datavalue.selected = !datavalue.selected;
+                setSelected(selected + 1);
+                tempString.push(datavalue.datavalue);
+            }
+        } else {
+            displayData.map((sub) => sub.selected = false);
+            datavalue.selected = true;
+            tempString.splice(0, tempString.length);
+            tempString.push(datavalue.datavalue);
+            setEditUser(datavalue);
+            setSelected(selected + 1);
+        }
+    }
+
+    function getAlphabetData(alpha, index) {
+        var filter = displayData.filter(value => (value.displayvalue != undefined ? value.displayvalue : '').charAt(0) == alpha);
+        setFilterPurpose(filter);
+        index == 0 ? setSearchData('') : setSearchData(alpha);
+        index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+    }
+
+    function GetDropdown(data) {
+        const newDropDownData = data.filter(function (item) {
+            const dataItem = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        });
+        return (
+            <View style={{ flexDirection: 'row' }}>
+                <FlatList
+                    data={newDropDownData}
+                    renderItem={renderItem}
+                    initialNumToRender={10}
+                    maxToRenderPerBatch={20}
+                    keyExtractor={(item, index) => 'key' + index}
+                />
+
+                <SAlphabet
+                    callBack={val =>
+                        val == undefined ? null : getAlphabetData(val.alpha, val.index)
+                    } />
+            </View>
+        );
+    }
+
+    return (
+        <View style={{ marginTop: normalize(-5) }}>
+            {isLoading ?
+                <Loader displaytext={true} />
+                : null}
+            <Text style={{ alignSelf: 'center', fontSize: normalize(12), fontWeight: 'bold', marginBottom: normalize(2), color: Global.AppTheme.primary_color }}>{ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) && ValueCheck(responseJSON.consultationEdit.heading) ? responseJSON.consultationEdit.heading : 'SUMMARY'}</Text>
+
+            <View style={{
+                flexDirection: 'row', backgroundColor: '#fff', width: '100%', borderRadius: 6,
+                justifyContent: 'space-evenly', height: normalize(45), alignItems: 'center', marginRight: normalize(8),
+            }}>
+                {[{ 'iconname': 'archive', 'displayvalue': 'ALL', 'color': Global.AppTheme.primary_color, 'shadowcolor': '#fff', 'stage': 1 },
+                { 'iconname': 'add-to-list', 'displayvalue': 'CREATE', 'color': Global.AppTheme.primary_color, 'shadowcolor': '#fff', 'stage': 2 }].map((buttons, i) => {
+                    return (
+                        <TouchableOpacity
+                            key={i}
+                            onPress={() => buttons.stage == 1 ? setStage(buttons.stage) : getNavigateToSummary()}
+                            style={{
+                                borderRadius: 7,
+                                borderWidth: 1,
+                                height: normalize(35),
+                                width: normalize(50),
+                                backgroundColor: stage == buttons.stage ? '#eaf2ff' : '#fff',
+                                borderColor: stage == buttons.stage ? '#eaf2ff' : Global.AppTheme.primary_color,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                padding: 0,
+                                elevation: 1,
+                                shadowColor: '#000',
+                                shadowOffset: { width: 0, height: 1 },
+                                shadowOpacity: 0.2,
+                                shadowRadius: 1,
+                            }}
+                        >
+                            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                                <Icons.Entypo name={buttons.iconname} style={{ paddingRight: 0 }}
+                                    color={Global.AppTheme.primary_color} size={normalize(17)} />
+                                <Text style={{
+                                    color: Global.AppTheme.primary_color,
+                                    fontSize: normalize(10),
+                                    fontWeight: stage == buttons.stage ? 'bold' : 'normal',
+                                }}>{buttons.displayvalue}</Text>
+                            </View>
+                        </TouchableOpacity>
+                    );
+                })}
+            </View>
+
+            {stage == 1 ?
+                <View style={{ flex: 1 }}>
+                    <View style={{ flexDirection: 'row', marginTop: normalize(5) }}>
+                        <SSearchBar
+                            onChangeText={val => setSearchData(val)}
+                        />
+                    </View>
+
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                        <View style={{ flex: 1 }}>
+                            {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+                        </View>
+                    </View>
+                </View>
+                : null}
+
+            {stage == 1 ?
+                <CFooterView style={{ borderRadius: normalize(10), backgroundColor: '#fff' }}>
+                    <View style={{ flexDirection: 'row' }}>
+                        {[{
+                            'displaytext': 'Select',
+                            'fontcolor': Global.AppTheme.primary_color,
+                            'shadowcolor': '#f1f3f6',
+                            'size': 10,
+                            'iconname': 'file-medical',
+                            'iconcolor': Global.AppTheme.primary_color,
+                            'selected': false,
+                            'visibility': true,
+                            'iconsize': 20,
+                            'functionid': 'ALL01',
+                        },
+                        {
+                            'displaytext': 'Edit',
+                            'fontcolor': Global.AppTheme.primary_color,
+                            'shadowcolor': '#f1f3f6',
+                            'size': 10,
+                            'iconname': 'edit',
+                            'iconcolor': Global.AppTheme.primary_color,
+                            'selected': false,
+                            'visibility': isNU(edituser) ? true : false,  // isNU(edituser) && edituser.editstatus ? true : false,
+                            'iconsize': 20,
+                            'functionid': 'ALL02',
+                        }].map((item, i) => {
+                            return (
+                                item.visibility ?
+                                    <View key={i} style={{ borderRadius: normalize(10), paddingLeft: normalize(10) }}>
+                                        <CAwesomeButton
+                                            data={item}
+                                            callBack={val => val == undefined ? null : getAllTabFunctions(item.functionid)}
+                                        />
+                                    </View>
+                                    : null
+                            );
+                        })}
+                    </View>
+                </CFooterView> : null}
+
+        </View>
+    );
+}

package/src/CustomComponents/CText.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+const CText = (props) => {
+    return (
+        <Text adjustsFontSizeToFit  {...props} />
+    );
+};
+export default CText;

package/src/CustomComponents/CVectorIcon.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+export default function CVectorIcon(props) {
+    const [data, setData] = useState(props.data);
+    return (
+        <TouchableOpacity
+            disabled={data.disabled != undefined ? data.disabled : false}
+            style={{ alignItems: 'center', width: data.width != undefined ? normalize(70) : normalize(50) }}
+            onPress={() => data.functionid != undefined ? getCallBack(data) : notifyMessage('Incorporate soon',3)}>
+            <Icons.FontAwesome5 name={data.iconname != undefined ? data.iconname : 'file'}
+                color={data.iconcolor != undefined ? data.iconcolor : 'white'}
+                size={data.iconsize != undefined ? normalize(data.iconsize) : normalize(20)} />
+            <Text
+                numberOfLines={1}
+                style={{
+                    // flex:1,
+                    width:normalize(50),
+                    color: data.fontcolor != undefined ? data.fontcolor : '#fff',
+                    textAlign: data.textAlign != undefined ? data.textAlign : 'center',
+                    fontSize: data.size != undefined ? normalize(data.size) : normalize(10),
+                    fontWeight: data.fontWeight != undefined ? data.fontWeight : 'normal',
+                }}>{data.displaytext != undefined ? data.displaytext : ''}</Text>
+        </TouchableOpacity>
+    );
+
+    function getCallBack(item) {
+        props.callBack(item);
+    }
+}

package/src/CustomComponents/HtmlContentViewer.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+
+const HtmlContentViewer = ({
+  htmlContent,
+  uri,
+  width = '100%',
+  height = 500,
+  iframeRef: externalIframeRef,
+  onLoad,
+  onMessage,
+}) => {
+  const internalIframeRef = useRef(null);
+  const iframeRef = externalIframeRef || internalIframeRef;
+
+  // ✅ Hook is ALWAYS called
+  useEffect(() => {
+    if (Platform.OS === 'web' && iframeRef.current) {
+      const iframe = iframeRef.current;
+      const doc =
+        iframe.contentDocument || iframe.contentWindow?.document;
+
+      if (doc) {
+        doc.open();
+        doc.write(htmlContent);
+        doc.close();
+      }
+    }
+  }, [htmlContent]);
+
+  // 🌐 Web / Electron
+  if (Platform.OS === 'web') {
+    return htmlContent ? (
+      <iframe
+        ref={iframeRef}
+        title="html-content"
+        style={{ width, height, border: 'none' }}
+      />
+    ) : (
+      <iframe
+        src={uri}
+        title="uri-content"
+        style={{ width, height, border: 'none' }}
+      />
+    );
+  }
+
+  // 📱 Android / iOS
+  return (
+    <WebView
+      androidHardwareAccelerationDisabled
+      scalesPageToFit
+      mixedContentMode="compatibility"
+      originWhitelist={['*']}
+      source={htmlContent ? { html: htmlContent } : { uri }}
+      onLoad={onLoad}
+      onMessage={onMessage}
+      style={{ width, height }}
+    />
+  );
+};
+
+export default HtmlContentViewer;

package/src/CustomComponents/PdfContentViewer.js

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, View, ActivityIndicator, StyleSheet } from 'react-native';
+import Pdf from 'react-native-pdf';
+
+const PdfContentViewer = ({
+  link,
+  style,
+  onLoadComplete,
+  onError,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [localPdfUrl, setLocalPdfUrl] = useState(null);
+
+  useEffect(() => {
+    async function preparePdf() {
+      if (!link) {return;}
+      console.log('Preparing PDF from link:', link);
+      setIsLoading(true);
+      try {
+        if (Platform.OS === 'web') {
+          const localPath = await window.electronAPI.openPdfPreview(link);
+          setLocalPdfUrl(localPath);
+        } else {
+          setLocalPdfUrl(link);
+        }
+      } catch (err) {
+        console.error('PDF prepare error', err);
+        onError?.(err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    preparePdf();
+    return () => (mounted = false);
+  }, [link]);
+
+  if (!localPdfUrl) {return null;}
+
+  return (
+    <View style={[styles.container, style]}>
+      {isLoading && (
+        <View style={styles.loader}>
+          <ActivityIndicator size="large" />
+        </View>
+      )}
+      {Platform.OS === 'web' ? (
+        <iframe
+          src={localPdfUrl}
+          style={styles.pdfView}
+          title="PDF Viewer"
+          onLoad={() => onLoadComplete?.(localPdfUrl)}
+          onError={(e) => onError?.(e)}
+        />
+      ) : (
+        <Pdf
+          onLoadProgress={n => { }}
+          trustAllCerts={false}
+          onPressLink={uri => { }}
+          onPageChanged={(page, numberOfPages) => { }}
+          source={{ uri: localPdfUrl }}
+          style={styles.pdfView}
+          onLoadComplete={(pages, path) =>
+            onLoadComplete?.(path, pages)
+          }
+          onError={onError}
+        />
+      )}
+    </View>
+  );
+};
+
+export default PdfContentViewer;
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  pdfView: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    borderWidth: 0,
+  },
+  loader: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    backgroundColor: 'rgba(255,255,255,0.6)',
+  },
+});