etendo-ui-library 1.4.8 → 1.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist-native/components/inputBase/dropdown-input/DropdownInput.constants.d.ts +0 -1
  2. package/dist-native/components/inputBase/dropdown-input/DropdownInput.constants.js +1 -1
  3. package/dist-native/components/inputBase/dropdown-input/DropdownInput.d.ts +1 -1
  4. package/dist-native/components/inputBase/dropdown-input/DropdownInput.js +1 -1
  5. package/dist-native/components/inputBase/dropdown-input/DropdownInput.styles.d.ts +4 -0
  6. package/dist-native/components/inputBase/dropdown-input/DropdownInput.styles.js +1 -1
  7. package/dist-native/components/inputBase/dropdown-input/DropdownInput.types.d.ts +3 -3
  8. package/dist-native/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.d.ts +1 -1
  9. package/dist-native/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.js +1 -1
  10. package/dist-web/components/inputBase/dropdown-input/DropdownInput.constants.d.ts +0 -1
  11. package/dist-web/components/inputBase/dropdown-input/DropdownInput.constants.js +0 -1
  12. package/dist-web/components/inputBase/dropdown-input/DropdownInput.d.ts +1 -1
  13. package/dist-web/components/inputBase/dropdown-input/DropdownInput.js +63 -32
  14. package/dist-web/components/inputBase/dropdown-input/DropdownInput.styles.d.ts +4 -0
  15. package/dist-web/components/inputBase/dropdown-input/DropdownInput.styles.js +4 -0
  16. package/dist-web/components/inputBase/dropdown-input/DropdownInput.types.d.ts +3 -3
  17. package/dist-web/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.d.ts +1 -1
  18. package/dist-web/components/inputBase/dropdown-input/components/DropdownInputOptions/DropdownInputOptions.js +11 -47
  19. package/package.json +1 -1
@@ -1,6 +1,5 @@
1
1
  export declare const BUFFER = 0.1;
2
2
  export declare const SEARCH_PLACEHOLDER = "Search";
3
3
  export declare const NO_RESULT_TEXT = "No results";
4
- export declare const DISPLAY_MODE = "dropdown";
5
4
  export declare const PAGE_SIZE = 5;
6
5
  export declare const MAX_VISIBLE_OPTION = 4;
@@ -1 +1 @@
1
- Object.defineProperty(exports,"__esModule",{value:true});exports.SEARCH_PLACEHOLDER=exports.PAGE_SIZE=exports.NO_RESULT_TEXT=exports.MAX_VISIBLE_OPTION=exports.DISPLAY_MODE=exports.BUFFER=void 0;var BUFFER=exports.BUFFER=0.1;var SEARCH_PLACEHOLDER=exports.SEARCH_PLACEHOLDER='Search';var NO_RESULT_TEXT=exports.NO_RESULT_TEXT='No results';var DISPLAY_MODE=exports.DISPLAY_MODE='dropdown';var PAGE_SIZE=exports.PAGE_SIZE=5;var MAX_VISIBLE_OPTION=exports.MAX_VISIBLE_OPTION=4;
1
+ Object.defineProperty(exports,"__esModule",{value:true});exports.SEARCH_PLACEHOLDER=exports.PAGE_SIZE=exports.NO_RESULT_TEXT=exports.MAX_VISIBLE_OPTION=exports.BUFFER=void 0;var BUFFER=exports.BUFFER=0.1;var SEARCH_PLACEHOLDER=exports.SEARCH_PLACEHOLDER='Search';var NO_RESULT_TEXT=exports.NO_RESULT_TEXT='No results';var PAGE_SIZE=exports.PAGE_SIZE=5;var MAX_VISIBLE_OPTION=exports.MAX_VISIBLE_OPTION=4;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IDropdownInput } from './DropdownInput.types';
3
- declare const DropdownInput: ({ staticData, displayKey, onSelect, value, maxVisibleOptions, onFetchData, pageSize, searchPlaceholder, noResultsText, displayMode, ...inputBaseProps }: IDropdownInput) => React.JSX.Element;
3
+ declare const DropdownInput: ({ staticData, displayKey, onSelect, value, maxVisibleOptions, onFetchData, pageSize, searchPlaceholder, noResultsText, ...inputBaseProps }: IDropdownInput) => React.JSX.Element;
4
4
  export default DropdownInput;
@@ -1 +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 refInput=(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(){setDataList([]);if(isVisibleDropdown){fetchMordeData(0,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);if(refInput.current){refInput.current.setNativeProps({selection:{start:0,end:0}});}};var onScroll=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(event){if(isAtEndOfScroll(event.nativeEvent)&&!isLoading){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:169,columnNumber:7}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({refInput:refInput,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:184,columnNumber:37}}):_react.default.createElement(_icons.ChevronDownIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:57}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:13}})],value:value==null?void 0:value.toString(),onPress:function onPress(){setIsVisibleDropdown(function(prev){return!prev;});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:9}}))),isVisibleDropdown&&!!modalPosition.width&&_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:195,columnNumber:9}}));};var _default=exports.default=DropdownInput;
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"];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,inputBaseProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var ref=(0,_react.useRef)(null);var refInput=(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(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);}});}},[heightOptions,windowHeight]);(0,_react.useEffect)(function(){if((0,_functions_utils.isWebPlatform)()){if((dataList==null?void 0:dataList.length)===0){if(isLoading){return setHeightOptions(48+16);}return setHeightOptions(48+48+16);}if(maxVisibleOptions&&(dataList==null?void 0:dataList.length)<=maxVisibleOptions){return setHeightOptions((dataList==null?void 0:dataList.length)*48+48+16);}setHeightOptions(maxVisibleOptions*48+48+16);}},[dataList,isLoading,windowHeight]);(0,_react.useEffect)(function(){if(!!staticData){setDataList(staticData);}},[staticData]);(0,_react.useEffect)(function(){setFilterText('');if(isVisibleDropdown&&!staticData){setDataList([]);setIsLoadMoreData(true);fetchMordeData(0,[],true,'');}},[isVisibleDropdown]);(0,_react.useEffect)(function(){adjustDropdownPosition();if((0,_functions_utils.isWebPlatform)()){var handleScroll=function handleScroll(){if(isVisibleDropdown){adjustDropdownPosition();}};window.addEventListener('scroll',handleScroll,{passive:true});return function(){return window.removeEventListener('scroll',handleScroll);};}},[isVisibleDropdown,adjustDropdownPosition]);var onSelectOption=function onSelectOption(item){var _refInput$current;onSelect==null?void 0:onSelect(item);setIsVisibleDropdown(false);if(refInput!=null&&(_refInput$current=refInput.current)!=null&&_refInput$current.setNativeProps){var _refInput$current2;refInput==null?void 0:(_refInput$current2=refInput.current)==null?void 0:_refInput$current2.setNativeProps({selection:{start:0,end:0}});}};var onScroll=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(event){if(isAtEndOfScroll(event.nativeEvent)&&!isLoading){yield 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(){var _ref5=(0,_asyncToGenerator2.default)(function*(value){setDataList([]);setCurrentPage(0);setIsLoadMoreData(true);setFilterText(value);yield fetchMordeData(0,[],true,value);});return function handleOnFilterTextChange(_x6){return _ref5.apply(this,arguments);};}();return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.View,{onLayout:function onLayout(){if((0,_functions_utils.isWebPlatform)()){adjustDropdownPosition();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:180,columnNumber:7}},_react.default.createElement(_InputBase.default,(0,_extends2.default)({refInput:refInput,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:197,columnNumber:37}}):_react.default.createElement(_icons.ChevronDownIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:57}}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:13}})],value:value==null?void 0:value.toString(),onPress:function onPress(){setIsVisibleDropdown(function(prev){return!prev;});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:9}}))),isVisibleDropdown&&!!modalPosition.width&&_react.default.createElement(_DropdownInputOptions.default,{isVisibleDropdown:isVisibleDropdown,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:208,columnNumber:9}}));};var _default=exports.default=DropdownInput;
@@ -39,4 +39,8 @@ export declare const styles: {
39
39
  searchContainer: {
40
40
  marginBottom: number;
41
41
  };
42
+ iconLoading: {
43
+ height: number;
44
+ width: number;
45
+ };
42
46
  };
@@ -1 +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_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:15,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}});
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_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:15,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},iconLoading:{height:24,width:24}});
@@ -1,5 +1,6 @@
1
- import { DimensionValue, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
1
+ import { DimensionValue, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
2
2
  import { IInputBase } from '../InputBase.types';
3
+ import { RefObject } from 'react';
3
4
  export interface IDropdownInput extends Omit<IInputBase, 'keyboardType' | 'secureTextEntry'> {
4
5
  staticData?: any[];
5
6
  displayKey?: string;
@@ -9,7 +10,6 @@ export interface IDropdownInput extends Omit<IInputBase, 'keyboardType' | 'secur
9
10
  pageSize?: number;
10
11
  searchPlaceholder?: string;
11
12
  noResultsText?: string;
12
- displayMode?: 'dropdown' | 'centeredModal';
13
13
  }
14
14
  export interface IDropdownInputOptions {
15
15
  isVisibleDropdown: boolean;
@@ -33,5 +33,5 @@ export interface IDropdownInputOptions {
33
33
  searchPlaceholder?: string;
34
34
  noResultsText?: string;
35
35
  isModalUp: boolean;
36
- displayMode?: 'dropdown' | 'centeredModal';
36
+ refScrollView?: RefObject<ScrollView>;
37
37
  }
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IDropdownInputOptions } from '../../DropdownInput.types';
3
- 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;
3
+ declare const DropdownInputOptions: ({ isVisibleDropdown, onClose, onSelectOption, modalPosition, windowHeight, windowWidth, data, displayKey, value, maxVisibleOptions, onScroll, isLoading, isStaticData, searchPlaceholder, onFilterTextChange, noResultsText, isModalUp, }: IDropdownInputOptions) => React.JSX.Element;
4
4
  export default DropdownInputOptions;
@@ -1 +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();}},[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,{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:127,columnNumber:9}},_react.default.createElement(_reactNative.View,{onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},style:[_DropdownInput.styles.optionsContainer,isCenteredModal&&{height:maxVisibleOptions&&maxVisibleOptions*48+48+16},{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:133,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:156,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:164,columnNumber:21}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,numberOfLines:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,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:181,columnNumber:17}}),!isLoading&&!(data!=null&&data.length)&&_react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.option,__self:_this,__source:{fileName:_jsxFileName,lineNumber:188,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:19}},noResultsText))),!isStaticData&&isModalUp&&!isCenteredModal&&filterComponent()))));};var _default=exports.default=DropdownInputOptions;
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 _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;var _useState=(0,_react.useState)(''),_useState2=(0,_slicedToArray2.default)(_useState,2),filterText=_useState2[0],setFilterText=_useState2[1];var isCenteredModal=_reactNative.Platform.OS==='android'||_reactNative.Platform.OS==='ios';(0,_react.useEffect)(function(){if(!isLoading&&filterText){var handler=setTimeout(function(){onFilterTextChange(filterText);},500);return function(){return clearTimeout(handler);};}},[filterText]);var filterComponent=function filterComponent(){return _react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.searchContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,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:isLoading?[_react.default.createElement(_reactNative.ActivityIndicator,{style:_DropdownInput.styles.iconLoading,color:_colors.PRIMARY_100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:19}})]:[],__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:9}}));};return _react.default.createElement(_reactNative.Modal,{transparent:true,visible:isVisibleDropdown,onRequestClose:function onRequestClose(){onClose();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:85,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){onClose();},activeOpacity:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,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:96,columnNumber:9}},_react.default.createElement(_reactNative.View,{onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},style:[_DropdownInput.styles.optionsContainer,isCenteredModal&&{height:maxVisibleOptions&&maxVisibleOptions*48+48+16},{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:102,columnNumber:11}},!!(!isStaticData&&!isModalUp||!isStaticData&&isCenteredModal)&&filterComponent(),_react.default.createElement(_reactNative.ScrollView,{contentContainerStyle:{flexGrow:1},scrollEventThrottle:16,onScroll:onScroll,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,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:134,columnNumber:21}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,numberOfLines:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:146,columnNumber:23}},item[displayKey]));})),!isLoading&&!(data!=null&&data.length)&&_react.default.createElement(_reactNative.View,{style:_DropdownInput.styles.option,__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:17}},_react.default.createElement(_reactNative.Text,{style:_DropdownInput.styles.optionText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:19}},noResultsText))),!isStaticData&&isModalUp&&!isCenteredModal&&filterComponent()))));};var _default=exports.default=DropdownInputOptions;
@@ -1,6 +1,5 @@
1
1
  export declare const BUFFER = 0.1;
2
2
  export declare const SEARCH_PLACEHOLDER = "Search";
3
3
  export declare const NO_RESULT_TEXT = "No results";
4
- export declare const DISPLAY_MODE = "dropdown";
5
4
  export declare const PAGE_SIZE = 5;
6
5
  export declare const MAX_VISIBLE_OPTION = 4;
@@ -2,6 +2,5 @@
2
2
  export var BUFFER = 0.1;
3
3
  export var SEARCH_PLACEHOLDER = 'Search';
4
4
  export var NO_RESULT_TEXT = 'No results';
5
- export var DISPLAY_MODE = 'dropdown';
6
5
  export var PAGE_SIZE = 5;
7
6
  export var MAX_VISIBLE_OPTION = 4;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IDropdownInput } from './DropdownInput.types';
3
- declare const DropdownInput: ({ staticData, displayKey, onSelect, value, maxVisibleOptions, onFetchData, pageSize, searchPlaceholder, noResultsText, displayMode, ...inputBaseProps }: IDropdownInput) => React.JSX.Element;
3
+ declare const DropdownInput: ({ staticData, displayKey, onSelect, value, maxVisibleOptions, onFetchData, pageSize, searchPlaceholder, noResultsText, ...inputBaseProps }: IDropdownInput) => React.JSX.Element;
4
4
  export default DropdownInput;
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["staticData", "displayKey", "onSelect", "value", "maxVisibleOptions", "onFetchData", "pageSize", "searchPlaceholder", "noResultsText", "displayMode"];
2
+ var _excluded = ["staticData", "displayKey", "onSelect", "value", "maxVisibleOptions", "onFetchData", "pageSize", "searchPlaceholder", "noResultsText"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
5
5
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -23,7 +23,7 @@ import { Button } from "../../button";
23
23
  import { ChevronDownIcon, ChevronUpIcon } from "../../../assets/images/icons";
24
24
  import { isWebPlatform } from "../../../helpers/functions_utils";
25
25
  import InputOptions from "./components/DropdownInputOptions/DropdownInputOptions";
26
- import { BUFFER, DISPLAY_MODE, MAX_VISIBLE_OPTION, NO_RESULT_TEXT, PAGE_SIZE, SEARCH_PLACEHOLDER } from "./DropdownInput.constants";
26
+ import { BUFFER, MAX_VISIBLE_OPTION, NO_RESULT_TEXT, PAGE_SIZE, SEARCH_PLACEHOLDER } from "./DropdownInput.constants";
27
27
  var DropdownInput = function DropdownInput(_ref) {
28
28
  var staticData = _ref.staticData,
29
29
  displayKey = _ref.displayKey,
@@ -38,8 +38,6 @@ var DropdownInput = function DropdownInput(_ref) {
38
38
  searchPlaceholder = _ref$searchPlaceholde === void 0 ? SEARCH_PLACEHOLDER : _ref$searchPlaceholde,
39
39
  _ref$noResultsText = _ref.noResultsText,
40
40
  noResultsText = _ref$noResultsText === void 0 ? NO_RESULT_TEXT : _ref$noResultsText,
41
- _ref$displayMode = _ref.displayMode,
42
- displayMode = _ref$displayMode === void 0 ? DISPLAY_MODE : _ref$displayMode,
43
41
  inputBaseProps = _objectWithoutProperties(_ref, _excluded);
44
42
  var ref = useRef(null);
45
43
  var refInput = useRef(null);
@@ -87,7 +85,7 @@ var DropdownInput = function DropdownInput(_ref) {
87
85
  windowWidth = _Dimensions$get.width,
88
86
  windowHeight = _Dimensions$get.height;
89
87
  var adjustDropdownPosition = useCallback(function () {
90
- if (isVisibleDropdown && ref.current) {
88
+ if (ref.current) {
91
89
  ref.current.measure(function (x, y, width, height, pageX, pageY) {
92
90
  var spaceBelow = windowHeight - (pageY + height);
93
91
  if (heightOptions + 16 > spaceBelow) {
@@ -107,29 +105,42 @@ var DropdownInput = function DropdownInput(_ref) {
107
105
  }
108
106
  });
109
107
  }
110
- }, [isVisibleDropdown, heightOptions, windowHeight]);
108
+ }, [heightOptions, windowHeight]);
111
109
  useEffect(function () {
112
- setHeightOptions(maxVisibleOptions && dataList && (dataList === null || dataList === void 0 ? void 0 : dataList.length) <= maxVisibleOptions ? 48 + 48 + 16 : maxVisibleOptions && maxVisibleOptions * 48 + 48 + 16);
113
- }, [dataList, isVisibleDropdown, isLoading]);
110
+ if (isWebPlatform()) {
111
+ if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) === 0) {
112
+ if (isLoading) {
113
+ return setHeightOptions(48 + 16);
114
+ }
115
+ return setHeightOptions(48 + 48 + 16);
116
+ }
117
+ if (maxVisibleOptions && (dataList === null || dataList === void 0 ? void 0 : dataList.length) <= maxVisibleOptions) {
118
+ return setHeightOptions((dataList === null || dataList === void 0 ? void 0 : dataList.length) * 48 + 48 + 16);
119
+ }
120
+ setHeightOptions(maxVisibleOptions * 48 + 48 + 16);
121
+ }
122
+ }, [dataList, isLoading, windowHeight]);
114
123
  useEffect(function () {
115
124
  if (!!staticData) {
116
125
  setDataList(staticData);
117
126
  }
118
127
  }, [staticData]);
119
128
  useEffect(function () {
120
- setDataList([]);
121
- if (isVisibleDropdown) {
122
- fetchMordeData(0, dataList, isLoadMoreData, '');
129
+ setFilterText('');
130
+ if (isVisibleDropdown && !staticData) {
131
+ setDataList([]);
132
+ setIsLoadMoreData(true);
133
+ fetchMordeData(0, [], true, '');
123
134
  }
124
135
  }, [isVisibleDropdown]);
125
136
  useEffect(function () {
126
137
  adjustDropdownPosition();
127
- var handleScroll = function handleScroll() {
128
- if (isVisibleDropdown) {
129
- adjustDropdownPosition();
130
- }
131
- };
132
138
  if (isWebPlatform()) {
139
+ var handleScroll = function handleScroll() {
140
+ if (isVisibleDropdown) {
141
+ adjustDropdownPosition();
142
+ }
143
+ };
133
144
  window.addEventListener('scroll', handleScroll, {
134
145
  passive: true
135
146
  });
@@ -139,10 +150,12 @@ var DropdownInput = function DropdownInput(_ref) {
139
150
  }
140
151
  }, [isVisibleDropdown, adjustDropdownPosition]);
141
152
  var onSelectOption = function onSelectOption(item) {
153
+ var _refInput$current;
142
154
  onSelect === null || onSelect === void 0 || onSelect(item);
143
155
  setIsVisibleDropdown(false);
144
- if (refInput.current) {
145
- refInput.current.setNativeProps({
156
+ if (refInput !== null && refInput !== void 0 && (_refInput$current = refInput.current) !== null && _refInput$current !== void 0 && _refInput$current.setNativeProps) {
157
+ var _refInput$current2;
158
+ refInput === null || refInput === void 0 || (_refInput$current2 = refInput.current) === null || _refInput$current2 === void 0 || _refInput$current2.setNativeProps({
146
159
  selection: {
147
160
  start: 0,
148
161
  end: 0
@@ -155,10 +168,13 @@ var DropdownInput = function DropdownInput(_ref) {
155
168
  return _regeneratorRuntime().wrap(function _callee$(_context) {
156
169
  while (1) switch (_context.prev = _context.next) {
157
170
  case 0:
158
- if (isAtEndOfScroll(event.nativeEvent) && !isLoading) {
159
- fetchMordeData(currentPage, dataList, isLoadMoreData, filterText);
171
+ if (!(isAtEndOfScroll(event.nativeEvent) && !isLoading)) {
172
+ _context.next = 3;
173
+ break;
160
174
  }
161
- case 1:
175
+ _context.next = 3;
176
+ return fetchMordeData(currentPage, dataList, isLoadMoreData, filterText);
177
+ case 3:
162
178
  case "end":
163
179
  return _context.stop();
164
180
  }
@@ -205,16 +221,32 @@ var DropdownInput = function DropdownInput(_ref) {
205
221
  contentSize = _ref4.contentSize;
206
222
  return layoutMeasurement.height + contentOffset.y >= contentSize.height - BUFFER;
207
223
  };
208
- var handleOnFilterTextChange = function handleOnFilterTextChange(value) {
209
- setDataList([]);
210
- setCurrentPage(0);
211
- setIsLoadMoreData(true);
212
- setFilterText(value);
213
- fetchMordeData(0, [], true, value);
214
- };
224
+ var handleOnFilterTextChange = /*#__PURE__*/function () {
225
+ var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(value) {
226
+ return _regeneratorRuntime().wrap(function _callee3$(_context3) {
227
+ while (1) switch (_context3.prev = _context3.next) {
228
+ case 0:
229
+ setDataList([]);
230
+ setCurrentPage(0);
231
+ setIsLoadMoreData(true);
232
+ setFilterText(value);
233
+ _context3.next = 6;
234
+ return fetchMordeData(0, [], true, value);
235
+ case 6:
236
+ case "end":
237
+ return _context3.stop();
238
+ }
239
+ }, _callee3);
240
+ }));
241
+ return function handleOnFilterTextChange(_x6) {
242
+ return _ref5.apply(this, arguments);
243
+ };
244
+ }();
215
245
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
216
246
  onLayout: function onLayout() {
217
- adjustDropdownPosition();
247
+ if (isWebPlatform()) {
248
+ adjustDropdownPosition();
249
+ }
218
250
  }
219
251
  }, /*#__PURE__*/React.createElement(InputBase, _extends({
220
252
  refInput: refInput,
@@ -236,7 +268,7 @@ var DropdownInput = function DropdownInput(_ref) {
236
268
  });
237
269
  }
238
270
  }))), isVisibleDropdown && !!modalPosition.width && /*#__PURE__*/React.createElement(InputOptions, {
239
- isVisibleDropdown: true,
271
+ isVisibleDropdown: isVisibleDropdown,
240
272
  onClose: function onClose() {
241
273
  setIsVisibleDropdown(false);
242
274
  },
@@ -254,8 +286,7 @@ var DropdownInput = function DropdownInput(_ref) {
254
286
  searchPlaceholder: searchPlaceholder,
255
287
  onFilterTextChange: handleOnFilterTextChange,
256
288
  noResultsText: noResultsText,
257
- isModalUp: isModalUp,
258
- displayMode: displayMode
289
+ isModalUp: isModalUp
259
290
  }));
260
291
  };
261
292
  export default DropdownInput;
@@ -39,4 +39,8 @@ export declare const styles: {
39
39
  searchContainer: {
40
40
  marginBottom: number;
41
41
  };
42
+ iconLoading: {
43
+ height: number;
44
+ width: number;
45
+ };
42
46
  };
@@ -40,5 +40,9 @@ export var styles = StyleSheet.create({
40
40
  },
41
41
  searchContainer: {
42
42
  marginBottom: 8
43
+ },
44
+ iconLoading: {
45
+ height: 24,
46
+ width: 24
43
47
  }
44
48
  });
@@ -1,5 +1,6 @@
1
- import { DimensionValue, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
1
+ import { DimensionValue, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
2
2
  import { IInputBase } from '../InputBase.types';
3
+ import { RefObject } from 'react';
3
4
  export interface IDropdownInput extends Omit<IInputBase, 'keyboardType' | 'secureTextEntry'> {
4
5
  staticData?: any[];
5
6
  displayKey?: string;
@@ -9,7 +10,6 @@ export interface IDropdownInput extends Omit<IInputBase, 'keyboardType' | 'secur
9
10
  pageSize?: number;
10
11
  searchPlaceholder?: string;
11
12
  noResultsText?: string;
12
- displayMode?: 'dropdown' | 'centeredModal';
13
13
  }
14
14
  export interface IDropdownInputOptions {
15
15
  isVisibleDropdown: boolean;
@@ -33,5 +33,5 @@ export interface IDropdownInputOptions {
33
33
  searchPlaceholder?: string;
34
34
  noResultsText?: string;
35
35
  isModalUp: boolean;
36
- displayMode?: 'dropdown' | 'centeredModal';
36
+ refScrollView?: RefObject<ScrollView>;
37
37
  }
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IDropdownInputOptions } from '../../DropdownInput.types';
3
- 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;
3
+ declare const DropdownInputOptions: ({ isVisibleDropdown, onClose, onSelectOption, modalPosition, windowHeight, windowWidth, data, displayKey, value, maxVisibleOptions, onScroll, isLoading, isStaticData, searchPlaceholder, onFilterTextChange, noResultsText, isModalUp, }: IDropdownInputOptions) => React.JSX.Element;
4
4
  export default DropdownInputOptions;
@@ -4,12 +4,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
4
4
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
5
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
- import { View, Modal, TouchableOpacity, Text, ScrollView, ActivityIndicator, KeyboardAvoidingView, Platform } from "react-native-web";
8
- import React, { useEffect, useRef, useState } from 'react';
7
+ import { View, Modal, TouchableOpacity, Text, ScrollView, KeyboardAvoidingView, Platform, ActivityIndicator } from "react-native-web";
8
+ import React, { useEffect, useState } from 'react';
9
9
  import { NEUTRAL_400, PRIMARY_100, TERTIARY_101 } from "../../../../../styles/colors";
10
10
  import { SearchInput } from "../../../search-input";
11
- import { Button } from "../../../../button";
12
- import { XIcon } from "../../../../../assets/images/icons";
13
11
  import { styles } from "../../DropdownInput.styles";
14
12
  var DropdownInputOptions = function DropdownInputOptions(_ref) {
15
13
  var isVisibleDropdown = _ref.isVisibleDropdown,
@@ -28,16 +26,14 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
28
26
  searchPlaceholder = _ref.searchPlaceholder,
29
27
  onFilterTextChange = _ref.onFilterTextChange,
30
28
  noResultsText = _ref.noResultsText,
31
- isModalUp = _ref.isModalUp,
32
- displayMode = _ref.displayMode;
33
- var scrollViewRef = useRef(null);
34
- var _useState = useState(null),
29
+ isModalUp = _ref.isModalUp;
30
+ var _useState = useState(''),
35
31
  _useState2 = _slicedToArray(_useState, 2),
36
32
  filterText = _useState2[0],
37
33
  setFilterText = _useState2[1];
38
- var isCenteredModal = displayMode === 'centeredModal';
34
+ var isCenteredModal = Platform.OS === 'android' || Platform.OS === 'ios';
39
35
  useEffect(function () {
40
- if (!isLoading && filterText !== null) {
36
+ if (!isLoading && filterText) {
41
37
  var handler = setTimeout(function () {
42
38
  onFilterTextChange(filterText);
43
39
  }, 500);
@@ -46,30 +42,6 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
46
42
  };
47
43
  }
48
44
  }, [filterText]);
49
- useEffect(function () {
50
- if (isLoading && data !== null && data !== void 0 && data.length) {
51
- var _scrollViewRef$curren;
52
- (_scrollViewRef$curren = scrollViewRef.current) === null || _scrollViewRef$curren === void 0 || _scrollViewRef$curren.scrollToEnd();
53
- }
54
- }, [isLoading]);
55
- useEffect(function () {
56
- if (isVisibleDropdown && data && value && scrollViewRef.current && displayKey) {
57
- var selectedIndex = data.findIndex(function (item) {
58
- return item[displayKey] === value;
59
- });
60
- if (selectedIndex >= 0) {
61
- var positionY = selectedIndex * 48;
62
- setTimeout(function () {
63
- if (scrollViewRef.current) {
64
- scrollViewRef.current.scrollTo({
65
- y: positionY,
66
- animated: false
67
- });
68
- }
69
- }, 100);
70
- }
71
- }
72
- }, [isVisibleDropdown]);
73
45
  var filterComponent = function filterComponent() {
74
46
  return /*#__PURE__*/React.createElement(View, {
75
47
  style: styles.searchContainer
@@ -86,12 +58,9 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
86
58
  onSubmit: function onSubmit() {
87
59
  onFilterTextChange(filterText || '');
88
60
  },
89
- rightButtons: !!filterText ? [/*#__PURE__*/React.createElement(Button, {
90
- typeStyle: 'white',
91
- iconLeft: /*#__PURE__*/React.createElement(XIcon, null),
92
- onPress: function onPress() {
93
- setFilterText('');
94
- }
61
+ rightButtons: isLoading ? [/*#__PURE__*/React.createElement(ActivityIndicator, {
62
+ style: styles.iconLoading,
63
+ color: PRIMARY_100
95
64
  })] : []
96
65
  }));
97
66
  };
@@ -103,7 +72,7 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
103
72
  }
104
73
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
105
74
  onPress: function onPress() {
106
- return onClose();
75
+ onClose();
107
76
  },
108
77
  activeOpacity: 1
109
78
  }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
@@ -130,7 +99,6 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
130
99
  contentContainerStyle: {
131
100
  flexGrow: 1
132
101
  },
133
- ref: scrollViewRef,
134
102
  scrollEventThrottle: 16,
135
103
  onScroll: onScroll
136
104
  }, displayKey && (data === null || data === void 0 ? void 0 : data.map(function (item, index) {
@@ -146,11 +114,7 @@ var DropdownInputOptions = function DropdownInputOptions(_ref) {
146
114
  style: styles.optionText,
147
115
  numberOfLines: 2
148
116
  }, item[displayKey]));
149
- })), isLoading && /*#__PURE__*/React.createElement(ActivityIndicator, {
150
- size: 'small',
151
- style: styles.loading,
152
- color: PRIMARY_100
153
- }), !isLoading && !(data !== null && data !== void 0 && data.length) && /*#__PURE__*/React.createElement(View, {
117
+ })), !isLoading && !(data !== null && data !== void 0 && data.length) && /*#__PURE__*/React.createElement(View, {
154
118
  style: styles.option
155
119
  }, /*#__PURE__*/React.createElement(Text, {
156
120
  style: styles.optionText
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etendo-ui-library",
3
- "version": "1.4.8",
3
+ "version": "1.4.10",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "android": "react-native run-android",