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

package/src/Custom/CSignature.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Dimensions, Text, View, PermissionsAndroid, Platform } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import ReactNativeBlobUtil from 'rn-fetch-blob';
+// import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas';
+//import PhotoEditor from 'react-native-photo-editor';
+import DocumentPicker from 'react-native-document-picker';
+import { normalize } from '../CommonStyle/componentStyle';
+import { isPermitted, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+
+export default function CSignature(props) {
+
+    function fnIcon(text, icon, color) {
+        return (
+            <View style={{ width: Dimensions.get('window').width * 0.22, backgroundColor: Global.AppTheme.primary_color, marginHorizontal: normalize(6), marginVertical: normalize(5), flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderRadius: 10, paddingHorizontal: normalize(5), justifyContent: 'center' }}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                    <MaterialCommunityIcons
+                        name={icon}
+                        size={normalize(22)}
+                        color={color}
+                    />
+                    <Text
+                        adjustsFontSizeToFit
+                        style={{ marginHorizontal: normalize(5), color: '#ffffff', fontSize: normalize(10), fontWeight: 'bold', textAlign: 'center' }}
+                    >
+                        {text}
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+
+
+
+    const getResolvedPath = async (uri, filen) => {
+        const fileBase64 = await ReactNativeBlobUtil.fs.readFile(uri, 'base64');
+        const relativePath = ReactNativeBlobUtil.fs.dirs.CacheDir;
+        const fileName = `${filen}`;
+        const path = `${relativePath}/${fileName}`;
+        await ReactNativeBlobUtil.fs.writeFile(path, fileBase64, 'base64');
+        return { relativePath, fileName, path };
+    };
+
+    const fnUploadImage = async () => {
+
+        if (await isPermitted()) {
+            try {
+                const fileDetails = await DocumentPicker.pick({ type: [DocumentPicker.types.images] });
+                const { relativePath, fileName, path } = await getResolvedPath(fileDetails[0].uri, fileDetails[0].name);
+                let dataset = { fileid: 1, uri: 'file://' + path, filename: fileDetails[0].name + Date(), uritype: false };
+                fnEditor(dataset, path);
+            } catch (error) {
+                notifyMessage(DocumentPicker.isCancel(error) ? 'Canceled' : 'Unknown Error: ', 2);
+            }
+        }
+    };
+
+
+    const SaveDrawing = async (success, pathfile) => {
+
+        console.log('gygyyy');
+
+        if (await isPermitted()) {
+            try {
+                console.log('SaveDrawing inside');
+                var pathname = pathfile;
+                var NewPathName = pathname.slice(-12);
+                const { relativePath, fileName, path } = await getResolvedPath(pathfile, NewPathName);
+                let dataset = { fileid: 1, uri: 'file://' + path, filename: NewPathName + Date(), uritype: false };
+                fnEditor(dataset, path);
+            } catch (error) {
+                console.log('SaveDrawing outside');
+                notifyMessage(DocumentPicker.isCancel(error) ? 'Canceled' : 'Unknown Error: ' + JSON.stringify(error), 2);
+
+            }
+        }
+    };
+
+    function fnEditor(dataset, path) {
+        // Platform.OS != "ios" ?
+        //     PhotoEditor.Edit({
+        //         path: path, hiddenControls: ['sticker', 'save'],
+        //         onDone: () => { props.onsave(dataset) }
+        //     }) : props.onsave(dataset)
+    }
+
+    return (
+        <RNSketchCanvas
+            containerStyle={{ backgroundColor: '#ffffff71', flex: 1, borderWidth: 1, borderColor: '#a5a5a5', borderRadius: 10, marginHorizontal: normalize(5), marginVertical: normalize(5) }}
+            canvasStyle={{ backgroundColor: '#ffffff00', flex: 1 }}
+            defaultStrokeIndex={0}
+            defaultStrokeWidth={3}
+            closeComponent={fnIcon('Image', 'image', 'white')}
+            undoComponent={fnIcon('Undo', 'undo', 'white')}
+            clearComponent={fnIcon('Clear all', 'eraser', 'white')}
+            saveComponent={fnIcon('Save', 'content-save', 'white')}
+            onClosePressed={() => { fnUploadImage(); }}
+            savePreference={() => {
+                return {
+                    folder: ReactNativeBlobUtil.fs.dirs.CacheDir,
+                    filename: String(Math.ceil(Math.random() * 100000000)),
+                    transparent: false,
+                    imageType: 'png',
+                };
+            }}
+            onSketchSaved={(success, pathfile) => { SaveDrawing(success, pathfile); }}
+            onPathsChange={(pathsCount) => { }}
+        />
+    );
+
+}

package/src/Custom/CSliderMenu.js

@@ -0,0 +1,339 @@
+import React, { memo, useState, useContext } from 'react';
+import { Text, View, Image, TouchableOpacity, ScrollView, StyleSheet, Linking, Dimensions, Platform } from 'react-native';
+import styles, {
+    getOptionContainerStyle,
+    getOptionchildrenWrapperStyle,
+    getOptionHeaderContainer,
+}
+    from '../CommonStyle/optionListStyles';
+import { colors, fontWeight } from '../CommonStyle/commonStyle';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import RNExitApp from 'react-native-exit-app';
+//import { useNavigation } from '../Navigation/useNavigation';
+
+
+import { Global } from '../../../../../src/Common/Global';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import { APIURL, imageURL } from '../../../../../src/Common/apiConstants';
+import CNetworkStatus from '../CustomComponents/CNetworkStatus';
+import { isNU } from '../CommonStyle/ComponentFunctions';
+import { useNavigation } from '../Navigation/useNavigation';
+
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+import SDropDownNew from '../Components/SDropDownNew';
+
+
+function CSliderMenu(props) {
+
+    const isAndroid = Platform.OS === 'android';
+
+    const navigation = useNavigation();
+    const [refresh, setRefresh] = useState(0);
+    const { width, height } = Dimensions.get('window');
+    //const navigation = useNavigation();
+    var optionData = [
+        { optionname: 'Home', key: 1, iconname: 'home' },
+        // { optionname: 'Signature', key: 6, iconname: "pen" },
+        { optionname: 'Change Password', key: 2, iconname: 'key' },
+        // { optionname: 'Video Call', key: 3, iconname: "video" },
+        // { optionname: 'Create Notifcations', key: 9, iconname: "bell" },
+        // { optionname: 'Token Status', key: 12, iconname: "coins" },
+        // { optionname: 'Help', key: 4, iconname: "question-circle" },
+        // { optionname: 'Log', key: 10, iconname: "file" },
+        { optionname: 'Exit', key: 11, iconname: 'power-off' },
+        // { optionname: 'Report', key: 8, iconname: "file" },
+        // { optionname: 'Medications', key: 5, iconname: "file-prescription" },
+
+    ];
+    const OptionSelectNav = (data) => {
+        switch (data.key) {
+            case 1: navigation.navigate('Dashboard');
+                break;
+            case 2: navigation.navigate('ForgotPassword');
+                break;
+            case 4: navigation.navigate('HelpScreen');
+                break;
+            case 5:
+                Global.PatientDetails = null;
+                navigation.navigate('Medications');
+                // navigation.navigate('CalendarMedications')
+                break;
+            case 6:
+                Global.PatientDetails = null;
+                navigation.navigate('CSignatureScreen');
+                break;
+            case 7: Global.PatientDetails = null, navigation.navigate('MedicationsIP');
+                break;
+            case 8: Global.PatientDetails = null, navigation.navigate('Report');
+                break;
+            case 9: navigation.navigate('Admin', { type: 1 });
+                break;
+            case 10: navigation.navigate('Log');
+                break;
+            case 11: RNExitApp.exitApp();
+                break;
+            case 12: navigation.navigate('Admin', { type: 2 });
+                break;
+
+        }
+        props.visibility(false);
+    };
+
+    function getContainerStyle() {
+        return (
+            {
+                getOptionContainerStyle,
+                ...ComponentStyles.View_col_flexend,
+            }
+        );
+    }
+
+    const getChildContainer = () => {
+        return (
+            {
+                backgroundColor: '#fff', width: width * 0.75, flex: 1,
+            }
+        );
+    };
+    const getOptionBlock = () => {
+        return (
+            {
+                margin: width * 0.03,
+                flex: 1,
+            }
+        );
+    };
+    const getOptionSelectionContainer = () => {
+        return (
+            {
+                flexDirection: 'row',
+                flex: 1,
+                marginTop: height * 0.01,
+                marginBottom: height * 0.01,
+            }
+        );
+    };
+    return (
+        <CModalOverlay
+            visible={props.isShow}
+            onClose={() => props.visibility(false)}
+            closeOnTouchOutside
+            animationType="fadeInRight"
+            // containerStyle={[getOptionContainerStyle(), ComponentStyles.View_col_flexend]}
+            containerStyle={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                elevation: 999,
+                alignItems: 'flex-start',
+                margin: 0,
+                zIndex: 10000,
+                backgroundColor: 'rgba(0, 0, 0, 0.10)',
+                justifyContent: 'flex-start',
+                height: height,
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+                alignContent: 'flex-end',
+                alignItems: 'flex-end',
+            }}
+            animationDuration={900}
+            childrenWrapperStyle={{
+                backgroundColor: Global.AppTheme.primary_color,
+                width: width * 0.75,
+                height: height,
+                // margin: -20,
+            }
+                // getOptionchildrenWrapperStyle(width * 0.75, height)
+            }
+        >
+            <View style={{
+                backgroundColor: '#fff', width: width * 0.75, flex: 1,
+                borderWidth: 0,
+            }}>
+                <View style={{ backgroundColor: Global.AppTheme.primary_color }}>
+                    <View style={{
+                        // backgroundColor: colors.color_Header,
+                        flexDirection: 'row',
+                        // height: height * 0.10,
+                        alignItems: 'flex-start',
+                        borderWidth: 0,
+                    }}>
+                        <View style={{
+                            justifyContent: 'center',
+                            borderWidth: 0,
+                        }}>
+                            <Image style={{ borderWidth: 0.5, margin: normalize(4), borderColor: 'white', width: normalize(50), height: normalize(50), borderRadius: 1000, resizeMode: 'contain' }}
+                                source={{
+                                    uri: Global.userData.photo && Global.userData.photo != 'hisfiles/user/profileimage/user-blue.png' ? imageURL + Global.userData.photo : 'https://i.ibb.co/NW42Gjj/user.png',
+                                }}
+                            />
+                        </View>
+                        <View style={{
+                            flex: 1,
+                            justifyContent: 'center',
+                            borderWidth: 0,
+                        }}>
+                            <Text style={styles.usernameStyle}>
+                                {Global.userData.username}
+                            </Text>
+                            <Text style={styles.departmeNameStyle}>
+                                {Global.userData.designation} - {Global.userData.department}
+                            </Text>
+                            <Text style={styles.departmeNameStyle}>
+                                {Global.userData.qualification}
+                            </Text>
+                        </View>
+                        <TouchableOpacity style={{ borderWidth: 0, marginRight: isAndroid ? normalize(15) : normalize(25) }}
+                            onPress={() => { props.visibility(false), window.close(); }}
+                        >
+                            <Icons.FontAwesome name={'power-off'} color={'red'} size={normalize(17)} style={{ backgroundColor: '#fff', padding: normalize(7), margin: normalize(4), borderRadius: 60 }} />
+                        </TouchableOpacity>
+
+                    </View>
+
+                    <View style={{ width: '100%' }}>
+                        <View style={{ width: '50%' }}>
+                            <SDropDownNew
+                                // displaytext={'Payment Type'}
+                                // custompositiontextviewstyle={{
+                                //     position: 'absolute',
+                                //     top: normalize(-5),
+                                //     left: normalize(7),
+                                //     flexDirection: 'row',
+                                //     alignItems: 'center',
+                                //     backgroundColor: 'white',
+                                // }}
+                                // custompositiontextstyle={{
+                                //     color: Global.AppTheme.primary_color,
+                                //     fontSize: normalize(8),
+                                //     lineHeight: normalize(8),
+                                //     textAlign: 'left',
+                                //     fontWeight: 'normal'
+                                // }}
+                                placeholder={'WARD'}
+                                overlay={false}
+                                setoverlay={(val) => {
+
+                                }}
+                                heading={'SELECT PAYMENT TYPE'}
+                                fastselection={true}
+                                multiselect={false}
+                                buttonstyle={{
+                                    borderWidth: 0.5,
+                                    borderColor: 'lightgrey',
+                                    borderRadius: 5,
+                                    alignItems: 'center',
+                                    justifyContent: 'flex-start',
+                                    height: normalize(30),
+                                    flexDirection: 'row',
+                                    backgroundColor: 'white',
+                                    elevation: 3,
+                                    width: '100%',
+                                    margin: '1%',
+                                    // marginVertical: '4%'
+                                }}
+                                textview={true}
+                                textstyle={{
+                                    width: '80%',
+                                    fontSize: normalize(12),
+                                    fontWeight: isNU(Global.userData) && isNU(Global.userData.wardname) ? 'bold' : 'normal',
+                                    color: isNU(Global.userData) && isNU(Global.userData.wardname) ? '#000000' : 'lightgrey',
+                                    alignItems: 'center',
+                                    textAlign: 'left',
+                                    justifyContent: 'center',
+                                }}
+                                icon={{ 'icongroup': 5, 'name': 'bed', 'size': normalize(15) }}
+                                iconstyle={{
+                                    borderWidth: 0,
+                                    marginHorizontal: normalize(7),
+                                    color: Global.AppTheme.primary_color,
+                                }}
+                                data={isNU(Global.userData) && isNU(Global.userData.wardname) ? Global.userData.wardname : ''}
+                                overlaystyle={{
+                                    borderRadius: 20,
+                                    height: Dimensions.get('window').height * 0.6,
+                                    borderWidth: 5,
+                                    borderColor: '#4497ea',
+                                }}
+                                dropdownapi={APIURL + 'insuranceadvanceget/emrcommonget/rnladropdown 53'}
+                                // dropdownapi={APIURL + 'insuranceadvanceget/emrcommonget/rnladropdown 36'}
+                                natureoption={false}
+                                arraycallback={value => {
+                                    Global.userData.wardname = value.displayvalue;
+                                    Global.userData.wardcode = value.datavalue;
+                                    setRefresh(refresh + 1);
+                                    // updateTwo('paymenttype', value.datavalue, 'paymenttypename', value.displayvalue)
+                                }}
+                            />
+                        </View>
+                    </View>
+                </View>
+                {/**Header Block ends Here */}
+                {/**Options Block Starts Here */}
+                {/* <View style={{ flex: 1, width: '100%' }}> */}
+                {/* <ScrollView style={{ borderWidth: 1,flex:1 }}> */}
+                <View style={{ borderWidth: 0, flex: 1 }}>
+                    {optionData.map((block, i) => {
+                        return (
+                            <View key={i} style={{ borderWidth: 0 }}>
+                                <TouchableOpacity
+                                    onPress={() => OptionSelectNav(block)}
+                                    // style={getOptionSelectionContainer()}
+                                    style={{ flexDirection: 'row', margin: normalize(5) }}
+                                >
+                                    <View style={layoutstyles.option_icon_container}>
+                                        <FontAwesome5 name={block.iconname} color={Global.AppTheme.primary_color} size={25} />
+                                    </View>
+                                    <View
+                                        style={layoutstyles.option_text_container}
+                                    >
+                                        <Text
+                                            numberOfLines={2}
+                                            style={{ color: Global.AppTheme.primary_color, fontWeight: 'bold' }}>
+                                            {block.optionname}
+                                        </Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        );
+                    })}
+                </View>
+                {/* </ScrollView> */}
+
+                {/* </View> */}
+
+
+                <View style={{ borderWidth: 0, flex: 1, backgroundColor: '#fff', bottom: normalize(-15) }}>
+                    <Image style={{ flex: 1, marginTop: normalize(0), resizeMode: 'contain' }}
+                        // source={{ uri: 'https://keralaclassify.b-cdn.net/wp-content/uploads/2020/05/amala-1-kerala-classify-preset.jpg' }}
+                        source={{ uri: 'https://us.123rf.com/450wm/elnurss/elnurss1809/elnurss180902306/108495744-medical-care-vector-icon.jpg?ver=6' }}
+                    />
+                </View>
+            </View>
+        </CModalOverlay>
+    );
+}
+const layoutstyles = StyleSheet.create({
+    option_text: {
+        fontSize: normalize(13),
+        fontWeight: fontWeight.fontWeight_900,
+        color: colors.color_componentText,
+    },
+    option_text_container: {
+        justifyContent: 'center',
+        flex: 6,
+    },
+    option_icon_container: {
+        width: 50,
+        paddingLeft: 5,
+        alignItems: 'baseline',
+        justifyContent: 'center',
+    },
+    option_icon_style: {
+        width: 35,
+        height: 35,
+        resizeMode: 'contain',
+    },
+});
+export default memo(CSliderMenu);

package/src/Custom/CSupplierCard.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+
+const CSupplierCard = ({ data }) => {
+  return (
+    <View
+      style={{
+        backgroundColor: '#fff',
+        padding: 10,
+        borderRadius: 10,
+        shadowColor: '#000',
+        shadowOpacity: 0.1,
+        shadowRadius: 5,
+        elevation: 3,
+        marginVertical: 5,
+        marginHorizontal: 1,
+        borderLeftWidth: 3,
+        borderLeftColor: '#094485',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+      }}
+    >
+      <View style={{ width: '75%' }}>
+        {/* Invoice No */}
+        {data?.invoiceno && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: normalize(5) }}>
+            <Icons.FontAwesome5 name="file-invoice" size={normalize(12)} color="#094485" />
+            <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#000', marginLeft: normalize(5) }}>
+              {data.invoiceno}
+            </Text>
+          </View>
+        )}
+
+        {/* Email */}
+        {/* {data?.email && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: normalize(5) }}>
+            <Icons.FontAwesome5 name="envelope" size={normalize(12)} color="#094485" />
+            <Text style={{ fontSize: 14, fontWeight: '500', color: '#333', marginLeft: normalize(5) }}>
+              {data.email}
+            </Text>
+          </View>
+        )} */}
+
+        {/* Company Address */}
+        {data?.companyaddress && (
+          <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginBottom: normalize(5) }}>
+            <Icons.FontAwesome5 name="map-marker-alt" size={normalize(12)} color="#094485" />
+            <Text style={{ fontSize: 12, fontWeight: '500', color: '#333', marginLeft: normalize(5), maxWidth: '100%' }}>
+              {data.companyaddress}
+            </Text>
+          </View>
+        )}
+
+        {/* GST & Phone */}
+        {/* {data?.gstno && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: normalize(5) }}>
+            <Icons.FontAwesome5 name="gavel" size={normalize(12)} color="#094485" />
+            <Text style={{ fontSize: 12, fontWeight: '500', color: '#333', marginLeft: normalize(5) }}>
+              {data.gstno}
+            </Text>
+          </View>
+        )} */}
+        {/* {data?.phoneno && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: normalize(5) }}>
+            <Icons.FontAwesome5 name="phone" size={normalize(12)} color="#094485" />
+            <Text style={{ fontSize: 12, fontWeight: '500', color: '#333', marginLeft: normalize(5) }}>
+              {data.phoneno}
+            </Text>
+          </View>
+        )} */}
+      </View>
+
+      {/* Grade Circle */}
+      <View>
+        {data?.grade && (
+          <View
+            style={{
+              height: 50,
+              width: 50,
+              backgroundColor: 'lightgrey',
+              borderRadius: 30,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#094485' }}>
+              {data.grade}
+            </Text>
+            {/* <Text style={{ fontSize: 12 }}>Grade</Text> */}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default CSupplierCard;