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

package/src/CustomComponents/CDropdownSelect.js

@@ -0,0 +1,555 @@
+import React, { useState, useEffect, useContext } from 'react';
+import {
+  Text,
+  TextInput,
+  StyleSheet,
+  View,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+  FlatList,
+  TouchableWithoutFeedback,
+  Switch,
+} from 'react-native';
+import { colors } from '../CommonStyle/commonStyle';
+// import { useDimensions } from '@react-native-community/hooks';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import { getListviewItem, getListviewItemText } from '../CommonStyle/PopupStyle';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import Loader from '../Custom/Loader';
+import Entypo from 'react-native-vector-icons/Entypo';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { getLoading, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import Icons, { MaterialCommunityIcons } from '../Common/Icons';
+import CAwesomeButton from './CAwesomeButton';
+import SAlphabet from '../StaticComponents/SAlphabet';
+import SSearchBar from '../StaticComponents/SSearchBar';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import { Global } from '../../../../../src/Common/Global';
+
+function CDropdownSelect(props) {
+
+  const { width, height } = Dimensions.get('window');
+  const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+  const [searchData, setSearchData] = useState('');
+  const [selectedArray, setSelectedArray] = useState([]);
+  // const [displayData, setDisplayData] = useState(ParameterDropdown.components)
+  const [displayData, setDisplayData] = useState();
+  const [apidata, SetApiData] = useState(props.count == 1 ? props.data.dropdownapi  : props.count == 0 ? props.dropdownapi : null);
+  const [views, setViews] = useState(false);
+  const [tempString, settempString] = useState([]);
+  const [componentAccess, setComponentAccess] = useState(0);
+  const [selected, setSelected] = useState(0);
+  const [stage, setStage] = useState(1);
+  const [parameterName, setParameterName] = useState('');
+  const [alphaindex, setAlphaIndex] = useState();
+  const [filterPurpose, setFilterPurpose] = useState([]);
+  const [alphaFilter, setAlphaFilter] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [editParameter, setEditParameter] = useState([]);
+  const [editDataValue, setEditDataValue] = useState(0);
+  const radio_Access = [
+    { displayvalue: 'Detail', datavalue: 0, checked: false },
+    { displayvalue: 'Date', datavalue: 1, checked: false },
+  ];
+
+  useEffect(() => {
+
+    let buttonapi = APIURL + apidata;
+    setIsLoading(true);
+    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(buttonapi));
+    NetworkServiceCall('get', buttonapi, '').then(function (response) {
+      if (
+        response.httpstatus == 200 &&
+        response.data.data != null &&
+        response.data.data.length > 0
+      ) {
+        setDisplayData(response.data.data);
+        setViews(true);
+        setIsLoading(false);
+      } else {
+        setIsLoading(false);
+      }
+    });
+
+    getLoading(v => setIsLoading(false));
+  }, []);
+
+  function onEditParameter() {
+    console.log('OnEdit TempString', editParameter);
+    if (editParameter.length == 1) {
+      setStage(2);
+      setParameterName(editParameter[0].displayvalue);
+      setEditDataValue(editParameter[0].datavalue);
+    } else {
+      notifyMessage('Please select one Parameter',3);
+    }
+  }
+
+  function RetrieveParameter() {
+    setStage(1);
+    setIsLoading(true);
+    setEditParameter([]);
+    settempString([]);
+    setEditDataValue(0);
+    let buttonapi = APIURL + apidata;
+    console.log('api callll dropdownselect............', buttonapi);
+    NetworkServiceCall('get', buttonapi, '').then(function (response) {
+      if (
+        response.httpstatus == 200 &&
+        response.data.data != null &&
+        response.data.data.length > 0
+      ) {
+        setDisplayData(response.data.data);
+        setViews(true);
+        setIsLoading(false);
+      } else {
+        setIsLoading(false);
+      }
+    });
+    getLoading(v => setIsLoading(false));
+  }
+
+  function onSelect() {
+    if (tempString.length > 0) {
+      var x = tempString.map((item) => ({
+        ...item,
+        'displaytext': item.displayvalue,
+      }));
+      props.onselect(x);
+    }
+  }
+
+  function getRadioContainer(backgroundcolor) {
+    return {
+      ...ComponentStyles.radioContainer,
+      backgroundColor: backgroundcolor,
+      justifyContent: 'space-evenly',
+      borderRadius: normalize(10),
+    };
+  }
+
+  function getOuterRadioButton(bordercolor) {
+    return {
+      ...ComponentStyles.outerRadioButton,
+      borderColor: bordercolor,
+    };
+  }
+
+  function fnSetName(changevalue) {
+    setParameterName(changevalue);
+  }
+
+  function fnRadioAcesss(data) {
+    setComponentAccess(data.datavalue);
+  }
+
+  function saveAssessmentDetail() {
+    // console.log('TempString', tempString);
+    // console.log('EditParameter', editParameter);
+    // console.log("componentAccess", componentAccess)
+    setIsLoading(true);
+    let dataset = {
+      componentname: componentAccess == 0 ? 'overlay' : 'date',
+      hosumrassessmentdetail: 0,
+      hosumrassessment: props.data != undefined && props.data.hosumrassessment != undefined ? props.data.hosumrassessment : 0,
+      hosumrclassificationnature: props.hosumrclassificationnature,
+      nature: props.nature,
+      assessmentdetail: '',
+      flag: editDataValue > 0 ? 2 : 1,
+      remarks: '',
+    };
+    let buttonapi;
+
+    setStage(2);
+    if (parameterName != null &&
+      parameterName != undefined &&
+      parameterName != '') {
+      if (props.count == 1) {
+        dataset.procedurename = 'hosumrassessmentdetail1';
+        dataset.assessmentdetail = parameterName;
+        dataset.hosumrassessment = props.data.hosumrassessment;
+        dataset.hosumrassessmentdetail =
+          tempString != null && tempString != undefined && tempString.length > 0
+            ? tempString[0].datavalue
+            : 0;
+        buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+      } else {
+        dataset.assessment = parameterName;
+        dataset.procedurename = 'hosumrassessment1';
+        dataset.hosumrclassificationnature = props.hosumrclassificationnature;
+        buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+      }
+
+      var output = { groups: dataset };
+      console.log('datasetttttttttttttttt', output);
+      console.log('APIIIIIIIIIIIIIIIIIIII', buttonapi);
+
+      NetworkServiceCall('post', buttonapi, output).then(function (response) {
+        console.log('SSAVE RESPOSNEEEEEE VVVVVVVVV EEEEEE RRRRRRRR YYYYYYYYYY', JSON.stringify(response));
+        if (response.httpstatus == 200
+          && response.data != undefined && response.data != null
+          && response.data.code != undefined && response.data.code > 0) {
+          notifyMessage('Data Saved!!!!!',1);
+          RetrieveParameter();
+          setIsLoading(false);
+        } else {
+          notifyMessage('Data Not Saved!!!!!',2);
+          setIsLoading(false);
+        }
+      });
+    } else {
+      notifyMessage('Please fill required column',3);
+      setIsLoading(false);
+    }
+    getLoading(v => setIsLoading(false));
+  }
+
+  function getFooterIconClick(item) {
+    console.log('<<<<<<<<LLLL>>>>>>>>>>>>>>>>>>>', JSON.stringify(item.functionid));
+    switch (item.functionid) {
+      case 'CD01': onSelect();
+        break;
+      case 'CD02':
+        editParameter.length > 0
+          ? onEditParameter() : null;
+        break;
+    }
+  }
+
+  function getOverlayScreenChildContainer() {
+    return {
+      height: Dimensions.get('window').height * 0.55,
+      flex: 1,
+    };
+  }
+
+  function getOverlayScreenContainer() {
+    return {
+      flexDirection: 'row',
+      margin: normalize(5),
+    };
+  }
+
+  function onSelectItem(datavalue, multiselect) {
+
+    if (editParameter.includes(datavalue)) {
+      var index = editParameter.indexOf(datavalue);
+      if (index > -1) {
+        editParameter.splice(index, 1);
+        console.log('111111111111111111', editParameter);
+      }
+    } else {
+      editParameter.push(datavalue);
+      console.log('22222222222222222222', editParameter);
+    }
+
+    if (multiselect == true) {
+      if (tempString.includes(datavalue)) {
+        datavalue.selected = !datavalue.selected;
+        setSelected(selected + 1);
+        var index = tempString.indexOf(datavalue);
+        if (index > -1) {
+          tempString.splice(index, 1);
+        }
+      } else {
+        datavalue.selected = !datavalue.selected;
+        setSelected(selected + 1);
+        tempString.push(datavalue);
+      }
+    }
+  }
+
+  function getOverlayScreenChildlistContainer() {
+    return {
+      height: Dimensions.get('window').height * 0.60,
+      marginBottom: Dimensions.get('window').height * 0.01,
+      marginTop: Dimensions.get('window').height * 0.01,
+      flexDirection: 'row',
+    };
+  }
+
+  function getAlphabetData(alpha, index) {
+    var filter = displayData.filter(value => (value.display != undefined ? value.display : '').charAt(0) == alpha);
+    setFilterPurpose(filter);
+    index == 0 ? setSearchData('') : setSearchData(alpha);
+    index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+  }
+
+  function GetSearchData(data) {
+    const newDropDownData = data.filter(function (item) {
+      const dataItem = item.displayvalue
+        ? item.displayvalue.toUpperCase()
+        : ''.toUpperCase();
+      const textData = searchData.toUpperCase();
+      return dataItem.indexOf(textData) > -1;
+    });
+    return (
+      <View style={layoutstyles.overlay_screen_listview_container}>
+        <View style={getOverlayScreenChildlistContainer()}>
+          <ScrollView keyboardShouldPersistTaps="handled">
+            <View>
+              {newDropDownData != null && newDropDownData.length > 0
+                ? newDropDownData.map((item, i) => {
+                  return (
+                    <View key={i}>
+                      <TouchableOpacity
+                        style={getListviewItem(item.selected, false)}
+                        onPress={() => onSelectItem(item, true)}
+                        activeOpacity={0.5}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                          <Icons.FontAwesome name="dot-circle-o" color={Global.AppTheme.primary_color} size={normalize(12)}
+                            style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }} />
+                          <Text
+                            style={[
+                              getListviewItemText(item.selected),
+                              { margin: 2, paddingLeft: 5 },
+                            ]}>
+                            {item.displayvalue}
+                          </Text>
+                        </View>
+                      </TouchableOpacity>
+                    </View>
+                  );
+                })
+                : null}
+            </View>
+          </ScrollView>
+
+          <View>
+            <SAlphabet
+              callBack={val =>
+                val == undefined ? null : getAlphabetData(val.alpha, val.index)
+              } />
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ backgroundColor: 'transparent', flex: 1 }}>
+      <Text
+        style={{
+          fontSize: normalize(12),
+          fontWeight: 'bold',
+          textAlign: 'center',
+          alignSelf: 'center',
+        }}>
+        {ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) && ValueCheck(responseJSON.consultationEdit.heading) ? responseJSON.consultationEdit.heading + ' PARAMETER' : 'PARAMETER' }
+      </Text>
+
+      <View
+        style={{
+          marginTop: normalize(8),
+          width: '100%',
+          borderRadius: 5,
+          height: normalize(35),
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-evenly',
+
+        }}>
+
+        {[{ 'display': 'ALL', 'stage': 1, 'color': Global.AppTheme.primary_color, 'iconname': 'archive', 'shadowcolor': '#eaf2ff' },
+        { 'display': 'CREATE', 'stage': 2, 'color': Global.AppTheme.primary_color, 'iconname': 'add-to-list', 'shadowcolor': '#eaf2ff' },
+        ].map((item, i) => {
+          return (
+            <TouchableOpacity
+              key={i}
+              onPress={() => item.display == 'ALL' ? RetrieveParameter() : setStage(2, setParameterName(''))}
+              style={{
+                borderRadius: 10,
+                borderWidth: 1,
+                height: normalize(40),
+                width: normalize(55),
+                backgroundColor: stage == item.stage ? item.shadowcolor : '#fff',
+                borderColor: stage == item.stage ? 'white' : Global.AppTheme.primary_color,
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 0,
+              }}
+            >
+              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                <Icons.Entypo name={item.iconname} style={{ paddingRight: 0 }}
+                  color={Global.AppTheme.primary_color} size={normalize(17)} />
+                <Text style={{
+                  color: stage == item.stage ? item.color : Global.AppTheme.primary_color,
+                  fontWeight: stage == item.stage ? 'bold' : 'normal',
+                  fontSize: normalize(10),
+                }}>{item.display}</Text>
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      {stage == 1 ? (
+        <View style={{ flex: 1 }}>
+
+          <View style={getOverlayScreenContainer()}>
+            <SSearchBar
+              onChangeText={val => setSearchData(val)} />
+          </View>
+
+          {views ? (
+            <View style={getOverlayScreenChildContainer()}>
+              {GetSearchData(displayData)}
+            </View>
+          ) : null}
+          {views ? (
+            <View
+              style={{
+                flexDirection: 'row',
+                position: 'absolute',
+                bottom: normalize(-5),
+                width: '100%',
+              }}>
+
+              <View style={{ flexDirection: 'row' }}>
+                {[{ 'displaytext': 'Select', 'size': 10, 'iconname': 'plus-square', 'selected': false, 'visibility': true, 'iconsize': 20, 'functionid': 'CD01' },
+                { 'displaytext': 'Edit', 'size': 10, 'iconname': 'edit', 'selected': false, 'visibility': true, 'iconsize': 20, 'functionid': 'CD02' }].map((item, i) => {
+                  return (
+                    <View key={i} style={{ paddingLeft: normalize(5) }}>
+                      <CAwesomeButton
+                        data={{
+                          ...item,
+                          'shadowcolor': '#f1f3f6',
+                          'iconcolor': Global.AppTheme.primary_color,
+                          'fontcolor': Global.AppTheme.primary_color,
+                        }}
+                        callBack={val => val == undefined ? null : getFooterIconClick(item)}
+                      />
+                    </View>);
+                })}
+              </View>
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+      {stage == 2 ? (
+        <View style={{ flex: 1, marginTop: '5%', marginVertical: 5 }}>
+          <View style={layoutstyles.overlay_child_view}>
+            <Text style={{ fontSize: normalize(12) }}>Parameter Name:</Text>
+
+            <TextInput
+              multiline={true}
+              numberOfLines={4}
+              style={[{ height: normalize(100), textAlignVertical: 'top', borderWidth: 0.5, borderRadius: 10 }]}
+              editable={true}
+              placeholder={'Parameter Name'}
+              keyboardType={'default'}
+              onChangeText={changevalue => fnSetName(changevalue)}
+              value={parameterName}
+            />
+
+            {props.count == 0 ?
+              <View style={{ marginTop: '5%' }}>
+                {/* <CTitleLabel displaytext={'Component Type'} isrequired={false} /> */}
+                <View style={{ flexDirection: 'row', marginTop: '3%' }}>
+                  {radio_Access.map((block, i) => {
+                    return (
+                      <TouchableWithoutFeedback key={i} style={{ width: normalize(20) }}
+                        onPress={() => fnRadioAcesss(block)}>
+                        <View
+                          style={getRadioContainer(
+                            block.datavalue == componentAccess
+                              ? '#e1f1f7'
+                              : colors.color_DeselectRadioBgcolor,
+                          )}>
+                          <View
+                            style={getOuterRadioButton(
+                              block.datavalue == componentAccess
+                                ? colors.color_SelectRadioBordercolor
+                                : colors.colorDeselectRadioBordercolor,
+                            )}>
+                            {block.datavalue == componentAccess ? (
+                              <View style={ComponentStyles.innerRadioButton} />
+                            ) : null}
+                          </View>
+
+                          <View>
+                            <Text style={ComponentStyles.radioButtonText}>
+                              {block.displayvalue}
+                            </Text>
+                          </View>
+
+                        </View>
+                      </TouchableWithoutFeedback>
+                    );
+                  })}
+                </View>
+              </View>
+              : null}
+          </View>
+
+
+          <View
+            style={{
+              position: 'absolute',
+              bottom: normalize(0),
+              width: '100%',
+            }}>
+            <TouchableOpacity
+              onPress={() => saveAssessmentDetail()}
+              style={{
+                borderRadius: 10,
+                borderWidth: 1,
+                height: normalize(40),
+                width: normalize(55),
+                backgroundColor: '#f1f3f6',
+                borderColor: 'white',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <View style={{ alignItems: 'center', width: normalize(50) }} >
+                <Icons.FontAwesome5 name="save" color={Global.AppTheme.primary_color} size={normalize(20)} />
+                <Text numberOfLines={1} style={{ color: Global.AppTheme.primary_color, fontSize: normalize(10) }}>Save</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+
+        </View>
+      ) : null}
+      {isLoading ? <Loader displaytext={true} /> : null}
+    </View>
+  );
+
+}
+
+const layoutstyles = StyleSheet.create({
+  overlay_screen_listview_container: {
+    justifyContent: 'center',
+    marginBottom: 10,
+
+  },
+  overlay_searchTextbox_View: {
+    width: '96%',
+    marginTop: '3%',
+
+  },
+  textinput_view: {
+    flex: 1,
+    padding: '1%',
+
+  },
+  getListviewItem: {
+    borderColor: '#DCDEDD',
+    borderWidth: 1,
+    borderBottomWidth: 1,
+    width: '100%',
+    borderRadius: 7,
+    justifyContent: 'space-between',
+  },
+  getListviewItemText: {
+    alignContent: 'center',
+    margin: 3,
+    alignItems: 'center',
+    textAlign: 'left',
+    fontSize: 12,
+    color: 'black',
+  },
+});
+
+export default CDropdownSelect;

package/src/CustomComponents/CFooterView.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dimensions } from 'react-native';
+import { View } from 'react-native';
+import { CFooterShadow } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+
+/**
+ * CFooterView Component
+ *
+ * A customizable footer component with consistent styling
+ *
+ * @param {Object} props - Component props
+ * @param {Object} props.style - Additional styles to apply to the footer
+ * @param {React.ReactNode} props.children - Content to render inside the footer
+ * @returns {React.ReactElement} Rendered footer component
+ */
+const CFooterView = ({ style, children }) => {
+  const screenHeight = Dimensions.get('screen').height;
+
+  return (
+    <View
+      style={[
+        {
+          // Shadow can be enabled by uncommenting:
+          // ...CFooterShadow(),
+          minHeight: screenHeight * 0.06,
+          paddingVertical: 5,
+          justifyContent: 'center',
+          backgroundColor: 'white',
+          borderTopWidth: 1,
+          borderTopColor: 'lightgrey',
+          marginTop: 'auto',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default CFooterView;