@bigbinary/neetoui-rn 0.0.118 → 0.0.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/components/MultiSelect.js +1 -1
  2. package/lib/components/Select.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/MultiSelect.js +82 -55
  5. package/src/components/Select.js +89 -56
package/lib/components/MultiSelect.js CHANGED
@@ -1 +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","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","multiSelectedItemContainerStyle","multiSelectedItemTextStyle"];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:26,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2,maxWidth:"90%"},multiSelectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,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:68,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,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,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 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*6;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})};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease}};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease})};}}";_f.__workletHash=10836038512691;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (172:42)";_f.__optimalization=2;return _f;}());var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");setShowDropdown(!showDropdown);toggleAnimation();};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);};return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,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:208,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,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:221,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:234,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:239,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:240,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:249,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:264,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:269,columnNumber:13}}))),_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:277,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:278,columnNumber:9}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:11}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:287,columnNumber:15}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:288,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:295,columnNumber:13}},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));}).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:317,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,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};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};
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","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","multiSelectedItemContainerStyle","multiSelectedItemTextStyle"];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,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,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 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);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 (200: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 (192: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:241,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:242,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:251,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:255,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:273,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:274,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:283,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:298,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:303,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:312,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:313,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:314,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:322,columnNumber:17}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:323,columnNumber:19}})),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:336,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:337,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:339,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:343,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,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};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};
package/lib/components/Select.js CHANGED
@@ -1 +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","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","selectedItemContainerStyle","selectedItemTextStyle"];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:30,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:31,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:38,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,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,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 defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*6;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})};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease}};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease})};}}";_f.__workletHash=10836038512691;_f.__location="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.js (139:42)";_f.__optimalization=2;return _f;}());var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");setShowDropdown(!showDropdown);toggleAnimation();};var handleItemSelection=function handleItemSelection(item,index){setShowDropdown(false);toggleAnimation();onSelect(item,index);};return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,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:168,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,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:181,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:13}}))),_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:208,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:9}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:11}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:15}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:219,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:226,columnNumber:13}},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:239,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,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};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};
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","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","selectedItemContainerStyle","selectedItemTextStyle"];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,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,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 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);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 (150: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 (142: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:188,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:189,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,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:202,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:216,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:230,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:231,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:232,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:240,columnNumber:17}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:241,columnNumber:19}})),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:254,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:255,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,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:271,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,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};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};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neetoui-rn",
3
- "version": "0.0.118",
3
+ "version": "0.0.119",
4
4
  "main": "lib/index.js",
5
5
  "author": "BigBinary",
6
6
  "license": "MIT",
package/src/components/MultiSelect.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useContext } from "react";
1
+ import React, { useState, useContext, useEffect } from "react";
2
2
  import Icon from "react-native-remix-icon";
3
3
  import PropTypes from "prop-types";
4
4
  import Animated, {
@@ -6,6 +6,7 @@ import Animated, {
6
6
  useAnimatedStyle,
7
7
  withTiming,
8
8
  Easing,
9
+ runOnJS,
9
10
  } from "react-native-reanimated";
10
11
  import {
11
12
  ActivityIndicator,
@@ -161,33 +162,59 @@ export const MultiSelect = ({
161
162
  const [searchQuery, setSearchQuery] = useState("");
162
163
  const dropdownAnimatedHeight = useSharedValue(0);
163
164
 
165
+ const searchInputHeight = 35;
164
166
  const multipleOptionsSelected = value?.length > 0;
165
167
  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
168
+ const formatStr = str => str?.toLowerCase()?.trim();
169
+
170
+ const filteredOptions = options
171
+ .filter((item, index) => {
172
+ const optionValue = valueExtractor(item, index);
173
+ const isItemAlreadySelected = Boolean(
174
+ value?.find(
175
+ selectedItem => valueExtractor(selectedItem) === optionValue
176
+ )
177
+ );
178
+ return !isItemAlreadySelected;
179
+ })
180
+ .filter((item, index) => {
181
+ const optionLabel = labelExtractor(item, index);
182
+ if (searchQuery.length === 0) return true;
183
+ return formatStr(optionLabel).includes(formatStr(searchQuery));
184
+ });
185
+
166
186
  const dropdownHeight =
167
187
  dropdownContainerStyle?.height ||
168
188
  dropdownContainerStyle?.maxHeight ||
169
- defaultDropdownItemHeight * 6;
170
- const formatStr = str => str?.toLowerCase()?.trim();
189
+ defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
190
+ (isSearchable ? searchInputHeight + 10 : 0);
171
191
 
172
192
  const animatedStyles = useAnimatedStyle(() => {
173
193
  return {
174
- height: withTiming(dropdownAnimatedHeight.value, {
175
- duration: 100,
176
- easing: Easing.ease,
177
- }),
194
+ height: withTiming(
195
+ dropdownAnimatedHeight.value,
196
+ {
197
+ duration: 100,
198
+ easing: Easing.ease,
199
+ },
200
+ () => {
201
+ if (dropdownAnimatedHeight.value === 0) {
202
+ runOnJS(setShowDropdown)(false);
203
+ }
204
+ }
205
+ ),
178
206
  };
179
207
  });
180
208
 
181
- const toggleAnimation = () => {
182
- dropdownAnimatedHeight.value =
183
- dropdownAnimatedHeight.value === 0 ? dropdownHeight : 0;
184
- };
185
-
186
209
  const handleOpenDropdown = () => {
187
210
  Keyboard.dismiss();
188
211
  setSearchQuery("");
189
- setShowDropdown(!showDropdown);
190
- toggleAnimation();
212
+ if (!showDropdown) {
213
+ setShowDropdown(true);
214
+ }
215
+ if (showDropdown) {
216
+ dropdownAnimatedHeight.value = 0;
217
+ }
191
218
  };
192
219
 
193
220
  const handleUnselection = item => {
@@ -203,6 +230,13 @@ export const MultiSelect = ({
203
230
  selectedValue(item);
204
231
  };
205
232
 
233
+ useEffect(() => {
234
+ if (showDropdown) {
235
+ dropdownAnimatedHeight.value = dropdownHeight;
236
+ }
237
+ // eslint-disable-next-line react-hooks/exhaustive-deps
238
+ }, [showDropdown, dropdownHeight]);
239
+
206
240
  return (
207
241
  <Container {...containerStyle}>
208
242
  <Typography
@@ -274,44 +308,36 @@ export const MultiSelect = ({
274
308
  )}
275
309
  </Container>
276
310
  </TouchableWithoutFeedback>
277
- <Container overflow="hidden">
278
- <Animated.View style={animatedStyles}>
279
- <Card
280
- bg="background.white"
281
- borderWidth={1}
282
- borderColor="border.grey400"
283
- maxHeight={dropdownHeight}
284
- {...dropdownContainerStyle}
285
- >
286
- {isSearchable && (
287
- <Container p={1}>
288
- <Input
289
- placeholder="Search"
290
- onChangeText={setSearchQuery}
291
- fontSize="s"
292
- />
311
+ {showDropdown && (
312
+ <Container overflow="hidden">
313
+ <Animated.View style={animatedStyles}>
314
+ <Card
315
+ bg="background.white"
316
+ borderWidth={1}
317
+ borderColor="border.grey400"
318
+ maxHeight={dropdownHeight}
319
+ {...dropdownContainerStyle}
320
+ >
321
+ {isSearchable && (
322
+ <Container p={1}>
323
+ <Input
324
+ placeholder="Search"
325
+ onChangeText={setSearchQuery}
326
+ fontSize="s"
327
+ // eslint-disable-next-line react-native/no-inline-styles
328
+ containerStyles={{
329
+ height: searchInputHeight,
330
+ justifyContent: "center",
331
+ }}
332
+ />
333
+ </Container>
334
+ )}
335
+ {/* Animation not working without this hidden input */}
336
+ <Container height={0}>
337
+ <Input />
293
338
  </Container>
294
- )}
295
- <ScrollView>
296
- {options
297
- .filter((item, index) => {
298
- const optionValue = valueExtractor(item, index);
299
- const isItemAlreadySelected = Boolean(
300
- value?.find(
301
- selectedItem =>
302
- valueExtractor(selectedItem) === optionValue
303
- )
304
- );
305
- return !isItemAlreadySelected;
306
- })
307
- .filter((item, index) => {
308
- const optionLabel = labelExtractor(item, index);
309
- if (searchQuery.length === 0) return true;
310
- return formatStr(optionLabel).includes(
311
- formatStr(searchQuery)
312
- );
313
- })
314
- .map((item, index) => {
339
+ <ScrollView>
340
+ {filteredOptions.map((item, index) => {
315
341
  const optionLabel = labelExtractor(item, index);
316
342
  return (
317
343
  <DropdownItem
@@ -324,10 +350,11 @@ export const MultiSelect = ({
324
350
  />
325
351
  );
326
352
  })}
327
- </ScrollView>
328
- </Card>
329
- </Animated.View>
330
- </Container>
353
+ </ScrollView>
354
+ </Card>
355
+ </Animated.View>
356
+ </Container>
357
+ )}
331
358
  </Container>
332
359
  );
333
360
  };
package/src/components/Select.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useContext } from "react";
1
+ import React, { useState, useContext, useEffect } from "react";
2
2
  import Icon from "react-native-remix-icon";
3
3
  import PropTypes from "prop-types";
4
4
  import Animated, {
@@ -6,6 +6,7 @@ import Animated, {
6
6
  useAnimatedStyle,
7
7
  withTiming,
8
8
  Easing,
9
+ runOnJS,
9
10
  } from "react-native-reanimated";
10
11
  import {
11
12
  ActivityIndicator,
@@ -127,21 +128,31 @@ export const Select = ({
127
128
  const [searchQuery, setSearchQuery] = useState("");
128
129
  const dropdownAnimatedHeight = useSharedValue(0);
129
130
 
131
+ const searchInputHeight = 35;
130
132
  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
131
133
  const dropdownHeight =
132
134
  dropdownContainerStyle?.height ||
133
135
  dropdownContainerStyle?.maxHeight ||
134
- defaultDropdownItemHeight * 6;
136
+ defaultDropdownItemHeight * Math.min(options?.length, 6) +
137
+ (isSearchable ? searchInputHeight + 10 : 0);
135
138
  const selectedOptionLabel = labelExtractor(value || {});
136
139
  const selectedOptionValue = valueExtractor(value || {});
137
140
  const formatStr = str => str?.toLowerCase()?.trim();
138
141
 
139
142
  const animatedStyles = useAnimatedStyle(() => {
140
143
  return {
141
- height: withTiming(dropdownAnimatedHeight.value, {
142
- duration: 100,
143
- easing: Easing.ease,
144
- }),
144
+ height: withTiming(
145
+ dropdownAnimatedHeight.value,
146
+ {
147
+ duration: 100,
148
+ easing: Easing.ease,
149
+ },
150
+ () => {
151
+ if (dropdownAnimatedHeight.value === 0) {
152
+ runOnJS(setShowDropdown)(false);
153
+ }
154
+ }
155
+ ),
145
156
  };
146
157
  });
147
158
 
@@ -153,16 +164,26 @@ export const Select = ({
153
164
  const handleOpenDropdown = () => {
154
165
  Keyboard.dismiss();
155
166
  setSearchQuery("");
156
- setShowDropdown(!showDropdown);
157
- toggleAnimation();
167
+ if (!showDropdown) {
168
+ setShowDropdown(true);
169
+ }
170
+ if (showDropdown) {
171
+ toggleAnimation();
172
+ }
158
173
  };
159
174
 
160
175
  const handleItemSelection = (item, index) => {
161
- setShowDropdown(false);
162
176
  toggleAnimation();
163
177
  onSelect(item, index);
164
178
  };
165
179
 
180
+ useEffect(() => {
181
+ if (showDropdown) {
182
+ toggleAnimation();
183
+ }
184
+ // eslint-disable-next-line react-hooks/exhaustive-deps
185
+ }, [showDropdown]);
186
+
166
187
  return (
167
188
  <Container {...containerStyle}>
168
189
  <Typography
@@ -205,54 +226,66 @@ export const Select = ({
205
226
  )}
206
227
  </Container>
207
228
  </TouchableWithoutFeedback>
208
- <Container overflow="hidden">
209
- <Animated.View style={animatedStyles}>
210
- <Card
211
- bg="background.white"
212
- borderWidth={1}
213
- borderColor="border.grey400"
214
- maxHeight={dropdownHeight}
215
- {...dropdownContainerStyle}
216
- >
217
- {isSearchable && (
218
- <Container p={1}>
219
- <Input
220
- placeholder="Search"
221
- onChangeText={setSearchQuery}
222
- fontSize="s"
223
- />
229
+ {showDropdown && (
230
+ <Container overflow="hidden">
231
+ <Animated.View style={animatedStyles}>
232
+ <Card
233
+ bg="background.white"
234
+ borderWidth={1}
235
+ borderColor="border.grey400"
236
+ maxHeight={dropdownHeight}
237
+ {...dropdownContainerStyle}
238
+ >
239
+ {isSearchable && (
240
+ <Container p={1}>
241
+ <Input
242
+ placeholder="Search"
243
+ onChangeText={setSearchQuery}
244
+ fontSize="s"
245
+ // eslint-disable-next-line react-native/no-inline-styles
246
+ containerStyles={{
247
+ height: searchInputHeight,
248
+ justifyContent: "center",
249
+ }}
250
+ />
251
+ </Container>
252
+ )}
253
+ {/* Animation not working without this hidden input */}
254
+ <Container height={0}>
255
+ <Input />
224
256
  </Container>
225
- )}
226
- <ScrollView>
227
- {options
228
- .filter((item, index) => {
229
- const label = labelExtractor(item, index);
230
- if (searchQuery?.length === 0) return true;
231
- return formatStr(label).includes(formatStr(searchQuery));
232
- })
233
- .map((item, index) => {
234
- const optionLabel = labelExtractor(item, index);
235
- const optionValue = valueExtractor(item, index);
236
- const isSelectedItem =
237
- selectedOptionValue && selectedOptionValue === optionValue;
238
- return (
239
- <DropdownItem
240
- key={index}
241
- label={optionLabel}
242
- isSelectedItem={isSelectedItem}
243
- defaultDropdownItemHeight={defaultDropdownItemHeight}
244
- onPress={() => handleItemSelection(item, index)}
245
- itemContainerStyle={itemContainerStyle}
246
- selectedItemContainerStyle={selectedItemContainerStyle}
247
- itemTextStyle={itemTextStyle}
248
- selectedItemTextStyle={selectedItemTextStyle}
249
- />
250
- );
251
- })}
252
- </ScrollView>
253
- </Card>
254
- </Animated.View>
255
- </Container>
257
+ <ScrollView>
258
+ {options
259
+ .filter((item, index) => {
260
+ const label = labelExtractor(item, index);
261
+ if (searchQuery?.length === 0) return true;
262
+ return formatStr(label).includes(formatStr(searchQuery));
263
+ })
264
+ .map((item, index) => {
265
+ const optionLabel = labelExtractor(item, index);
266
+ const optionValue = valueExtractor(item, index);
267
+ const isSelectedItem =
268
+ selectedOptionValue &&
269
+ selectedOptionValue === optionValue;
270
+ return (
271
+ <DropdownItem
272
+ key={index}
273
+ label={optionLabel}
274
+ isSelectedItem={isSelectedItem}
275
+ defaultDropdownItemHeight={defaultDropdownItemHeight}
276
+ onPress={() => handleItemSelection(item, index)}
277
+ itemContainerStyle={itemContainerStyle}
278
+ selectedItemContainerStyle={selectedItemContainerStyle}
279
+ itemTextStyle={itemTextStyle}
280
+ selectedItemTextStyle={selectedItemTextStyle}
281
+ />
282
+ );
283
+ })}
284
+ </ScrollView>
285
+ </Card>
286
+ </Animated.View>
287
+ </Container>
288
+ )}
256
289
  </Container>
257
290
  );
258
291
  };