etendo-ui-library 1.4.5 → 1.4.6

package/dist-native/components/inputBase/InputBase.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IInputBase } from './InputBase.types';
-declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onPress, onBlur, onSubmitEditing, secureTextEntry, keyboardType, styleContainer, isFocusable, }: IInputBase) => React.JSX.Element;
+declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onPress, onBlur, onSubmitEditing, secureTextEntry, keyboardType, styleContainer, isFocusable, refInputContainer, }: IInputBase) => React.JSX.Element;
 export default InputBase;

package/dist-native/components/inputBase/InputBase.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _InputBase=require("./InputBase.styles");var _colors=require("../../styles/colors");var _table_utils=require("../../helpers/table_utils");var _gridContainer=require("../containers/gridContainer");var _excluded=["style"],_excluded2=["iconLeft","iconRight"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/InputBase.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var InputBase=function InputBase(_ref){var value=_ref.value,placeholder=_ref.placeholder,title=_ref.title,helperText=_ref.helperText,isDisabled=_ref.isDisabled,isError=_ref.isError,onChangeText=_ref.onChangeText,icon=_ref.icon,rightButtons=_ref.rightButtons,onPress=_ref.onPress,onBlur=_ref.onBlur,onSubmitEditing=_ref.onSubmitEditing,secureTextEntry=_ref.secureTextEntry,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'default':_ref$keyboardType,styleContainer=_ref.styleContainer,_ref$isFocusable=_ref.isFocusable,isFocusable=_ref$isFocusable===void 0?true:_ref$isFocusable;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var borderWidth=isFocused?3:1;var paddingVertical=13-borderWidth;var paddingHorizontal=12-borderWidth;var isEditable=onPress?false:!isDisabled;var onFocusChange=function onFocusChange(){if(!isDisabled&&isFocusable){setIsFocused(true);}};var onBlurChange=function onBlurChange(){setIsFocused(false);onBlur==null?void 0:onBlur();};var determineColor=function determineColor(icon){if(icon){return iconColorStyle();}if(isDisabled){return _colors.NEUTRAL_500;}return isError?_colors.DANGER_700:_colors.PRIMARY_100;};var textColorStyle=function textColorStyle(){if(!value||isDisabled){return _colors.NEUTRAL_500;}if(isFocused){return _colors.PRIMARY_100;}if(isError&&!isFocused){return _colors.DANGER_700;}return _colors.PRIMARY_100;};var iconColorStyle=function iconColorStyle(){if(isDisabled){return _colors.NEUTRAL_500;}if(isFocused){return _colors.PRIMARY_100;}if(isError&&!isFocused){return _colors.DANGER_700;}return _colors.PRIMARY_100;};var textInputStyle=[_InputBase.styles.textInput,{color:textColorStyle()}];if(_reactNative.Platform.OS==='web'){textInputStyle.push({outlineWidth:0});}var handleChange=function handleChange(string){if(onChangeText){if(['numeric','number-pad','phone-pad','decimal-pad'].includes(keyboardType)){var regexNumber=/^[\d.,\/]*$/;if(regexNumber.test(string)||string===''){onChangeText(string);}}else{onChangeText(string);}}};var determineIconStyles=function determineIconStyles(icon){if(!icon)return null;var _icon$props=icon.props,_icon$props$style=_icon$props.style,style=_icon$props$style===void 0?{}:_icon$props$style,otherIconProps=(0,_objectWithoutProperties2.default)(_icon$props,_excluded);return _react.default.cloneElement(icon,Object.assign({fill:determineColor(true),style:Object.assign({},style,{height:style.height||_InputBase.styles.icon.height,width:style.width||_InputBase.styles.icon.width})},otherIconProps));};return _react.default.createElement(_react.default.Fragment,null,!!title&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.title,{color:determineColor()}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:9}},title),_react.default.createElement(_reactNative.View,{style:[_InputBase.styles.container,{borderColor:determineColor()},{paddingHorizontal:paddingHorizontal,paddingVertical:paddingVertical,borderWidth:borderWidth},Object.assign({},styleContainer)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:136,columnNumber:7}},!!icon&&_react.default.createElement(_reactNative.View,{style:_InputBase.styles.iconContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:11}},_react.default.cloneElement(icon,{style:_InputBase.styles.icon,fill:determineColor(true)})),_react.default.createElement(_reactNative.TouchableOpacity,{disabled:isDisabled,style:_InputBase.styles.containerInput,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{value:value,onPressIn:onPress,onChangeText:handleChange,placeholder:placeholder,editable:isEditable,onFocus:onFocusChange,onBlur:onBlurChange,onSubmitEditing:onSubmitEditing,style:[textInputStyle,onPress&&(0,_table_utils.cursorPointer)()],keyboardType:keyboardType,secureTextEntry:secureTextEntry,__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:11}})),!!rightButtons&&_react.default.createElement(_gridContainer.GridContainer,{gapHorizontal:12,stylesContainer:_InputBase.styles.gridContainer,components:rightButtons.map(function(ButtonComponent,index){var _ButtonComponent$prop=ButtonComponent.props,iconLeft=_ButtonComponent$prop.iconLeft,iconRight=_ButtonComponent$prop.iconRight,otherProps=(0,_objectWithoutProperties2.default)(_ButtonComponent$prop,_excluded2);var modifiedProps=Object.assign({},otherProps);modifiedProps.paddingVertical=(modifiedProps==null?void 0:modifiedProps.paddingVertical)||0;modifiedProps.paddingHorizontal=(modifiedProps==null?void 0:modifiedProps.paddingHorizontal)||0;modifiedProps.iconLeft=determineIconStyles(iconLeft);modifiedProps.iconRight=determineIconStyles(iconRight);modifiedProps.text='';return _react.default.createElement(ButtonComponent.type,(0,_extends2.default)({},modifiedProps,{key:index,disabled:isDisabled,typeStyle:'white',__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:17}}));}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:11}})),!!helperText&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.helperText,{color:determineColor()}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:9}},helperText));};var _default=exports.default=InputBase;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _InputBase=require("./InputBase.styles");var _colors=require("../../styles/colors");var _table_utils=require("../../helpers/table_utils");var _gridContainer=require("../containers/gridContainer");var _excluded=["style"],_excluded2=["iconLeft","iconRight"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/InputBase.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var InputBase=function InputBase(_ref){var value=_ref.value,placeholder=_ref.placeholder,title=_ref.title,helperText=_ref.helperText,isDisabled=_ref.isDisabled,isError=_ref.isError,onChangeText=_ref.onChangeText,icon=_ref.icon,rightButtons=_ref.rightButtons,onPress=_ref.onPress,onBlur=_ref.onBlur,onSubmitEditing=_ref.onSubmitEditing,secureTextEntry=_ref.secureTextEntry,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'default':_ref$keyboardType,styleContainer=_ref.styleContainer,_ref$isFocusable=_ref.isFocusable,isFocusable=_ref$isFocusable===void 0?true:_ref$isFocusable,refInputContainer=_ref.refInputContainer;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var borderWidth=isFocused?3:1;var paddingVertical=13-borderWidth;var paddingHorizontal=12-borderWidth;var isEditable=onPress?false:!isDisabled;var onFocusChange=function onFocusChange(){if(!isDisabled&&isFocusable){setIsFocused(true);}};var onBlurChange=function onBlurChange(){setIsFocused(false);onBlur==null?void 0:onBlur();};var determineColor=function determineColor(icon){if(icon){return iconColorStyle();}if(isDisabled){return _colors.NEUTRAL_500;}return isError?_colors.DANGER_700:_colors.PRIMARY_100;};var textColorStyle=function textColorStyle(){if(!value||isDisabled){return _colors.NEUTRAL_500;}if(isFocused){return _colors.PRIMARY_100;}if(isError&&!isFocused){return _colors.DANGER_700;}return _colors.PRIMARY_100;};var iconColorStyle=function iconColorStyle(){if(isDisabled){return _colors.NEUTRAL_500;}if(isFocused){return _colors.PRIMARY_100;}if(isError&&!isFocused){return _colors.DANGER_700;}return _colors.PRIMARY_100;};var textInputStyle=[_InputBase.styles.textInput,{color:textColorStyle()}];if(_reactNative.Platform.OS==='web'){textInputStyle.push({outlineWidth:0});}var handleChange=function handleChange(string){if(onChangeText){if(['numeric','number-pad','phone-pad','decimal-pad'].includes(keyboardType)){var regexNumber=/^[\d.,\/]*$/;if(regexNumber.test(string)||string===''){onChangeText(string);}}else{onChangeText(string);}}};var determineIconStyles=function determineIconStyles(icon){if(!icon)return null;var _icon$props=icon.props,_icon$props$style=_icon$props.style,style=_icon$props$style===void 0?{}:_icon$props$style,otherIconProps=(0,_objectWithoutProperties2.default)(_icon$props,_excluded);return _react.default.cloneElement(icon,Object.assign({fill:determineColor(true),style:Object.assign({},style,{height:style.height||_InputBase.styles.icon.height,width:style.width||_InputBase.styles.icon.width})},otherIconProps));};return _react.default.createElement(_react.default.Fragment,null,!!title&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.title,{color:determineColor()}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:130,columnNumber:9}},title),_react.default.createElement(_reactNative.View,{ref:refInputContainer,style:[_InputBase.styles.container,{borderColor:determineColor()},{paddingHorizontal:paddingHorizontal,paddingVertical:paddingVertical,borderWidth:borderWidth},Object.assign({},styleContainer)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:7}},!!icon&&_react.default.createElement(_reactNative.View,{style:_InputBase.styles.iconContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:150,columnNumber:11}},_react.default.cloneElement(icon,{style:_InputBase.styles.icon,fill:determineColor(true)})),_react.default.createElement(_reactNative.TouchableOpacity,{disabled:isDisabled,style:_InputBase.styles.containerInput,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:9}},_react.default.createElement(_reactNative.TextInput,{value:value,onPressIn:onPress,onChangeText:handleChange,placeholder:placeholder,editable:isEditable,onFocus:onFocusChange,onBlur:onBlurChange,onSubmitEditing:onSubmitEditing,style:[textInputStyle,onPress&&(0,_table_utils.cursorPointer)()],keyboardType:keyboardType,secureTextEntry:secureTextEntry,__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:11}})),!!rightButtons&&_react.default.createElement(_gridContainer.GridContainer,{gapHorizontal:12,stylesContainer:_InputBase.styles.gridContainer,components:rightButtons.map(function(ButtonComponent,index){var _ButtonComponent$prop=ButtonComponent.props,iconLeft=_ButtonComponent$prop.iconLeft,iconRight=_ButtonComponent$prop.iconRight,otherProps=(0,_objectWithoutProperties2.default)(_ButtonComponent$prop,_excluded2);var modifiedProps=Object.assign({},otherProps);modifiedProps.paddingVertical=(modifiedProps==null?void 0:modifiedProps.paddingVertical)||0;modifiedProps.paddingHorizontal=(modifiedProps==null?void 0:modifiedProps.paddingHorizontal)||0;modifiedProps.iconLeft=determineIconStyles(iconLeft);modifiedProps.iconRight=determineIconStyles(iconRight);modifiedProps.text='';return _react.default.createElement(ButtonComponent.type,(0,_extends2.default)({},modifiedProps,{key:index,disabled:isDisabled,typeStyle:'white',__self:_this,__source:{fileName:_jsxFileName,lineNumber:193,columnNumber:17}}));}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:11}})),!!helperText&&_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:[_InputBase.styles.helperText,{color:determineColor()}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:9}},helperText));};var _default=exports.default=InputBase;

package/dist-native/components/inputBase/InputBase.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { ColorValue, ImageStyle, NativeSyntheticEvent, TextInputSubmitEditingEventData, ViewStyle } from 'react-native';
+import { ReactElement, RefObject } from 'react';
+import { ColorValue, ImageStyle, NativeSyntheticEvent, TextInputSubmitEditingEventData, View, ViewStyle } from 'react-native';
 import { ButtonProps } from '../button/Button.types';
 export interface SvgImageProps {
     style?: ImageStyle;
@@ -23,4 +23,5 @@ export interface IInputBase {
     keyboardType?: 'default' | 'numeric' | 'email-address' | 'url' | 'number-pad' | 'phone-pad' | 'decimal-pad' | 'web-search' | 'visible-password';
     styleContainer?: ViewStyle;
     isFocusable?: boolean;
+    refInputContainer?: RefObject<View>;
 }

package/dist-native/components/inputBase/dropdown-input/DropdownInput.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _InputBase=_interopRequireDefault(require("../InputBase"));var _button=require("../../button");var _icons=require("../../../assets/images/icons");var _functions_utils=require("../../../helpers/functions_utils");var _DropdownInputOptions=_interopRequireDefault(require("./components/DropdownInputOptions/DropdownInputOptions"));var _DropdownInput=require("./DropdownInput.constants");var _excluded=["staticData","displayKey","onSelect","value","maxVisibleOptions","onFetchData","pageSize","searchPlaceholder","noResultsText","displayMode"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/dropdown-input/DropdownInput.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DropdownInput=function DropdownInput(_ref){var staticData=_ref.staticData,displayKey=_ref.displayKey,onSelect=_ref.onSelect,value=_ref.value,_ref$maxVisibleOption=_ref.maxVisibleOptions,maxVisibleOptions=_ref$maxVisibleOption===void 0?_DropdownInput.MAX_VISIBLE_OPTION:_ref$maxVisibleOption,onFetchData=_ref.onFetchData,_ref$pageSize=_ref.pageSize,pageSize=_ref$pageSize===void 0?_DropdownInput.PAGE_SIZE:_ref$pageSize,_ref$searchPlaceholde=_ref.searchPlaceholder,searchPlaceholder=_ref$searchPlaceholde===void 0?_DropdownInput.SEARCH_PLACEHOLDER:_ref$searchPlaceholde,_ref$noResultsText=_ref.noResultsText,noResultsText=_ref$noResultsText===void 0?_DropdownInput.NO_RESULT_TEXT:_ref$noResultsText,_ref$displayMode=_ref.displayMode,displayMode=_ref$displayMode===void 0?_DropdownInput.DISPLAY_MODE:_ref$displayMode,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var ref=(0,_react.useRef)(null);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isVisibleDropdown=_useState2[0],setIsVisibleDropdown=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),dataList=_useState4[0],setDataList=_useState4[1];var _useState5=(0,_react.useState)(0),_useState6=(0,_slicedToArray2.default)(_useState5,2),currentPage=_useState6[0],setCurrentPage=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isLoading=_useState8[0],setIsLoading=_useState8[1];var _useState9=(0,_react.useState)(true),_useState10=(0,_slicedToArray2.default)(_useState9,2),isLoadMoreData=_useState10[0],setIsLoadMoreData=_useState10[1];var _useState11=(0,_react.useState)(0),_useState12=(0,_slicedToArray2.default)(_useState11,2),heightOptions=_useState12[0],setHeightOptions=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),isModalUp=_useState14[0],setIsModalUp=_useState14[1];var _useState15=(0,_react.useState)(''),_useState16=(0,_slicedToArray2.default)(_useState15,2),filterText=_useState16[0],setFilterText=_useState16[1];var _useState17=(0,_react.useState)({top:0,left:0,width:0}),_useState18=(0,_slicedToArray2.default)(_useState17,2),modalPosition=_useState18[0],setModalPosition=_useState18[1];var _Dimensions$get=_reactNative.Dimensions.get('window'),windowWidth=_Dimensions$get.width,windowHeight=_Dimensions$get.height;var adjustDropdownPosition=(0,_react.useCallback)(function(){if(isVisibleDropdown&&ref.current){ref.current.measure(function(x,y,width,height,pageX,pageY){var spaceBelow=windowHeight-(pageY+height);var neededSpace=heightOptions+16;if(neededSpace>spaceBelow){var topPosition=Math.max(pageY-neededSpace,0);setModalPosition({top:topPosition,left:pageX,width:width});setIsModalUp(true);}else{setModalPosition({top:pageY+height,left:pageX,width:width});setIsModalUp(false);}});}},[isVisibleDropdown,heightOptions,windowHeight]);(0,_react.useEffect)(function(){setHeightOptions(maxVisibleOptions&&dataList&&(dataList==null?void 0:dataList.length)<=maxVisibleOptions?48+48+16:maxVisibleOptions&&maxVisibleOptions*48+48+16);},[dataList,isVisibleDropdown,isLoading]);(0,_react.useEffect)(function(){if(!!staticData){setDataList(staticData);}},[staticData]);(0,_react.useEffect)(function(){if(isVisibleDropdown&&!dataList.length){fetchMordeData(currentPage,dataList,isLoadMoreData,'');}},[isVisibleDropdown]);(0,_react.useEffect)(function(){adjustDropdownPosition();var handleScroll=function handleScroll(){if(isVisibleDropdown){adjustDropdownPosition();}};if((0,_functions_utils.isWebPlatform)()){window.addEventListener('scroll',handleScroll,{passive:true});return function(){return window.removeEventListener('scroll',handleScroll);};}},[isVisibleDropdown,adjustDropdownPosition]);var onSelectOption=function onSelectOption(item){onSelect==null?void 0:onSelect(item);setIsVisibleDropdown(false);};var onScroll=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(event){if(isAtEndOfScroll(event.nativeEvent)){fetchMordeData(currentPage,dataList,isLoadMoreData,filterText);}});return function onScroll(_x){return _ref2.apply(this,arguments);};}();var fetchMordeData=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(currentPage,prevData,isLoadMoreData,filterText){if(!isLoading&&onFetchData&&isLoadMoreData&&!staticData){setIsLoading(true);yield onFetchData(currentPage,pageSize,filterText).then(function(res){if(res.length===0){setIsLoadMoreData(false);return;}setDataList([].concat((0,_toConsumableArray2.default)(prevData),(0,_toConsumableArray2.default)(res)));}).finally(function(){setCurrentPage(currentPage+1);setIsLoading(false);});}});return function fetchMordeData(_x2,_x3,_x4,_x5){return _ref3.apply(this,arguments);};}();var isAtEndOfScroll=function isAtEndOfScroll(_ref4){var layoutMeasurement=_ref4.layoutMeasurement,contentOffset=_ref4.contentOffset,contentSize=_ref4.contentSize;return layoutMeasurement.height+contentOffset.y>=contentSize.height-_DropdownInput.BUFFER;};var handleOnFilterTextChange=function handleOnFilterTextChange(value){setDataList([]);setCurrentPage(0);setIsLoadMoreData(true);setFilterText(value);fetchMordeData(0,[],true,value);};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.View,{ref:ref,onLayout:function onLayout(){adjustDropdownPosition();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:7}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({},inputBaseProps,{rightButtons:[_react.default.createElement(_button.Button,{onPress:function onPress(){setIsVisibleDropdown(function(prev){return!prev;});},typeStyle:'primary',iconLeft:isVisibleDropdown?_react.default.createElement(_icons.ChevronUpIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:37}}):_react.default.createElement(_icons.ChevronDownIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:57}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:13}})],value:value==null?void 0:value.toString(),onPress:function onPress(){setIsVisibleDropdown(function(prev){return!prev;});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:9}}))),isVisibleDropdown&&_react.default.createElement(_DropdownInputOptions.default,{isVisibleDropdown:true,onClose:function onClose(){setIsVisibleDropdown(false);},value:value,onSelectOption:onSelectOption,modalPosition:modalPosition,windowWidth:windowWidth,windowHeight:windowHeight,data:dataList,displayKey:displayKey,maxVisibleOptions:maxVisibleOptions,onScroll:onScroll,isLoading:isLoading,isStaticData:staticData!==undefined,searchPlaceholder:searchPlaceholder,onFilterTextChange:handleOnFilterTextChange,noResultsText:noResultsText,isModalUp:isModalUp,displayMode:displayMode,__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:9}}));};var _default=exports.default=DropdownInput;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _InputBase=_interopRequireDefault(require("../InputBase"));var _button=require("../../button");var _icons=require("../../../assets/images/icons");var _functions_utils=require("../../../helpers/functions_utils");var _DropdownInputOptions=_interopRequireDefault(require("./components/DropdownInputOptions/DropdownInputOptions"));var _DropdownInput=require("./DropdownInput.constants");var _excluded=["staticData","displayKey","onSelect","value","maxVisibleOptions","onFetchData","pageSize","searchPlaceholder","noResultsText","displayMode"];var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/dropdown-input/DropdownInput.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DropdownInput=function DropdownInput(_ref){var staticData=_ref.staticData,displayKey=_ref.displayKey,onSelect=_ref.onSelect,value=_ref.value,_ref$maxVisibleOption=_ref.maxVisibleOptions,maxVisibleOptions=_ref$maxVisibleOption===void 0?_DropdownInput.MAX_VISIBLE_OPTION:_ref$maxVisibleOption,onFetchData=_ref.onFetchData,_ref$pageSize=_ref.pageSize,pageSize=_ref$pageSize===void 0?_DropdownInput.PAGE_SIZE:_ref$pageSize,_ref$searchPlaceholde=_ref.searchPlaceholder,searchPlaceholder=_ref$searchPlaceholde===void 0?_DropdownInput.SEARCH_PLACEHOLDER:_ref$searchPlaceholde,_ref$noResultsText=_ref.noResultsText,noResultsText=_ref$noResultsText===void 0?_DropdownInput.NO_RESULT_TEXT:_ref$noResultsText,_ref$displayMode=_ref.displayMode,displayMode=_ref$displayMode===void 0?_DropdownInput.DISPLAY_MODE:_ref$displayMode,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var ref=(0,_react.useRef)(null);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isVisibleDropdown=_useState2[0],setIsVisibleDropdown=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),dataList=_useState4[0],setDataList=_useState4[1];var _useState5=(0,_react.useState)(0),_useState6=(0,_slicedToArray2.default)(_useState5,2),currentPage=_useState6[0],setCurrentPage=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),isLoading=_useState8[0],setIsLoading=_useState8[1];var _useState9=(0,_react.useState)(true),_useState10=(0,_slicedToArray2.default)(_useState9,2),isLoadMoreData=_useState10[0],setIsLoadMoreData=_useState10[1];var _useState11=(0,_react.useState)(0),_useState12=(0,_slicedToArray2.default)(_useState11,2),heightOptions=_useState12[0],setHeightOptions=_useState12[1];var _useState13=(0,_react.useState)(false),_useState14=(0,_slicedToArray2.default)(_useState13,2),isModalUp=_useState14[0],setIsModalUp=_useState14[1];var _useState15=(0,_react.useState)(''),_useState16=(0,_slicedToArray2.default)(_useState15,2),filterText=_useState16[0],setFilterText=_useState16[1];var _useState17=(0,_react.useState)({top:0,left:0,width:0}),_useState18=(0,_slicedToArray2.default)(_useState17,2),modalPosition=_useState18[0],setModalPosition=_useState18[1];var _Dimensions$get=_reactNative.Dimensions.get('window'),windowWidth=_Dimensions$get.width,windowHeight=_Dimensions$get.height;var adjustDropdownPosition=(0,_react.useCallback)(function(){if(isVisibleDropdown&&ref.current){ref.current.measure(function(x,y,width,height,pageX,pageY){var spaceBelow=windowHeight-(pageY+height);if(heightOptions+16>spaceBelow){setModalPosition({top:pageY-heightOptions-16,left:pageX,width:width});setIsModalUp(true);}else{setModalPosition({top:pageY+height,left:pageX,width:width});setIsModalUp(false);}});}},[isVisibleDropdown,heightOptions,windowHeight]);(0,_react.useEffect)(function(){setHeightOptions(maxVisibleOptions&&dataList&&(dataList==null?void 0:dataList.length)<=maxVisibleOptions?48+48+16:maxVisibleOptions&&maxVisibleOptions*48+48+16);},[dataList,isVisibleDropdown,isLoading]);(0,_react.useEffect)(function(){if(!!staticData){setDataList(staticData);}},[staticData]);(0,_react.useEffect)(function(){if(isVisibleDropdown&&!dataList.length){fetchMordeData(currentPage,dataList,isLoadMoreData,'');}},[isVisibleDropdown]);(0,_react.useEffect)(function(){adjustDropdownPosition();var handleScroll=function handleScroll(){if(isVisibleDropdown){adjustDropdownPosition();}};if((0,_functions_utils.isWebPlatform)()){window.addEventListener('scroll',handleScroll,{passive:true});return function(){return window.removeEventListener('scroll',handleScroll);};}},[isVisibleDropdown,adjustDropdownPosition]);var onSelectOption=function onSelectOption(item){onSelect==null?void 0:onSelect(item);setIsVisibleDropdown(false);};var onScroll=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(event){if(isAtEndOfScroll(event.nativeEvent)){fetchMordeData(currentPage,dataList,isLoadMoreData,filterText);}});return function onScroll(_x){return _ref2.apply(this,arguments);};}();var fetchMordeData=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(currentPage,prevData,isLoadMoreData,filterText){if(!isLoading&&onFetchData&&isLoadMoreData&&!staticData){setIsLoading(true);yield onFetchData(currentPage,pageSize,filterText).then(function(res){if(res.length===0){setIsLoadMoreData(false);return;}setDataList([].concat((0,_toConsumableArray2.default)(prevData),(0,_toConsumableArray2.default)(res)));}).finally(function(){setCurrentPage(currentPage+1);setIsLoading(false);});}});return function fetchMordeData(_x2,_x3,_x4,_x5){return _ref3.apply(this,arguments);};}();var isAtEndOfScroll=function isAtEndOfScroll(_ref4){var layoutMeasurement=_ref4.layoutMeasurement,contentOffset=_ref4.contentOffset,contentSize=_ref4.contentSize;return layoutMeasurement.height+contentOffset.y>=contentSize.height-_DropdownInput.BUFFER;};var handleOnFilterTextChange=function handleOnFilterTextChange(value){setDataList([]);setCurrentPage(0);setIsLoadMoreData(true);setFilterText(value);fetchMordeData(0,[],true,value);};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.View,{onLayout:function onLayout(){adjustDropdownPosition();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:7}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({refInputContainer:ref},inputBaseProps,{rightButtons:[_react.default.createElement(_button.Button,{onPress:function onPress(){setIsVisibleDropdown(function(prev){return!prev;});},typeStyle:'primary',iconLeft:isVisibleDropdown?_react.default.createElement(_icons.ChevronUpIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:37}}):_react.default.createElement(_icons.ChevronDownIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:57}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:13}})],value:value==null?void 0:value.toString(),onPress:function onPress(){setIsVisibleDropdown(function(prev){return!prev;});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:9}}))),isVisibleDropdown&&_react.default.createElement(_DropdownInputOptions.default,{isVisibleDropdown:true,onClose:function onClose(){setIsVisibleDropdown(false);},value:value,onSelectOption:onSelectOption,modalPosition:modalPosition,windowWidth:windowWidth,windowHeight:windowHeight,data:dataList,displayKey:displayKey,maxVisibleOptions:maxVisibleOptions,onScroll:onScroll,isLoading:isLoading,isStaticData:staticData!==undefined,searchPlaceholder:searchPlaceholder,onFilterTextChange:handleOnFilterTextChange,noResultsText:noResultsText,isModalUp:isModalUp,__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:9}}));};var _default=exports.default=DropdownInput;

package/dist-native/components/inputBase/dropdown-input/DropdownInput.styles.d.ts

@@ -19,7 +19,6 @@ export declare const styles: {
         paddingHorizontal: number;
         maxHeight: number;
         minHeight: number;
-        backgroundColor: string;
     };
     optionText: {
         color: string;

package/dist-native/components/inputBase/dropdown-input/DropdownInput.styles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({fullScreenTouchable:{position:'absolute'},optionsContainer:{position:'absolute',backgroundColor:_colors.NEUTRAL_0,padding:8,paddingBottom:0,borderRadius:8,borderWidth:1.5,borderColor:_colors.NEUTRAL_300},option:{marginBottom:8,flex:1,borderRadius:8,justifyContent:'center',paddingHorizontal:8,maxHeight:40,minHeight:40,backgroundColor:_colors.NEUTRAL_0},optionText:{color:_colors.PRIMARY_100,fontSize:16,letterSpacing:-0.16,fontWeight:'500'},loading:{marginBottom:8,alignSelf:'center',height:40},containerNative:{alignItems:'center',justifyContent:'center',backgroundColor:'rgba(0,0,0,0.5)'},searchContainer:{marginBottom:8}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({fullScreenTouchable:{position:'absolute'},optionsContainer:{position:'absolute',backgroundColor:_colors.NEUTRAL_50,padding:8,paddingBottom:0,borderRadius:8,borderWidth:1.5,borderColor:_colors.NEUTRAL_300},option:{marginBottom:8,flex:1,borderRadius:8,justifyContent:'center',paddingHorizontal:8,maxHeight:40,minHeight:40},optionText:{color:_colors.PRIMARY_100,fontSize:16,letterSpacing:-0.16,fontWeight:'500'},loading:{marginBottom:8,alignSelf:'center',height:40},containerNative:{alignItems:'center',justifyContent:'center',backgroundColor:'rgba(0,0,0,0.5)'},searchContainer:{marginBottom:8}});

package/dist-native/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IDropdownInputOptions } from '../../DropdownInput.types';
-declare const DropdownInputOptions: ({ isVisibleDropdown, onClose, onSelectOption, modalPosition, windowHeight, windowWidth, data, displayKey, value, maxVisibleOptions, onScroll, isLoading, isStaticData, searchPlaceholder, onFilterTextChange, noResultsText, isModalUp, displayMode, }: IDropdownInputOptions) => React.JSX.Element;
+declare const DropdownInputOptions: ({ isVisibleDropdown, onClose, onSelectOption, modalPosition, windowHeight, windowWidth, data, displayKey, value, maxVisibleOptions, onScroll, isLoading, isStaticData, searchPlaceholder, onFilterTextChange, noResultsText, isModalUp, displayMode }: IDropdownInputOptions) => React.JSX.Element;
 export default DropdownInputOptions;

package/dist-native/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _colors=require("../../../../../styles/colors");var _searchInput=require("../../../search-input");var _button=require("../../../../button");var _icons=require("../../../../../assets/images/icons");var _DropdownInput=require("../../DropdownInput.styles");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DropdownInputOptions=function DropdownInputOptions(_ref){var isVisibleDropdown=_ref.isVisibleDropdown,onClose=_ref.onClose,onSelectOption=_ref.onSelectOption,modalPosition=_ref.modalPosition,windowHeight=_ref.windowHeight,windowWidth=_ref.windowWidth,data=_ref.data,displayKey=_ref.displayKey,value=_ref.value,maxVisibleOptions=_ref.maxVisibleOptions,onScroll=_ref.onScroll,isLoading=_ref.isLoading,isStaticData=_ref.isStaticData,searchPlaceholder=_ref.searchPlaceholder,onFilterTextChange=_ref.onFilterTextChange,noResultsText=_ref.noResultsText,isModalUp=_ref.isModalUp,displayMode=_ref.displayMode;var scrollViewRef=(0,_react.useRef)(null);var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),filterText=_useState2[0],setFilterText=_useState2[1];var isCenteredModal=displayMode==='centeredModal';(0,_react.useEffect)(function(){if(!isLoading&&filterText!==null){var handler=setTimeout(function(){onFilterTextChange(filterText);},500);return function(){return clearTimeout(handler);};}},[filterText]);(0,_react.useEffect)(function(){if(isLoading&&data!=null&&data.length){var _scrollViewRef$curren;(_scrollViewRef$curren=scrollViewRef.current)==null?void 0:_scrollViewRef$curren.scrollToEnd({animated:true});}},[isLoading]);(0,_react.useEffect)(function(){if(isVisibleDropdown&&data&&value&&scrollViewRef.current&&displayKey){var selectedIndex=data.findIndex(function(item){return item[displayKey]===value;});if(selectedIndex>=0){var positionY=selectedIndex*48;setTimeout(function(){if(scrollViewRef.current){scrollViewRef.current.scrollTo({y:positionY,animated:false});}},100);}}},[isVisibleDropdown]);var filterComponent=function filterComponent(){return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.searchContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:7}},_react.default.createElement(_searchInput.SearchInput,{placeholder:searchPlaceholder,value:filterText||'',onChangeText:function onChangeText(text){setFilterText(text);},isFocusable:false,styleContainer:{borderColor:_colors.NEUTRAL_400},onSubmit:function onSubmit(){onFilterTextChange(filterText||'');},rightButtons:!!filterText?[_react.default.createElement(_button.Button,{typeStyle:'white',iconLeft:_react.default.createElement(_icons.XIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:31}}),onPress:function onPress(){setFilterText('');},__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:19}})]:[],__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:9}}));};console.log({isCenteredModal:isCenteredModal,isModalUp:isModalUp,isStaticData:isStaticData});console.log(!isStaticData&&!isModalUp);console.log(!isStaticData&&isCenteredModal);console.log(!isStaticData&&!isModalUp||!isStaticData&&isCenteredModal);return _react.default.createElement(_reactNative.Modal,{transparent:true,visible:isVisibleDropdown,animationType:"fade",onRequestClose:function onRequestClose(){onClose();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DropdownInput.styles.fullScreenTouchable],onPress:function onPress(){return onClose();},activeOpacity:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:7}},_react.default.createElement(_reactNative.KeyboardAvoidingView,{behavior:_reactNative.Platform.OS==='ios'?'padding':'height',style:[_DropdownInput.styles.fullScreenTouchable,isCenteredModal&&_DropdownInput.styles.containerNative,{width:windowWidth,height:windowHeight}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DropdownInput.styles.optionsContainer,{maxHeight:maxVisibleOptions&&data&&(data==null?void 0:data.length)<=maxVisibleOptions?'auto':maxVisibleOptions&&maxVisibleOptions*48+48+16},!isCenteredModal&&{top:modalPosition.top+8,left:modalPosition.left},{width:modalPosition.width}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:140,columnNumber:11}},!!(!isStaticData&&!isModalUp||!isStaticData&&isCenteredModal)&&filterComponent(),_react.default.createElement(_reactNative.ScrollView,{ref:scrollViewRef,scrollEventThrottle:16,onScroll:onScroll,__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:13}},displayKey&&(data==null?void 0:data.map(function(item,index){return _react.default.createElement(_reactNative.TouchableOpacity,{key:'dropdown'+index,onPress:function onPress(){onSelectOption(item);},style:[_DropdownInput.styles.option,!!value&&item[displayKey]===value&&{backgroundColor:_colors.TERTIARY_101}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:21}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:23}},item[displayKey]));})),isLoading&&_react.default.createElement(_reactNative.ActivityIndicator,{size:'small',style:_DropdownInput.styles.loading,color:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:183,columnNumber:17}}),!isLoading&&!(data!=null&&data.length)&&_react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.option,__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:19}},noResultsText))),!isStaticData&&isModalUp&&!isCenteredModal&&filterComponent()))));};var _default=exports.default=DropdownInputOptions;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _colors=require("../../../../../styles/colors");var _searchInput=require("../../../search-input");var _button=require("../../../../button");var _icons=require("../../../../../assets/images/icons");var _DropdownInput=require("../../DropdownInput.styles");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var DropdownInputOptions=function DropdownInputOptions(_ref){var isVisibleDropdown=_ref.isVisibleDropdown,onClose=_ref.onClose,onSelectOption=_ref.onSelectOption,modalPosition=_ref.modalPosition,windowHeight=_ref.windowHeight,windowWidth=_ref.windowWidth,data=_ref.data,displayKey=_ref.displayKey,value=_ref.value,maxVisibleOptions=_ref.maxVisibleOptions,onScroll=_ref.onScroll,isLoading=_ref.isLoading,isStaticData=_ref.isStaticData,searchPlaceholder=_ref.searchPlaceholder,onFilterTextChange=_ref.onFilterTextChange,noResultsText=_ref.noResultsText,isModalUp=_ref.isModalUp,displayMode=_ref.displayMode;var scrollViewRef=(0,_react.useRef)(null);var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),filterText=_useState2[0],setFilterText=_useState2[1];var isCenteredModal=displayMode==='centeredModal';(0,_react.useEffect)(function(){if(!isLoading&&filterText!==null){var handler=setTimeout(function(){onFilterTextChange(filterText);},500);return function(){return clearTimeout(handler);};}},[filterText]);(0,_react.useEffect)(function(){if(isLoading&&data!=null&&data.length){var _scrollViewRef$curren;(_scrollViewRef$curren=scrollViewRef.current)==null?void 0:_scrollViewRef$curren.scrollToEnd({animated:true});}},[isLoading]);(0,_react.useEffect)(function(){if(isVisibleDropdown&&data&&value&&scrollViewRef.current&&displayKey){var selectedIndex=data.findIndex(function(item){return item[displayKey]===value;});if(selectedIndex>=0){var positionY=selectedIndex*48;setTimeout(function(){if(scrollViewRef.current){scrollViewRef.current.scrollTo({y:positionY,animated:false});}},100);}}},[isVisibleDropdown]);var filterComponent=function filterComponent(){return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.searchContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:7}},_react.default.createElement(_searchInput.SearchInput,{placeholder:searchPlaceholder,value:filterText||'',onChangeText:function onChangeText(text){setFilterText(text);},isFocusable:false,styleContainer:{borderColor:_colors.NEUTRAL_400},onSubmit:function onSubmit(){onFilterTextChange(filterText||'');},rightButtons:!!filterText?[_react.default.createElement(_button.Button,{typeStyle:'white',iconLeft:_react.default.createElement(_icons.XIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:31}}),onPress:function onPress(){setFilterText('');},__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:19}})]:[],__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:9}}));};return _react.default.createElement(_reactNative.Modal,{transparent:true,visible:isVisibleDropdown,onRequestClose:function onRequestClose(){onClose();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[_DropdownInput.styles.fullScreenTouchable],onPress:function onPress(){return onClose();},activeOpacity:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:7}},_react.default.createElement(_reactNative.KeyboardAvoidingView,{behavior:_reactNative.Platform.OS==='ios'?'padding':'height',style:[isCenteredModal&&_DropdownInput.styles.containerNative,{width:windowWidth,height:windowHeight}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:9}},_react.default.createElement(_reactNative.View,{style:[_DropdownInput.styles.optionsContainer,{maxHeight:maxVisibleOptions&&data&&(data==null?void 0:data.length)<=maxVisibleOptions?'auto':maxVisibleOptions&&maxVisibleOptions*48+48+16},!isCenteredModal&&{top:modalPosition.top+8,left:modalPosition.left},{width:modalPosition.width}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}},!!(!isStaticData&&!isModalUp||!isStaticData&&isCenteredModal)&&filterComponent(),_react.default.createElement(_reactNative.ScrollView,{contentContainerStyle:{flexGrow:1},ref:scrollViewRef,scrollEventThrottle:16,onScroll:onScroll,__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:13}},displayKey&&(data==null?void 0:data.map(function(item,index){return _react.default.createElement(_reactNative.TouchableOpacity,{key:'dropdown'+index,onPress:function onPress(){onSelectOption(item);},style:[_DropdownInput.styles.option,!!value&&item[displayKey]===value&&{backgroundColor:_colors.TERTIARY_101}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:21}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:23}},item[displayKey]));})),isLoading&&_react.default.createElement(_reactNative.ActivityIndicator,{size:'small',style:_DropdownInput.styles.loading,color:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:180,columnNumber:17}}),!isLoading&&!(data!=null&&data.length)&&_react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.option,__self:_this,__source:{fileName:_jsxFileName,lineNumber:187,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:188,columnNumber:19}},noResultsText))),!isStaticData&&isModalUp&&!isCenteredModal&&filterComponent()))));};var _default=exports.default=DropdownInputOptions;

package/dist-web/components/inputBase/InputBase.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IInputBase } from './InputBase.types';
-declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onPress, onBlur, onSubmitEditing, secureTextEntry, keyboardType, styleContainer, isFocusable, }: IInputBase) => React.JSX.Element;
+declare const InputBase: ({ value, placeholder, title, helperText, isDisabled, isError, onChangeText, icon, rightButtons, onPress, onBlur, onSubmitEditing, secureTextEntry, keyboardType, styleContainer, isFocusable, refInputContainer, }: IInputBase) => React.JSX.Element;
 export default InputBase;

package/dist-web/components/inputBase/InputBase.js

@@ -39,7 +39,8 @@ var InputBase = function InputBase(_ref) {
     keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
     styleContainer = _ref.styleContainer,
     _ref$isFocusable = _ref.isFocusable,
-    isFocusable = _ref$isFocusable === void 0 ? true : _ref$isFocusable;
+    isFocusable = _ref$isFocusable === void 0 ? true : _ref$isFocusable,
+    refInputContainer = _ref.refInputContainer;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -131,6 +132,7 @@ var InputBase = function InputBase(_ref) {
       color: determineColor()
     }]
   }, title), /*#__PURE__*/React.createElement(View, {
+    ref: refInputContainer,
     style: [styles.container, {
       borderColor: determineColor()
     }, {

package/dist-web/components/inputBase/InputBase.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { ColorValue, ImageStyle, NativeSyntheticEvent, TextInputSubmitEditingEventData, ViewStyle } from 'react-native';
+import { ReactElement, RefObject } from 'react';
+import { ColorValue, ImageStyle, NativeSyntheticEvent, TextInputSubmitEditingEventData, View, ViewStyle } from 'react-native';
 import { ButtonProps } from '../button/Button.types';
 export interface SvgImageProps {
     style?: ImageStyle;
@@ -23,4 +23,5 @@ export interface IInputBase {
     keyboardType?: 'default' | 'numeric' | 'email-address' | 'url' | 'number-pad' | 'phone-pad' | 'decimal-pad' | 'web-search' | 'visible-password';
     styleContainer?: ViewStyle;
     isFocusable?: boolean;
+    refInputContainer?: RefObject<View>;
 }

package/dist-web/components/inputBase/dropdown-input/DropdownInput.js

@@ -89,11 +89,9 @@ var DropdownInput = function DropdownInput(_ref) {
     if (isVisibleDropdown && ref.current) {
       ref.current.measure(function (x, y, width, height, pageX, pageY) {
         var spaceBelow = windowHeight - (pageY + height);
-        var neededSpace = heightOptions + 16;
-        if (neededSpace > spaceBelow) {
-          var topPosition = Math.max(pageY - neededSpace, 0);
+        if (heightOptions + 16 > spaceBelow) {
           setModalPosition({
-            top: topPosition,
+            top: pageY - heightOptions - 16,
             left: pageX,
             width: width
           });
@@ -205,11 +203,12 @@ var DropdownInput = function DropdownInput(_ref) {
     fetchMordeData(0, [], true, value);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    ref: ref,
     onLayout: function onLayout() {
       adjustDropdownPosition();
     }
-  }, /*#__PURE__*/React.createElement(InputBase, _extends({}, inputBaseProps, {
+  }, /*#__PURE__*/React.createElement(InputBase, _extends({
+    refInputContainer: ref
+  }, inputBaseProps, {
     rightButtons: [/*#__PURE__*/React.createElement(Button, {
       onPress: function onPress() {
         setIsVisibleDropdown(function (prev) {
@@ -244,8 +243,7 @@ var DropdownInput = function DropdownInput(_ref) {
     searchPlaceholder: searchPlaceholder,
     onFilterTextChange: handleOnFilterTextChange,
     noResultsText: noResultsText,
-    isModalUp: isModalUp,
-    displayMode: displayMode
+    isModalUp: isModalUp
   }));
 };
 export default DropdownInput;

package/dist-web/components/inputBase/dropdown-input/DropdownInput.styles.d.ts

@@ -19,7 +19,6 @@ export declare const styles: {
         paddingHorizontal: number;
         maxHeight: number;
         minHeight: number;
-        backgroundColor: string;
     };
     optionText: {
         color: string;

package/dist-web/components/inputBase/dropdown-input/DropdownInput.styles.js

@@ -1,12 +1,12 @@
 import { StyleSheet } from "react-native-web";
-import { NEUTRAL_0, NEUTRAL_300, PRIMARY_100 } from "../../../styles/colors";
+import { NEUTRAL_300, NEUTRAL_50, PRIMARY_100 } from "../../../styles/colors";
 export var styles = StyleSheet.create({
   fullScreenTouchable: {
     position: 'absolute'
   },
   optionsContainer: {
     position: 'absolute',
-    backgroundColor: NEUTRAL_0,
+    backgroundColor: NEUTRAL_50,
     padding: 8,
     paddingBottom: 0,
     borderRadius: 8,
@@ -20,8 +20,7 @@ export var styles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: 8,
     maxHeight: 40,
-    minHeight: 40,
-    backgroundColor: NEUTRAL_0
+    minHeight: 40
   },
   optionText: {
     color: PRIMARY_100,

package/dist-web/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IDropdownInputOptions } from '../../DropdownInput.types';
-declare const DropdownInputOptions: ({ isVisibleDropdown, onClose, onSelectOption, modalPosition, windowHeight, windowWidth, data, displayKey, value, maxVisibleOptions, onScroll, isLoading, isStaticData, searchPlaceholder, onFilterTextChange, noResultsText, isModalUp, displayMode, }: IDropdownInputOptions) => React.JSX.Element;
+declare const DropdownInputOptions: ({ isVisibleDropdown, onClose, onSelectOption, modalPosition, windowHeight, windowWidth, data, displayKey, value, maxVisibleOptions, onScroll, isLoading, isStaticData, searchPlaceholder, onFilterTextChange, noResultsText, isModalUp, displayMode }: IDropdownInputOptions) => React.JSX.Element;
 export default DropdownInputOptions;

package/dist-web/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.js

@@ -97,18 +97,9 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
       })] : []
     }));
   };
-  console.log({
-    isCenteredModal: isCenteredModal,
-    isModalUp: isModalUp,
-    isStaticData: isStaticData
-  });
-  console.log(!isStaticData && !isModalUp);
-  console.log(!isStaticData && isCenteredModal);
-  console.log(!isStaticData && !isModalUp || !isStaticData && isCenteredModal);
   return /*#__PURE__*/React.createElement(Modal, {
     transparent: true,
     visible: isVisibleDropdown,
-    animationType: "fade",
     onRequestClose: function onRequestClose() {
       onClose();
     }
@@ -120,7 +111,7 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
     activeOpacity: 1
   }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     behavior: Platform.OS === 'ios' ? 'padding' : 'height',
-    style: [styles.fullScreenTouchable, isCenteredModal && styles.containerNative, {
+    style: [isCenteredModal && styles.containerNative, {
       width: windowWidth,
       height: windowHeight
     }]
@@ -134,6 +125,9 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
       width: modalPosition.width
     }]
   }, !!(!isStaticData && !isModalUp || !isStaticData && isCenteredModal) && filterComponent(), /*#__PURE__*/React.createElement(ScrollView, {
+    contentContainerStyle: {
+      flexGrow: 1
+    },
     ref: scrollViewRef,
     scrollEventThrottle: 16,
     onScroll: onScroll

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "private": false,
   "scripts": {
     "android": "react-native run-android",