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

package/src/HOC/HNatureHeading.js

@@ -0,0 +1,402 @@
+import React, { memo, useState } from 'react';
+import { View, TouchableOpacity, Text, FlatList, ScrollView } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { normalize } from '../CommonStyle/componentStyle';
+import CText from '../CustomComponents/CText';
+import HOCIcons from './HOCIcons';
+import { Global } from '../Common/Global';
+import  { CButtonShadow,isBNUL, isNU, isNUQ } from '../CommonStyle/ComponentFunctions';
+import HShadowButton from './HShadowButton';
+import HMoreButton from './HMoreButton';
+
+function HNatureHeading(props) {
+
+
+    const deletebutton = 5;
+    const notebutton = 6;
+    const instructionbutton = 7;
+    const commentbutton = 8;
+    const commentbutton2 = 9;
+
+    const imagebutton = 3;
+    const videobutton = 3;
+    const audiobutton = 3;
+    const documentbutton = 3;
+
+
+    const [showButtons, setShowButtons] = useState({
+        'mediabuttons': false,
+        'detailbuttons': false,
+    });
+
+    const styles = props.styles != undefined ? props.styles : {
+        'iconname': 'file',
+        'bgcolor': '#f2efef',
+        'iconsize': 18,
+        'iconcolor': 'black',
+        'displaytext': 'Testing',
+        'textsize': 15,
+        'textcolor': 'darkblue',
+    };
+
+    function CheckDeleteButton(array) { //delete button
+
+        let prevcodearray = array.filter((i, k) => { return i.buttonflag == deletebutton ? { ...i } : undefined; });
+        let prevcode = isBNUL(prevcodearray) ? prevcodearray[0] : false;
+        return prevcode;
+
+    }
+
+
+    function groupMediaIcons(array) { // image video audio
+
+        let prevcodearray = array.filter((i, k) => { return (i.buttonflag == imagebutton || i.buttonflag == videobutton || i.buttonflag == audiobutton || i.buttonflag == documentbutton) ? { ...i } : undefined; });
+        let prevcode = isBNUL(prevcodearray) ? prevcodearray : [];
+        return prevcode;
+
+    }
+
+    function groupEntryIcons(array) { // notes instructions comments
+
+        let prevcodearray = array.filter((i, k) => { return (i.buttonflag == notebutton || i.buttonflag == instructionbutton || i.buttonflag == commentbutton || i.buttonflag == commentbutton2) ? { ...i } : undefined; });
+        let prevcode = isBNUL(prevcodearray) ? prevcodearray : [];
+        return prevcode;
+
+    }
+
+    function renderList(val) {
+
+        return (
+            <HShadowButton
+                useicon={true}
+                // usetext={true}
+                buttonstyle={{
+                    margin: normalize(4),
+                    borderLeftWidth: 0,
+                    borderBottomWidth: 0,
+                    borderRadius: 5,
+                    borderWidth: 0,
+                    borderColor: Global.AppTheme.primary_color,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'white',
+                    height: normalize(20),
+                    width: normalize(20),
+                    ...CButtonShadow(),
+                }}
+                iconcolor={Global.AppTheme.primary_color}
+                iconname={isNU(val.iconname) ? val.iconname : 'file-alt'}
+                iconsize={normalize(15)}
+                iconstyle={{textAlign:'center'}}
+                displaytext={isNUQ(val.name) ? val.name : null}
+                buttonCallback={() => {
+                    props.moreCallBack(val);
+                }}
+                textstyle={{
+                    color: Global.AppTheme.primary_color,
+                    fontSize: normalize(7),
+                    textAlign: 'center',
+                }}
+            />
+        );
+
+    }
+
+    return (
+        <View style={{
+            // backgroundColor: styles.bgcolor != undefined ? styles.bgcolor : '#f2efef',
+        }}>
+            <TouchableOpacity
+                onPress={() => props.callBack(true)}
+                style={{
+                    // backgroundColor: styles.bgcolor != undefined ? styles.bgcolor : '#f2efef',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    // paddingVertical: normalize(3)
+                }}>
+                <TouchableOpacity
+                    onPress={() => props.Expand != undefined ? props.Expand(1) : null}
+                    disabled={props.Expand != undefined ? false : true}
+                    style={{
+                        width: normalize(30),
+                        alignItems: 'center',
+                    }}
+                >
+                    <FontAwesome5 name={styles.iconname} color={styles.iconcolor}
+                        size={normalize(styles.iconsize)} />
+                </TouchableOpacity>
+                <Text
+                    numberOfLines={1}
+                    adjustsFontSizeToFit={true}
+                    style={{
+                        flex: 1,
+                        borderWidth: 0,
+                        textShadowRadius: 2,
+                        fontSize: normalize(styles.textsize),
+                        fontWeight: 'bold',
+                        color: styles.textcolor,
+                    }}>
+                    {styles.displaytext}
+                </Text>
+                {isBNUL(props.moreButtonArray) ?
+                    <HMoreButton
+                        styles={{
+                            'iconname': 'dots-vertical',
+                            'iconsize': 23,
+                            'iconcolor': Global.AppTheme.primary_color,
+                            'textsize': 9,
+                            'textcolor': Global.AppTheme.primary_color,
+                        }}
+                        moreButtonArray={props.moreButtonArray}
+                        // callBack={val => (val == undefined ? null : getHeaderMoreButtonPress(val, item))} />
+                        callBack={val => (val == undefined ? null :
+                            // getSelection(val, item, index)
+                            props.moreCallBack(val)
+                        )}
+                    />
+                    : null}
+                {isBNUL(props.moreButtonArray) && CheckDeleteButton(props.moreButtonArray) ?
+                    <View style={{ borderWidth: 0 }}>
+                        <HShadowButton // DELETE BUTTON
+                            useicon={true}
+                            // usetext={true}
+                            buttonstyle={{
+                                margin: normalize(2),
+                                padding: normalize(2),
+                                borderLeftWidth: 0,
+                                borderBottomWidth: 0,
+                                borderRadius: 5,
+                                borderWidth: 0,
+                                borderColor: Global.AppTheme.primary_color,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                backgroundColor: 'white',
+                                height: normalize(20),
+                                width: normalize(20),
+                                ...CButtonShadow(),
+                            }}
+                            iconcolor={'#bb3030'}
+                            iconname={isNU(CheckDeleteButton(props.moreButtonArray).iconname) ? CheckDeleteButton(props.moreButtonArray).iconname : 'file-alt'}
+                            iconsize={normalize(15)}
+                            textstyle={{
+                                color: Global.AppTheme.primary_color,
+                                fontSize: normalize(5),
+                                textAlign: 'center',
+                            }}
+                            displaytext={isNUQ(CheckDeleteButton(props.moreButtonArray).name) ? CheckDeleteButton(props.moreButtonArray).name : null}
+                            buttonCallback={() => {
+                                props.moreCallBack(CheckDeleteButton(props.moreButtonArray));
+                            }}
+                        />
+                    </View>
+                    : null}
+
+            </TouchableOpacity>
+            {isBNUL(props.moreButtonArray) ?
+                <ScrollView
+                    showsHorizontalScrollIndicator={false}
+                    showsVerticalScrollIndicator={false}
+                    horizontal={true}
+                >
+                    <View style={{ flexDirection: 'row', marginVertical: normalize(4) }}>
+                        {props.moreButtonArray.map((val) => {
+                            return val.buttonflag == deletebutton || // DELETE BUTTON
+                                val.buttonflag == notebutton ||  // NOTES
+                                val.buttonflag == instructionbutton || // INSTRUCTIONS
+                                val.buttonflag == commentbutton || // COMMENTS
+                                val.buttonflag == commentbutton2 || // COMMENTS 2
+                                val.buttonflag == imagebutton || // IMAGE
+                                val.buttonflag == videobutton || // VIDEO
+                                val.buttonflag == audiobutton || // AUDIO
+                                val.buttonflag == documentbutton  // DOCUMENTS
+                                ? null : (
+                                    renderList(val)
+                                );
+                        })}
+                        {isBNUL(groupMediaIcons(props.moreButtonArray)) ? // image,audio, video, document
+
+                            <TouchableOpacity
+                                onPress={() => {
+                                    setShowButtons(prevstate => {
+                                        return {
+                                            ...prevstate,
+                                            mediabuttons: !prevstate.mediabuttons,
+                                        };
+                                    });
+                                }}
+                                style={{
+                                    borderWidth: 0,
+                                    flexDirection: 'row',
+                                    margin: normalize(4),
+                                    padding: normalize(4),
+                                    borderLeftWidth: 0,
+                                    borderBottomWidth: 0,
+                                    borderRadius: 5,
+                                    borderColor: Global.AppTheme.primary_color,
+                                    justifyContent: 'space-evenly',
+                                    alignItems: 'center',
+                                    backgroundColor: 'white',
+                                    ...CButtonShadow(),
+                                    height: normalize(20),
+                                    width: normalize(40),
+                                }}>
+
+                                <HShadowButton
+                                    useicon={true}
+                                    // usetext={true}
+                                    buttonstyle={{
+                                        borderWidth: 0,
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    }}
+                                    iconcolor={Global.AppTheme.primary_color}
+                                    icongroup={11}
+                                    iconname={'folder-images'}
+                                    iconsize={normalize(15)}
+                                    displaytext={'Media'}
+                                    buttonCallback={() => {
+                                        setShowButtons(prevstate => {
+                                            return {
+                                                ...prevstate,
+                                                mediabuttons: !prevstate.mediabuttons,
+                                            };
+                                        });
+                                    }}
+                                    textstyle={{
+                                        color: Global.AppTheme.primary_color,
+                                        fontSize: normalize(7),
+                                        textAlign: 'center',
+                                    }}
+                                />
+                                <HOCIcons.Icons
+                                    icongroup={5}
+                                    color={'black'}
+                                    name={showButtons.mediabuttons ? 'chevron-left' : 'chevron-right'}
+                                    size={normalize(10)}
+                                    style={{ marginHorizontal: normalize(5) }}
+                                />
+                            </TouchableOpacity>
+
+                            // <HShadowButton
+                            //     useicon={true}
+                            //     usetext={true}
+                            //     buttonstyle={{
+                            //         margin: normalize(4),
+                            //         padding: normalize(4),
+                            //         borderLeftWidth: 0,
+                            //         borderBottomWidth: 0,
+                            //         borderRadius: 5,
+                            //         borderWidth: 0,
+                            //         borderColor: Global.AppTheme.primary_color,
+                            //         justifyContent: 'center',
+                            //         alignItems: 'center',
+                            //         backgroundColor: 'white',
+                            //         height: normalize(30),
+                            //         width: normalize(40),
+                            //     }}
+                            //     iconcolor={Global.AppTheme.primary_color}
+                            //     icongroup={11}
+                            //     iconname={'folder-images'}
+                            //     iconsize={normalize(15)}
+                            //     displaytext={'Media'}
+                            //     buttonCallback={() => {
+                            //         setShowButtons(prevstate => {
+                            //             return {
+                            //                 ...prevstate,
+                            //                 mediabuttons: !prevstate.mediabuttons
+                            //             }
+                            //         })
+                            //     }}
+                            //     textstyle={{
+                            //         color: Global.AppTheme.primary_color,
+                            //         fontSize: normalize(7),
+                            //         textAlign: 'center'
+                            //     }}
+                            // />
+                            : null}
+                        {isBNUL(groupMediaIcons(props.moreButtonArray)) && showButtons.mediabuttons ?
+                            groupMediaIcons(props.moreButtonArray).map((val) => {
+                                return (
+                                    renderList(val)
+                                );
+                            })
+                            : null}
+
+                        {isBNUL(groupEntryIcons(props.moreButtonArray)) ? // NOTES , INSTRUCTIONS , COMMENTS
+                            <TouchableOpacity
+                                onPress={() => {
+                                    setShowButtons(prevstate => {
+                                        return {
+                                            ...prevstate,
+                                            detailbuttons: !prevstate.detailbuttons,
+                                        };
+                                    });
+                                }}
+                                style={{
+                                    borderWidth: 0,
+                                    flexDirection: 'row',
+                                    margin: normalize(4),
+                                    padding: normalize(4),
+                                    borderLeftWidth: 0,
+                                    borderBottomWidth: 0,
+                                    borderRadius: 5,
+                                    borderColor: Global.AppTheme.primary_color,
+                                    justifyContent: 'space-evenly',
+                                    alignItems: 'center',
+                                    backgroundColor: 'white',
+                                    ...CButtonShadow(),
+                                    height: normalize(20),
+                                    width: normalize(40),
+                                }}>
+
+                                <HShadowButton
+                                    useicon={true}
+                                    // usetext={true}
+                                    buttonstyle={{
+                                        borderWidth: 0,
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    }}
+                                    iconcolor={Global.AppTheme.primary_color}
+                                    icongroup={3}
+                                    iconname={'clipboard-text'}
+                                    iconsize={normalize(15)}
+                                    displaytext={'Remarks'}
+                                    buttonCallback={() => {
+                                        setShowButtons(prevstate => {
+                                            return {
+                                                ...prevstate,
+                                                detailbuttons: !prevstate.detailbuttons,
+                                            };
+                                        });
+                                    }}
+                                    textstyle={{
+                                        color: Global.AppTheme.primary_color,
+                                        fontSize: normalize(7),
+                                        textAlign: 'center',
+                                    }}
+                                />
+                                <HOCIcons.Icons
+                                    icongroup={5}
+                                    color={'black'}
+                                    name={showButtons.detailbuttons ? 'chevron-left' : 'chevron-right'}
+                                    size={normalize(10)}
+                                    style={{ marginHorizontal: normalize(5) }}
+                                />
+                            </TouchableOpacity>
+                            : null}
+                        {isBNUL(groupEntryIcons(props.moreButtonArray)) && showButtons.detailbuttons ?
+                            groupEntryIcons(props.moreButtonArray).map((val) => {
+                                return (
+                                    renderList(val)
+                                );
+                            })
+                            : null}
+                    </View>
+                </ScrollView>
+                : null}
+        </View>
+    );
+}
+
+export default memo(HNatureHeading);

package/src/HOC/HOCIcons.js

@@ -0,0 +1,80 @@
+import React, { memo } from 'react';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Foundation from 'react-native-vector-icons/Foundation';
+import EvilIcons from 'react-native-vector-icons/EvilIcons';
+import Octicons from 'react-native-vector-icons/Octicons';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Feather from 'react-native-vector-icons/Feather';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import Entypo from 'react-native-vector-icons/Entypo';
+import Zocial from 'react-native-vector-icons/Zocial';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+
+ function Icons(props) {
+
+    const components = {
+         1: AntDesign,
+         2: MaterialIcons,
+         3: MaterialCommunityIcons,
+         4: FontAwesome,
+         5: FontAwesome5,
+         6: Foundation,
+         7: EvilIcons,
+         8: Ionicons,
+         9: Octicons,
+        10: Feather,
+        11: Entypo,
+        12: Zocial,
+        13: Fontisto,
+        14: SimpleLineIcons,
+    };
+
+    const HOCIconComponent =  props.icongroup != null && props.icongroup != undefined &&
+    typeof props.icongroup !== 'boolean' && !isNaN(props.icongroup) && props.icongroup > 0 &&
+    props.icongroup < 15 ? components[props.icongroup] : components[5];
+
+    return (
+        <HOCIconComponent
+            {...props}
+        />
+    );
+}
+/**
+    * to use HOC <HOCIcons.Icons
+    * Pass icongroup as an integer ex: icongroup={3}
+    * @param 1 AntDesign.
+    * @param 2 MaterialIcons.
+    * @param 3 MaterialCommunityIcons.
+    * @param 4 FontAwesome.
+    * @param 5 FontAwesome5.
+    * @param 6 Foundation.
+    * @param 7 EvilIcons.
+    * @param 8 Ionicons.
+    * @param 9 Octicons.
+    * @param 10 Feather.
+    * @param 11 Entypo.
+    * @param 12 Zocial.
+    * @param 13 Fontisto.
+    * @param 14 SimpleLineIcons.
+ */
+export default {
+    Icons,
+    MaterialCommunityIcons,
+    SimpleLineIcons,
+    MaterialIcons,
+    FontAwesome,
+    Foundation,
+    Fontisto,
+    EvilIcons,
+    Ionicons,
+    Octicons,
+    Feather,
+    Entypo,
+    Zocial,
+    FontAwesome5,
+    AntDesign,
+};

package/src/HOC/HOverlay.js

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, Dimensions } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import CNotesInstructions from '../CustomComponents/CNotesInstructions';
+import CComments from '../CustomComponents/CComments';
+// import AddParameter from '../InvTemplate/AddParameter';
+// import AddTemplate from '../Templates/AddTemplate';
+// import DeleteParameter from '../InvTemplate/DeleteParameter';
+import CCalendar from '../CustomComponents/CCalendar';
+import CRemarks from '../CustomComponents/CRemarks';
+import CDropdownSelect from '../CustomComponents/CDropdownSelect';
+import CAssessmentDelete from '../CustomComponents/CAssessmentDelete';
+// import AddScreenOverlay from '../Templates/AddScreenOverlay';
+import CAddColumn from '../CustomComponents/CAddColumn';
+import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
+import CRowAdd from '../CustomComponents/CRowAdd';
+import CSummaryDropDown from '../CustomComponents/CSummaryDropDown';
+import SwipeLeftView from '../Screens/SwipeLeftView';
+import { Global } from '../Common/Global';
+import RawMaterial from '../Components/RawMaterial';
+import EquipmentPage from '../Components/EquipmentPage';
+import ByProductPage from '../Components/ByProductPage';
+import StageByProduct from '../Components/StageByProduct';
+import CDynamicReportScreen from '../CustomComponents/CDynamicReportScreen';
+import COperatorsOverlay from '../CustomComponents/COperatorsOverlay';
+import DiscriptiveViewOverlay from '../CustomComponents/DiscriptiveViewOverlay';
+import CDateOperatorsOverlay from '../CustomComponents/CDateOperatorsOverlay';
+import CTextOperatorsOverlay from '../CustomComponents/CTextOperatorsOverlay';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+function HOverlay(props) {
+    const [overlay, setOverlay] = useState(true);
+    const components = {
+        // SetUpVitalSign: SetUpVitalSign,
+        CNotesOrInstructions: CNotesInstructions,
+        CComments: CComments,
+        // AddParameterScreen: AddParameter,
+        // ConsultationPreview: ConsultationPreview,
+        // AddTemplate: AddTemplate,
+        // DeleteParameter: DeleteParameter,
+        CCalendar: CCalendar,
+        CRemarks: CRemarks,
+        CDropdownSelect: CDropdownSelect,
+        CAssessmentDelete: CAssessmentDelete,
+        // AddScreenOverlay: AddScreenOverlay,
+        CAddColumn: CAddColumn,
+        CRowAdd: CRowAdd,
+        CSummaryDropDown: CSummaryDropDown,
+        // SetUpComponents: SetUpComponents,
+        RawMaterial: RawMaterial,
+        EquipmentPage: EquipmentPage,
+        ByProductPage: ByProductPage,
+        StageByProduct: StageByProduct,
+        CDynamicReportScreen: CDynamicReportScreen,
+        COperatorsOverlay: COperatorsOverlay,
+        DiscriptiveViewOverlay: DiscriptiveViewOverlay,
+        CDateOperatorsOverlay: CDateOperatorsOverlay,
+        CTextOperatorsOverlay: CTextOperatorsOverlay,
+        // SwipeLeftView: SwipeLeftView
+    };
+    const ViewHOCComponent = components[props.component];
+    return (
+        <CModalOverlay
+            visible={overlay}
+            onClose={() => (props.visibility(false))}
+            closeOnTouchOutside
+            animationType="fadeInUp"
+            // easing
+            containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.20)' }}
+            // animationDuration={500}
+            childrenWrapperStyle={getPopupContainerStyle()}>
+            <View style={{ position: 'absolute', right: 14, top: 10, zIndex: 1 }}>
+                <TouchableOpacity
+                    onPress={() => setOverlay(false, props.visibility(false))}
+                >
+                    <FontAwesome5Icon name={'angle-double-down'} size={normalize(20)} color={Global.AppTheme.primary_color} />
+                </TouchableOpacity>
+            </View>
+            <ViewHOCComponent
+                {...props}
+            />
+        </CModalOverlay>
+    );
+
+    function getPopupContainerStyle() {
+        return {
+            position: 'absolute',
+            bottom: 0,
+            top: Dimensions.get('screen').height * 0.12,
+            width: Dimensions.get('window').width,
+            borderRadius: 20,
+            borderWidth: 2,
+            borderColor: '#e0e0e0',
+            paddingHorizontal: normalize(5),
+        };
+    }
+}
+export default HOverlay;