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

package/src/Screens/FileExplorer.js

@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useContext } from 'react';
+import FontAwesome from 'react-native-vector-icons/FontAwesome5';
+import {
+    Text,
+    View,
+    TouchableOpacity,
+    BackHandler,
+} from 'react-native';
+import Entypo from 'react-native-vector-icons/Entypo';
+import ImageScreen from '../Media/ImageScreen';
+import AudioScreen from '../Media/AudioScreen';
+import VideoScreen from '../Media/VideoScreen';
+import HeaderBlock from './HeaderBlock';
+import CDetailView from '../CustomComponents/CDetailView';
+import CContainerView from '../CustomComponents/CContainerView';
+import { normalize } from '../CommonStyle/componentStyle';
+import DrawingScreen from '../Media/DrawingScreen';
+import DocumentScreen from '../Media/DocumentScreen';
+import HShadowButton from '../HOC/HShadowButton';
+import { CButtonShadow, isBNUL, isNU } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+// 
+export default function FileExplorer(props) {
+
+    const navigation = useNavigation();
+    // console.log("PROPSSSSSSSSSSSSSS FILE EXPLORERERERRERERRERER",JSON.stringify(props))
+    const [stage, setStage] = useState(props.route.params.visibility != undefined ? props.route.params.visibility : 1);
+    const [visibility, setVisibility] = useState(props.route.params.visibility != undefined ? props.route.params.visibility : 0);
+
+    // useEffect(() => {
+    //     const backAction = () => {
+    //         props.navigation.goBack();
+    //         return true;
+    //     };
+    //     const backHandler = BackHandler.addEventListener(
+    //         'hardwareBackPress',
+    //         backAction,
+    //     );
+    //     return () => backHandler.remove();
+    // });
+
+    useEffect(() => {
+        const backAction = () => {
+            if (!navigation.isFocused()) {
+                return false;
+            }
+            else {
+                navigation.goBack();
+
+            }
+            return true;
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            "hardwareBackPress",
+            backAction
+        );
+
+        return () => backHandler.remove();
+    }, [navigation]);
+
+    const IconData = [
+        {
+            name: 'folder-images',
+            displaytext: 'Image',
+            colour: '#3dc6bd',
+            state: 1,
+        },
+        {
+            name: 'video',
+            displaytext: 'Video',
+            colour: 'red',
+            state: 3,
+        },
+        {
+            name: 'music',
+            displaytext: 'Audio',
+            colour: '#b04ebf',
+            state: 2,
+        },
+        {
+            name: 'folder',
+            displaytext: 'Document',
+            colour: 'darkgreen',
+            state: 4,
+        },
+        {
+            name: 'folder-images',
+            displaytext: 'Draw',
+            colour: '#800000',
+            state: 5,
+        },
+    ];
+
+    let data;
+    const [gallery, setGallery] = useState(props.route.params.data);
+    var editstatus = props.route.params.eventData;
+
+    gallery != null && gallery != undefined ? (data = gallery) : null;
+
+    // console.log("GALLERYYYYYYY SAVEVEVEVVEVEVEVVEVEVEVEVVE", JSON.stringify(data))
+
+    function findFilesLength(item) {
+
+        if (item.state == 1) {
+            return isNU(data) && isBNUL(data.savedimages) ? data.savedimages.length : 0
+        }
+        else if (item.state == 2) {
+            return isNU(data) && isBNUL(data.savedaudio) ? data.savedaudio.length : 0
+        }
+        else if (item.state == 3) {
+            return isNU(data) && isBNUL(data.savedvideo) ? data.savedvideo.length : 0
+        }
+        else if (item.state == 4) {
+            return isNU(data) && isBNUL(data.savedpdf) ? data.savedpdf.length : 0
+        }
+        else if (item.state == 5) {
+            return isNU(data) && isBNUL(data.saveddoc) ? data.saveddoc.length : 0
+        }
+        else {
+            return 0
+        }
+
+    }
+
+    function mainView() {
+
+        // console.log('mainView', JSON.stringify(data.savedimages.length));
+
+        return (
+            <>
+                <View style={{}}>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            width: '100%',
+                            alignItems: 'center',
+                            justifyContent: 'space-evenly',
+                        }}>
+                        {IconData.map((item, k) => {
+                            return (
+                                visibility == item.state || visibility == 0 ?
+
+                                    <View>
+                                        <HShadowButton
+                                            useicon={true}
+                                            usetext={true}
+                                            buttonstyle={{
+                                                margin: normalize(5),
+                                                borderLeftWidth: 0,
+                                                borderBottomWidth: 0,
+                                                borderRadius: 5,
+                                                borderWidth: 0,
+                                                borderColor: Global.AppTheme.primary_color,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                backgroundColor: item.state == stage ? '#bdd8d8' : 'white',
+                                                height: normalize(40),
+                                                width: normalize(40),
+                                                ...CButtonShadow(),
+                                            }}
+                                            icongroup={11}
+                                            iconcolor={item.colour}
+                                            iconname={item.name}
+                                            iconsize={normalize(23)}
+                                            iconstyle={{ textAlign: 'center', borderWidth: 0 }}
+                                            displaytext={item.displaytext}
+                                            buttonCallback={() => {
+                                                setStage(item.state)
+                                            }}
+                                            textstyle={{
+                                                color: Global.AppTheme.primary_color,
+                                                fontSize: normalize(8),
+                                                textAlign: 'center',
+                                                fontWeight: 'normal'
+                                            }}
+
+                                        />
+                                        {isNU(findFilesLength(item)) && findFilesLength(item) != 0 ?
+                                            <View style={{ position: 'absolute', top: -2, right: -2, borderWidth: 0.5, borderColor: 'lightgrey', elevation: 1, borderRadius: 1000, backgroundColor: Global.AppTheme.primary_color, height: normalize(18), width: normalize(18), justifyContent: 'center', alignItems: 'center' }}>
+                                                <Text adjustsFontSizeToFit numberOfLines={1} style={{ textAlign: 'center', fontSize: normalize(10), color: 'white', fontWeight: 'bold' }}>
+                                                    {findFilesLength(item)}
+                                                </Text>
+                                            </View>
+                                            : null
+                                        }
+                                    </View>
+
+
+                                    // <TouchableOpacity key={k}
+                                    //     onPress={() => setStage(item.state)}>
+                                    //     <View
+                                    //         style={{
+                                    //             width: '100%',
+                                    //             flexDirection: 'column',
+                                    //             alignItems: 'center',
+                                    //             justifyContent: 'center',
+                                    //         }}>
+                                    //         <View
+                                    //             style={{
+                                    //                 backgroundColor:
+                                    //                     item.state == stage ? 'black' : 'white',
+                                    //                 alignItems: 'center',
+                                    //                 justifyContent: 'center',
+                                    //                 width: normalize(40),
+                                    //                 height: normalize(40),
+                                    //                 borderRadius: normalize(40) / 2,
+                                    //             }}>
+                                    //             <Entypo
+                                    //                 name={item.name}
+                                    //                 size={normalize(24)}
+                                    //                 color={item.colour}
+                                    //             />
+                                    //         </View>
+                                    //         <View>
+                                    //             <Text
+                                    //                 style={{
+                                    //                     color: item.state == stage ? 'lightblue' : 'black',
+                                    //                     fontSize: normalize(16),
+                                    //                     fontWeight: 'bold',
+                                    //                 }}>
+                                    //                 {item.displaytext}
+                                    //             </Text>
+                                    //         </View>
+                                    //     </View>
+                                    // </TouchableOpacity>
+
+                                    : null
+                            );
+                        })}
+                    </View>
+                </View>
+
+                {stage == 1 ?
+                    <ImageScreen
+                        data={data}
+                        editStatus={val =>
+                            val == undefined ? null : props.route.params.onselect(editstatus)
+                        }
+                    />
+
+                    : stage == 2 ?
+                        <AudioScreen
+                            data={data}
+                            editStatus={val =>
+                                val == undefined ? null : props.route.params.onselect(editstatus)
+                            }
+                        /> :
+                        stage == 3 ?
+                            <VideoScreen
+                                data={data}
+                                editStatus={val =>
+                                    val == undefined ? null : props.route.params.onselect(editstatus)
+                                }
+                            />
+                            : stage == 5 ?
+                                <DrawingScreen
+                                    data={data}
+                                    editStatus={val =>
+                                        val == undefined ? null : props.route.params.onselect(editstatus)
+                                    }
+                                /> :
+                                <DocumentScreen
+                                    data={data}
+                                    editStatus={val =>
+                                        val == undefined ? null : props.route.params.onselect(editstatus)
+                                    }
+                                />
+                }
+            </>
+        )
+
+    }
+
+    return (
+        props.route.params.componenttype ?
+            mainView()
+            :
+            <CContainerView>
+                <HeaderBlock style={{ marginBottom: 30 }} />
+                <CDetailView>
+                    {mainView()}
+                </CDetailView>
+            </CContainerView>
+
+    );
+}
+

package/src/Screens/Footer.js

@@ -0,0 +1,340 @@
+import React, { useState, memo, useEffect, useContext } from 'react';
+import { TouchableOpacity, Text, View, FlatList, Switch, Dimensions } from 'react-native';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import RNExitApp from 'react-native-exit-app';
+import InsureResponseComponentContext from '../Handlers/insureResponseComponentContext';
+import { Menu, MenuOptions, MenuOption, MenuTrigger, } from 'react-native-popup-menu';
+import Loader from '../Custom/Loader';
+import { Global } from '../../../../../src/Common/Global';
+import { normalize } from '../CommonStyle/componentStyle';
+import { CButtonShadow, isBNUL, isNU } from '../CommonStyle/ComponentFunctions';
+import HShadowButton from '../HOC/HShadowButton';
+
+const Footer = props => {
+
+  const { responseJSON, setResponseJSON } = useContext(InsureResponseComponentContext);
+
+  const [usertype] = useState(Global.PatientDetails != null && Global.PatientDetails.usertype != undefined ? Global.PatientDetails.usertype : "A")
+  let UserSpecificFooter = props.footerIcon != undefined ? (props.footerIcon).filter(obj => {
+    return obj.itemid != 2
+  }) : []
+
+  let UserSpecificMoreButton = props.footerIcon != undefined ? props.footerIcon.map(obj => ({
+    morebutton: obj.morebuttons && obj.morebuttons != null && obj.morebuttons != undefined ? obj.morebuttons.filter(element => { return element.itemid == 5 }) : null
+  })) : []
+
+  var editVar =
+    props.footerIcon != null && props.footerIcon != undefined
+      ? props.footerIcon
+      : null;
+
+  if (editVar != undefined && editVar != null) {
+    var result = editVar.filter(obj => {
+      return obj.heading === 'More';
+    });
+  }
+
+  function actionButton(data) {
+    props.buttonFunction(data)
+  }
+
+  function moreButton(data) {
+    props.buttonFunction(data)
+  }
+
+  function getIconColor(color) {
+    switch (color) {
+      case 0:
+        return Global.AppTheme.primary_color;
+        break;
+      case 1:
+        return '#f76c8f';
+        break;
+      case 2:
+        return 'lightgreen';
+        break;
+      default:
+        return Global.AppTheme.primary_color;
+        break;
+    }
+  }
+
+  function renderFooter(data) {
+
+    var x = usertype == "A" ? data.item.morebuttons : UserSpecificMoreButton[UserSpecificMoreButton.length - 1].morebutton
+
+    return (
+      <View style={{ borderWidth: 0 }}>
+        {data.item.heading == 'More' ? (
+          <View style={{ borderWidth: 0 }}>
+            <Menu>
+              <MenuTrigger>
+                <HShadowButton
+                  useicon={true}
+                  usetext={true}
+                  disabled={true}
+                  buttonstyle={{
+                    ...CButtonShadow(),
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderWidth: 1,
+                    borderColor: 'lightblue',
+                    borderRadius: 10,
+                    height: normalize(40),
+                    width: normalize(50),
+                    marginVertical: normalize(7),
+                    backgroundColor: 'white'
+                  }}
+                  iconcolor={Global.AppTheme.primary_color}
+                  icongroup={3}
+                  iconname={'dots-horizontal-circle'}
+                  iconsize={normalize(24)}
+                  displaytext={'More'}
+                  buttonCallback={() => {
+
+                  }}
+                  textstyle={{
+                    color: Global.AppTheme.primary_color,
+                    fontSize: normalize(9),
+                    textAlign: 'center',
+                    alignSelf: 'center'
+                  }}
+                />
+                {/* <View style={{
+                  ...CButtonShadow(),
+                  alignItems: 'center',
+                  borderWidth: 1,
+                  borderColor: 'lightblue',
+                  borderRadius: 10,
+                  height: normalize(40),
+                  width: normalize(50),
+                  marginVertical: normalize(7)
+                }}>
+                  <MaterialCommunityIcons
+                    name={'dots-horizontal-circle'}
+                    color={Global.AppTheme.primary_color}
+                    size={normalize(24)}
+                  />
+                  <Text
+                    style={{
+                      color: Global.AppTheme.primary_color,
+                      fontSize: normalize(9),
+                      alignSelf: 'center',
+                    }}>
+                    {"More"}
+                  </Text>
+                </View> */}
+              </MenuTrigger>
+              <MenuOptions
+                optionsContainerStyle={{ marginTop: normalize(-52) }}
+                customStyles={{ optionsContainer: { width: '100%', shadowColor: '#ffffff00', backgroundColor: '#ffffffff' }, optionText: {}, }}>
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap-reverse', justifyContent: 'flex-end', borderWidth: 0 }}>
+                  {/* <MenuOptions
+                customStyles={{
+                  optionsContainer: { width: '35%' },
+                  optionText: {},
+                }}>
+                <View> */}
+                  {x != null &&
+                    x != undefined &&
+                    x.map((item, key) => {
+                      return (
+
+                        <MenuOption
+                          key={key}
+                          onSelect={() => {
+                            moreButton(item, item.functionname, data.item)
+                          }}
+                          style={{ marginHorizontal: normalize(3) }}>
+                          <HShadowButton
+                            useicon={true}
+                            usetext={true}
+                            disabled={true}
+                            buttonstyle={{
+                              ...CButtonShadow(),
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              borderWidth: 1,
+                              borderColor: 'lightblue',
+                              borderRadius: 10,
+                              height: normalize(40),
+                              width: normalize(50),
+                              marginVertical: normalize(7),
+                              backgroundColor: 'white'
+                            }}
+                            iconcolor={Global.AppTheme.primary_color}
+                            icongroup={4}
+                            iconname={item.iconname}
+                            iconsize={normalize(24)}
+                            displaytext={item.heading}
+                            buttonCallback={() => {
+                              // getFunctions(item)
+                            }}
+                            textstyle={{
+                              color: Global.AppTheme.primary_color,
+                              fontSize: normalize(9),
+                              textAlign: 'center',
+                              alignSelf: 'center'
+                            }}
+                          />
+                        </MenuOption>
+
+
+                        // <MenuOption
+                        //   key={key}
+                        //   onSelect={() => moreButton(item, item.functionname, data.item)}
+                        //   style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        //   <FontAwesome
+                        //     name={item.iconname}
+                        //     color={item.iconcolor ? item.iconcolor : Global.AppTheme.primary_color}
+                        //     size={normalize(23)}
+                        //   />
+                        //   <Text
+                        //     style={{
+                        //       fontSize: normalize(10),
+                        //       marginLeft: '10%',
+                        //     }}>
+                        //     {item.heading}
+                        //   </Text>
+                        // </MenuOption>
+                      );
+                    })}
+                </View>
+              </MenuOptions>
+            </Menu>
+          </View>
+        ) : (
+
+          <HShadowButton
+            useicon={true}
+            usetext={true}
+            disabled={false}
+            buttonstyle={{
+              ...CButtonShadow(),
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderWidth: 1,
+              borderColor: 'lightblue',
+              borderRadius: 10,
+              height: normalize(40),
+              width: normalize(50),
+              marginVertical: normalize(7),
+              backgroundColor: 'white'
+            }}
+            iconcolor={CheckSaveColor(data, responseJSON)}
+            icongroup={4}
+            iconname={data.item.iconname}
+            iconsize={normalize(24)}
+            displaytext={data.item.heading}
+            buttonCallback={() => {
+              actionButton(data.item)
+            }}
+            textstyle={{
+              color: Global.AppTheme.primary_color,
+              fontSize: normalize(9),
+              textAlign: 'center',
+              alignSelf: 'center'
+            }}
+          />
+          // <TouchableOpacity
+          //   onPress={() => {
+          //     actionButton(data.item)
+          //   }}
+          //   style={{
+          //     borderWidth: 1,
+          //     borderColor: 'lightblue',
+          //     borderRadius: 10,
+          //     height: normalize(40),
+          //     width: normalize(50),
+          //     marginVertical: normalize(7),
+          //     justifyContent: 'center',
+          //     alignItems: 'center',
+          //   }}>
+          //   <FontAwesome
+          //     name={data.item.iconname}
+          //     color={CheckSaveColor(data, responseJSON)}
+          //     size={normalize(24)}
+          //   />
+          //   <Text numberOfLines={1} adjustsFontSizeToFit style={{ color: Global.AppTheme.primary_color, fontSize: normalize(9) }}>
+          //     {data.item.heading}
+          //   </Text>
+          // </TouchableOpacity>
+          // <AwesomeButton
+          //   onPress={() => actionButton(data.item)}
+          //   borderRadius={10}
+          //   borderWidth={1}
+          //   height={normalize(40)}
+          //   width={normalize(55)}
+          //   backgroundColor={"#fff"}
+          //   paddingHorizontal={0}
+          //   raiseLevel={2}
+          //   paddingBottom={0}
+          //   borderColor={'lightblue'}
+          //   paddingTop={0}>
+
+          //   <View style={{ alignItems: 'center', width: normalize(50) }} >
+          //     <FontAwesome
+          //       name={data.item.iconname}
+          //       // color={(data.item.heading == 'Save' && responseJSON.editStatus) ? '#f76c8f' : Global.AppTheme.primary_color}
+          //       color={CheckSaveColor(data, responseJSON)}
+          //       size={normalize(22)}
+          //     />
+          //     <Text numberOfLines={1} style={{ color: Global.AppTheme.primary_color, fontSize: normalize(10) }}>
+          //       {data.item.heading}
+          //     </Text>
+          //   </View>
+          // </AwesomeButton>
+        )}
+      </View>
+    );
+  }
+
+  function CheckSaveColor(data, context) {
+
+    if (data.item.heading == 'Save' && isNU(context) && isBNUL(context.consultation) && CheckIfEdited(context.consultation)) {
+      return '#f76c8f'
+    }
+    else {
+      return Global.AppTheme.primary_color
+    }
+  }
+
+  function CheckIfEdited(array) {
+
+    let prevcodearray = array.filter((i, k) => { return i.editStatus ? { ...i } : undefined });
+    let prevcode = isBNUL(prevcodearray) ? true : false;
+    return prevcode;
+
+  }
+
+
+
+
+
+
+  return (
+    <View
+      style={[{
+        // ...CFooterShadow(), // offsetX  offsetY blurRadius spreadDistance color
+        minHeight: Dimensions.get('screen').height * 0.06,
+        paddingVertical: 5,
+        justifyContent: 'center',
+        backgroundColor: 'white',
+        borderTopWidth: 1,
+        borderTopColor: 'lightgrey'
+      }, props.style]}
+    >
+      <View style={{ flexDirection: 'row'}}>
+        <FlatList
+          data={usertype == "A" ? props.footerIcon : UserSpecificFooter}
+          contentContainerStyle={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: normalize(5) }}
+          renderItem={renderFooter}
+          keyExtractor={item => item.itemid}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(Footer);