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

package/src/StaticComponents/SSearch.js

@@ -0,0 +1,438 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, TextInput, TouchableOpacity, FlatList, Image, Dimensions, StyleSheet, Keyboard } from 'react-native';
+import { APIURL } from '../Common/apiConstants';
+import { Global } from '../Common/Global';
+import Icons from '../Common/Icons';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import { ArrayCheck, ValueCheck, getLoading, isNU, isNUQZ, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+import CAwesomeButton from '../CustomComponents/CAwesomeButton';
+import CCommentOverlay from '../CustomComponents/CCommentOverlay';
+import Loader from '../Custom/Loader';
+
+export default function SSearch(props) {
+    const [dropdowndata, setDropDownData] = useState([]);
+    const [CommentOverlay, setCommentOverlay] = useState(false);
+    const [CommentOverlayData, setCommentOverlayData] = useState({
+        'code': 0,
+        'displaytext': '',
+        'displayheading': '',
+    });
+    const textInputRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [refresh, setRefresh] = useState(0);
+
+    useEffect(() => {
+        ValueCheck(props.editable) ? FetchDropdownList() : FetchList();
+    }, []);
+
+    function FetchDropdownList() {
+        let buttonapi = APIURL + props.dropdownapi;
+        console.log('Searchbarlink___________________', 'get', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.data.data != null && response.data.data != undefined) {
+                    setDropDownData(response.data.data);
+                }
+                else {
+                    setDropDownData([]);
+                }
+            });
+    }
+
+    function FetchList() {
+        setDropDownData(props.dropdownarray);
+    }
+
+    function saveDataConsultation(blockData, textdata, comments) {
+        console.log('saveDataConsultation', blockData, textdata);
+
+        setIsLoading(true);
+        let output = {
+            'groups': {
+                'procedurename': 'hosumrconsultationactivity1',
+                'hosuconsultant': Global.userData.hosuconsultant,
+                'consultationstatus': blockData,
+                'consultationremarks': isNU(comments) ? comments : '',
+
+            },
+        };
+
+        let buttonapi = APIURL + 'commondelete/RnCommonDelete';
+        console.log('output', output, buttonapi);
+
+        NetworkServiceCall('post', buttonapi, output)
+            .then(function (response) {
+                console.log('response of saved.....', JSON.stringify(response));
+                if (response.httpstatus == 200) {
+                    Global.userData.consultationstatus = blockData; //started
+                    setRefresh(refresh + 1);
+                    props.onRefresh(true);
+                    notifyMessage(textdata);
+                    setIsLoading(false);
+                }
+                else {
+                    notifyMessage('Data not saved', 2);
+                    setIsLoading(false);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+    }
+
+    return (
+        <View style={{ marginTop: normalize(3), borderWidth: 0 }}>
+
+            {ArrayCheck(dropdowndata) ?
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly',borderWidth:0 }}>
+                    {(dropdowndata).map((item, i) => {
+                        return (
+                            <TouchableOpacity key={i}
+                                style={{
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    borderRadius: 10,
+                                    backgroundColor: '#fff', // item.selected ? '#d7ffbc' : '#fff',
+                                    elevation: 2,
+                                    borderColor: 'lightblue',
+                                    borderWidth: 0.5,
+                                    padding: normalize(3),
+                                    paddingHorizontal: normalize(5),
+                                    marginLeft: normalize(3),
+                                    marginTop: normalize(3),
+                                    marginBottom: normalize(3),
+                                }}
+                                onPress={() => getSelection(item)}
+                            >
+                                <Icons.FontAwesome
+                                    name={ValueCheck(item.iconname) ? item.iconname : 'dot-circle-o'}
+                                    color={Global.AppTheme.primary_color} size={normalize(20)}
+                                    style={{
+                                        paddingRight: normalize(4),
+                                        paddingLeft: normalize(4),
+                                    }}
+                                />
+                                <Text adjustsFontSizeToFit style={{
+                                    fontSize: normalize(7),
+                                    fontWeight: item.selected ? '800' : 'normal',
+                                    color: Global.AppTheme.primary_color,
+                                }}>
+                                    {item.displayvalue}
+                                </Text>
+                            </TouchableOpacity>
+                        );
+                    })}
+                </View> : null}
+
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+
+                {props.consultationbuttons ?
+                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                        <CAwesomeButton
+                            callback={(k) => {
+                                if (!isNUQZ(Global.userData.consultationstatus)) { //start
+                                    saveDataConsultation(1, 'Consultation Started.');
+                                }
+                                else if (Global.userData.consultationstatus == 1) { //start
+                                    setCommentOverlayData(
+                                        {
+                                            'code': 2,
+                                            'displaytext': 'Consultation Paused',
+                                            'displayheading': 'PAUSE REASON',
+                                        });
+                                    setCommentOverlay(true);
+                                }
+                                else if (Global.userData.consultationstatus == 2) {
+                                    saveDataConsultation(3, 'Consultation Resumed.');
+                                }
+                                else if (Global.userData.consultationstatus == 3) {
+                                    setCommentOverlayData(
+                                        {
+                                            'code': 2,
+                                            'displaytext': 'Consultation Paused',
+                                            'displayheading': 'PAUSE REASON',
+                                        });
+                                    setCommentOverlay(true);
+                                }
+                                else if (Global.userData.consultationstatus == 4) {
+                                    saveDataConsultation(1, 'Consultation Started.');
+                                }
+                            }}
+                            buttonstyle={{
+                                'borderRadius': 100,
+                                'borderWidth': 0.5,
+                                'height': normalize(30),
+                                'width': normalize(29),
+                                'backgroundColor': (Global.userData.consultationstatus == 0) ? 'darkgreen' : (Global.userData.consultationstatus == 1) ? '#ff8119' : (Global.userData.consultationstatus == 2) ? 'darkblue' : (Global.userData.consultationstatus == 3) ? '#ff8119' : 'green',
+                                // 'backgroundColor': ValueCheck(blockData.item.bookingstatus) ? "#7a1241" : Global.AppTheme.primary_color,
+                                'paddingHorizontal': 0,
+                                'raiseLevel': 3,
+                                'paddingBottom': 0,
+                                'borderColor': 'grey',
+                                'paddingTop': 0,
+                                'style': {
+                                    padding: 0,
+                                    marginHorizontal: 2,
+                                },
+                            }}
+                            viewstyle={{
+                                borderWidth: 0,
+                                borderRadius: 0,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}
+                            icon={{
+                                'icongroup': 5,
+                                'name': 'user-md',
+                                'color': 'white',
+                                'size': normalize(18),
+                                'style': {
+                                    textAlign: 'center',
+                                },
+                            }}
+                            // text={{
+                            //     fontSize: normalize(6),
+                            //     fontWeight: 'bold',
+                            //     color: 'white',
+                            //     textAlign: 'center',
+                            //     textShadowColor: 'black',
+                            //     textShadowRadius: 1,
+                            //     textShadowOffset: { width: 1, height: 1 },
+                            // }}
+                            displaytext={'start'}
+                        />
+                        <Text style={{ fontSize: normalize(8), color: 'black', fontWeight: 'bold' }} >{(Global.userData.consultationstatus == 0) ? 'START' : (Global.userData.consultationstatus == 1) ? 'PAUSE' : (Global.userData.consultationstatus == 2) ? 'RESUME' : (Global.userData.consultationstatus == 3) ? 'PAUSE' : 'START'}</Text>
+                    </View>
+                    : null}
+
+                {ValueCheck(props.onChangeText) ? <View
+                    style={{
+                        flexDirection: 'row',
+                        borderWidth: 0,
+                        borderColor: 'black',
+                        justifyContent: 'flex-start',
+                        alignItems: 'flex-start',
+                        borderRadius: 50,
+                        width: props.consultationbuttons ? '65%' : ValueCheck(props.onSearch) ? '85%' : '95%',
+                        marginHorizontal: normalize(5),
+                        marginBottom: Dimensions.get('window').height * 0.003,
+                        height: normalize(35),
+                        backgroundColor: '#f1f3f6',
+                        marginTop: 0,
+                        padding: 5,
+                        alignItems: 'center',
+                    }} >
+
+                    <View style={{ flex: 1, paddingLeft: '1%', width: '70%' }}>
+                        <TextInput
+                            ref={textInputRef}
+                            style={{
+                                color: 'black',
+                                width: '100%',
+                                marginLeft: '1%',
+                                marginRight: '1%',
+                                fontWeight: 'bold',
+                                fontSize: normalize(18),
+                                textAlign: 'justify',
+                                padding: 0, height: '100%', marginBottom: -(Dimensions.get('window').height * 0.003),
+                            }}
+                            editable={true}
+                            blurOnSubmit={true}
+                            keyboardType="default"
+                            placeholder={'Search...'}
+                            placeholderTextColor={'lightblue'}
+                            autoCapitalize={'characters'}
+                            {...props}
+                        />
+                    </View>
+                    {/* <TouchableOpacity
+                        onPress={() => getVisibility()}
+                        // hitSlop={{ right: 5, left: 5, top: 5, bottom: 5 }}
+                        style={{ borderWidth: 0, marginRight: normalize(5) }}>
+                        <Icons.MaterialCommunityIcons name="close" color={Global.AppTheme.primary_color} size={normalize(20)} />
+                    </TouchableOpacity> */}
+                    {ValueCheck(props.onBarCodeScan) ?
+                        <View style={{
+                            borderWidth: 0,
+                            paddingRight: '1%', alignItems: 'flex-end',
+                        }}>
+                            <TouchableOpacity style={{
+                                width: '80%', alignItems: 'flex-end',
+                            }}
+                                onPress={() => ValueCheck(props.onBarCodeScan) ? props.onBarCodeScan(true) : null}>
+                                <Image style={{ width: 30, height: 32 }}
+                                    source={{uri: `${APIURL}file/getCommonFile/image/barcode2.png`}}
+                                />
+                            </TouchableOpacity>
+                        </View> : null}
+
+                </View> : null}
+
+                {ValueCheck(props.onSearch) ?
+                    <TouchableOpacity style={{}}
+                        onPress={() => ValueCheck(props.onSearch) ? props.onSearch(true) : null}
+                    >
+                        <Icons.FontAwesome5 name={'search'} color={'black'} size={normalize(23)} />
+                    </TouchableOpacity> : null}
+
+                {props.consultationbuttons ?
+                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                        <CAwesomeButton
+                            callback={(k) => {
+                                console.log('CAwesomeButton completed');
+                                setCommentOverlayData(
+                                    {
+                                        'code': 4,
+                                        'displaytext': 'Consultation Completed',
+                                        'displayheading': 'COMPLETION REASON',
+                                    });
+                                setCommentOverlay(true);
+                            }}
+                            buttonstyle={{
+                                'borderRadius': 100,
+                                'borderWidth': 0.5,
+                                'height': normalize(30),
+                                'width': normalize(29),
+                                'backgroundColor': 'darkred',
+                                // 'backgroundColor': ValueCheck(blockData.item.bookingstatus) ? "#7a1241" : Global.AppTheme.primary_color,
+                                'paddingHorizontal': 0,
+                                'raiseLevel': 3,
+                                'paddingBottom': 0,
+                                'borderColor': 'grey',
+                                'paddingTop': 0,
+                                'style': {
+                                    padding: 0,
+                                    marginHorizontal: 2,
+                                },
+                            }}
+                            viewstyle={{
+                                borderWidth: 0,
+                                borderRadius: 0,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}
+                            icon={{
+                                'icongroup': 3,
+                                'name': 'account-multiple-check',
+                                'color': 'white',
+                                'size': normalize(19),
+                                'style': {
+                                    textAlign: 'center',
+                                },
+                            }}
+                            // text={{
+                            //     fontSize: normalize(6),
+                            //     fontWeight: 'bold',
+                            //     color: 'white',
+                            //     textAlign: 'center',
+                            //     textShadowColor: 'black',
+                            //     textShadowRadius: 1,
+                            //     textShadowOffset: { width: 1, height: 1 },
+                            // }}
+                            displaytext={'COMPLETE'}
+                        />
+                        <Text style={{ fontSize: normalize(8), color: 'black', fontWeight: 'bold' }}>COMPLETE</Text>
+                    </View>
+                    : null}
+            </View>
+            {CommentOverlay && isNU(CommentOverlayData) && isNU(CommentOverlayData.displaytext) ?
+                <CCommentOverlay
+                    disabled={false}
+                    icon={{
+                        'name': 'badge-account',
+                        'icongroup': 3,
+                        'size': normalize(15),
+                        'style': {
+                            marginHorizontal: normalize(10),
+                        },
+                    }}
+                    footericon={{
+                        'name': 'user-md',
+                        'icongroup': 5,
+                        'color': Global.AppTheme.primary_color,
+                        'size': normalize(25),
+                        'style': {
+                            marginHorizontal: normalize(10),
+                        },
+                    }}
+                    footerbuttontext={'SAVE'}
+                    heading={isNU(CommentOverlayData) && isNU(CommentOverlayData.displayheading) ? CommentOverlayData.displayheading : ''}
+                    overlaystyle={{
+                        borderRadius: 10,
+                        height: Dimensions.get('window').height * 0.38,
+                        borderWidth: 0,
+                        borderColor: 'darkblue',
+                        alignSelf: 'center',
+                        width: Dimensions.get('screen').width * 1,
+                        alignItems: 'center',
+                        justifyContent: 'flex-start',
+                        padding: 0,
+                        backgroundColor: 'transparent',
+                        position: 'absolute',
+                        bottom: 0,
+
+                        // position: 'absolute',
+                        // bottom: 0,
+                        // top: Dimensions.get('screen').height * 0.5,
+                        // width: Dimensions.get('screen').width,
+                        // borderRadius: 20,
+                        // borderWidth: 2,
+                        // borderColor: '#e0e0e0',
+                        // paddingHorizontal: normalize(5),
+                    }}
+                    data={''}
+                    callback={val => {
+                        // console.log('callback from overlay');
+
+                    }}
+                    onsavecallback={val => {
+                        setCommentOverlay(false);
+                        saveDataConsultation(CommentOverlayData.code, CommentOverlayData.displaytext, val);
+                        // console.log('callback from overlay');
+
+                    }}
+
+                    OverlayClose={val => {
+                        console.log('callback from OverlayClose');
+                        setCommentOverlay(false);
+                    }}
+
+                />
+
+                : null}
+            {isLoading ? <Loader displaytext={true} /> : null}
+        </View >
+    );
+
+    function getVisibility() {
+        if (ArrayCheck(dropdowndata)) {
+            dropdowndata.map((item) => item.selected = false);
+            Keyboard.dismiss();
+        }
+        setRefresh(refresh + 1);
+        ValueCheck(props.visibility) ? props.visibility(false) : null;
+    }
+
+    function getSelection(params) {
+        if (ArrayCheck(dropdowndata)) {
+            dropdowndata.map((item) => item.selected = false);
+        }
+        params.selected = !params.selected;
+        ValueCheck(props.onChangeData) ? props.onChangeData(params) : null;
+        if (textInputRef.current) {
+            textInputRef.current.focus();
+        }
+        setRefresh(refresh + 1);
+    }
+}
+
+const styles = StyleSheet.create({
+    barcode_icon_view: {
+        paddingRight: '1%', width: '20%', alignItems: 'flex-end',
+    },
+    barcode_icon_inner_view: {
+        width: '80%', alignItems: 'flex-end',
+    },
+    barcode_icon: {
+        width: 30, height: 32,
+    },
+});

package/src/StaticComponents/SSearchBar.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { TextInput, View, StyleSheet, Image,TouchableOpacity } from 'react-native';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import ComponentStyles from '../CommonStyle/componentStyle';
+
+const SSearchBar = (props) => {
+    const [localSearchData, setLocalSearchData] = React.useState('');
+    return (
+        <View
+            style={[ComponentStyles.searchTextbox_View,
+            layoutstyles.overlay_searchTextbox_View,
+            ]}
+        >
+            <View style={layoutstyles.textinput_view}>
+                <TextInput
+                    style={[ComponentStyles.searchTextbox]}
+                    editable={true}
+                    autoCapitalize={'characters'}
+                    keyboardType={'default'}
+                    placeholder="Search"
+                    value={localSearchData}
+                    onChangeText={(text) => {
+                        setLocalSearchData(text);
+                        props.onChangeText(text);
+                    }}
+                />
+            </View>
+
+            <TouchableOpacity
+                disabled={ValueCheck(props.callBack) ? false : true}
+                onPress={() => props.callBack(true)} >
+                <Image style={[ComponentStyles.searchIcon]}
+                    source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                />
+            </TouchableOpacity>
+
+        </View>
+    );
+};
+export default SSearchBar;
+
+const layoutstyles = StyleSheet.create({
+    overlay_searchTextbox_View: {
+        width: '93%',
+        alignSelf: 'center',
+        justifyContent: 'center',
+
+    },
+    textinput_view: {
+        flex: 1,
+        paddingLeft: '1%',
+    },
+});