@bigbinary/neetoui-rn 0.0.120 → 0.0.121

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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","multiSelectedItemContainerStyle","multiSelectedItemTextStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsTextStyle"];var _this=this,_jsxFileName="/Users/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,multiSelectedItemTextStyle=_ref.multiSelectedItemTextStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.base",bg:"background.grey100",borderRadius:2,flexDirection:"row",alignItems:"center",justifyContent:"space-between",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2,maxWidth:"90%"},multiSelectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:7}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,emptyOptionsPlaceholder=_ref3.emptyOptionsPlaceholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,selectedValue=_ref3.selectedValue,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemTextStyle=_ref3.multiSelectedItemTextStyle,searchInputContainerStyle=_ref3.searchInputContainerStyle,searchInputStyle=_ref3.searchInputStyle,emptyOptionsContainerStyle=_ref3.emptyOptionsContainerStyle,emptyOptionsTextStyle=_ref3.emptyOptionsTextStyle,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 isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var emptyOptionsPlaceholderHeight=40;var searchInputHeight=35;var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;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 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?emptyOptionsPlaceholderHeight:0);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (208:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (200:42)";return _f;}());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);};var handleSelection=function handleSelection(item){onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));selectedValue(item);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:250,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:259,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",flexDirection:"row",justifyContent:"space-between",alignItems:"center",p:multipleOptionsSelected?1:2,pr:2,maxHeight:120},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:263,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:282,columnNumber:15}},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,multiSelectedItemTextStyle:multiSelectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:291,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:311,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:320,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:321,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:322,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:330,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:331,columnNumber:19}}))),isOptionsEmpty&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:345,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},emptyOptionsTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:351,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:362,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:363,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:365,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,onPress:function onPress(){return handleSelection(item);},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:369,columnNumber:21}});}))))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_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,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsTextStyle:_propTypes.default.object};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};
+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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","showCreateOption","showCreateOptionLoader","createOptionLabel","onPressCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemLabelStyle","multiSelectedItemContainerStyle","multiSelectedItemLabelStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsLabelStyle","createSearchedOptionContainerStyle","createSearchedOptionLabelStyle"];var _this=this,_jsxFileName="/Users/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)({borderWidth:1,borderColor:"border.base",bg:"background.grey100",borderRadius:2,flexDirection:"row",alignItems:"center",justifyContent:"space-between",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2,maxWidth:"90%"},multiSelectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,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:69,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,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,emptyOptionsPlaceholder=_ref3.emptyOptionsPlaceholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,selectedValue=_ref3.selectedValue,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,showCreateOption=_ref3.showCreateOption,showCreateOptionLoader=_ref3.showCreateOptionLoader,createOptionLabel=_ref3.createOptionLabel,onPressCreateOption=_ref3.onPressCreateOption,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,itemLabelStyle=_ref3.itemLabelStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref3.multiSelectedItemLabelStyle,searchInputContainerStyle=_ref3.searchInputContainerStyle,searchInputStyle=_ref3.searchInputStyle,emptyOptionsContainerStyle=_ref3.emptyOptionsContainerStyle,emptyOptionsLabelStyle=_ref3.emptyOptionsLabelStyle,createSearchedOptionContainerStyle=_ref3.createSearchedOptionContainerStyle,createSearchedOptionLabelStyle=_ref3.createSearchedOptionLabelStyle,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?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (219:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (211:42)";return _f;}(),[]);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);};var handleSelection=function handleSelection(item){onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));selectedValue(item);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:261,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",flexDirection:"row",justifyContent:"space-between",alignItems:"center",p:multipleOptionsSelected?1:2,pr:2,maxHeight:120},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:274,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:292,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:293,columnNumber:15}},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:302,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:317,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:322,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:331,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:332,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:341,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:342,columnNumber:19}}))),isOptionsEmpty&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:356,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},emptyOptionsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:362,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),isSearchedOptionsEmpty&&showCreateOption&&_react.default.createElement(_.Touchable,(0,_extends2.default)({height:emptySearchedOptionsHeight,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchQuery);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:374,columnNumber:17}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:382,columnNumber:21}}):_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:387,columnNumber:21}}),createOptionLabel||"Create "+searchQuery+" option")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:399,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:400,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:402,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,onPress:function onPress(){return handleSelection(item);},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemLabelStyle:itemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:406,columnNumber:21}});}))))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_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,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};MultiSelect.defaultProps={label:null,placeholder:"Select Option",emptyOptionsPlaceholder: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(){}};

package/lib/components/Select.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","selectedItemContainerStyle","selectedItemTextStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.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 DropdownItem=function DropdownItem(_ref){var label=_ref.label,isSelectedItem=_ref.isSelectedItem,defaultDropdownItemHeight=_ref.defaultDropdownItemHeight,onPress=_ref.onPress,itemContainerStyle=_ref.itemContainerStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,itemTextStyle=_ref.itemTextStyle,selectedItemTextStyle=_ref.selectedItemTextStyle;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:isSelectedItem?"background.base":"background.white",height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:isSelectedItem?"font.white":"font.grey"},itemTextStyle,isSelectedItem&&selectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:7}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string.isRequired,isSelectedItem:_propTypes.default.bool,defaultDropdownItemHeight:_propTypes.default.number,onPress:_propTypes.default.func,itemContainerStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object};var Select=function Select(_ref2){var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,emptyOptionsPlaceholder=_ref2.emptyOptionsPlaceholder,labelExtractor=_ref2.labelExtractor,valueExtractor=_ref2.valueExtractor,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,inputContainerStyle=_ref2.inputContainerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemTextStyle=_ref2.selectedItemTextStyle,searchInputContainerStyle=_ref2.searchInputContainerStyle,searchInputStyle=_ref2.searchInputStyle,emptyOptionsContainerStyle=_ref2.emptyOptionsContainerStyle,emptyOptionsTextStyle=_ref2.emptyOptionsTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_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 isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var emptyOptionsPlaceholderHeight=40;var searchInputHeight=35;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(options==null?void 0:options.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty?emptyOptionsPlaceholderHeight:0);var selectedOptionLabel=labelExtractor(value||{});var selectedOptionValue=valueExtractor(value||{});var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (158:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (150:42)";return _f;}());var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){toggleAnimation();}};var handleItemSelection=function handleItemSelection(item,index){toggleAnimation();onSelect(item,index);};(0,_react.useEffect)(function(){if(showDropdown){toggleAnimation();}},[showDropdown]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:206,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:220,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:229,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:238,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:239,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:240,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:248,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:19}}))),isOptionsEmpty&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:263,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},emptyOptionsTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:269,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:280,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:15}},options.filter(function(item,index){var label=labelExtractor(item,index);if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(label).includes(formatStr(searchQuery));}).map(function(item,index){var optionLabel=labelExtractor(item,index);var optionValue=valueExtractor(item,index);var isSelectedItem=selectedOptionValue&&selectedOptionValue===optionValue;return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,isSelectedItem:isSelectedItem,defaultDropdownItemHeight:defaultDropdownItemHeight,onPress:function onPress(){return handleItemSelection(item,index);},itemContainerStyle:itemContainerStyle,selectedItemContainerStyle:selectedItemContainerStyle,itemTextStyle:itemTextStyle,selectedItemTextStyle:selectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:297,columnNumber:23}});}))))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.object,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsTextStyle:_propTypes.default.object};Select.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(){},isLoading:false,isSearchable:false};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","showCreateOption","showCreateOptionLoader","createOptionLabel","onPressCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemLabelStyle","selectedItemContainerStyle","selectedItemLabelStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsLabelStyle","createSearchedOptionContainerStyle","createSearchedOptionLabelStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.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 DropdownItem=function DropdownItem(_ref){var label=_ref.label,isSelectedItem=_ref.isSelectedItem,defaultDropdownItemHeight=_ref.defaultDropdownItemHeight,onPress=_ref.onPress,itemContainerStyle=_ref.itemContainerStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,itemLabelStyle=_ref.itemLabelStyle,selectedItemLabelStyle=_ref.selectedItemLabelStyle;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:isSelectedItem?"background.base":"background.white",height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:isSelectedItem?"font.white":"font.grey"},itemLabelStyle,isSelectedItem&&selectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:7}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string.isRequired,isSelectedItem:_propTypes.default.bool,defaultDropdownItemHeight:_propTypes.default.number,onPress:_propTypes.default.func,itemContainerStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,selectedItemLabelStyle:_propTypes.default.object};var Select=function Select(_ref2){var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,emptyOptionsPlaceholder=_ref2.emptyOptionsPlaceholder,labelExtractor=_ref2.labelExtractor,valueExtractor=_ref2.valueExtractor,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,showCreateOption=_ref2.showCreateOption,showCreateOptionLoader=_ref2.showCreateOptionLoader,createOptionLabel=_ref2.createOptionLabel,onPressCreateOption=_ref2.onPressCreateOption,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,inputContainerStyle=_ref2.inputContainerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemLabelStyle=_ref2.selectedItemLabelStyle,searchInputContainerStyle=_ref2.searchInputContainerStyle,searchInputStyle=_ref2.searchInputStyle,emptyOptionsContainerStyle=_ref2.emptyOptionsContainerStyle,emptyOptionsLabelStyle=_ref2.emptyOptionsLabelStyle,createSearchedOptionContainerStyle=_ref2.createSearchedOptionContainerStyle,createSearchedOptionLabelStyle=_ref2.createSearchedOptionLabelStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_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 label=labelExtractor(item,index);if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(label).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 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?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var selectedOptionLabel=labelExtractor(value||{});var selectedOptionValue=valueExtractor(value||{});var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (176:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (168:42)";return _f;}(),[]);var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){toggleAnimation();}};var handleItemSelection=function handleItemSelection(item,index){toggleAnimation();onSelect(item,index);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:214,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:215,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:228,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:238,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:242,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:256,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:19}}))),isOptionsEmpty&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},emptyOptionsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),isSearchedOptionsEmpty&&showCreateOption&&_react.default.createElement(_.Touchable,(0,_extends2.default)({height:emptySearchedOptionsHeight,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchQuery);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:298,columnNumber:17}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:21}}):_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:311,columnNumber:21}}),createOptionLabel||"Create "+searchQuery+" option")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:323,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:324,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:326,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);var optionValue=valueExtractor(item,index);var isSelectedItem=selectedOptionValue&&selectedOptionValue===optionValue;return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,isSelectedItem:isSelectedItem,defaultDropdownItemHeight:defaultDropdownItemHeight,onPress:function onPress(){return handleItemSelection(item,index);},itemContainerStyle:itemContainerStyle,selectedItemContainerStyle:selectedItemContainerStyle,itemLabelStyle:itemLabelStyle,selectedItemLabelStyle:selectedItemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:21}});}))))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.object,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,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,selectedItemContainerStyle:_propTypes.default.object,selectedItemLabelStyle:_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};Select.defaultProps={label:null,placeholder:"Select Option",emptyOptionsPlaceholder: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(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){}};

package/package.json

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

package/src/components/MultiSelect.js

@@ -22,7 +22,7 @@ const MultiSelectItem = ({
   label,
   onUnselect,
   multiSelectedItemContainerStyle,
-  multiSelectedItemTextStyle,
+  multiSelectedItemLabelStyle,
 }) => (
   <Container
     borderWidth={1}
@@ -41,7 +41,7 @@ const MultiSelectItem = ({
       fontSize="s"
       mr={2}
       maxWidth="90%"
-      {...multiSelectedItemTextStyle}
+      {...multiSelectedItemLabelStyle}
     >
       {label}
     </Typography>
@@ -55,7 +55,7 @@ MultiSelectItem.propTypes = {
   label: PropTypes.string,
   onUnselect: PropTypes.func,
   multiSelectedItemContainerStyle: PropTypes.object,
-  multiSelectedItemTextStyle: PropTypes.object,
+  multiSelectedItemLabelStyle: PropTypes.object,
 };
 
 const DropdownItem = ({
@@ -63,7 +63,7 @@ const DropdownItem = ({
   onPress,
   defaultDropdownItemHeight,
   itemContainerStyle,
-  itemTextStyle,
+  itemLabelStyle,
 }) => {
   return (
     <Touchable bg="background.white" onPress={onPress}>
@@ -76,7 +76,7 @@ const DropdownItem = ({
           fontFamily="inter400"
           fontSize="s"
           color="font.grey"
-          {...itemTextStyle}
+          {...itemLabelStyle}
         >
           {label}
         </Typography>
@@ -90,7 +90,7 @@ DropdownItem.propTypes = {
   onPress: PropTypes.func,
   defaultDropdownItemHeight: PropTypes.number,
   itemContainerStyle: PropTypes.object,
-  itemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
 };
 
 /**
@@ -148,18 +148,24 @@ export const MultiSelect = ({
   deletedValue,
   isLoading,
   isSearchable,
+  showCreateOption,
+  showCreateOptionLoader,
+  createOptionLabel,
+  onPressCreateOption,
   labelStyle,
   containerStyle,
   inputContainerStyle,
   dropdownContainerStyle,
   itemContainerStyle,
-  itemTextStyle,
+  itemLabelStyle,
   multiSelectedItemContainerStyle,
-  multiSelectedItemTextStyle,
+  multiSelectedItemLabelStyle,
   searchInputContainerStyle,
   searchInputStyle,
   emptyOptionsContainerStyle,
-  emptyOptionsTextStyle,
+  emptyOptionsLabelStyle,
+  createSearchedOptionContainerStyle,
+  createSearchedOptionLabelStyle,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -167,13 +173,7 @@ export const MultiSelect = ({
   const [searchQuery, setSearchQuery] = useState("");
   const dropdownAnimatedHeight = useSharedValue(0);
 
-  const isOptionsEmpty = !options || options?.length === 0;
-  const emptyOptionsPlaceholderHeight = 40;
-  const searchInputHeight = 35;
-  const multipleOptionsSelected = value?.length > 0;
-  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
   const formatStr = str => str?.toLowerCase()?.trim();
-
   const filteredOptions = options
     .filter((item, index) => {
       const optionValue = valueExtractor(item, index);
@@ -190,12 +190,23 @@ export const MultiSelect = ({
       return formatStr(optionLabel).includes(formatStr(searchQuery));
     });
 
+  const isOptionsEmpty = !options || options?.length === 0;
+  const isSearchedOptionsEmpty =
+    searchQuery.length > 0 && filteredOptions.length === 0;
+  const emptyOptionsPlaceholderHeight = 40;
+  const emptySearchedOptionsHeight = 40;
+  const searchInputHeight = 35;
+  const multipleOptionsSelected = value?.length > 0;
+  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
   const dropdownHeight =
     dropdownContainerStyle?.height ||
     dropdownContainerStyle?.maxHeight ||
     defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
       (isSearchable ? searchInputHeight + 10 : 0) +
-      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0);
+      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0) +
+      (isSearchedOptionsEmpty && showCreateOption
+        ? emptySearchedOptionsHeight
+        : 0);
 
   const animatedStyles = useAnimatedStyle(() => {
     return {
@@ -212,7 +223,7 @@ export const MultiSelect = ({
         }
       ),
     };
-  });
+  }, []);
 
   const handleOpenDropdown = () => {
     Keyboard.dismiss();
@@ -295,7 +306,7 @@ export const MultiSelect = ({
                       multiSelectedItemContainerStyle={
                         multiSelectedItemContainerStyle
                       }
-                      multiSelectedItemTextStyle={multiSelectedItemTextStyle}
+                      multiSelectedItemLabelStyle={multiSelectedItemLabelStyle}
                     />
                   );
                 })}
@@ -352,12 +363,38 @@ export const MultiSelect = ({
                     fontFamily="inter400"
                     fontSize="s"
                     color="font.grey"
-                    {...emptyOptionsTextStyle}
+                    {...emptyOptionsLabelStyle}
                   >
                     {emptyOptionsPlaceholder || "No Options"}
                   </Typography>
                 </Container>
               )}
+
+              {isSearchedOptionsEmpty && showCreateOption && (
+                <Touchable
+                  height={emptySearchedOptionsHeight}
+                  justifyContent="center"
+                  alignItems="center"
+                  onPress={() => onPressCreateOption(searchQuery)}
+                  {...createSearchedOptionContainerStyle}
+                >
+                  {showCreateOptionLoader ? (
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.background.base}
+                    />
+                  ) : (
+                    <Typography
+                      fontFamily="inter400"
+                      fontSize="s"
+                      color="font.grey"
+                      {...createSearchedOptionLabelStyle}
+                    >
+                      {createOptionLabel || `Create ${searchQuery} option`}
+                    </Typography>
+                  )}
+                </Touchable>
+              )}
               {/* Animation not working without this hidden input */}
               <Container height={0}>
                 <Input />
@@ -372,7 +409,7 @@ export const MultiSelect = ({
                       onPress={() => handleSelection(item)}
                       itemContainerStyle={itemContainerStyle}
                       defaultDropdownItemHeight={defaultDropdownItemHeight}
-                      itemTextStyle={itemTextStyle}
+                      itemLabelStyle={itemLabelStyle}
                     />
                   );
                 })}
@@ -439,6 +476,22 @@ MultiSelect.propTypes = {
    * Toggle Search bar within the options dropdown to search through the options.
    */
   isSearchable: PropTypes.bool,
+  /**
+   * Show option to create the searched label if not present in the options list
+   */
+  showCreateOption: PropTypes.bool,
+  /**
+   * Show loader while creating a searched option not present in the options list
+   */
+  showCreateOptionLoader: PropTypes.bool,
+  /**
+   * Custom label for creating searched option not present in the options list
+   */
+  createOptionLabel: PropTypes.string,
+  /**
+   * Callback when create searched option is pressed
+   */
+  onPressCreateOption: PropTypes.func,
   /**
    * To customise floating label styles.
    */
@@ -462,7 +515,7 @@ MultiSelect.propTypes = {
   /**
    * To customise dropdown item text styles.
    */
-  itemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
   /**
    * To customise item container styles for multi selected items.
    */
@@ -470,7 +523,7 @@ MultiSelect.propTypes = {
   /**
    * To customise item text styles for multi selected item.
    */
-  multiSelectedItemTextStyle: PropTypes.object,
+  multiSelectedItemLabelStyle: PropTypes.object,
   /**
    * To customise search input containerr style.
    */
@@ -486,12 +539,21 @@ MultiSelect.propTypes = {
   /**
    * To customise empty options placeholder text style.
    */
-  emptyOptionsTextStyle: PropTypes.object,
+  emptyOptionsLabelStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder container style.
+   */
+  createSearchedOptionContainerStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder text style.
+   */
+  createSearchedOptionLabelStyle: PropTypes.object,
 };
 
 MultiSelect.defaultProps = {
   label: null,
   placeholder: "Select Option",
+  emptyOptionsPlaceholder: null,
   labelExtractor: option => option?.label,
   valueExtractor: option => option?.value,
   value: null,
@@ -500,4 +562,8 @@ MultiSelect.defaultProps = {
   deletedValue: () => {},
   isLoading: false,
   isSearchable: false,
+  showCreateOption: false,
+  showCreateOptionLoader: false,
+  createOptionLabel: null,
+  onPressCreateOption: () => {},
 };

package/src/components/Select.js

@@ -16,7 +16,7 @@ import {
 import { ThemeContext } from "styled-components/native";
 import { ScrollView } from "react-native-gesture-handler";
 
-import { Card, Container, Input, Typography } from "@components";
+import { Card, Container, Input, Touchable, Typography } from "@components";
 
 const DropdownItem = ({
   label,
@@ -25,8 +25,8 @@ const DropdownItem = ({
   onPress,
   itemContainerStyle,
   selectedItemContainerStyle,
-  itemTextStyle,
-  selectedItemTextStyle,
+  itemLabelStyle,
+  selectedItemLabelStyle,
 }) => (
   <TouchableWithoutFeedback onPress={onPress}>
     <Container
@@ -40,8 +40,8 @@ const DropdownItem = ({
         fontFamily="inter400"
         fontSize="s"
         color={isSelectedItem ? "font.white" : "font.grey"}
-        {...itemTextStyle}
-        {...(isSelectedItem && selectedItemTextStyle)}
+        {...itemLabelStyle}
+        {...(isSelectedItem && selectedItemLabelStyle)}
       >
         {label}
       </Typography>
@@ -56,8 +56,8 @@ DropdownItem.propTypes = {
   onPress: PropTypes.func,
   itemContainerStyle: PropTypes.object,
   selectedItemContainerStyle: PropTypes.object,
-  itemTextStyle: PropTypes.object,
-  selectedItemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
+  selectedItemLabelStyle: PropTypes.object,
 };
 
 /**
@@ -114,18 +114,24 @@ export const Select = ({
   onSelect,
   isLoading,
   isSearchable,
+  showCreateOption,
+  showCreateOptionLoader,
+  createOptionLabel,
+  onPressCreateOption,
   labelStyle,
   containerStyle,
   inputContainerStyle,
   dropdownContainerStyle,
   itemContainerStyle,
-  itemTextStyle,
+  itemLabelStyle,
   selectedItemContainerStyle,
-  selectedItemTextStyle,
+  selectedItemLabelStyle,
   searchInputContainerStyle,
   searchInputStyle,
   emptyOptionsContainerStyle,
-  emptyOptionsTextStyle,
+  emptyOptionsLabelStyle,
+  createSearchedOptionContainerStyle,
+  createSearchedOptionLabelStyle,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -133,19 +139,31 @@ export const Select = ({
   const [searchQuery, setSearchQuery] = useState("");
   const dropdownAnimatedHeight = useSharedValue(0);
 
+  const formatStr = str => str?.toLowerCase()?.trim();
+  const filteredOptions = options.filter((item, index) => {
+    const label = labelExtractor(item, index);
+    if (searchQuery?.length === 0) return true;
+    return formatStr(label).includes(formatStr(searchQuery));
+  });
+
   const isOptionsEmpty = !options || options?.length === 0;
+  const isSearchedOptionsEmpty =
+    searchQuery.length > 0 && filteredOptions.length === 0;
   const emptyOptionsPlaceholderHeight = 40;
+  const emptySearchedOptionsHeight = 40;
   const searchInputHeight = 35;
   const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
   const dropdownHeight =
     dropdownContainerStyle?.height ||
     dropdownContainerStyle?.maxHeight ||
-    defaultDropdownItemHeight * Math.min(options?.length, 6) +
+    defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
       (isSearchable ? searchInputHeight + 10 : 0) +
-      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0);
+      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0) +
+      (isSearchedOptionsEmpty && showCreateOption
+        ? emptySearchedOptionsHeight
+        : 0);
   const selectedOptionLabel = labelExtractor(value || {});
   const selectedOptionValue = valueExtractor(value || {});
-  const formatStr = str => str?.toLowerCase()?.trim();
 
   const animatedStyles = useAnimatedStyle(() => {
     return {
@@ -162,7 +180,7 @@ export const Select = ({
         }
       ),
     };
-  });
+  }, []);
 
   const toggleAnimation = () => {
     dropdownAnimatedHeight.value =
@@ -187,10 +205,10 @@ export const Select = ({
 
   useEffect(() => {
     if (showDropdown) {
-      toggleAnimation();
+      dropdownAnimatedHeight.value = dropdownHeight;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showDropdown]);
+  }, [showDropdown, dropdownHeight]);
 
   return (
     <Container {...containerStyle}>
@@ -270,43 +288,61 @@ export const Select = ({
                     fontFamily="inter400"
                     fontSize="s"
                     color="font.grey"
-                    {...emptyOptionsTextStyle}
+                    {...emptyOptionsLabelStyle}
                   >
                     {emptyOptionsPlaceholder || "No Options"}
                   </Typography>
                 </Container>
               )}
+              {isSearchedOptionsEmpty && showCreateOption && (
+                <Touchable
+                  height={emptySearchedOptionsHeight}
+                  justifyContent="center"
+                  alignItems="center"
+                  onPress={() => onPressCreateOption(searchQuery)}
+                  {...createSearchedOptionContainerStyle}
+                >
+                  {showCreateOptionLoader ? (
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.background.base}
+                    />
+                  ) : (
+                    <Typography
+                      fontFamily="inter400"
+                      fontSize="s"
+                      color="font.grey"
+                      {...createSearchedOptionLabelStyle}
+                    >
+                      {createOptionLabel || `Create ${searchQuery} option`}
+                    </Typography>
+                  )}
+                </Touchable>
+              )}
               {/* Animation not working without this hidden input */}
               <Container height={0}>
                 <Input />
               </Container>
               <ScrollView>
-                {options
-                  .filter((item, index) => {
-                    const label = labelExtractor(item, index);
-                    if (searchQuery?.length === 0) return true;
-                    return formatStr(label).includes(formatStr(searchQuery));
-                  })
-                  .map((item, index) => {
-                    const optionLabel = labelExtractor(item, index);
-                    const optionValue = valueExtractor(item, index);
-                    const isSelectedItem =
-                      selectedOptionValue &&
-                      selectedOptionValue === optionValue;
-                    return (
-                      <DropdownItem
-                        key={index}
-                        label={optionLabel}
-                        isSelectedItem={isSelectedItem}
-                        defaultDropdownItemHeight={defaultDropdownItemHeight}
-                        onPress={() => handleItemSelection(item, index)}
-                        itemContainerStyle={itemContainerStyle}
-                        selectedItemContainerStyle={selectedItemContainerStyle}
-                        itemTextStyle={itemTextStyle}
-                        selectedItemTextStyle={selectedItemTextStyle}
-                      />
-                    );
-                  })}
+                {filteredOptions.map((item, index) => {
+                  const optionLabel = labelExtractor(item, index);
+                  const optionValue = valueExtractor(item, index);
+                  const isSelectedItem =
+                    selectedOptionValue && selectedOptionValue === optionValue;
+                  return (
+                    <DropdownItem
+                      key={index}
+                      label={optionLabel}
+                      isSelectedItem={isSelectedItem}
+                      defaultDropdownItemHeight={defaultDropdownItemHeight}
+                      onPress={() => handleItemSelection(item, index)}
+                      itemContainerStyle={itemContainerStyle}
+                      selectedItemContainerStyle={selectedItemContainerStyle}
+                      itemLabelStyle={itemLabelStyle}
+                      selectedItemLabelStyle={selectedItemLabelStyle}
+                    />
+                  );
+                })}
               </ScrollView>
             </Card>
           </Animated.View>
@@ -362,6 +398,22 @@ Select.propTypes = {
    * Toggle Search bar within the options dropdown to search through the options.
    */
   isSearchable: PropTypes.bool,
+  /**
+   * Show option to create the searched label if not present in the options list
+   */
+  showCreateOption: PropTypes.bool,
+  /**
+   * Show loader while creating a searched option not present in the options list
+   */
+  showCreateOptionLoader: PropTypes.bool,
+  /**
+   * Custom label for creating searched option not present in the options list
+   */
+  createOptionLabel: PropTypes.string,
+  /**
+   * Callback when create searched option is pressed
+   */
+  onPressCreateOption: PropTypes.func,
   /**
    * To customise floating label styles.
    */
@@ -385,7 +437,7 @@ Select.propTypes = {
   /**
    * To customise dropdown item text styles.
    */
-  itemTextStyle: PropTypes.object,
+  itemLabelStyle: PropTypes.object,
   /**
    * To customise dropdown item container styles for selected item.
    */
@@ -393,7 +445,7 @@ Select.propTypes = {
   /**
    * To customise dropdown item text styles for selected item.
    */
-  selectedItemTextStyle: PropTypes.object,
+  selectedItemLabelStyle: PropTypes.object,
   /**
    * To customise search input containerr style.
    */
@@ -409,16 +461,29 @@ Select.propTypes = {
   /**
    * To customise empty options placeholder text style.
    */
-  emptyOptionsTextStyle: PropTypes.object,
+  emptyOptionsLabelStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder container style.
+   */
+  createSearchedOptionContainerStyle: PropTypes.object,
+  /**
+   * To customise empty options placeholder text style.
+   */
+  createSearchedOptionLabelStyle: PropTypes.object,
 };
 
 Select.defaultProps = {
   label: null,
   placeholder: "Select Option",
+  emptyOptionsPlaceholder: null,
   labelExtractor: option => option?.label,
   valueExtractor: option => option?.value,
   value: null,
   onSelect: () => {},
   isLoading: false,
   isSearchable: false,
+  showCreateOption: false,
+  showCreateOptionLoader: false,
+  createOptionLabel: null,
+  onPressCreateOption: () => {},
 };