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

package/src/StaticComponents/SDropDownIcon.js

@@ -0,0 +1,500 @@
+import React, { useState, useEffect } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  TouchableHighlight,
+  Text,
+  Image,
+  TextInput,
+  ScrollView,
+  FlatList,
+  Platform,
+} from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import popupStyles, {
+  getListviewItem,
+  getListviewItemText,
+} from '../CommonStyle/PopupStyle';
+import { APIURL } from '../Common/apiConstants';
+import { Dimensions } from 'react-native';
+import SearchLoader from '../Custom/SearchLoader';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import SAlphabet from './SAlphabet';
+import Icons, { MaterialCommunityIcons } from '../Common/Icons';
+import { isBNU } from '../CommonStyle/ComponentFunctions';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+var searchResult = [];
+var tempvalue = [];
+var ValueString = null;
+const SDropDownIcon = props => {
+  // console.log('ooooooooooooooooooooooooooooverlaaaaaaaaaaaaaaaaaaaaaaay', props.overlay)
+
+  useEffect(() => {
+    isBNU(props.overlay) && props.overlay == true ? FetchDropdownList() : null;
+  }, [props.overlay]);
+
+  const [isdropdownshow, setDropdownShow] = useState(false);
+  const [searchData, setSearchData] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedValue, setSelectedValue] = useState(props.value);
+  const [displayData, setDisplayData] = useState([]);
+  const [stage, setStage] = useState(false);
+  const [refresh, setRefresh] = useState(0);
+  const [filterPurpose, setFilterPurpose] = useState([]);
+  const [alphaFilter, setAlphaFilter] = useState(false);
+  const [dropdowndata, setDropDownData] = useState(props.dropdowndata);
+  // console.log("...............................>>>>>>>>>>>>",displayData)
+  function getOverlayScreenContainer() {
+    return {
+      flexDirection: 'row',
+      margin: 10,
+    };
+  }
+
+  useEffect(() => {
+    setAlphaFilter(false);
+  });
+
+  function FetchDropdownList(key) {
+    const updatedApiUrl = props.dropdownPort ? APIURL : APIURL;
+    setSearchData('');
+    setIsLoading(true);
+    setDropdownShow(true);
+    // console.log("JJJJJJJMMMMMMMMMHHHHHHHHHHHHHHHHH", APIURL + props.dropdownapi)
+    NetworkServiceCall('get', updatedApiUrl + props.dropdownapi, '').then(
+      function (response) {
+        // console.log('dataaaaaaaaaaaa###############', JSON.stringify(response.data.data))
+        console.log(
+          'updated url #############################',
+          updatedApiUrl + props.dropdownapi,
+        );
+        if (response.data.data != null && response.data.data != undefined) {
+          searchResult = response;
+          setDisplayData(response.data.data);
+          setIsLoading(false);
+        } else {
+          searchResult = [];
+          setDisplayData([]);
+          setIsLoading(false);
+        }
+      },
+    );
+  }
+
+  function FetchList() {
+    setSearchData('');
+    setIsLoading(true);
+    setDropdownShow(true);
+    searchResult = { httpstatus: 200 };
+    setDisplayData(props.dropdownarray);
+    setIsLoading(false);
+  }
+
+  function selection(item, changevalue, keycode) {
+    let dataset = {
+      datavalue: item.datavalue,
+      displayvalue: item.displayvalue,
+      key: keycode,
+    };
+    setDropDownData(item.displayvalue);
+    props.stewardship != undefined && props.stewardship
+      ? props.onChangeData(item)
+      : props.onChangeData(dataset);
+    props.refreshCount(1);
+    // props.editStatus(1)
+    setDropdownShow(false);
+    if (props.setOverlay) {
+      props.setOverlay(false);
+    }
+  }
+
+  function DropdownLayout() {
+    return (
+      <View style={layoutstyles.overlay_screen_container}>
+        <View style={{ alignItems: 'center' }}>
+          <Text
+            style={{
+              fontSize: normalize(12),
+              fontWeight: 'bold',
+              color: 'darkblue',
+            }}>
+            {' '}
+            {props.headerName ? props.headerName : 'SELECT OPTION'}{' '}
+          </Text>
+        </View>
+
+        <View style={getOverlayScreenContainer()}>
+          <View
+            style={[
+              ComponentStyles.searchTextbox_View,
+              layoutstyles.overlay_searchTextbox_View,
+            ]}>
+            <View style={layoutstyles.textinput_view}>
+              <TextInput
+                style={[ComponentStyles.searchTextbox]}
+                editable={true}
+                autoCapitalize={'characters'}
+                value={searchData}
+                onChangeText={text => setSearchData(text)}
+                secureTextEntry={false}
+                keyboardType={'default'}
+                placeholder="Search"
+                placeholderTextColor="black"
+              />
+            </View>
+            <Image
+              style={[ComponentStyles.searchIcon]}
+              source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+            />
+          </View>
+        </View>
+
+        <View style={getOverlayScreenChildcontainer()}>
+          {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+        </View>
+
+      </View>
+    );
+  }
+
+  function getMultiSelect(params) {
+    // Safely filter selected items
+    const filterArray = Array.isArray(displayData)
+      ? displayData.filter(element => element?.selected === true)
+      : [];
+
+    // Extract display values if any selected items exist
+    const display =
+      filterArray.length > 0
+        ? filterArray.map(item => item?.displayvalue).join(', ')
+        : '';
+
+    // Update dropdown data text
+    setDropDownData(display);
+
+    // Notify parent component of selected items
+    if (typeof props?.onChangeData === 'function') {
+      props.onChangeData(filterArray);
+    }
+
+    // Hide dropdown UI
+    setDropdownShow(false);
+
+    // Hide overlay if provided
+    if (typeof props?.setOverlay === 'function') {
+      props.setOverlay(false);
+    }
+  }
+
+  function getOverlayChildrenWrapperStyle() {
+    return {
+      position: 'absolute',
+      bottom: 0,
+      top: Dimensions.get('screen').height * 0.17,
+      width: Dimensions.get('screen').width,
+      borderRadius: 20,
+      borderWidth: 2,
+      borderColor: '#e0e0e0',
+      paddingHorizontal: normalize(5),
+    };
+  }
+
+  function getAlphabetData(alpha, index) {
+    var filter = displayData.filter(
+      value =>
+        (value.displayvalue != undefined ? value.displayvalue : '').charAt(0) ==
+        alpha,
+    );
+    setFilterPurpose(filter);
+    index == 0 ? setSearchData('') : setSearchData(alpha);
+    index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+  }
+
+  return (
+    <View style={{ elevation: 3 }}>
+      <TouchableOpacity
+        onPress={() => (props.editable ? FetchDropdownList() : FetchList())}
+      // onLongPress={() => props.LongPress ? setStage(true) : null}
+      // style={{
+      //     borderWidth: 1,borderColor:'lightgrey'
+      //     , paddingLeft: 2, width: props.widthArr, alignItems: 'center', paddingRight: 15,
+      //     backgroundColor:props.backgroundColor != undefined ? props.backgroundColor : "#fff",
+      //     height: props.heightArr ? props.heightArr : Dimensions.get('screen').height * 0.040,
+      //     flexDirection: 'row', borderRadius:props.borderRadiusArr ? props.borderRadiusArr :5,
+      //     borderColor: props.borderArr ? props.borderArr : 'lightgrey',
+      // }}
+      >
+        {props.iconName ? (
+          <View
+            style={{
+              width: normalize(40),
+              borderWidth: 0,
+              alignItems: 'center',
+            }}>
+            <FontAwesome5
+              name={props.iconName}
+              color={props.flagData == 1 ? 'darkblue' : '#094485'}
+              size={props.size ? props.size : normalize(24)}
+            />
+          </View>
+        ) : (
+          <View style={{ width: normalize(40), marginHorizontal: normalize(0) }}>
+            <MaterialCommunityIcons
+              name={props.icon}
+              color={props.flagData == 1 ? 'darkblue' : '#094485'}
+              size={props.size ? props.size : normalize(24)}
+            />
+          </View>
+        )}
+
+        {/* <View style={{ position: 'absolute', bottom: 0, right: 3, }}>
+                <Text style={{ fontSize: normalize(11), alignSelf: 'flex-start', fontWeight: 'bold' }} >
+                    {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? props.cornerKey : ""}</Text>
+            </View> */}
+        {/* <View>
+                <Text adjustsFontSizeToFit numberOfLines={2} style={{ fontSize: normalize(12), alignSelf: 'flex-start', fontWeight: 'bold' ,marginHorizontal:normalize(7)}} >
+                    {dropdowndata != null && dropdowndata != undefined ? dropdowndata : ""}
+                </Text>
+            </View> */}
+        {isdropdownshow ? (
+          <CModalOverlay
+            visible={true}
+            onClose={() => {
+              setDropdownShow(false);
+              if (props.setOverlay) {
+                props.setOverlay(false);
+              }
+            }}
+            closeOnTouchOutside
+            animationType="zoomIn"
+            containerStyle={{ backgroundColor: 'transparent' }}
+            childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+            animationDuration={500}
+            footer={
+              props.multiselect != undefined &&
+                props.multiselect &&
+                displayData != undefined &&
+                displayData.length > 0 ? (
+                <TouchableOpacity
+                  style={{
+                    justifyContent: 'center',
+                    borderRadius: 10,
+                    alignItems: 'center',
+                    paddingHorizontal: normalize(10),
+                  }}
+                  onPress={() => getMultiSelect()}>
+                  <View
+                    style={{
+                      flexDirection: 'column',
+                      backgroundColor: '#f7f4f4',
+                      borderRadius: 10,
+                      paddingHorizontal: normalize(15),
+                      paddingVertical: normalize(5),
+                      alignItems: 'center',
+                    }}>
+                    <AntDesign
+                      name="select1"
+                      color={'#094485'}
+                      size={normalize(20)}
+                    />
+
+                    <Text
+                      style={{
+                        fontSize: normalize(11),
+                        color: '#094485',
+                        fontWeight: 'bold',
+                      }}>
+                      {' '}
+                      Select
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              ) : null
+            }
+
+          >
+            <TouchableOpacity
+              style={{
+                position: 'absolute',
+                right: 0,
+                zIndex: 1,
+                marginTop: normalize(5),
+              }}
+              onPress={() => {
+                setDropdownShow(false);
+                if (props.setOverlay) {
+                  props.setOverlay(false);
+                }
+              }}>
+              <FontAwesome5
+                name={'angle-double-down'}
+                color={'#094485'}
+                size={normalize(20)}
+              />
+            </TouchableOpacity>
+
+            {!isLoading ? (
+              searchResult.httpstatus == 200 ? (
+                DropdownLayout()
+              ) : (
+                <View>
+                  <Text style={[ComponentStyles.no_data_found_text]}>
+                    No Result Found
+                  </Text>
+                </View>
+              )
+            ) : (
+              <View
+                style={{
+                  flex: 1,
+                  width: '100%',
+                  justifyContent: 'center',
+                  backgroundColor: 'transparent',
+                  borderRadius: 10,
+                }}>
+                <SearchLoader />
+              </View>
+            )}
+          </CModalOverlay>
+        ) : null}
+
+        {stage ? (
+          <OverlayHOCComponent
+            visibility={val => (val == undefined ? null : setStage(val))}
+            xyz={val =>
+              val == undefined
+                ? null
+                : setDropDownData(val.displayvalue, setStage(false))
+            }
+            value={props.cornerKey}
+          // onselect={val => (val == undefined ? null : onSelect(val))}
+          // data={searchResult != null && searchResult != undefined && searchResult.length > 0 ? searchResult : null}
+          />
+        ) : null}
+      </TouchableOpacity>
+    </View>
+  );
+
+  function GetDropdown(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={{ flexDirection: 'row', flex: 1, width: '100%' }}>
+        <FlatList
+          style={{ flex: 1 }}
+          data={newDropDownData}
+          renderItem={renderItem}
+          initialNumToRender={Math.max(50, newDropDownData.length)}
+          maxToRenderPerBatch={newDropDownData.length + 10}
+          windowSize={21}
+          removeClippedSubviews={false}
+          nestedScrollEnabled={true}
+          keyExtractor={(item, index) => 'key' + index}
+        />
+
+        <SAlphabet
+          callBack={val =>
+            val == undefined ? null : getAlphabetData(val.alpha, val.index)
+          }
+        />
+
+        {/* <View style={{
+                    height: Dimensions.get('window').height * 0.37,
+                    marginBottom: Dimensions.get('window').height * 0.01,
+                }}>
+                    <FlatList
+                        data={["#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]}
+                        renderItem={renderAlphabet}
+                        style={{ paddingBottom: 20 }}
+                        contentContainerStyle={{ alignItems: 'center' }}
+                        keyExtractor={(item, index) => 'key' + index}
+                    />
+                </View> */}
+      </View>
+    );
+  }
+
+  function multiselect(item, keycode) {
+    item.selected = !item.selected;
+    setRefresh(refresh + 1);
+  }
+
+  function renderItem(data) {
+    // console.log("-----------------------------",data)
+    return (
+      <TouchableOpacity
+        style={[
+          getListviewItem(data.item.selected),
+          { flexDirection: 'row', alignItems: 'center' },
+        ]}
+        onPress={() =>
+          props.multiselect != undefined
+            ? multiselect(data.item, props.keycode)
+            : selection(data.item, data.item.selected, props.keycode)
+        }
+        activeOpacity={0.5}>
+        <Icons.FontAwesome
+          name="dot-circle-o"
+          color="darkblue"
+          size={normalize(12)}
+          style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }}
+        />
+        <Text
+          style={
+            selectedValue != null && selectedValue != undefined
+              ? selectedValue == data.item.datavalue
+                ? getListviewItemText(true)
+                : getListviewItemText(false)
+              : getListviewItemText(false)
+          }>
+          {data.item.displayvalue}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  function getOverlayScreenChildcontainer() {
+    return {
+      flex: 1,
+      marginBottom: Dimensions.get('window').height * 0.01,
+      marginTop: Dimensions.get('window').height * 0.01,
+      maxHeight: Platform.OS === 'web' && Dimensions.get('window').height * 0.4,
+
+    };
+  }
+};
+
+const layoutstyles = StyleSheet.create({
+  lefticon_container: {
+    marginLeft: '2%',
+  },
+  textinput_view: {
+    flex: 1,
+    paddingLeft: '1%',
+  },
+  overlay_screen_listview_container: {
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  overlay_searchTextbox_View: {
+    width: '96%',
+  },
+  overlay_screen_heading_text: {
+    ...ComponentStyles.popup_heading,
+    width: '100%',
+  },
+  overlay_screen_container: {
+    width: '100%',
+    flex: 1,
+  },
+});
+
+export default SDropDownIcon;

package/src/StaticComponents/SMenuBox.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList, ActivityIndicator } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+} from 'react-native-popup-menu';
+import { APIURL } from '../Common/apiConstants';
+import Icons from '../Common/Icons';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import { Global } from '../Common/Global';
+import { getLoading, isBNU, isBNUL, isNU, ValueCheck } from '../CommonStyle/ComponentFunctions';
+
+const SMenuBox = (props) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [displayData, setDisplayData] = useState([]);
+    const [dropdowndata, setDropDownData] = useState(props.dropdowndata);
+    // console.log("kkkkkkkkkkkkkkkkkkkkk",JSON.stringify(props.editable))
+    function FetchDropdownList(key) {
+        setIsLoading(true);
+        let buttonapi = APIURL + props.dropdownapi;
+        console.log('SDROPDOWNLINK___________________', 'get', buttonapi);
+        NetworkServiceCall('get', buttonapi, '')
+            .then(function (response) {
+                if (response.data.data != null && response.data.data != undefined) {
+                    setDisplayData(response.data.data);
+                    setIsLoading(false);
+                }
+                else {
+                    setDisplayData([]);
+                    setIsLoading(false);
+                }
+            });
+        getLoading(v => setIsLoading(false));
+    }
+
+    function FetchList() {
+        setIsLoading(true);
+        setDisplayData(props.dropdownarray);
+        setIsLoading(false);
+    }
+
+    function selection(item, keycode) {
+        let dataset = {
+            'datavalue': item.datavalue,
+            'displayvalue': item.displayvalue,
+            'detailcode': item.detailcode,
+            'color': item.color,
+            'key': keycode,
+            'item': item,
+        };
+        if (ValueCheck(props.displaytext) && props.displaytext) {
+            setDropDownData(item.displayvalue);
+        }
+        props.onChangeData(dataset);
+    }
+
+    return (
+        <Menu>
+            <MenuTrigger
+                onPress={() => props.editable ? FetchDropdownList() : FetchList()}
+            >
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+
+                    {ValueCheck(props.displaytext) && props.displaytext ? null : <Text adjustsFontSizeToFit style={{ fontSize: normalize(13), fontWeight: ValueCheck(dropdowndata) ? '600' : '400', marginRight: normalize(5), color: ValueCheck(dropdowndata) ? 'black' : 'grey' }}>{ValueCheck(dropdowndata) ? dropdowndata : props.display}</Text>}
+                    <View>
+                        {!isLoading ?
+                            <Icons.MaterialCommunityIcons
+                                name={ValueCheck(props.iconName) ? props.iconName : 'chevron-double-down'}
+                                color={Global.AppTheme.primary_color}
+                                size={normalize(30)}
+                            /> :
+                            <ActivityIndicator size={normalize(22)} color="red" />}
+                    </View>
+                </View>
+            </MenuTrigger>
+
+            <MenuOptions
+                customStyles={{
+                    optionsContainer: {},
+                    optionWrapper: { marginRight: normalize(5) },
+                    optionText: {},
+                }}>
+                {isBNUL(displayData) ?
+                    <View>
+                        <FlatList
+                            data={displayData}
+                            renderItem={renderItem}
+                            initialNumToRender={10}
+                            maxToRenderPerBatch={20}
+                            keyExtractor={(item, index) => 'key' + index}
+                        />
+                    </View> : null}
+            </MenuOptions>
+        </Menu>
+
+    );
+
+    function renderItem({ item }) {
+        return (
+            <MenuOption
+                onSelect={() => selection(item, props.keycode)}
+                style={{ flexDirection: 'row', alignItems: 'center' }}>
+
+                <View style={{ width: normalize(20), alignItems: 'center' }}>
+                    <Icons.FontAwesome5
+                        name={ValueCheck(item.iconname) ? item.iconname : 'dot-circle'}
+                        color={Global.AppTheme.primary_color}
+                        size={normalize(18)}
+                    />
+                </View>
+
+                <Text adjustsFontSizeToFit
+                    numberOfLines={1}
+                    style={{
+                        fontSize: normalize(12),
+                        fontWeight: 'bold',
+                        marginLeft: '10%',
+                        color: 'darkblue',
+                    }}>
+                    {item.displayvalue}
+                </Text>
+            </MenuOption>
+        );
+    }
+
+};
+
+export default SMenuBox;