@bigbinary/neetoui-rn 0.0.103 → 0.0.106

package/lib/components/Popover.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.js";var TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize;var Icon=item.Icon,label=item.label,onPress=item.onPress;return _react.default.createElement(TouchableOpacity,{onPress:onPress,flexDirection:"row",p:2,px:3,alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:28,columnNumber:7}}),_react.default.createElement(_.Typography,{px:2,fontSize:fontSize,fontColor:"font.primary",fontFamily:fontFamily,__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:7}},label));};PopOverItem.propTypes={item:_propTypes.default.object,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({popoverStyle:styles.popoverStyle},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:139,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,fontFamily:fontFamily,fontSize:fontSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,hidePopOver=_ref.hidePopOver;var Icon=item.Icon,label=item.label,_onPress=item.onPress;return _react.default.createElement(TouchableOpacity,{onPress:function onPress(){hidePopOver();_onPress();},flexDirection:"row",p:2,px:3,alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:7}}),_react.default.createElement(_.Typography,{px:2,fontSize:fontSize,fontColor:"font.primary",fontFamily:fontFamily,__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}},label));};PopOverItem.propTypes={item:_propTypes.default.object,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])]),hidePopOver:_propTypes.default.func};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var popoverRef=(0,_react.useRef)();return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({ref:popoverRef,popoverStyle:styles.popoverStyle},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,fontFamily:fontFamily,fontSize:fontSize,hidePopOver:function hidePopOver(){var _popoverRef$current;popoverRef==null?void 0:(_popoverRef$current=popoverRef.current)==null?void 0:_popoverRef$current.setState({isVisible:false});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:11}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});

package/lib/components/Select.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _=require("./");var _excluded=["data","label","value","placeholder","onSelect","isLoading","isSearchable","labelStyle","containerStyle","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 Select=function Select(_ref){var _data$selectedItemInd;var data=_ref.data,label=_ref.label,value=_ref.value,placeholder=_ref.placeholder,onSelect=_ref.onSelect,isLoading=_ref.isLoading,isSearchable=_ref.isSearchable,labelStyle=_ref.labelStyle,containerStyle=_ref.containerStyle,dropdownContainerStyle=_ref.dropdownContainerStyle,itemContainerStyle=_ref.itemContainerStyle,itemTextStyle=_ref.itemTextStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,selectedItemTextStyle=_ref.selectedItemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(data),_useState2=(0,_slicedToArray2.default)(_useState,2),options=_useState2[0],setOptions=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),showDropdown=_useState4[0],setShowDropdown=_useState4[1];var containerRef=(0,_react.useRef)(null);var theme=(0,_react.useContext)(_native.ThemeContext);var selectedItemIndex=data==null?void 0:data.findIndex(function(item){return(item==null?void 0:item.value)===value;});var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var handleItemSelection=function handleItemSelection(item,index){setShowDropdown(false);onSelect(item,index);};var handleSearchOption=(0,_react.useCallback)(function(searchTerm){var qualifiedOptions=data==null?void 0:data.filter(function(option){var _option$label,_option$label$toLower,_option$label$toLower2,_searchTerm$toLowerCa;return option==null?void 0:(_option$label=option.label)==null?void 0:(_option$label$toLower=_option$label.toLowerCase())==null?void 0:(_option$label$toLower2=_option$label$toLower.trim())==null?void 0:_option$label$toLower2.includes(searchTerm==null?void 0:(_searchTerm$toLowerCa=searchTerm.toLowerCase())==null?void 0:_searchTerm$toLowerCa.trim());});setOptions(qualifiedOptions);},[data]);var DropdownItem=function DropdownItem(_ref2){var item=_ref2.item,index=_ref2.index;var isSelectedItem=index===selectedItemIndex;return _react.default.createElement(_.Touchable,{key:index,bg:isSelectedItem?"background.base":"background.white",onPress:function onPress(){handleItemSelection(item,index);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}),_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:111,columnNumber:11}}),item==null?void 0:item.label)));};DropdownItem.propTypes={item:_propTypes.default.object,index:_propTypes.default.number};return _react.default.createElement(_.Container,{elevation:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,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:132,columnNumber:7}}),label),_react.default.createElement(_.Touchable,{disabled:isLoading,onPress:function onPress(){return setShowDropdown(!showDropdown);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:7}},_react.default.createElement(_reactNative.View,{ref:containerRef,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:9}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},containerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:146,columnNumber:11}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:13}},(data==null?void 0:(_data$selectedItemInd=data[selectedItemIndex])==null?void 0:_data$selectedItemInd.label)||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:15}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:15}})))),showDropdown&&_react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",position:"absolute",left:0,right:0,top:"100%",maxHeight:defaultDropdownItemHeight*6,shadowOpacity:0.25,shadowRadius:3.84,"shadow-color":"#000",shadowOffset:{width:0,height:2},elevation:5},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:9}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:handleSearchOption,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:15}})),_react.default.createElement(_reactNative.ScrollView,{nestedScrollEnabled:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:11}},options.map(function(item,index){return _react.default.createElement(DropdownItem,{key:index,item:item,index:index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:22}});}))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,data:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired})).isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.string,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_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",value:null,onSelect:function onSelect(){},isLoading:false,isSearchable:false};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");

package/lib/theme/index.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var toastBorderColors={success:"#5cb85c",error:"#d9534f",info:"#5bc0de",warning:"#f0ad4e"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.l,fontFamily:baseTheme.fonts.inter700},body:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.m},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.s},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:"transparent",backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var toastBorderColors={success:"#5cb85c",error:"#d9534f",info:"#5bc0de",warning:"#f0ad4e"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.l,fontFamily:baseTheme.fonts.inter700},body:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.m},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.s},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:baseTheme.colors.background.base,backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.103",
+  "version": "0.0.106",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "assets"
   ],
   "lint-staged": {
-    "src/**/*.{js,es6,jsx,ts,tsx}|storybook/stories**/*.js": [
+    "src/**/*.{js,es6,jsx,ts,tsx}|storybook/stories**/*.js|.storybook/preview.js|.storybook/main.js|.storybook/Storybook.js": [
       "./node_modules/prettier/bin-prettier.js --write",
       "prettier --write",
       "eslint --fix"
@@ -48,10 +48,12 @@
   "dependencies": {
     "@react-native-community/hooks": "^2.8.1",
     "@styled-system/prop-types": "^5.1.5",
+    "react-native-gesture-handler": "^2.4.0",
     "react-native-material-ripple": "^0.9.1",
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-popover-view": "^4.1.0",
+    "react-native-reanimated": "^2.7.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-switch-toggle": "^2.2.1",

package/src/components/Popover.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import OriginalPopover from "react-native-popover-view";
 import PropTypes from "prop-types";
 import styled from "styled-components/native";
@@ -15,11 +15,14 @@ export const TouchableOpacity = styled.TouchableOpacity`
   ${layout}
 `;
 
-const PopOverItem = ({ item, fontFamily, fontSize }) => {
+const PopOverItem = ({ item, fontFamily, fontSize, hidePopOver }) => {
   const { Icon, label, onPress } = item;
   return (
     <TouchableOpacity
-      onPress={onPress}
+      onPress={() => {
+        hidePopOver();
+        onPress();
+      }}
       flexDirection="row"
       p={2}
       px={3}
@@ -45,6 +48,7 @@ PopOverItem.propTypes = {
     PropTypes.number,
     PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
   ]),
+  hidePopOver: PropTypes.func,
 };
 
 /**
@@ -135,8 +139,13 @@ export const Popover = ({
   fontSize = "l",
   ...rest
 }) => {
+  const popoverRef = useRef();
   return (
-    <OriginalPopover popoverStyle={styles.popoverStyle} {...rest}>
+    <OriginalPopover
+      ref={popoverRef}
+      popoverStyle={styles.popoverStyle}
+      {...rest}
+    >
       {data?.map((item, index) => {
         return (
           <PopOverItem
@@ -144,6 +153,9 @@ export const Popover = ({
             item={item}
             fontFamily={fontFamily}
             fontSize={fontSize}
+            hidePopOver={() => {
+              popoverRef?.current?.setState({ isVisible: false });
+            }}
           />
         );
       })}

package/src/components/Select.js

@@ -0,0 +1,285 @@
+import React, { useState, useContext, useCallback, useRef } from "react";
+import Icon from "react-native-remix-icon";
+import PropTypes from "prop-types";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import { ThemeContext } from "styled-components/native";
+
+import { Container, Input, Touchable, Typography } from "@components";
+
+/**
+ *
+ * Select can be used to select an option from a list of options.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/select/select1.png" />
+ *   <img src="screenshots/select/select2.png" />
+ * </div>
+ *
+ *  ## Usage
+ *
+ * ```js
+ * import * as React, { useState } from 'react';
+ * import { Select, Container } from '@bigbinary/neetoui-rn';
+ *
+ * const OPTIONS = [
+ *  {
+ *    label: "Option 1",
+ *    value: "option_1"
+ *  },
+ *  {
+ *    label: "Option 2",
+ *    value: "option_2"
+ *  },
+ * ]
+ *
+ * export default function Main() {
+ *  const [selectedOption, setSelectedOption] = useState(null)
+ *
+ *  return (
+ *    <Container>
+ *      <Select
+ *        label="Select"
+ *        data={OPTIONS}
+ *        value={selectedOption?.value}
+ *        onSelect={setSelectedOption}
+ *      />
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const Select = ({
+  data,
+  label,
+  value,
+  placeholder,
+  onSelect,
+  isLoading,
+  isSearchable,
+  labelStyle,
+  containerStyle,
+  dropdownContainerStyle,
+  itemContainerStyle,
+  itemTextStyle,
+  selectedItemContainerStyle,
+  selectedItemTextStyle,
+  ...rest
+}) => {
+  const [options, setOptions] = useState(data);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const containerRef = useRef(null);
+  const theme = useContext(ThemeContext);
+  const selectedItemIndex = data?.findIndex(item => item?.value === value);
+  const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
+
+  const handleItemSelection = (item, index) => {
+    setShowDropdown(false);
+    onSelect(item, index);
+  };
+
+  const handleSearchOption = useCallback(
+    searchTerm => {
+      const qualifiedOptions = data?.filter(option =>
+        option?.label
+          ?.toLowerCase()
+          ?.trim()
+          ?.includes(searchTerm?.toLowerCase()?.trim())
+      );
+      setOptions(qualifiedOptions);
+    },
+    [data]
+  );
+
+  const DropdownItem = ({ item, index }) => {
+    const isSelectedItem = index === selectedItemIndex;
+    return (
+      <Touchable
+        key={index}
+        bg={isSelectedItem ? "background.base" : "background.white"}
+        onPress={() => {
+          handleItemSelection(item, index);
+        }}
+      >
+        <Container
+          height={defaultDropdownItemHeight}
+          p={2}
+          {...itemContainerStyle}
+          {...(isSelectedItem && selectedItemContainerStyle)}
+        >
+          <Typography
+            fontFamily="inter400"
+            fontSize="s"
+            color={isSelectedItem ? "font.white" : "font.grey"}
+            {...itemTextStyle}
+            {...(isSelectedItem && selectedItemTextStyle)}
+          >
+            {item?.label}
+          </Typography>
+        </Container>
+      </Touchable>
+    );
+  };
+
+  DropdownItem.propTypes = {
+    item: PropTypes.object,
+    index: PropTypes.number,
+  };
+
+  return (
+    <Container elevation={0}>
+      <Typography
+        fontFamily="inter400"
+        mb={1}
+        fontSize="s"
+        color="font.base"
+        {...labelStyle}
+      >
+        {label}
+      </Typography>
+      <Touchable
+        disabled={isLoading}
+        onPress={() => setShowDropdown(!showDropdown)}
+      >
+        <View ref={containerRef}>
+          <Container
+            borderWidth={1}
+            borderColor="border.grey400"
+            p={2}
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            {...containerStyle}
+            {...rest}
+          >
+            <Typography fontFamily="inter400" fontSize="s" color="font.grey">
+              {data?.[selectedItemIndex]?.label || placeholder}
+            </Typography>
+            {isLoading ? (
+              <ActivityIndicator
+                size="small"
+                color={theme.colors.background.base}
+              />
+            ) : (
+              <Icon
+                name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
+                size="20"
+                color="grey"
+              />
+            )}
+          </Container>
+        </View>
+      </Touchable>
+      {showDropdown && (
+        <Container
+          bg="background.white"
+          borderWidth={1}
+          borderColor="border.grey400"
+          position="absolute"
+          left={0}
+          right={0}
+          top="100%"
+          maxHeight={defaultDropdownItemHeight * 6}
+          shadowOpacity={0.25}
+          shadowRadius={3.84}
+          shadow-color="#000"
+          shadowOffset={{
+            width: 0,
+            height: 2,
+          }}
+          elevation={5}
+          {...dropdownContainerStyle}
+        >
+          {isSearchable && (
+            <Container p={1}>
+              <Input
+                placeholder="Search"
+                onChangeText={handleSearchOption}
+                fontSize="s"
+              />
+            </Container>
+          )}
+          <ScrollView nestedScrollEnabled={true}>
+            {options.map((item, index) => {
+              return <DropdownItem key={index} item={item} index={index} />;
+            })}
+          </ScrollView>
+        </Container>
+      )}
+    </Container>
+  );
+};
+
+Select.propTypes = {
+  /**
+   * The text to use for the floating label.
+   */
+  label: PropTypes.string,
+  /**
+   * Data to populate the options dropdown.
+   */
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  /**
+   * The text to be displayed if no option is selected.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * The selected value to show for the Select input.
+   */
+  value: PropTypes.string,
+  /**
+   * Callback function when an option is selected, receives the select option object.
+   */
+  onSelect: PropTypes.func,
+  /**
+   * Used to show if the dropdown is loading state, while loading Select input will be disabled.
+   */
+  isLoading: PropTypes.bool,
+  /**
+   * Toggle Search bar within the options dropdown to search through the options.
+   */
+  isSearchable: PropTypes.bool,
+  /**
+   * To customise floating label styles.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * To customise Select input container styles.
+   */
+  containerStyle: PropTypes.object,
+  /**
+   * To customise dropdown container styles.
+   */
+  dropdownContainerStyle: PropTypes.object,
+  /**
+   * To customise dropdown item container styles.
+   */
+  itemContainerStyle: PropTypes.object,
+  /**
+   * To customise dropdown item text styles.
+   */
+  itemTextStyle: PropTypes.object,
+  /**
+   * To customise dropdown item container styles for selected item.
+   */
+  selectedItemContainerStyle: PropTypes.object,
+  /**
+   * To customise dropdown item text styles for selected item.
+   */
+  selectedItemTextStyle: PropTypes.object,
+};
+
+Select.defaultProps = {
+  label: null,
+  placeholder: "Select Option",
+  value: null,
+  onSelect: () => {},
+  isLoading: false,
+  isSearchable: false,
+};

package/src/components/index.js

@@ -20,3 +20,4 @@ export { Card } from "./Card";
 export { TopBar } from "./TopBar";
 export { RadioButton } from "./RadioButton";
 export { CheckBox } from "./CheckBox";
+export { Select } from "./Select";

package/src/theme/index.js

@@ -113,7 +113,7 @@ export const theme = {
   buttons: {
     solid: {
       border: 2,
-      borderColor: "transparent",
+      borderColor: baseTheme.colors.background.base,
       backgroundColor: baseTheme.colors.background.base,
     },
     inverse: {