@bigbinary/neetoui-rn 0.0.190 → 0.0.193

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;
@@ -162,6 +162,8 @@ interface BottomSheetProps extends ViewProps {
   contentType?: "checkbox" | null;
   canSearch?: boolean;
   onDonePress?: () => void;
+  valueExtractor?: () =>{};
+  labelExtractor?: () =>{};
 }
 
 interface ButtonProps extends TouchableProps {
@@ -280,7 +282,6 @@ interface MultiSelectProps extends ViewProps {
   options?: Array<any>;
   label?: string;
   value?: string | Array<any>;
-  placeholder?: string;
   labelExtractor?: (item: any, index: number) => string;
   valueExtractor?: (item: any, index: number) => string;
   onSelect?: (selectedData: Array<any>) => void;
@@ -302,6 +303,14 @@ interface MultiSelectProps extends ViewProps {
   onPressCreateOption?: (searchText: string) => void;
   createSearchedOptionContainerStyle?: ViewProps;
   onDonePress?: () => void;
+  disabled?: boolean;
+  noResultsLabelContainerStyle?: ViewStyle;
+  noResultsLabelStyle?: TextStyle;
+  noResultsLabel?: TypographyProps;
+  NoResultsComponent?: React.ReactNode;
+  maxItemSize?: number;
+  moreItemLabelContainerStyle?: ViewStyle;
+  moreItemLabelStyle?: TextStyle
 }
 
 type OnBoardingProps = {

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 _fuse=_interopRequireDefault(require("fuse.js"));var _=require("./");var _theme=require("../theme");var _constants=require("../constants");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"];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:37,columnNumber:7}}),_react.default.createElement(_.Container,{mb:16,flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:function onPress(){hide();onDonePress();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:15}},"Done"))),canSearch&&_react.default.createElement(_.SearchBar,{placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchText("");},showCancelButton:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,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,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var fuse=new _fuse.default(data,{keys:_constants.FUSE_KEYS,threshold:0.1});var generateData=function generateData(){if(searchText.trim().length){return fuse.search(searchText.trim()).map(function(item){return item.item;});}else{return data;}};var contentContainerStyle={paddingBottom:50};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:176,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,borderTopRightRadius:20,borderTopLeftRadius:20,p:16},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:187,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:195,columnNumber:13}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:children,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:219,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},contentContainerStyle:contentContainerStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:13}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_theme.theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:239,columnNumber:13}}):!!searchText.trim()&&!generateData().length&&showCreateOption&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:15}},CreateItemComponent?_react.default.createElement(CreateItemComponent,{searchText:searchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:19}}):_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:251,columnNumber:19}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:21}}),createOptionLabel||"Create "+searchText+" option"))))));};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,createSearchedOptionContainerStyle:_propTypes.default.object,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"},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","onBackdropPress"];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,_onBackdropPress=_ref2.onBackdropPress,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:function onBackdropPress(){_onBackdropPress();hide();},useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:199,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,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:213,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:222,columnNumber:13}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:241,columnNumber:17}},children,!!searchText&&!generateData().length&&!showCreateOption&&(NoResultsComponent?_react.default.createElement(NoResultsComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:23}}):_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",py:2,mb:2},noResultsLabelContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:23}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf600",fontSize:"s",color:"font.grey"},noResultsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:255,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:269,columnNumber:23}}):!!searchText&&showCreateOption&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:25}},CreateItemComponent?_react.default.createElement(CreateItemComponent,{searchText:searchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:278,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:280,columnNumber:29}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,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:308,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:239,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(){},onBackdropPress:function onBackdropPress(){}};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,onBackdropPress:_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/lib/components/MultiSelect.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MultiSelect=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));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 _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=require("react-native-reanimated");var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","labelExtractor","valueExtractor","onSelect","deletedValue","isLoading","isSearchable","showCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","multiSelectedItemContainerStyle","multiSelectedItemLabelStyle","selectedValue","CreateItemComponent","showCreateOptionLoader","createSearchedOptionLabelStyle","onPressCreateOption","createSearchedOptionContainerStyle","onDonePress"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.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 MultiSelectItem=function MultiSelectItem(_ref){var label=_ref.label,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref.multiSelectedItemLabelStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:12,flexDirection:"row",alignItems:"center",justifyContent:"space-between",px:2,py:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",mr:2,color:"font.grey800"},multiSelectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:7}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},itemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,showCreateOption=_ref3.showCreateOption,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref3.multiSelectedItemLabelStyle,selectedValue=_ref3.selectedValue,CreateItemComponent=_ref3.CreateItemComponent,showCreateOptionLoader=_ref3.showCreateOptionLoader,createSearchedOptionLabelStyle=_ref3.createSearchedOptionLabelStyle,onPressCreateOption=_ref3.onPressCreateOption,createSearchedOptionContainerStyle=_ref3.createSearchedOptionContainerStyle,onDonePress=_ref3.onDonePress,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var filteredOptions=options.filter(function(item,index){var optionValue=valueExtractor(item,index);var isItemAlreadySelected=Boolean(value==null?void 0:value.find(function(selectedItem){return valueExtractor(selectedItem)===optionValue;}));return!isItemAlreadySelected;}).filter(function(item,index){var optionLabel=labelExtractor(item,index);if(searchQuery.length===0)return true;return formatStr(optionLabel).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=40;var emptySearchedOptionsHeight=40;var searchInputHeight=35;var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var getValue=function getValue(item,index){return(item==null?void 0:item.value)||valueExtractor(item,index);};var handleCheckbox=function handleCheckbox(item){var oldData=(0,_toConsumableArray2.default)(value);var index=value.findIndex(function(data,index){return getValue(data,index)===getValue(item);});if(index===-1){oldData.push(item);}else{oldData.splice(index,1);}onSelect(oldData);};var CheckBoxContent=function CheckBoxContent(_ref4){var onPress=_ref4.onPress,item=_ref4.item,index=_ref4.index;var itemIndex=value.findIndex(function(data,i){return getValue(data,i)===getValue(item,index);});return!!(item!=null&&item.label)&&_react.default.createElement(_.Container,{py:12,__self:_this,__source:{fileName:_jsxFileName,lineNumber:231,columnNumber:9}},_react.default.createElement(_.CheckBox,{checked:itemIndex!==-1,onSelect:onPress,label:(item==null?void 0:item.label)||labelExtractor(item,index),__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:11}}));};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){dropdownAnimatedHeight.value=0;}};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return valueExtractor(selectedItem)!==valueExtractor(item);});onSelect(newValue);deletedValue(item);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);CheckBoxContent.propTypes={onPress:_propTypes.default.func,item:_propTypes.default.object,index:_propTypes.default.number};return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:5}}),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:277,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderRadius:12,borderWidth:1,borderColor:showDropdown?"border.base":"border.grey400",p:multipleOptionsSelected?1:2,pr:2},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:9}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",mb:1,fontSize:"xs",color:"font.grey600",ml:1},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:290,columnNumber:11}}),label),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:300,columnNumber:11}},!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"sf400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:15}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:311,columnNumber:15}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:312,columnNumber:17}},value==null?void 0:value.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(MultiSelectItem,{key:index,label:optionLabel,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemLabelStyle:multiSelectedItemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:321,columnNumber:23}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:338,columnNumber:15}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:343,columnNumber:15}})))),_react.default.createElement(_.BottomSheet,{title:label,onItemPress:function onItemPress(_ref5){var item=_ref5.item;handleCheckbox(item);selectedValue(item);},onDonePress:onDonePress,isVisible:showDropdown,hide:function hide(){return setShowDropdown(false);},canSearch:isSearchable,data:options,contentType:"checkbox",ContentRow:CheckBoxContent,showCreateOption:showCreateOption,CreateItemComponent:CreateItemComponent,showCreateOptionLoader:showCreateOptionLoader,createSearchedOptionLabelStyle:createSearchedOptionLabelStyle,onPressCreateOption:onPressCreateOption,createSearchedOptionContainerStyle:createSearchedOptionContainerStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:353,columnNumber:7}}));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})),placeholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,selectedValue:_propTypes.default.func,deletedValue:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,onDonePress:_propTypes.default.func,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,createSearchedOptionLabelStyle:_propTypes.default.object,CreateItemComponent:_propTypes.default.node};MultiSelect.defaultProps={label:null,placeholder:"Select Option",labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},selectedValue:function selectedValue(){},deletedValue:function deletedValue(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){},onDonePress:function onDonePress(){}};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MultiSelect=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));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 _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=_interopRequireWildcard(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _excluded=["options","label","value","labelExtractor","valueExtractor","onSelect","deletedValue","isLoading","isSearchable","showCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","multiSelectedItemContainerStyle","multiSelectedItemLabelStyle","selectedValue","CreateItemComponent","showCreateOptionLoader","createSearchedOptionLabelStyle","onPressCreateOption","createSearchedOptionContainerStyle","onDonePress","disabled","noResultsLabelContainerStyle","noResultsLabelStyle","noResultsLabel","NoResultsComponent","maxItemSize","moreItemLabelContainerStyle","moreItemLabelStyle","MoreItemComponent","onBackdropPress"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.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 Typography=_native.default.Text(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var MultiSelectItem=function MultiSelectItem(_ref){var label=_ref.label,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref.multiSelectedItemLabelStyle,disabled=_ref.disabled;var theme=(0,_react.useContext)(_native.ThemeContext);return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:12,flexDirection:"row",alignItems:"center",justifyContent:"space-between",px:2,py:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:5}}),_react.default.createElement(Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",mr:2,color:"font.grey800"},multiSelectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:7}}),label),!disabled&&_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:disabled,onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:theme.colors.font.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object,disabled:_propTypes.default.bool};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:7}}),_react.default.createElement(Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},itemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object};var AnimatedLabel=_reactNativeReanimated.default.createAnimatedComponent(Typography);var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,showCreateOption=_ref3.showCreateOption,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref3.multiSelectedItemLabelStyle,selectedValue=_ref3.selectedValue,CreateItemComponent=_ref3.CreateItemComponent,showCreateOptionLoader=_ref3.showCreateOptionLoader,createSearchedOptionLabelStyle=_ref3.createSearchedOptionLabelStyle,onPressCreateOption=_ref3.onPressCreateOption,createSearchedOptionContainerStyle=_ref3.createSearchedOptionContainerStyle,onDonePress=_ref3.onDonePress,disabled=_ref3.disabled,noResultsLabelContainerStyle=_ref3.noResultsLabelContainerStyle,noResultsLabelStyle=_ref3.noResultsLabelStyle,noResultsLabel=_ref3.noResultsLabel,NoResultsComponent=_ref3.NoResultsComponent,maxItemSize=_ref3.maxItemSize,moreItemLabelContainerStyle=_ref3.moreItemLabelContainerStyle,moreItemLabelStyle=_ref3.moreItemLabelStyle,MoreItemComponent=_ref3.MoreItemComponent,onBackdropPress=_ref3.onBackdropPress,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var animatedLabelValue=(0,_reactNativeReanimated.useSharedValue)(0);var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var filteredOptions=options.filter(function(item,index){var optionValue=valueExtractor(item,index);var isItemAlreadySelected=Boolean(value==null?void 0:value.find(function(selectedItem){return valueExtractor(selectedItem)===optionValue;}));return!isItemAlreadySelected;}).filter(function(item,index){var optionLabel=labelExtractor(item,index);if(searchQuery.length===0)return true;return formatStr(optionLabel).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=40;var emptySearchedOptionsHeight=40;var searchInputHeight=35;var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var getValue=function getValue(item,index){return(item==null?void 0:item.value)||valueExtractor(item,index)||item;};var getLabel=function getLabel(item,index){return(item==null?void 0:item.label)||labelExtractor(item,index)||item;};var handleCheckbox=function handleCheckbox(item){var oldData=(0,_toConsumableArray2.default)(value);var index=value.findIndex(function(data,index){return getValue(data,index)===getValue(item);});if(index===-1){oldData.push(item);}else{oldData.splice(index,1);}onSelect(oldData);};var CheckBoxContent=function CheckBoxContent(_ref4){var onPress=_ref4.onPress,item=_ref4.item,index=_ref4.index;var itemIndex=value.findIndex(function(data,i){return getValue(data,i)===getValue(item,index);});return _react.default.createElement(_.Container,{py:12,__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:7}},_react.default.createElement(_.CheckBox,{disabled:disabled,checked:itemIndex!==-1,onSelect:onPress,label:(item==null?void 0:item.label)||labelExtractor(item,index)||item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:284,columnNumber:9}}));};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){dropdownAnimatedHeight.value=0;}};var handleUnSelection=function handleUnSelection(item){var newValue=value.filter(function(selectedItem){return valueExtractor(selectedItem)!==valueExtractor(item);});onSelect(newValue);deletedValue(item);};(0,_react.useEffect)(function(){animatedLabelValue.value=(0,_reactNativeReanimated.withTiming)(value.length||showDropdown?1:0,{duration:250});},[value,showDropdown]);(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);CheckBoxContent.propTypes={onPress:_propTypes.default.func,item:_propTypes.default.object,index:_propTypes.default.number};var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{top:(0,_reactNativeReanimated.interpolate)(animatedLabelValue.value,[0,1],[7,-5]),fontSize:(0,_reactNativeReanimated.interpolate)(animatedLabelValue.value,[0,1],[17,13]),color:"font.grey600"};};_f._closure={interpolate:_reactNativeReanimated.interpolate,animatedLabelValue:animatedLabelValue};_f.asString="function _f(){const{interpolate,animatedLabelValue}=jsThis._closure;{return{top:interpolate(animatedLabelValue.value,[0,1],[7,-5]),fontSize:interpolate(animatedLabelValue.value,[0,1],[17,13]),color:\"font.grey600\"};}}";_f.__workletHash=10991286228666;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (336:42)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:345,columnNumber:5}}),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:346,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderRadius:12,borderWidth:1,borderColor:showDropdown?"border.base":"border.grey400",p:2,pr:2,minHeight:58},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:350,columnNumber:9}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:360,columnNumber:11}},_react.default.createElement(AnimatedLabel,{position:"absolute",zIndex:1,style:[animatedStyles,(0,_extends2.default)({marginLeft:5},labelStyle)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:365,columnNumber:13}},label),!multipleOptionsSelected&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:372,columnNumber:42}}),multipleOptionsSelected&&_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},mt:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:374,columnNumber:15}},value==null?void 0:value.slice(0,maxItemSize).map(function(item,index){return _react.default.createElement(MultiSelectItem,{key:index,label:getLabel(item),onUnselect:function onUnselect(){return handleUnSelection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemLabelStyle:multiSelectedItemLabelStyle,disabled:disabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:383,columnNumber:21}});}),(value==null?void 0:value.length)>maxItemSize&&(!MoreItemComponent?_react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:12,flexDirection:"row",alignItems:"center",justifyContent:"space-between",px:2,py:1,m:1},moreItemLabelContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:397,columnNumber:21}}),_react.default.createElement(Typography,(0,_extends2.default)({},moreItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:408,columnNumber:23}}),"+",(value==null?void 0:value.length)-maxItemSize," More")):_react.default.createElement(MoreItemComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:413,columnNumber:21}}))),_react.default.createElement(_.Container,{mt:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:417,columnNumber:13}},isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:419,columnNumber:17}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:424,columnNumber:17}}))))),_react.default.createElement(_.BottomSheet,{title:label,onItemPress:function onItemPress(_ref5){var item=_ref5.item;handleCheckbox(item);selectedValue(item);},disabled:disabled,onDonePress:onDonePress,isVisible:showDropdown,hide:function hide(){return setShowDropdown(false);},canSearch:isSearchable,data:options,contentType:"checkbox",ContentRow:CheckBoxContent,showCreateOption:showCreateOption,CreateItemComponent:CreateItemComponent,showCreateOptionLoader:showCreateOptionLoader,createSearchedOptionLabelStyle:createSearchedOptionLabelStyle,onPressCreateOption:onPressCreateOption,createSearchedOptionContainerStyle:createSearchedOptionContainerStyle,noResultsLabelContainerStyle:noResultsLabelContainerStyle,noResultsLabelStyle:noResultsLabelStyle,noResultsLabel:noResultsLabel,NoResultsComponent:NoResultsComponent,valueExtractor:valueExtractor,labelExtractor:labelExtractor,onBackdropPress:onBackdropPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:435,columnNumber:7}}));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string),_propTypes.default.arrayOf(_propTypes.default.object)]),labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,selectedValue:_propTypes.default.func,deletedValue:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,onDonePress:_propTypes.default.func,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,createSearchedOptionLabelStyle:_propTypes.default.object,CreateItemComponent:_propTypes.default.node,disabled:_propTypes.default.bool,noResultsLabelContainerStyle:_propTypes.default.object,noResultsLabelStyle:_propTypes.default.object,noResultsLabel:_propTypes.default.string,NoResultsComponent:_propTypes.default.node,maxItemSize:_propTypes.default.number,moreItemLabelContainerStyle:_propTypes.default.object,moreItemLabelStyle:_propTypes.default.object,MoreItemComponent:_propTypes.default.node,onBackdropPress:_propTypes.default.func};MultiSelect.defaultProps={label:null,labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},selectedValue:function selectedValue(){},deletedValue:function deletedValue(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){},onDonePress:function onDonePress(){},maxItemSize:5,onBackdropPress:function onBackdropPress(){}};

package/lib/components/SearchBar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","onCancel","debounceDelay","showCancelButton"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onCancel=props.onCancel,onCancel=_props$onCancel===void 0?function(){}:_props$onCancel,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,_props$showCancelButt=props.showCancelButton,showCancelButton=_props$showCancelButt===void 0?true:_props$showCancelButt,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var buttonWidthController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var buttonOpacityController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.sequence([_reactNative.Animated.timing(buttonOpacityController,{toValue:val,duration:350,useNativeDriver:false}),_reactNative.Animated.timing(buttonWidthController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=buttonWidthController.interpolate({inputRange:[0,1],outputRange:[0,60]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:42,flex:1,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:7}}),_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-search-line",size:20,color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}})),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:searchText,onChangeText:setSearchText,onFocus:function onFocus(){animateSearchInput(1);},onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},placeholder:placeholder,fontSize:16,flex:1,placeholderTextColor:_theme.theme.colors.font.grey600,color:"font.primary",autoCapitalize:"none",returnKeyType:"search"},rest.searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:9}}))),showCancelButton&&_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:9}},_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,labelStyle:{mx:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}})));};exports.SearchBar=SearchBar;SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","onCancel","debounceDelay","showCancelButton"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onCancel=props.onCancel,onCancel=_props$onCancel===void 0?function(){}:_props$onCancel,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,_props$showCancelButt=props.showCancelButton,showCancelButton=_props$showCancelButt===void 0?true:_props$showCancelButt,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText.trim(),Number(debounceDelay));var buttonWidthController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var buttonOpacityController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.sequence([_reactNative.Animated.timing(buttonOpacityController,{toValue:val,duration:350,useNativeDriver:false}),_reactNative.Animated.timing(buttonWidthController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=buttonWidthController.interpolate({inputRange:[0,1],outputRange:[0,60]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:42,flex:1,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:7}}),_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-search-line",size:20,color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}})),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:searchText,onChangeText:setSearchText,onFocus:function onFocus(){animateSearchInput(1);},onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},placeholder:placeholder,fontSize:16,flex:1,placeholderTextColor:_theme.theme.colors.font.grey600,color:"font.primary",autoCapitalize:"none",returnKeyType:"search"},rest.searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:9}}))),showCancelButton&&_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:9}},_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,labelStyle:{mx:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}})));};exports.SearchBar=SearchBar;SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.190",
+  "version": "0.0.193",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -53,7 +53,6 @@
     "@shopify/flash-list": "^1.2.0",
     "@styled-system/prop-types": "^5.1.5",
     "dayjs": "^1.11.4",
-    "fuse.js": "^6.6.2",
     "react-content-loader": "^6.2.0",
     "react-native-calendars": "^1.1285.0",
     "react-native-gesture-handler": "^2.4.0",

package/src/components/BottomSheet.js

@@ -8,11 +8,9 @@ import {
 import PropTypes from "prop-types";
 import Modal from "react-native-modal";
 import { SafeAreaView } from "react-native-safe-area-context";
-import Fuse from "fuse.js";
 
 import { Typography, Container, Touchable, SearchBar } from "@components";
 import { theme } from "../theme";
-import { FUSE_KEYS } from "../constants";
 
 const Title = ({
   title,
@@ -67,6 +65,7 @@ const Title = ({
 
         {canSearch && (
           <SearchBar
+            debounceDelay={200}
             placeholder="Search"
             onChangeText={setSearchText}
             onCancel={() => {
@@ -103,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 (
@@ -114,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>
@@ -143,7 +142,6 @@ export const BottomSheet = ({
   hide,
   isVisible,
   onItemPress,
-  selectedItemIndex,
   bg,
   children,
   titleContainerStyle,
@@ -154,29 +152,57 @@ export const BottomSheet = ({
   contentType,
   canSearch,
   onDonePress,
+  disabled,
+  noResultsLabelContainerStyle,
+  noResultsLabelStyle,
+  noResultsLabel,
+  NoResultsComponent,
+  labelExtractor,
+  valueExtractor,
+  selectedItem,
+  onBackdropPress,
   ...rest
 }) => {
   const [searchText, setSearchText] = useState("");
 
-  const fuse = new Fuse(data, { keys: FUSE_KEYS, threshold: 0.1 });
+  const getLabel = (item, index) => {
+    return item?.label || labelExtractor(item, index) || item;
+  };
 
   const generateData = () => {
-    if (searchText.trim().length) {
-      return fuse.search(searchText.trim()).map(item => item.item);
+    if (searchText.length) {
+      return data.filter(item =>
+        getLabel(item).toLowerCase().includes(searchText.toLowerCase())
+      );
     } else {
       return data;
     }
   };
 
-  const contentContainerStyle = {
-    paddingBottom: 50,
+  const hideCreateComponent = () => {
+    const filteredItemCount = generateData().filter(
+      data =>
+        getLabel(data).toLocaleLowerCase() === searchText.toLocaleLowerCase()
+    ).length;
+
+    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}
       isVisible={isVisible}
-      onBackdropPress={hide}
+      onBackdropPress={() => {
+        onBackdropPress();
+        hide();
+      }}
       useNativeDriver
       avoidKeyboard
       hideModalContentWhileAnimating
@@ -189,6 +215,7 @@ export const BottomSheet = ({
           borderTopRightRadius={20}
           borderTopLeftRadius={20}
           p={16}
+          flexShrink={1}
           {...rest}
         >
           {title && (
@@ -210,14 +237,76 @@ export const BottomSheet = ({
 
           {data && (
             <FlatList
-              ListFooterComponent={children}
+              ListFooterComponent={
+                <Container>
+                  {children}
+                  {!!searchText &&
+                    !generateData().length &&
+                    !showCreateOption &&
+                    (NoResultsComponent ? (
+                      <NoResultsComponent />
+                    ) : (
+                      <Container
+                        alignItems="center"
+                        py={2}
+                        mb={2}
+                        {...noResultsLabelContainerStyle}
+                      >
+                        <Typography
+                          fontFamily="sf600"
+                          fontSize="s"
+                          color="font.grey"
+                          {...noResultsLabelStyle}
+                        >
+                          {noResultsLabel || "No options found"}
+                        </Typography>
+                      </Container>
+                    ))}
+
+                  {!disabled &&
+                    !hideCreateComponent() &&
+                    (showCreateOptionLoader ? (
+                      <ActivityIndicator
+                        size="small"
+                        color={theme.colors.background.base}
+                      />
+                    ) : (
+                      !!searchText &&
+                      showCreateOption && (
+                        <Container>
+                          {CreateItemComponent ? (
+                            <CreateItemComponent searchText={searchText} />
+                          ) : (
+                            <Touchable
+                              height={40}
+                              justifyContent="center"
+                              alignItems="center"
+                              onPress={() => onPressCreateOption(searchText)}
+                              {...createSearchedOptionContainerStyle}
+                            >
+                              <Typography
+                                fontFamily="sf400"
+                                fontSize="s"
+                                color="font.grey"
+                                {...createSearchedOptionLabelStyle}
+                              >
+                                {createOptionLabel ||
+                                  `Create ${searchText} option`}
+                              </Typography>
+                            </Touchable>
+                          )}
+                        </Container>
+                      )
+                    ))}
+                </Container>
+              }
               initialNumToRender={data.length}
               onScrollBeginDrag={Keyboard.dismiss}
               data={generateData()}
               renderItem={({ item, index }) => {
                 return (
                   <ContentRow
-                    isSelected={index === selectedItemIndex}
+                    isSelected={checkIsSelected(item)}
                     key={index}
                     onPress={() => {
                       !contentType && hide();
@@ -231,43 +320,8 @@ export const BottomSheet = ({
               keyExtractor={(item, index) => {
                 return index;
               }}
-              contentContainerStyle={contentContainerStyle}
             />
           )}
-
-          {showCreateOptionLoader ? (
-            <ActivityIndicator
-              size="small"
-              color={theme.colors.background.base}
-            />
-          ) : (
-            !!searchText.trim() &&
-            !generateData().length &&
-            showCreateOption && (
-              <Container>
-                {CreateItemComponent ? (
-                  <CreateItemComponent searchText={searchText} />
-                ) : (
-                  <Touchable
-                    height={40}
-                    justifyContent="center"
-                    alignItems="center"
-                    onPress={() => onPressCreateOption(searchText)}
-                    {...createSearchedOptionContainerStyle}
-                  >
-                    <Typography
-                      fontFamily="sf400"
-                      fontSize="s"
-                      color="font.grey"
-                      {...createSearchedOptionLabelStyle}
-                    >
-                      {createOptionLabel || `Create ${searchText} option`}
-                    </Typography>
-                  </Touchable>
-                )}
-              </Container>
-            )
-          )}
         </Container>
       </SafeAreaView>
     </Modal>
@@ -282,6 +336,9 @@ BottomSheet.defaultProps = {
   onPressCreateOption: () => {},
   CreateItemComponent: null,
   onDonePress: () => {},
+  valueExtractor: () => {},
+  labelExtractor: () => {},
+  onBackdropPress: () => {},
 };
 
 BottomSheet.propTypes = {
@@ -305,10 +362,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
    */
@@ -318,11 +371,11 @@ BottomSheet.propTypes = {
    */
   bg: PropTypes.string,
   /**
-   * To customise title container styles.
+   * To customize title container styles.
    */
   titleContainerStyle: PropTypes.object,
   /**
-   * To customise title text styles.
+   * To customize title text styles.
    */
   titleTextStyle: PropTypes.object,
   /**
@@ -346,13 +399,37 @@ BottomSheet.propTypes = {
    */
   CreateItemComponent: PropTypes.node,
   /**
-   * To customise empty options placeholder text style.
+   * To customize empty options placeholder text style.
    */
   createSearchedOptionLabelStyle: PropTypes.object,
   /**
-   * To customise empty options placeholder container style.
+   * Flag will disable create item feature
+   */
+  disabled: PropTypes.bool,
+  /**
+   * To customize empty options placeholder container style.
    */
   createSearchedOptionContainerStyle: PropTypes.object,
+  noResultsLabelContainerStyle: PropTypes.object,
+  noResultsLabelStyle: PropTypes.object,
+  noResultsLabel: PropTypes.string,
+  NoResultsComponent: PropTypes.node,
+  /**
+   * Use custom key as label.
+   */
+  labelExtractor: PropTypes.func,
+  /**
+   * Use custom key as value.
+   */
+  valueExtractor: PropTypes.func,
+   /**
+   * Function to customize back drop press
+   */
+  onBackdropPress: PropTypes.func,
+  /**
+   * Currently selected item
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * To support more Modal params.
    */
@@ -374,6 +451,7 @@ const styles = StyleSheet.create({
   modalStyle: {
     margin: 0,
     justifyContent: "flex-end",
+    flex: 1,
   },
   inputContainerStyle: {
     backgroundColor: "white",

package/src/components/MultiSelect.js

@@ -5,56 +5,92 @@ import {
   Keyboard,
   TouchableWithoutFeedback,
 } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import { useSharedValue } from "react-native-reanimated";
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import Icon from "react-native-remix-icon";
-import { ThemeContext } from "styled-components/native";
-
+import styled, { ThemeContext } from "styled-components/native";
 import {
-  BottomSheet,
-  CheckBox,
-  Container,
-  Touchable,
-  Typography,
-} from "@components";
+  flexbox,
+  space,
+  typography,
+  textStyle,
+  color,
+  layout,
+  system,
+  position,
+} from "styled-system";
+
+import { BottomSheet, CheckBox, Container, Touchable } from "@components";
+
+const Typography = styled.Text`
+  ${textStyle}
+  ${space}
+  ${layout}
+  ${flexbox}
+  ${typography}
+  ${color}
+  ${position}
+  ${system({
+    textDecoration: {
+      property: "textDecoration",
+      cssProperty: "textDecoration",
+    },
+    textTransform: { property: "textTransform", cssProperty: "textTransform" },
+  })}
+`;
 
 const MultiSelectItem = ({
   label,
   onUnselect,
   multiSelectedItemContainerStyle,
   multiSelectedItemLabelStyle,
-}) => (
-  <Container
-    bg="background.secondary"
-    borderRadius={12}
-    flexDirection="row"
-    alignItems="center"
-    justifyContent="space-between"
-    px={2}
-    py={1}
-    m={1}
-    {...multiSelectedItemContainerStyle}
-  >
-    <Typography
-      fontFamily="sf400"
-      fontSize="s"
-      mr={2}
-      color="font.grey800"
-      {...multiSelectedItemLabelStyle}
+  disabled,
+}) => {
+  const theme = useContext(ThemeContext);
+  return (
+    <Container
+      bg="background.secondary"
+      borderRadius={12}
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="space-between"
+      px={2}
+      py={1}
+      m={1}
+      {...multiSelectedItemContainerStyle}
     >
-      {label}
-    </Typography>
-    <TouchableWithoutFeedback onPress={onUnselect}>
-      <Icon name="ri-close-line" size="20" color="grey800" />
-    </TouchableWithoutFeedback>
-  </Container>
-);
+      <Typography
+        fontFamily="sf400"
+        fontSize="s"
+        mr={2}
+        color="font.grey800"
+        {...multiSelectedItemLabelStyle}
+      >
+        {label}
+      </Typography>
+      {!disabled && (
+        <TouchableWithoutFeedback disabled={disabled} onPress={onUnselect}>
+          <Icon
+            name="ri-close-line"
+            size="20"
+            color={theme.colors.font.grey800}
+          />
+        </TouchableWithoutFeedback>
+      )}
+    </Container>
+  );
+};
 
 MultiSelectItem.propTypes = {
   label: PropTypes.string,
   onUnselect: PropTypes.func,
   multiSelectedItemContainerStyle: PropTypes.object,
   multiSelectedItemLabelStyle: PropTypes.object,
+  disabled: PropTypes.bool,
 };
 
 const DropdownItem = ({
@@ -134,11 +170,12 @@ DropdownItem.propTypes = {
  * ```
  */
 
+const AnimatedLabel = Animated.createAnimatedComponent(Typography);
+
 export const MultiSelect = ({
   options,
   label,
   value,
-  placeholder,
   labelExtractor,
   valueExtractor,
   onSelect,
@@ -160,12 +197,23 @@ export const MultiSelect = ({
   onPressCreateOption,
   createSearchedOptionContainerStyle,
   onDonePress,
+  disabled,
+  noResultsLabelContainerStyle,
+  noResultsLabelStyle,
+  noResultsLabel,
+  NoResultsComponent,
+  maxItemSize,
+  moreItemLabelContainerStyle,
+  moreItemLabelStyle,
+  MoreItemComponent,
+  onBackdropPress,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
   const [showDropdown, setShowDropdown] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const dropdownAnimatedHeight = useSharedValue(0);
+  const animatedLabelValue = useSharedValue(0);
 
   const formatStr = str => str?.toLowerCase()?.trim();
   const filteredOptions = options
@@ -205,7 +253,11 @@ export const MultiSelect = ({
         : 0);
 
   const getValue = (item, index) => {
-    return item?.value || valueExtractor(item, index);
+    return item?.value || valueExtractor(item, index) || item;
+  };
+
+  const getLabel = (item, index) => {
+    return item?.label || labelExtractor(item, index) || item;
   };
 
   const handleCheckbox = item => {
@@ -226,17 +278,16 @@ export const MultiSelect = ({
     const itemIndex = value.findIndex(
       (data, i) => getValue(data, i) === getValue(item, index)
     );
+
     return (
-      !!item?.label && (
-        <Container py={12}>
-          <CheckBox
-            checked={itemIndex !== -1}
-            onSelect={onPress}
-            // checkboxContainerProp={containerStyle}
-            label={item?.label || labelExtractor(item, index)}
-          />
-        </Container>
-      )
+      <Container py={12}>
+        <CheckBox
+          disabled={disabled}
+          checked={itemIndex !== -1}
+          onSelect={onPress}
+          label={item?.label || labelExtractor(item, index) || item}
+        />
+      </Container>
     );
   };
 
@@ -251,7 +302,7 @@ export const MultiSelect = ({
     }
   };
 
-  const handleUnselection = item => {
+  const handleUnSelection = item => {
     const newValue = value.filter(
       selectedItem => valueExtractor(selectedItem) !== valueExtractor(item)
     );
@@ -259,6 +310,16 @@ export const MultiSelect = ({
     deletedValue(item);
   };
 
+  useEffect(() => {
+    animatedLabelValue.value = withTiming(
+      value.length || showDropdown ? 1 : 0,
+      {
+        duration: 250,
+      }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, showDropdown]);
+
   useEffect(() => {
     if (showDropdown) {
       dropdownAnimatedHeight.value = dropdownHeight;
@@ -272,6 +333,14 @@ export const MultiSelect = ({
     index: PropTypes.number,
   };
 
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      top: interpolate(animatedLabelValue.value, [0, 1], [7, -5]),
+      fontSize: interpolate(animatedLabelValue.value, [0, 1], [17, 13]),
+      color: "font.grey600",
+    };
+  });
+
   return (
     <Container {...containerStyle}>
       <TouchableWithoutFeedback
@@ -282,70 +351,83 @@ export const MultiSelect = ({
           borderRadius={12}
           borderWidth={1}
           borderColor={showDropdown ? "border.base" : "border.grey400"}
-          p={multipleOptionsSelected ? 1 : 2}
+          p={2}
           pr={2}
+          minHeight={58}
           {...inputContainerStyle}
           {...rest}
         >
-          <Typography
-            fontFamily="sf400"
-            mb={1}
-            fontSize="xs"
-            color="font.grey600"
-            ml={1}
-            {...labelStyle}
-          >
-            {label}
-          </Typography>
           <Container
             flexDirection="row"
             justifyContent="space-between"
             alignItems="center"
           >
-            {!multipleOptionsSelected && (
-              <Typography fontFamily="sf400" fontSize="s" color="font.grey">
-                {!multipleOptionsSelected && placeholder}
-              </Typography>
-            )}
+            <AnimatedLabel
+              position="absolute"
+              zIndex={1}
+              style={[animatedStyles, { marginLeft: 5, ...labelStyle }]}
+            >
+              {label}
+            </AnimatedLabel>
+            {!multipleOptionsSelected && <Container />}
             {multipleOptionsSelected && (
-              <ScrollView showsVerticalScrollIndicator={false}>
-                <Container
-                  flexWrap="wrap"
-                  flexDirection="row"
-                  maxWidth="85%"
-                  onStartShouldSetResponder={() => true}
-                >
-                  {value?.map((item, index) => {
-                    const optionLabel = labelExtractor(item, index);
-                    return (
-                      <MultiSelectItem
-                        key={index}
-                        label={optionLabel}
-                        onUnselect={() => handleUnselection(item)}
-                        multiSelectedItemContainerStyle={
-                          multiSelectedItemContainerStyle
-                        }
-                        multiSelectedItemLabelStyle={
-                          multiSelectedItemLabelStyle
-                        }
-                      />
-                    );
-                  })}
-                </Container>
-              </ScrollView>
-            )}
-            {isLoading ? (
-              <ActivityIndicator
-                size="small"
-                color={theme.colors.background.base}
-              />
-            ) : (
-              <Icon
-                name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
-                size="20"
-                color="grey"
-              />
+              <Container
+                flexWrap="wrap"
+                flexDirection="row"
+                maxWidth="85%"
+                onStartShouldSetResponder={() => true}
+                mt={3}
+              >
+                {value?.slice(0, maxItemSize).map((item, index) => {
+                  return (
+                    <MultiSelectItem
+                      key={index}
+                      label={getLabel(item)}
+                      onUnselect={() => handleUnSelection(item)}
+                      multiSelectedItemContainerStyle={
+                        multiSelectedItemContainerStyle
+                      }
+                      multiSelectedItemLabelStyle={multiSelectedItemLabelStyle}
+                      disabled={disabled}
+                    />
+                  );
+                })}
+                {value?.length > maxItemSize &&
+                  (!MoreItemComponent ? (
+                    <Container
+                      bg="background.secondary"
+                      borderRadius={12}
+                      flexDirection="row"
+                      alignItems="center"
+                      justifyContent="space-between"
+                      px={2}
+                      py={1}
+                      m={1}
+                      {...moreItemLabelContainerStyle}
+                    >
+                      <Typography {...moreItemLabelStyle}>
+                        +{value?.length - maxItemSize} More
+                      </Typography>
+                    </Container>
+                  ) : (
+                    <MoreItemComponent />
+                  ))}
+              </Container>
             )}
+            <Container mt={10}>
+              {isLoading ? (
+                <ActivityIndicator
+                  size="small"
+                  color={theme.colors.background.base}
+                />
+              ) : (
+                <Icon
+                  name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
+                  size="20"
+                  color="grey"
+                />
+              )}
+            </Container>
           </Container>
         </Container>
       </TouchableWithoutFeedback>
@@ -356,6 +438,7 @@ export const MultiSelect = ({
           handleCheckbox(item);
           selectedValue(item);
         }}
+        disabled={disabled}
         onDonePress={onDonePress}
         isVisible={showDropdown}
         hide={() => setShowDropdown(false)}
@@ -369,6 +452,13 @@ export const MultiSelect = ({
         createSearchedOptionLabelStyle={createSearchedOptionLabelStyle}
         onPressCreateOption={onPressCreateOption}
         createSearchedOptionContainerStyle={createSearchedOptionContainerStyle}
+        noResultsLabelContainerStyle={noResultsLabelContainerStyle}
+        noResultsLabelStyle={noResultsLabelStyle}
+        noResultsLabel={noResultsLabel}
+        NoResultsComponent={NoResultsComponent}
+        valueExtractor={valueExtractor}
+        labelExtractor={labelExtractor}
+        onBackdropPress={onBackdropPress}
       />
     </Container>
   );
@@ -382,16 +472,10 @@ MultiSelect.propTypes = {
   /**
    * options to populate the options dropdown.
    */
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.string,
-    })
-  ),
-  /**
-   * The text to be displayed if no option is selected.
-   */
-  placeholder: PropTypes.string,
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
   /**
    * Use custom key as label.
    */
@@ -477,7 +561,7 @@ MultiSelect.propTypes = {
    */
   multiSelectedItemLabelStyle: PropTypes.object,
   /**
-   * To customise search input containerr style.
+   * To customise search input container style.
    */
   searchInputContainerStyle: PropTypes.object,
   /**
@@ -504,11 +588,50 @@ MultiSelect.propTypes = {
    * Component that renders when searched item doesn't exists
    */
   CreateItemComponent: PropTypes.node,
+  /**
+   * Flag will disable the selection of the item
+   */
+  disabled: PropTypes.bool,
+  /**
+   * To customize no results container style
+   */
+  noResultsLabelContainerStyle: PropTypes.object,
+  /**
+   * To customize no results label style
+   */
+  noResultsLabelStyle: PropTypes.object,
+  /**
+   * To customize no results label
+   */
+  noResultsLabel: PropTypes.string,
+  /**
+   * To customize no results component
+   */
+  NoResultsComponent: PropTypes.node,
+  /**
+   * Maximum number of items to render in the list
+   */
+  maxItemSize: PropTypes.number,
+  /**
+   * Container style for the more item label
+   */
+  moreItemLabelContainerStyle: PropTypes.object,
+  /**
+   * More item label style
+   */
+  moreItemLabelStyle: PropTypes.object,
+  /**
+   * Custom component to render more item message
+   */
+  MoreItemComponent: PropTypes.node,
+  /**
+   * Function to customize back drop press
+   */
+  onBackdropPress: PropTypes.func,
 };
 
 MultiSelect.defaultProps = {
   label: null,
-  placeholder: "Select Option",
   labelExtractor: option => option?.label,
   valueExtractor: option => option?.value,
   value: null,
@@ -522,4 +645,6 @@ MultiSelect.defaultProps = {
   createOptionLabel: null,
   onPressCreateOption: () => {},
   onDonePress: () => {},
+  maxItemSize: 5,
+  onBackdropPress: () => {},
 };

package/src/components/SearchBar.js

@@ -55,7 +55,7 @@ export const SearchBar = props => {
   const inputRef = useRef();
   const [searchText, setSearchText] = useState("");
   const debouncedSearchTextValue = useDebounce(
-    searchText,
+    searchText.trim(),
     Number(debounceDelay)
   );
   const buttonWidthController = useRef(new Animated.Value(0)).current;

package/src/constants.js

@@ -1 +0,0 @@
-export const FUSE_KEYS = ["label", "name", "value", "title", "email"];