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

package/src/CustomComponents/CBackHandler.js

@@ -0,0 +1,273 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TextInput,
+  Platform,
+} from 'react-native';
+import { Global } from '../../../../../src/Common/Global';
+import { normalize } from '../CommonStyle/componentStyle';
+import Svg, { Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
+import HOCIcons from '../HOC/HOCIcons';
+import CModalOverlay from './CModalOverlay';
+
+export default function CBackHandler(props) {
+  const [overlay, setOverlay] = useState(true);
+  const [text, onChangeText] = useState('');
+  const [data] = useState(props.data);
+
+  const getPopupContainerStyle = () =>
+    Platform.OS === 'ios'
+      ? { ...styles.overlayStyle, top: normalize(60) }
+      : { ...styles.overlayStyle, bottom: 0 };
+
+  const getTextKey = key => {
+    switch (key) {
+      case 1:
+        return 'Please enter installation key to continue.';
+      case 2:
+        return 'Please make sure data saved before verify, Are you sure you want to verify ?';
+      case 3:
+        return 'Do you want share consent form?';
+      case 4:
+        return 'Do you want to delete?';
+      case 5:
+        return 'Hold On, Are you sure you want to exit without save ?';
+      case 6:
+        return 'Hold on, Are you sure you want to log out ?';
+      case 7:
+      case 8:
+        return props.displaytext;
+      default:
+        return 'Do you want to exit ?';
+    }
+  };
+
+  const getObject = key => {
+    switch (key) {
+      case 1:
+        return {
+          iconname: 'lock',
+          button1: 'CANCEL',
+          button2: 'CONFIRM',
+          heading: 'INSTALLATION KEY',
+        };
+      case 2:
+        return {
+          iconname: 'save',
+          button1: 'No',
+          button2: 'VERIFY',
+          heading: 'VERIFICATION',
+        };
+      case 3:
+        return {
+          iconname: 'file-invoice',
+          button1: 'No',
+          button2: 'Yes',
+          heading: 'DELETION',
+        };
+      case 4:
+        return {
+          iconname: 'trash',
+          button1: 'No',
+          button2: 'Yes',
+          heading: 'DELETION',
+        };
+      case 5:
+        return {
+          iconname: 'exclamation-triangle',
+          button1: 'No',
+          button2: 'Yes',
+          heading: 'EXIT WITHOUT SAVE ?',
+        };
+      case 6:
+        return {
+          iconname: 'exclamation-triangle',
+          button1: 'No',
+          button2: 'Yes',
+          heading: 'LOG OUT',
+        };
+      case 7:
+        return {
+          iconname: 'exclamation-triangle',
+          button1: 'No',
+          button2: 'Yes',
+          heading: 'SWITCH SCREEN WITHOUT SAVE ?',
+        };
+      case 8:
+        return (
+          props.displaybuttons || {
+            iconname: 'exclamation-triangle',
+            button1: 'No',
+            button2: 'Yes',
+            heading: 'CONFIRMATION',
+          }
+        );
+      default:
+        return {
+          iconname: 'exclamation-triangle',
+          button1: 'No',
+          button2: 'Yes',
+          heading: 'CONFIRMATION',
+        };
+    }
+  };
+
+  const getClose = () => {
+    setOverlay(false);
+    props.close?.(false);
+  };
+
+  const config = getObject(props.type);
+
+  return (
+    <CModalOverlay
+      visible={overlay}
+      onClose={getClose}
+      closeOnTouchOutside
+      containerStyle={styles.container}
+      childrenWrapperStyle={getPopupContainerStyle()}>
+      <View style={styles.wrapper}>
+        {/* Icon + Message */}
+        <View style={styles.content}>
+          <HOCIcons.Icons
+            icongroup={props.type === 6 ? 8 : 5}
+            name={props.type === 6 ? 'log-out-outline' : config.iconname}
+            size={normalize(70)}
+            color="#7575ed"
+            style={styles.icon}
+          />
+          <Text numberOfLines={3} style={styles.message}>
+            {getTextKey(props.type)}
+          </Text>
+        </View>
+
+        {/* Input (only for type 1) */}
+        {props.type === 1 && (
+          <TextInput
+            style={styles.input}
+            placeholder="Enter key"
+            keyboardType="default"
+            onChangeText={onChangeText}
+            value={text}
+          />
+        )}
+
+        {/* Buttons */}
+        <View style={styles.buttonRow}>
+          <TouchableOpacity onPress={getClose} style={styles.cancelButton}>
+            <Text style={styles.cancelButtonText}>{config.button1}</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => props.callBack(text)}
+            style={styles.confirmButton}>
+            <Svg>
+              <Defs>
+                <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
+                  <Stop offset="0" stopColor="#2f3ec1" stopOpacity="1" />
+                  <Stop
+                    offset="1"
+                    stopColor={Global.AppTheme.primary_color}
+                    stopOpacity="1"
+                  />
+                </LinearGradient>
+              </Defs>
+              <Rect
+                x="0"
+                y="0"
+                width="100%"
+                height={normalize(35)}
+                fill="url(#grad)"
+                rx="5"
+              />
+            </Svg>
+            <Text style={styles.confirmButtonText}>{config.button2}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </CModalOverlay>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'rgba(97, 97, 97, 0)',
+  },
+  overlayStyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height * 0.3,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    borderWidth: 2,
+    borderColor: 'darkblue',
+  },
+  wrapper: {
+    marginTop: normalize(-10),
+    width: Dimensions.get('window').width - 10,
+    flex: 1,
+    borderRadius: normalize(17),
+  },
+  content: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  icon: {
+    textAlign: 'center',
+    marginVertical: normalize(10),
+    opacity: 0.6,
+  },
+  message: {
+    color: 'black',
+    fontSize: normalize(14),
+    fontWeight: '400',
+    textAlign: 'center',
+  },
+  input: {
+    height: normalize(30),
+    padding: 5,
+    fontWeight: 'bold',
+    width: normalize(190),
+    alignSelf: 'center',
+    textAlign: 'center',
+    borderBottomColor: Global.AppTheme.primary_color,
+    borderBottomWidth: 3,
+    fontSize: normalize(14),
+    color: 'black',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-evenly',
+  },
+  cancelButton: {
+    backgroundColor: '#d2d2d2',
+    borderRadius: 5,
+    width: '47%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: normalize(35),
+    marginVertical: normalize(10),
+  },
+  cancelButtonText: {
+    fontSize: normalize(12),
+    color: 'black',
+  },
+  confirmButton: {
+    width: '47%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: normalize(35),
+    marginVertical: normalize(10),
+  },
+  confirmButtonText: {
+    fontSize: normalize(12),
+    color: '#fff',
+    position: 'absolute',
+  },
+});

package/src/CustomComponents/CCalendar.js

@@ -0,0 +1,243 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Text, View, FlatList, TouchableOpacity, Dimensions, ActivityIndicator } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { normalize } from '../CommonStyle/componentStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+
+const CCalendar = () => {
+    const { width, height } = Dimensions.get('screen');
+    const flatlistRef = useRef();
+    const dividedWidth = width / 7;
+    const [data, setData] = useState();
+    const [refresh, setRefresh] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [showTable, setShowTable] = useState(false);
+    const [PichartVisibility, setPiechartVisibility] = useState(false);
+    const [footerData, setFooterData] = useState();
+    const formatedPieChart = [];
+    const formatedPieDisplayText = [];
+    const formatedPieColor = [];
+
+    const SumwithoutFS = [];
+    var PiechartSecondWOFV = []; //totalsum - firstvisitsum
+    var monthlysumResult = []; //totalsum - monthly
+    var monthlyColorCode = [];
+
+    const [monthTotal, setmonthTotal] = useState();
+    const [totalMonthChart, settotalMonthChart] = useState([]);
+    const [ColorCode, setColorCode] = useState([]);
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const d = new Date();
+    const [monthinno, setMonthInNo] = useState(d.getMonth());
+    let monthName = months[monthinno];
+    const [year, setYear] = useState(d.getFullYear());
+
+    useEffect(() => {
+        // getConsultation(Global.userData.hosuconsultant, year, monthinno)
+        getConsultation(1096, year, monthinno);
+    }, []);
+
+    function getConsultation(consultant, year, month) {
+        var monthReal = month + 1;
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhococonsultationhistoryemr ' + consultant + ',' + year + ',' + monthReal;
+
+        setIsLoading(true);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200 && response.data != null && response.data != undefined) {
+                    setIsLoading(false);
+                    setData(response.data.bookingdata);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Consultation not available,Please try again later',4);
+                }
+            });
+    }
+
+    function getApiPatientData(data) {
+        setIsLoading(true);
+        let buttonapi = APIURL + 'emr/emrcommonget/rnhococonsultationhistorypatient ' + Global.userData.hosuconsultant + ',' + JSON.stringify(data.date);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    data.patientdetails = response.data.patientdata;
+                    flatlistRef.current.scrollToEnd({ animating: true });
+                    setIsLoading(false);
+                }
+                else {
+                    setIsLoading(false);
+                    notifyMessage('Patient data not available',4);
+                }
+            });
+    }
+
+    function onPressPieChart() {
+        setPiechartVisibility(!PichartVisibility);
+        // flatlistRef.current.scrollToEnd({ animating: true });
+    }
+
+    function IncrementMonth() {
+        setFooterData(null);
+        if (monthinno != 11) {
+            if (monthinno != d.getMonth()) {
+                if (monthinno < 11) {
+                    setMonthInNo(monthinno + 1);
+                } else {
+                    setYear(year + 1);
+                    setMonthInNo(0);
+                }
+                getConsultation(Global.userData.hosuconsultant, year, monthinno + 1);
+            }
+        } else {
+            setMonthInNo(0);
+            setYear(year + 1);
+            getConsultation(Global.userData.hosuconsultant, year + 1, 0);
+        }
+    }
+
+    function DAYNAME(year, month) {
+        var date = new Date(year, month, 1);
+        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        return days[date.getDay()];
+    }
+
+    function DecrementMonth() {
+        if (monthinno != 0) {
+            setFooterData(null);
+            if (monthinno > 0) {
+                setMonthInNo(monthinno - 1);
+            } else {
+                setYear(year - 1);
+                setMonthInNo(11);
+            }
+            getConsultation(Global.userData.hosuconsultant, year, monthinno - 1);
+        } else {
+            setYear(year - 1);
+            setMonthInNo(11);
+            getConsultation(Global.userData.hosuconsultant, year - 1, 11);
+        }
+    }
+
+    return (
+        <View style={{}}>
+            {isLoading ?
+                <ActivityIndicator size={normalize(30)} style={{ marginTop: normalize(10) }} color="#d808c3" /> : null}
+            <View style={{ backgroundColor: 'transparent' }}>
+                <View style={{ flexDirection: 'row', alignSelf: 'center', alignItems: 'center', justifyContent: 'space-between', width: '50%' }}>
+                    <FontAwesome5 name="arrow-left" color="black" size={normalize(20)} onPress={() => DecrementMonth()} />
+                    <Text style={{ fontSize: normalize(16), color: 'black', paddingHorizontal: 10 }}>{monthName} {year}</Text>
+                    <FontAwesome5 name="arrow-right" color="black" size={normalize(20)} onPress={() => IncrementMonth()} />
+                </View>
+            </View>
+            <View style={{ flexDirection: 'row', height: normalize(20), alignItems: 'center', justifyContent: 'center' }}>
+                {['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'].map((week, i) => {
+                    return (
+                        <View key={i} style={{ width: dividedWidth, alignItems: 'center', borderWidth: 0.5 }}>
+                            <Text style={{ fontSize: normalize(12), fontWeight: 'bold', color: i == 0 ? 'red' : 'black' }}>{week}</Text>
+                        </View>);
+                })}
+            </View >
+            <FlatList
+                ref={flatlistRef}
+                data={data}
+                style={{ width: '100%', marginBottom: normalize(85) }}
+                renderItem={renderItem}
+                keyExtractor={(item) => item.displaytext}
+                numColumns={7}
+                ListFooterComponent={footerComponent}
+                ListFooterComponentStyle={{ width: width }}
+            />
+        </View>
+    );
+
+    function footerComponent() {
+        return (
+            <View style={{ marginBottom: 10 }}>
+                {footerData != undefined && footerData.data != undefined ?
+                    <View
+                        style={{ backgroundColor: '#fff', height: normalize(35), alignItems: 'center', justifyContent: 'space-evenly', flexDirection: 'row' }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', width: '50%', justifyContent: 'center' }}>
+                            <Icons.FontAwesome5 name={'calendar-day'} color={'black'} size={normalize(20)} />
+                            <Text style={{ fontWeight: 'bold', fontSize: normalize(15), color: 'black', paddingLeft: normalize(10) }}>
+                                {footerData.displaytext + '/' + monthName + '/' + year}
+                            </Text>
+                        </View>
+                    </View> : null}
+
+                {footerData != undefined && footerData.data != undefined ?
+                    <FlatList
+                        nestedScrollEnabled={true}
+                        data={footerData.data}
+                        style={{ width: width }}
+                        renderItem={renderFooterView}
+                        keyExtractor={(item, index) => 'key' + index}
+                        listKey={(item, index) => 'key' + index} /> : null}
+            </View>
+        );
+    }
+
+
+    function renderFooterView({ item }) {
+        return (
+            <View style={{}}>
+                <TouchableOpacity onPress={() => { item.expand = !item.expand, setRefresh(refresh + 1); }}
+                    style={{ flexDirection: 'row', backgroundColor: '#fff', alignItems: 'center', justifyContent: 'space-between', marginTop: 2, paddingHorizontal: 10 }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Icons.FontAwesome5 name={item.iconname != undefined ? item.iconname : 'file-alt'} color={'#164d8e'} size={normalize(13)} style={{ paddingRight: 10 }} />
+                        <Text style={{ fontSize: normalize(14), fontWeight: 'bold', color: '#164d8e', paddingVertical: normalize(3) }}>{item.bookingname}</Text>
+                    </View>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Icons.FontAwesome5 name={'rupee-sign'} color={'#164d8e'} size={normalize(15)} />
+                        <Text style={{ color: '#164d8e', fontWeight: 'bold', fontSize: normalize(18), paddingLeft: 10 }}>{item.amount != undefined ? item.amount : item.tokenarray != undefined && item.tokenarray.length > 0 ? item.tokenarray[0].amount : ''}</Text>
+                    </View>
+                </TouchableOpacity>
+                <View>
+                    <FlatList
+                        data={item.tokenarray}
+                        renderItem={(data) => renderTokens(data, footerData)}
+                        numColumns={4}
+                        style={{ width: '100%', paddingHorizontal: 20 }}
+                        contentContainerStyle={{ alignSelf: 'center' }}
+                        listKey={(item, index) => 'key' + index}
+                        keyExtractor={(item, index) => 'key' + index}
+                        initialNumToRender={10}
+                    />
+                </View>
+            </View>
+        );
+    }
+
+
+    function renderItem({ item }) {
+        return (
+            <TouchableOpacity style={{
+                width: dividedWidth, alignItems: 'center', paddingTop: 5,
+                borderWidth: 0.5, backgroundColor: item.data != undefined && item.data.length > 0 ? '#f4fcf7' : '#fff',
+            }}
+            disabled={true}
+            onPress={() => item.data != undefined && item.data.length > 0 ? getDateTokens(item) : (getDateTokens(item), notifyMessage('Sorry , No Tokens Found'))}
+            >
+                <View style={{
+                    alignItems: 'center', justifyContent: 'center',
+                }}>
+                    <Text style={{
+                        color: item.data != undefined && item.data.length > 0 ? 'green' : '#b6b5b7', fontSize: normalize(20), fontWeight: 'bold', textShadowColor: '#b6b5b7',
+                        textShadowOffset: { width: -1, height: 1 },
+                        textShadowRadius: 3,
+                    }}>{item.displaytext == 0 ? '' : item.displaytext}</Text>
+                </View>
+                <View style={{
+                    flexDirection: 'row', width: '100%', flex: 1, alignItems: 'center',
+                    justifyContent: 'space-between', flexWrap: 'wrap', paddingHorizontal: 0,
+                    paddingTop: normalize(5), paddingBottom: normalize(5),
+                }} />
+            </TouchableOpacity>
+        );
+    }
+};
+export default CCalendar;