@jescon-technologies/react-native-ui-kit 0.0.15 → 0.0.17

package/src/Components/SDropDown.tsx

@@ -0,0 +1,861 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  Dimensions,
+  Text,
+  Image,
+  TextInput,
+  FlatList,
+  ListRenderItemInfo,
+  Platform,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { getListviewItem, getListviewItemText } from '../CommonStyle/PopupStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import Loader from '../Custom/Loader';
+import { isBNU, isBNUL, isNU, normalize } from '../CommonStyle/ComponentFunctions';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import HIcons from '../Hoc/HIcons';
+import { colors } from '../CommonStyle/commonStyle';
+import { Global } from '../../../../../src/Common/Global';
+import { Menu, MenuOptions, MenuTrigger } from 'react-native-popup-menu';
+// import SHelpDescription from './SHelpDescription';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface DropdownDatum {
+  datavalue: string | number;
+  displayvalue: string;
+  displayvalue1?: string;
+  displayvalue2?: string;
+  detailcode?: string;
+  color?: string;
+  searchparam?: string;
+  jasperfilename?: string;
+  reporttype?: string;
+  selected?: boolean;
+  [key: string]: unknown;
+}
+
+interface DropdownIconDescriptor {
+  icongroup?: number;
+  name?: string;
+  size?: number;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+interface SDropDownNewData {
+  displaytext?: string;
+  [key: string]: unknown;
+}
+
+export interface SDropDownNewProps {
+  // --- Data ---
+  data?: SDropDownNewData | string;
+  dropdowndata?: string;
+  dropdownarray?: DropdownDatum[];
+  selectedval?: (string | number)[];
+  multidropdownarray?: DropdownDatum[];
+  value?: string | number;
+
+  // --- API ---
+  dropdownapi?: string;
+  dropdownPort?: string | number;
+
+  // --- Layout / styling ---
+  widthArr?: string | number;
+  heightArr?: string | number;
+  borderRadiusArr?: number;
+  borderArr?: string;
+  borderWidth?: boolean;
+  backgroundColor?: string;
+  fontSize?: number;
+  fontcolor?: string;
+  labeltext?: string;
+  required?: boolean;
+  cornerKey?: string | number;
+
+  // --- Icon ---
+  icon?: string;
+  iconName?: string;
+  iconSize?: number;
+  iconsize?: number;
+  iconOnly?: boolean;
+  iconclose?: boolean;
+  iconclosecallback?: (pressed: boolean) => void;
+  flagData?: 1 | 0;
+
+  // --- Behavior ---
+  editable?: boolean;
+  disabled?: boolean;
+  multiselect?: boolean;
+  keycode?: number | string;
+  columnid?: number | string;
+  overlay?: boolean;
+  LongPress?: boolean;
+
+  // --- Callbacks ---
+  onChangeData?: (value: DropdownDatum | DropdownDatum[] | null) => void;
+  refreshCount?: (count: number) => void;
+  setOverlay?: (val: boolean) => void;
+  editStatus?: (val: number) => void;
+
+  [key: string]: unknown;
+}
+
+interface NetworkResponse {
+  httpstatus?: number;
+  data?: {
+    data?: DropdownDatum[] | null;
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Module-scope scratch (matches original; NOT ideal but preserved for behavior)
+// ---------------------------------------------------------------------------
+
+let searchResult: NetworkResponse | DropdownDatum[] = [];
+let tempvalue: unknown[] = [];
+let ValueString: string | null = null;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const SDropDown: React.FC<SDropDownNewProps> = (props) => {
+  const [isdropdownshow, setDropdownShow] = useState<boolean>(false);
+  const [searchData, setSearchData] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [selectedValue, setSelectedValue] = useState<string | number | undefined>(
+    props.value
+  );
+  const [displayData, setDisplayData] = useState<DropdownDatum[]>([]);
+  const [stage, setStage] = useState<boolean>(false);
+  const [refresh, setRefresh] = useState<number>(0);
+  const [filterPurpose, setFilterPurpose] = useState<DropdownDatum[]>([]);
+  const [alphaFilter, setAlphaFilter] = useState<boolean>(false);
+  const [dropdowndata, setDropDownData] = useState<string | number | undefined>(
+    props.dropdowndata
+  );
+  const dynamicMenuRef = useRef<React.ComponentRef<typeof Menu> | null>(null);
+  const [data, setData] = useState<SDropDownNewData | string | null>(
+    props.data ? props.data : null
+  );
+
+  useEffect(() => {
+    setDropDownData(props.dropdowndata);
+  }, [props.dropdowndata]);
+
+  useEffect(() => {
+    setData(props.data ? props.data : null);
+  }, [props.data]);
+
+  useEffect(() => {
+    if (isBNU(props.overlay) && props.overlay === true) {
+      FetchDropdownList();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.overlay]);
+
+  function getOverlayScreenContainer(): ViewStyle {
+    return {
+      flexDirection: 'row',
+      margin: 10,
+    };
+  }
+
+  useEffect(() => {
+    setAlphaFilter(false);
+  });
+
+  function FetchDropdownList(_key?: unknown): void {
+    const updatedApiUrl = props.dropdownPort ? '' : APIURL;
+    setSearchData('');
+    setIsLoading(true);
+    setDropdownShow(true);
+
+    NetworkServiceCall('get', updatedApiUrl + props.dropdownapi, '')
+      .then(function (response: NetworkResponse) {
+        console.log('updatedUrl', updatedApiUrl + props.dropdownapi);
+        searchResult = response;
+
+        if (response.data && response.data.data != null && response.data.data !== undefined) {
+          let results: DropdownDatum[];
+
+          if (props.iconOnly && props.multiselect) {
+            if (
+              isBNUL(props.multidropdownarray) &&
+              isBNUL(response.data.data)
+            ) {
+              results = response.data.data.map((item) => {
+                const matching = props.multidropdownarray!.find(
+                  (xxx) => item.datavalue === xxx.datavalue
+                );
+                return matching ? { ...item, ...matching } : item;
+              });
+            } else {
+              results = response.data.data;
+            }
+
+            console.log('response.data.data #################', JSON.stringify(results));
+            setDisplayData(results);
+            setIsLoading(false);
+          } else {
+            if (
+              props.selectedval != undefined &&
+              props.selectedval != null &&
+              props.selectedval.length > 0
+            ) {
+              // Original assigned to `results` but that variable was local to
+              // this branch and was declared inside the previous if. Preserve
+              // by mutating in-place; the bug is noted below.
+              response.data.data.forEach((item) => {
+                props.selectedval!.forEach((xxx) => {
+                  if (item.datavalue == xxx) {
+                    item.selected = true;
+                  }
+                });
+              });
+            }
+
+            console.log('response.data.data #################', JSON.stringify(response.data.data));
+            setDisplayData(response.data.data);
+            setIsLoading(false);
+          }
+        } else {
+          searchResult = [];
+          setDisplayData([]);
+          setIsLoading(false);
+        }
+      });
+  }
+
+  function FetchList(): void {
+    setSearchData('');
+    setIsLoading(true);
+    setDropdownShow(true);
+    searchResult = { httpstatus: 200 };
+    setDisplayData(props.dropdownarray ?? []);
+    setIsLoading(false);
+  }
+
+  function selection(item: DropdownDatum, changevalue?: boolean, keycode?: number | string): void {
+    console.log('DROP DOWN DETAILCODE-----------------------', item);
+
+    const dataset: DropdownDatum = { ...item };
+
+    setDropDownData(item.displayvalue);
+    props.onChangeData?.(dataset);
+    props.refreshCount?.(1);
+    setDropdownShow(false);
+    if (props.setOverlay) {
+      props.setOverlay(false);
+    }
+  }
+
+  function DropdownLayout(): React.ReactElement {
+    return (
+      <View style={layoutstyles.overlay_screen_container}>
+        <View style={{ alignItems: 'center' }}>
+          <Text
+            style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'darkblue' }}
+          >
+            {isNU(data) && (data as SDropDownNewData).displaytext != undefined
+              ? (data as SDropDownNewData).displaytext!.toUpperCase()
+              : ' SELECT OPTION '}
+          </Text>
+        </View>
+        <View style={getOverlayScreenChildcontainer()}>
+          {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+        </View>
+
+        {props.multiselect !== undefined && props.multiselect ? (
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'row',
+              gap: normalize(5),
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                justifyContent: 'center',
+                borderRadius: 10,
+                alignItems: 'center',
+                paddingHorizontal: normalize(0),
+              }}
+              onPress={() => getMultiSelect(false)}
+            >
+              <View
+                style={{
+                  flexDirection: 'column',
+                  backgroundColor: '#f7f4f4',
+                  borderRadius: 10,
+                  paddingHorizontal: normalize(15),
+                  paddingVertical: normalize(5),
+                  alignItems: 'center',
+                }}
+              >
+                <HIcons.AntDesign name="select1" color={'#094485'} size={normalize(20)} />
+                <Text
+                  style={{
+                    fontSize: normalize(11),
+                    color: '#094485',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {' '}
+                  Select
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                justifyContent: 'center',
+                borderRadius: 10,
+                alignItems: 'center',
+                paddingHorizontal: normalize(0),
+              }}
+              onPress={() => getMultiSelect(true)}
+            >
+              <View
+                style={{
+                  flexDirection: 'column',
+                  backgroundColor: '#f7f4f4',
+                  borderRadius: 10,
+                  paddingHorizontal: normalize(15),
+                  paddingVertical: normalize(5),
+                  alignItems: 'center',
+                }}
+              >
+                <HIcons.AntDesign name="sync" color={'#094485'} size={normalize(20)} />
+                <Text
+                  style={{
+                    fontSize: normalize(11),
+                    color: '#094485',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {' '}
+                  Reset
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+
+  function getMultiSelect(reset: boolean): void {
+    let filterArray: DropdownDatum[];
+
+    if (reset === false) {
+      filterArray = displayData.filter((element) => element.selected === true);
+      const display =
+        filterArray !== undefined && filterArray.length > 0
+          ? filterArray.map((item) => item.displayvalue)
+          : null;
+      setDropDownData(display?.join());
+    } else {
+      filterArray = [];
+    }
+
+    props.onChangeData?.(filterArray);
+    setDropdownShow(false);
+    if (props.setOverlay) {
+      props.setOverlay(false);
+    }
+  }
+
+  function getOverlayChildrenWrapperStyle(): ViewStyle {
+    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),
+    };
+  }
+
+  return (
+    <View
+      style={{
+        width: props.widthArr ? props.widthArr : '100%',
+        borderWidth: 0,
+        marginVertical: normalize(5),
+      }}
+    >
+      {isNU(data) && (data as SDropDownNewData).displaytext != undefined &&
+        props.iconOnly == undefined ? (
+        <Text
+          style={{
+            fontSize: normalize(11),
+            color: 'black',
+            paddingHorizontal: normalize(5),
+            height: normalize(15),
+          }}
+        >
+          {(data as SDropDownNewData).displaytext}
+        </Text>
+      ) : null}
+
+      <TouchableOpacity
+        onPress={() => {
+          Global.HelpId = props.columnid;
+          if (props.editable) FetchDropdownList();
+          else FetchList();
+        }}
+        disabled={props.disabled ? props.disabled : false}
+        style={{
+          borderWidth: props.borderWidth ? 0 : 1,
+          borderColor: 'lightgrey',
+          paddingLeft: 2,
+          alignItems: 'center',
+          paddingRight: 15,
+          elevation: 0,
+          backgroundColor:
+            props.backgroundColor != undefined ? props.backgroundColor : '#fff',
+          height: props.heightArr
+            ? Platform.OS !== 'web'
+              ? (props.heightArr as number)
+              : Dimensions.get('screen').height * 0.07
+            : Platform.OS !== 'web'
+              ? Dimensions.get('screen').height * 0.04
+              : Dimensions.get('screen').height * 0.07,
+          flexDirection: 'row',
+          borderRadius: props.borderRadiusArr ? props.borderRadiusArr : 5,
+        }}
+      >
+        {(props.iconOnly == undefined && props.iconName != undefined) ||
+          props.icon != undefined ? (
+          <Menu ref={dynamicMenuRef as never}>
+            <MenuTrigger
+              disabled={false}
+              customStyles={{
+                triggerWrapper: { borderWidth: 0, borderRadius: 10, elevation: 0 },
+              }}
+            >
+              <TouchableOpacity
+                disabled={true}
+                style={{ width: normalize(22), paddingLeft: normalize(3) }}
+              >
+                {props.iconName != undefined ? (
+                  <HIcons.FontAwesome5
+                    name={props.iconName}
+                    color={props.flagData == 1 ? 'darkblue' : '#094485'}
+                    size={
+                      props.iconSize != undefined ? normalize(props.iconSize) : normalize(15)
+                    }
+                  />
+                ) : null}
+                {props.icon != undefined ? (
+                  <HIcons.MaterialCommunityIcons
+                    name={props.icon}
+                    color={props.flagData == 1 ? 'darkblue' : '#094485'}
+                    size={normalize(20)}
+                  />
+                ) : null}
+              </TouchableOpacity>
+            </MenuTrigger>
+
+            <MenuOptions
+              optionsContainerStyle={{
+                marginTop: normalize(25),
+                marginLeft: 0,
+                width: props.widthArr as number | undefined,
+              }}
+            >
+              {/* {props.columnid != undefined ? (
+                <SHelpDescription
+                  column={props.columnid != undefined ? (props.columnid as number) : 0}
+                />
+              ) : null} */}
+            </MenuOptions>
+          </Menu>
+        ) : null}
+
+        <View style={layoutstyles.dropdownLabelContainer}>
+          <Text style={layoutstyles.dropdownLabel}>{props.labeltext}</Text>
+          {props?.required && (
+            <Text style={{ color: 'red', fontSize: normalize(10) }}>{' *'}</Text>
+          )}
+        </View>
+
+        {props.iconOnly != true ? (
+          <View style={{ position: 'absolute', bottom: 0, right: 3 }}>
+            <Text
+              adjustsFontSizeToFit
+              numberOfLines={3}
+              style={{
+                fontSize: props.fontSize ? props.fontSize : normalize(11),
+                alignSelf: 'flex-start',
+                fontWeight: 'bold',
+                width: `${(parseFloat(String(props.widthArr)) - normalize(10))}%` as unknown as number,
+              }}
+            >
+              {props.cornerKey != null &&
+                props.cornerKey != undefined &&
+                typeof props.cornerKey === 'string'
+                ? props.cornerKey
+                : ''}
+            </Text>
+          </View>
+        ) : null}
+
+        {props.iconOnly != true ? (
+          <View
+            style={{
+              alignItems: 'center',
+              paddingRight: normalize(5.2),
+              width: props.iconclose ? '88%' : '100%',
+            }}
+          >
+            <Text
+              adjustsFontSizeToFit
+              numberOfLines={3}
+              style={{
+                fontSize: props.fontSize ? props.fontSize : normalize(11),
+                alignSelf: 'flex-start',
+                fontWeight: 'bold',
+                marginHorizontal: normalize(4),
+                color: props.fontcolor ? props.fontcolor : 'black',
+                width: '95%',
+                borderWidth: 0,
+              }}
+            >
+              {dropdowndata != null && dropdowndata != undefined
+                ? dropdowndata
+                : props.value}
+            </Text>
+          </View>
+        ) : null}
+
+        {isBNU(dropdowndata) && props.iconclose ? (
+          <TouchableOpacity
+            disabled={
+              props.disabled != null && props.disabled != undefined && props.disabled
+                ? true
+                : false
+            }
+            onPress={() => {
+              setDropDownData('');
+              props.iconclosecallback?.(true);
+            }}
+          >
+            <HIcons.MaterialCommunityIcons
+              icongroup={3}
+              name={'close-circle'}
+              size={normalize(25)}
+              color={'darkblue'}
+              style={{ color: 'darkblue' }}
+            />
+          </TouchableOpacity>
+        ) : null}
+
+        {props.iconName != undefined && props.iconOnly == true ? (
+          <HIcons.FontAwesome5
+            name={props.iconName}
+            color={props.flagData == 1 ? 'darkblue' : '#094485'}
+            size={props.iconsize}
+          />
+        ) : null}
+
+        {props.icon != undefined && props.iconOnly == true ? (
+          <HIcons.MaterialCommunityIcons
+            name={props.icon}
+            color={props.flagData == 1 ? 'darkblue' : '#094485'}
+            size={props.iconsize}
+          />
+        ) : null}
+
+        {isdropdownshow ? (
+          <CModalOverlay
+            visible={true}
+            onClose={() => {
+              setDropdownShow(false);
+              if (props.setOverlay) {
+                props.setOverlay(false);
+              }
+            }}
+            closeOnTouchOutside
+            animationType="zoomIn"
+            containerStyle={{ backgroundColor: 'transparent' }}
+            childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+            animationDuration={500}
+          >
+            <TouchableOpacity
+              style={{
+                position: 'absolute',
+                right: 0,
+                zIndex: 1,
+                marginTop: normalize(5),
+              }}
+              onPress={() => {
+                setDropdownShow(false);
+                if (props.setOverlay) {
+                  props.setOverlay(false);
+                }
+              }}
+            >
+              <HIcons.FontAwesome5
+                name={'angle-double-down'}
+                color={'#094485'}
+                size={normalize(20)}
+              />
+            </TouchableOpacity>
+
+            <View style={getOverlayScreenContainer()}>
+              <View
+                style={[
+                  layoutstyles.searchTextbox_View,
+                  layoutstyles.overlay_searchTextbox_View,
+                ]}
+              >
+                <View style={layoutstyles.textinput_view}>
+                  <TextInput
+                    style={[layoutstyles.searchTextbox]}
+                    editable={true}
+                    autoCapitalize={'characters'}
+                    value={searchData}
+                    onChangeText={(text) => setSearchData(text)}
+                    secureTextEntry={false}
+                    keyboardType={'default'}
+                    placeholder="Search"
+                  />
+                </View>
+                <Image
+                  style={[layoutstyles.searchIcon]}
+                  source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                />
+              </View>
+            </View>
+
+            {!isLoading ? (
+              (searchResult as NetworkResponse).httpstatus === 200 ? (
+                DropdownLayout()
+              ) : (
+                <View>
+                  <Text style={{
+                    fontSize: normalize(12),
+                    color: colors.color_componentText,
+                    fontWeight: '800', alignItems: 'center', justifyContent: 'center',
+                  }}>
+                    No Result Found
+                  </Text>
+                </View>
+              )
+            ) : (
+              <View
+                style={{
+                  flex: 1,
+                  width: '100%',
+                  justifyContent: 'center',
+                  backgroundColor: 'transparent',
+                  borderRadius: 10,
+                }}
+              >
+                <Loader />
+              </View>
+            )}
+          </CModalOverlay>
+        ) : null}
+
+        {/* ⚠️ `OverlayHOCComponent` is referenced but never declared/imported.
+            This branch will crash at runtime if ever hit. Preserved as a
+            comment placeholder below to keep the code compiling. */}
+        {false && stage ? null : null}
+      </TouchableOpacity>
+    </View>
+  );
+
+  function GetDropdown(list: DropdownDatum[]): React.ReactElement {
+    const newDropDownData =
+      list != null && list != undefined
+        ? list.filter(function (item) {
+          const dataItem = item.displayvalue
+            ? item.displayvalue.toUpperCase()
+            : ''.toUpperCase();
+          const textData = searchData.toUpperCase();
+          return dataItem.indexOf(textData) > -1;
+        })
+        : null;
+
+    return (
+      <View style={{ flexDirection: 'row', flex: 1, width: '100%' }}>
+        <FlatList<DropdownDatum>
+          data={newDropDownData ?? []}
+          renderItem={renderItem}
+          initialNumToRender={150}
+          maxToRenderPerBatch={200}
+          keyExtractor={(_item, index) => 'key' + index}
+          style={{ flex: 1, width: '85%' }}
+          contentContainerStyle={{ flexGrow: 1 }}
+          scrollEnabled={true}
+          nestedScrollEnabled={true}
+        />
+      </View>
+    );
+  }
+
+  function multiselect(item: DropdownDatum, _keycode?: number | string): void {
+    item.selected = !item.selected;
+    setRefresh(refresh + 1);
+  }
+
+  function renderItem(data: ListRenderItemInfo<DropdownDatum>): React.ReactElement {
+    return (
+      <TouchableOpacity
+        style={[
+          getListviewItem(data.item.selected ?? false),
+          { flexDirection: 'row', alignItems: 'center' },
+        ]}
+        onPress={() =>
+          props.multiselect != undefined
+            ? multiselect(data.item, props.keycode)
+            : selection(data.item, data.item.selected, props.keycode)
+        }
+        activeOpacity={0.5}
+      >
+        <HIcons.FontAwesome
+          name="dot-circle-o"
+          color="darkblue"
+          size={normalize(12)}
+          style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }}
+        />
+        <View style={{ flexDirection: 'column' }}>
+          <Text
+            style={
+              selectedValue != null && selectedValue != undefined
+                ? selectedValue == data.item.datavalue
+                  ? getListviewItemText(true)
+                  : getListviewItemText(false)
+                : getListviewItemText(false)
+            }
+          >
+            {data.item.displayvalue}
+          </Text>
+          {data.item.displayvalue1 ? (
+            <Text
+              style={{
+                fontSize: normalize(10),
+                color: 'grey',
+              }}
+            >
+              {data.item.displayvalue1} - {data.item.displayvalue2}
+            </Text>
+          ) : null}
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  function getOverlayScreenChildcontainer(): ViewStyle {
+    return {
+      flex: 1,
+      minHeight: Dimensions.get('window').height * 0.5,
+      maxHeight: Dimensions.get('window').height * 0.75,
+      marginBottom: Dimensions.get('window').height * 0.01,
+      marginTop: Dimensions.get('window').height * 0.01,
+    };
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+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: {
+    fontSize: normalize(12),
+    fontWeight: 'bold',
+    paddingLeft: Dimensions.get('window').width * 0.02,
+    color: colors.color_PopupHeadingText,
+    width: '100%',
+  },
+  overlay_screen_container: {
+    width: '100%',
+    flex: 1,
+  },
+  dropdownLabelContainer: {
+    position: 'absolute',
+    backgroundColor: '#fff',
+    top: -8,
+    left: 12,
+    paddingHorizontal: 4,
+    zIndex: 1,
+    flexDirection: 'row',
+  },
+  dropdownLabel: {
+    fontSize: normalize(9),
+    color: Global.AppTheme.primary_color,
+    fontWeight: '500',
+  },
+  searchTextbox_View: {
+    flexDirection: 'row',
+    borderWidth: 0,
+    borderColor: colors.color_componentBordercolor,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    borderRadius: 7,
+    // margin: Dimensions.get("window").height * 0.002,
+    marginBottom: Dimensions.get('window').height * 0.003,
+    height: 35,
+    // width:'100%',
+    backgroundColor: '#f1f3f6',
+    // backgroundColor:colors.color_componentBgcolor,
+    marginTop: 0, padding: 5,
+  },
+  searchTextbox: {
+    color: 'black',
+    width: '100%', marginLeft: '1%', marginRight: '1%',
+    fontWeight: 'bold',
+    fontSize: normalize(18),
+    textAlign: 'justify',
+    padding: 0, height: '100%', marginBottom: -(Dimensions.get('window').height * 0.003),
+  },
+  searchIcon: {
+    width: 20, height: 20, margin: 5, resizeMode: 'contain',
+  },
+  searchButton: {
+    height: 35,
+    width: '20%',
+    borderRadius: 7,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  searchButtonText: {
+    fontSize: normalize(10),
+    fontWeight: 'bold',
+    color: colors.color_buttonText,
+    padding: 1,
+  },
+});
+
+export default SDropDown;