@bigbinary/neetoui-rn 0.0.192 → 0.0.193

package/lib/components/BottomSheet.js

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

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

package/src/components/BottomSheet.js

@@ -160,6 +160,7 @@ export const BottomSheet = ({
   labelExtractor,
   valueExtractor,
   selectedItem,
+  onBackdropPress,
   ...rest
 }) => {
   const [searchText, setSearchText] = useState("");
@@ -198,7 +199,10 @@ export const BottomSheet = ({
     <Modal
       style={styles.modalStyle}
       isVisible={isVisible}
-      onBackdropPress={hide}
+      onBackdropPress={() => {
+        onBackdropPress();
+        hide();
+      }}
       useNativeDriver
       avoidKeyboard
       hideModalContentWhileAnimating
@@ -334,6 +338,7 @@ BottomSheet.defaultProps = {
   onDonePress: () => {},
   valueExtractor: () => {},
   labelExtractor: () => {},
+  onBackdropPress: () => {},
 };
 
 BottomSheet.propTypes = {
@@ -417,8 +422,12 @@ BottomSheet.propTypes = {
    * 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]),
   /**

package/src/components/MultiSelect.js

@@ -206,6 +206,7 @@ export const MultiSelect = ({
   moreItemLabelContainerStyle,
   moreItemLabelStyle,
   MoreItemComponent,
+  onBackdropPress,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -336,7 +337,6 @@ export const MultiSelect = ({
     return {
       top: interpolate(animatedLabelValue.value, [0, 1], [7, -5]),
       fontSize: interpolate(animatedLabelValue.value, [0, 1], [17, 13]),
-      marginLeft: 5,
       color: "font.grey600",
     };
   });
@@ -365,7 +365,7 @@ export const MultiSelect = ({
             <AnimatedLabel
               position="absolute"
               zIndex={1}
-              style={[animatedStyles, { ...labelStyle }]}
+              style={[animatedStyles, { marginLeft: 5, ...labelStyle }]}
             >
               {label}
             </AnimatedLabel>
@@ -458,6 +458,7 @@ export const MultiSelect = ({
         NoResultsComponent={NoResultsComponent}
         valueExtractor={valueExtractor}
         labelExtractor={labelExtractor}
+        onBackdropPress={onBackdropPress}
       />
     </Container>
   );
@@ -623,6 +624,10 @@ MultiSelect.propTypes = {
    * Custom component to render more item message
    */
   MoreItemComponent: PropTypes.node,
+  /**
+   * Function to customize back drop press
+   */
+  onBackdropPress: PropTypes.func,
 };
 
 MultiSelect.defaultProps = {
@@ -641,4 +646,5 @@ MultiSelect.defaultProps = {
   onPressCreateOption: () => {},
   onDonePress: () => {},
   maxItemSize: 5,
+  onBackdropPress: () => {},
 };