@bigbinary/neetoui-rn 0.0.191 → 0.0.192

package/index.d.ts

@@ -152,7 +152,7 @@ interface BottomSheetProps extends ViewProps {
   hide?: () => void;
   isVisible?: boolean;
   onItemPress?: ({ index, item }: { index: number; item: any }) => void;
-  selectedItemIndex?: number;
+  selectedItem?: object | string;
   bg?: typeof theme.colors.background;
   titleContainerStyle?: ViewProps;
   titleTextStyle?: TextProps;

package/lib/components/BottomSheet.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _=require("./");var _theme=require("../theme");var _excluded=["showCreateOption","CreateItemComponent","showCreateOptionLoader","createSearchedOptionLabelStyle","createOptionLabel","onPressCreateOption","createSearchedOptionContainerStyle","data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch","onDonePress","disabled","noResultsLabelContainerStyle","noResultsLabelStyle","noResultsLabel","NoResultsComponent","labelExtractor"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,setSearchText=_ref.setSearchText,onDonePress=_ref.onDonePress;var touchY;(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:35,columnNumber:7}}),_react.default.createElement(_.Container,{mb:16,flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:function onPress(){hide();onDonePress();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:15}},"Done"))),canSearch&&_react.default.createElement(_.SearchBar,{placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchText("");},showCancelButton:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}})));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,setSearchText:_propTypes.default.func,onDonePress:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var showCreateOption=_ref2.showCreateOption,CreateItemComponent=_ref2.CreateItemComponent,showCreateOptionLoader=_ref2.showCreateOptionLoader,createSearchedOptionLabelStyle=_ref2.createSearchedOptionLabelStyle,createOptionLabel=_ref2.createOptionLabel,onPressCreateOption=_ref2.onPressCreateOption,createSearchedOptionContainerStyle=_ref2.createSearchedOptionContainerStyle,_ref2$data=_ref2.data,data=_ref2$data===void 0?[]:_ref2$data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,selectedItemIndex=_ref2.selectedItemIndex,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,onDonePress=_ref2.onDonePress,disabled=_ref2.disabled,noResultsLabelContainerStyle=_ref2.noResultsLabelContainerStyle,noResultsLabelStyle=_ref2.noResultsLabelStyle,noResultsLabel=_ref2.noResultsLabel,NoResultsComponent=_ref2.NoResultsComponent,labelExtractor=_ref2.labelExtractor,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var getLabel=function getLabel(item,index){return(item==null?void 0:item.label)||labelExtractor(item,index)||item;};var generateData=function generateData(){if(searchText.length){return data.filter(function(item){return getLabel(item).toLowerCase().includes(searchText.toLowerCase());});}else{return data;}};var hideCreateComponent=function hideCreateComponent(){var filteredItemCount=generateData().filter(function(data){return getLabel(data).toLocaleLowerCase()===searchText.toLocaleLowerCase();}).length;return filteredItemCount>0;};return _react.default.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:199,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,borderTopRightRadius:20,borderTopLeftRadius:20,p:16,flex:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:9}}),title&&_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,onDonePress:onDonePress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:13}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:228,columnNumber:17}},children,!!searchText&&!showCreateOption&&(NoResultsComponent?_react.default.createElement(NoResultsComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:233,columnNumber:23}}):_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",py:2,mb:2},noResultsLabelContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:235,columnNumber:23}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf600",fontSize:"s",color:"font.grey"},noResultsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:241,columnNumber:25}}),noResultsLabel||"No options found"))),!disabled&&!hideCreateComponent()&&(showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_theme.theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:255,columnNumber:23}}):!!searchText&&showCreateOption&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:25}},CreateItemComponent?_react.default.createElement(CreateItemComponent,{searchText:searchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:264,columnNumber:29}}):_react.default.createElement(_.Touchable,(0,_extends2.default)({height:40,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchText);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:29}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:273,columnNumber:31}}),createOptionLabel||"Create "+searchText+" option"))))),initialNumToRender:data.length,onScrollBeginDrag:_reactNative.Keyboard.dismiss,data:generateData(),renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:index===selectedItemIndex,key:index,onPress:function onPress(){!contentType&&hide();onItemPress({index:index,item:item});},index:index,item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:294,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:226,columnNumber:13}}))));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary",showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){},CreateItemComponent:null,onDonePress:function onDonePress(){}};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,onDonePress:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,CreateItemComponent:_propTypes.default.node,createSearchedOptionLabelStyle:_propTypes.default.object,disabled:_propTypes.default.bool,createSearchedOptionContainerStyle:_propTypes.default.object,noResultsLabelContainerStyle:_propTypes.default.object,noResultsLabelStyle:_propTypes.default.object,noResultsLabel:_propTypes.default.string,NoResultsComponent:_propTypes.default.node,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({safeAreaView:{maxHeight:"70%",backgroundColor:_theme.theme.colors.background.primary,borderTopRightRadius:20,borderTopLeftRadius:20,flex:1},modalStyle:{margin:0,justifyContent:"flex-end",flex:1},inputContainerStyle:{backgroundColor:"white",borderRadius:10}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _=require("./");var _theme=require("../theme");var _excluded=["showCreateOption","CreateItemComponent","showCreateOptionLoader","createSearchedOptionLabelStyle","createOptionLabel","onPressCreateOption","createSearchedOptionContainerStyle","data","title","hide","isVisible","onItemPress","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch","onDonePress","disabled","noResultsLabelContainerStyle","noResultsLabelStyle","noResultsLabel","NoResultsComponent","labelExtractor","valueExtractor","selectedItem"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,setSearchText=_ref.setSearchText,onDonePress=_ref.onDonePress;var touchY;(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:35,columnNumber:7}}),_react.default.createElement(_.Container,{mb:16,flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:function onPress(){hide();onDonePress();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:15}},"Done"))),canSearch&&_react.default.createElement(_.SearchBar,{debounceDelay:200,placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchText("");},showCancelButton:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}})));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,setSearchText:_propTypes.default.func,onDonePress:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var showCreateOption=_ref2.showCreateOption,CreateItemComponent=_ref2.CreateItemComponent,showCreateOptionLoader=_ref2.showCreateOptionLoader,createSearchedOptionLabelStyle=_ref2.createSearchedOptionLabelStyle,createOptionLabel=_ref2.createOptionLabel,onPressCreateOption=_ref2.onPressCreateOption,createSearchedOptionContainerStyle=_ref2.createSearchedOptionContainerStyle,_ref2$data=_ref2.data,data=_ref2$data===void 0?[]:_ref2$data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,onDonePress=_ref2.onDonePress,disabled=_ref2.disabled,noResultsLabelContainerStyle=_ref2.noResultsLabelContainerStyle,noResultsLabelStyle=_ref2.noResultsLabelStyle,noResultsLabel=_ref2.noResultsLabel,NoResultsComponent=_ref2.NoResultsComponent,labelExtractor=_ref2.labelExtractor,valueExtractor=_ref2.valueExtractor,selectedItem=_ref2.selectedItem,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var getLabel=function getLabel(item,index){return(item==null?void 0:item.label)||labelExtractor(item,index)||item;};var generateData=function generateData(){if(searchText.length){return data.filter(function(item){return getLabel(item).toLowerCase().includes(searchText.toLowerCase());});}else{return data;}};var hideCreateComponent=function hideCreateComponent(){var filteredItemCount=generateData().filter(function(data){return getLabel(data).toLocaleLowerCase()===searchText.toLocaleLowerCase();}).length;return filteredItemCount>0;};var checkIsSelected=function checkIsSelected(item){var itemValue=(item==null?void 0:item.value)||valueExtractor(item)||item;var selectedItemValue=(selectedItem==null?void 0:selectedItem.value)||valueExtractor(selectedItem)||selectedItem;return itemValue===selectedItemValue;};return _react.default.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:208,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,borderTopRightRadius:20,borderTopLeftRadius:20,p:16,flexShrink:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:9}}),title&&_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,onDonePress:onDonePress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:13}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:237,columnNumber:17}},children,!!searchText&&!generateData().length&&!showCreateOption&&(NoResultsComponent?_react.default.createElement(NoResultsComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:243,columnNumber:23}}):_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",py:2,mb:2},noResultsLabelContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:245,columnNumber:23}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf600",fontSize:"s",color:"font.grey"},noResultsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:251,columnNumber:25}}),noResultsLabel||"No options found"))),!disabled&&!hideCreateComponent()&&(showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_theme.theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:265,columnNumber:23}}):!!searchText&&showCreateOption&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:272,columnNumber:25}},CreateItemComponent?_react.default.createElement(CreateItemComponent,{searchText:searchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:274,columnNumber:29}}):_react.default.createElement(_.Touchable,(0,_extends2.default)({height:40,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchText);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:29}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:31}}),createOptionLabel||"Create "+searchText+" option"))))),initialNumToRender:data.length,onScrollBeginDrag:_reactNative.Keyboard.dismiss,data:generateData(),renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:checkIsSelected(item),key:index,onPress:function onPress(){!contentType&&hide();onItemPress({index:index,item:item});},index:index,item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:304,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:235,columnNumber:13}}))));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary",showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){},CreateItemComponent:null,onDonePress:function onDonePress(){},valueExtractor:function valueExtractor(){},labelExtractor:function labelExtractor(){}};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,onDonePress:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,CreateItemComponent:_propTypes.default.node,createSearchedOptionLabelStyle:_propTypes.default.object,disabled:_propTypes.default.bool,createSearchedOptionContainerStyle:_propTypes.default.object,noResultsLabelContainerStyle:_propTypes.default.object,noResultsLabelStyle:_propTypes.default.object,noResultsLabel:_propTypes.default.string,NoResultsComponent:_propTypes.default.node,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,selectedItem:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.string]),modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({safeAreaView:{maxHeight:"70%",backgroundColor:_theme.theme.colors.background.primary,borderTopRightRadius:20,borderTopLeftRadius:20},modalStyle:{margin:0,justifyContent:"flex-end",flex:1},inputContainerStyle:{backgroundColor:"white",borderRadius:10}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.191",
+  "version": "0.0.192",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/BottomSheet.js

@@ -65,6 +65,7 @@ const Title = ({
 
         {canSearch && (
           <SearchBar
+            debounceDelay={200}
             placeholder="Search"
             onChangeText={setSearchText}
             onCancel={() => {
@@ -101,7 +102,7 @@ Title.propTypes = {
  *
  * export default function Main() {
  *  const [isBottomSheetVisible, setBottomSheetVisibility] = useState(false);
- *  const [selectedItemIndex, setSelectedItemIndex] = useState(null);
+ *  const [selectedItem, setSelectedItem] = useState(null);
  *  const data = ["neeto-ui-rn", "neeto-desk-rn", "neeto-hq"];
  *
  *  return (
@@ -112,12 +113,12 @@ Title.propTypes = {
  *       hide={() => {
  *         setBottomSheetVisibility(false);
  *       }}
- *       onItemPress={({index}) => {
- *         setSelectedItemIndex(index);
+ *       onItemPress={({item}) => {
+ *         setSelectedItem(item);
  *       }}
  *       title="PROJECT"
  *       data={data}
- *       selectedItemIndex={selectedItemIndex}
+ *       selectedItem={selectedItem}
  *       ContentRow={() => <CustomComponent />}
  *      />
  *   </Container>
@@ -141,7 +142,6 @@ export const BottomSheet = ({
   hide,
   isVisible,
   onItemPress,
-  selectedItemIndex,
   bg,
   children,
   titleContainerStyle,
@@ -158,6 +158,8 @@ export const BottomSheet = ({
   noResultsLabel,
   NoResultsComponent,
   labelExtractor,
+  valueExtractor,
+  selectedItem,
   ...rest
 }) => {
   const [searchText, setSearchText] = useState("");
@@ -185,6 +187,13 @@ export const BottomSheet = ({
     return filteredItemCount > 0;
   };
 
+  const checkIsSelected = item => {
+    const itemValue = item?.value || valueExtractor(item) || item;
+    const selectedItemValue =
+      selectedItem?.value || valueExtractor(selectedItem) || selectedItem;
+    return itemValue === selectedItemValue;
+  };
+
   return (
     <Modal
       style={styles.modalStyle}
@@ -202,7 +211,7 @@ export const BottomSheet = ({
           borderTopRightRadius={20}
           borderTopLeftRadius={20}
           p={16}
-          flex={1}
+          flexShrink={1}
           {...rest}
         >
           {title && (
@@ -228,6 +237,7 @@ export const BottomSheet = ({
                 <Container>
                   {children}
                   {!!searchText &&
+                    !generateData().length &&
                     !showCreateOption &&
                     (NoResultsComponent ? (
                       <NoResultsComponent />
@@ -292,7 +302,7 @@ export const BottomSheet = ({
               renderItem={({ item, index }) => {
                 return (
                   <ContentRow
-                    isSelected={index === selectedItemIndex}
+                    isSelected={checkIsSelected(item)}
                     key={index}
                     onPress={() => {
                       !contentType && hide();
@@ -322,6 +332,8 @@ BottomSheet.defaultProps = {
   onPressCreateOption: () => {},
   CreateItemComponent: null,
   onDonePress: () => {},
+  valueExtractor: () => {},
+  labelExtractor: () => {},
 };
 
 BottomSheet.propTypes = {
@@ -345,10 +357,6 @@ BottomSheet.propTypes = {
    * Callback which returns the index of selected item.
    */
   onItemPress: PropTypes.func,
-  /**
-   * Index of selected Item.
-   */
-  selectedItemIndex: PropTypes.number,
   /**
    * Callback that will be called on Done button press
    */
@@ -409,6 +417,10 @@ BottomSheet.propTypes = {
    * Use custom key as value.
    */
   valueExtractor: PropTypes.func,
+  /**
+   *
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * To support more Modal params.
    */
@@ -426,7 +438,6 @@ const styles = StyleSheet.create({
     backgroundColor: theme.colors.background.primary,
     borderTopRightRadius: 20,
     borderTopLeftRadius: 20,
-    flex: 1,
   },
   modalStyle: {
     margin: 0,