@bigbinary/neetoui-rn 0.0.262 → 0.0.264

package/index.d.ts

@@ -559,7 +559,28 @@ type TopBarProps = {
   tabContainerStyle?: ViewStyle;
 };
 
+type NotificationIconProps = {
+  unreadCount: number;
+  onPress: () => void;
+};
+
+type ActionIconProps = {
+  isLoading: boolean;
+  icon: () => React.ReactNode;
+  onPress: () => void;
+  size: number;
+  color: typeof theme.colors.font;
+  disabled: boolean;
+  label?: string;
+  iconProps: {
+    size?: number;
+    color?: typeof theme.colors.font;
+    viewBox: string;
+  };
+};
+
 export const Accordion: React.FC<AccordionProps>;
+export const ActionIcon: React.FC<ActionIconProps>;
 export const Alert: React.FC<AlertProps> & {
   show?: (params: AlertShowParams) => void;
 };
@@ -587,6 +608,7 @@ export const LineLoader: React.FC<LineLoaderProps>;
 export const ListItem: React.FC<ListItemProps>;
 export const Loader: React.FC<LoaderProps>;
 export const NotificationPreferenceList: React.FC<NotificationPreferenceListProps>;
+export const NotificationIcon: React.FC<NotificationIconProps>;
 export const MultiSelect: React.FC<MultiSelectProps>;
 export const OnBoarding: React.FC<OnBoardingProps>;
 export const OrganizationItem: React.FC<OrganizationItemProps>;

package/lib/components/ActionIcon.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ActionIcon=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _=require("./");var _theme=require("../theme");var _excluded=["isLoading","icon","onPress","size","color","disabled","label","iconProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ActionIcon.jsx";var ActionIcon=function ActionIcon(_ref){var _ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,Icon=_ref.icon,onPress=_ref.onPress,_ref$size=_ref.size,size=_ref$size===void 0?(0,_reactNativeSizeMatters.moderateScale)(24):_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?_theme.theme.colors.font.grey800:_ref$color,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,label=_ref.label,iconProps=_ref.iconProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",aspectRatio:1,disabled:disabled||isLoading,height:(0,_reactNativeSizeMatters.moderateScale)(40),justifyContent:"center",maxHeight:(0,_reactNativeSizeMatters.moderateScale)(64),maxWidth:(0,_reactNativeSizeMatters.moderateScale)(64),opacity:disabled?0.5:1,onPress:onPress},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:3}}),isLoading?_react.default.createElement(_.Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:18}}):_react.default.createElement(Icon,(0,_extends2.default)({color:color,size:size},iconProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:31}})),!!label&&_react.default.createElement(_.Typography,{color:"font.grey600",fontFamily:"sf400",fontSize:"4xs",mt:(0,_reactNativeSizeMatters.moderateScale)(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:7}},label));};exports.ActionIcon=ActionIcon;ActionIcon.propTypes={icon:_propTypes.default.elementType,onPress:_propTypes.default.func,size:_propTypes.default.number,color:_propTypes.default.string,disabled:_propTypes.default.bool,label:_propTypes.default.string,isLoading:_propTypes.default.bool,iconProps:_propTypes.default.object};

package/lib/components/BottomTabBar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomTabBar=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.jsx";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 TabElement=function TabElement(_ref){var isFocused=_ref.isFocused,onPress=_ref.onPress,label=_ref.label,tabBarActiveTintColor=_ref.tabBarActiveTintColor,tabBarInactiveTintColor=_ref.tabBarInactiveTintColor,icon=_ref.icon,size=_ref.size;var theme=(0,_react.useContext)(_native.ThemeContext);var offset=(0,_reactNativeReanimated.useSharedValue)(isFocused?1:0);(0,_react.useEffect)(function(){if(isFocused){offset.value=(0,_reactNativeReanimated.withTiming)(1,{duration:500});}else{offset.value=(0,_reactNativeReanimated.withTiming)(0,{duration:0});}},[isFocused]);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,1],[1,0],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,1],[1,0],{extrapolateRight:Extrapolation.CLAMP})};}}";_f.__workletHash=10271988492931;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.jsx (39:42)";_f.__optimalization=3;return _f;}());var animatedStyles2=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP}),transform:[{scale:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:Extrapolation.CLAMP}),transform:[{scale:interpolate(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:Extrapolation.CLAMP})}]};}}";_f.__workletHash=9420491443699;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.jsx (45:43)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:5}},_react.default.createElement(_.Container,{alignItems:"center",borderColor:"background.grey200",borderTopWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:7}},_react.default.createElement(_.Container,{alignItems:"center",height:(0,_reactNativeSizeMatters.moderateScale)(35),mb:(0,_reactNativeSizeMatters.moderateScale)(4),width:(0,_reactNativeSizeMatters.moderateScale)(48),__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{color:theme.colors.font.grey500,name:icon,size:size,__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:13}})),_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles2],__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{color:theme.colors.font.base,name:icon,size:size,__self:_this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:13}}))),_react.default.createElement(_.Typography,{color:isFocused?tabBarActiveTintColor:tabBarInactiveTintColor,fontFamily:"sf500",fontSize:"4xs",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:9}},label)));};var styles=_reactNative.StyleSheet.create({iconContainer:{position:"absolute",margin:(0,_reactNativeSizeMatters.moderateScale)(10)}});var BottomTabBar=function BottomTabBar(_ref2){var state=_ref2.state,descriptors=_ref2.descriptors,navigation=_ref2.navigation;var _useSafeAreaInsets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),bottom=_useSafeAreaInsets.bottom;return _react.default.createElement(_.Container,{bg:"background.white",flexDirection:"row",height:bottom===0?(0,_reactNativeSizeMatters.moderateScale)(63):(0,_reactNativeSizeMatters.moderateScale)(83),__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:5}},state.routes.map(function(_ref3,index){var key=_ref3.key,name=_ref3.name;var options=descriptors[key].options;var isFocused=state.index===index;var _ref4=(options==null?void 0:options.customTabBarProps)||{},icon=_ref4.icon,size=_ref4.size;var tabBarActiveTintColor=options.tabBarActiveTintColor,tabBarInactiveTintColor=options.tabBarInactiveTintColor;var onPress=function onPress(){var event=navigation.emit({type:"tabPress",target:key,canPreventDefault:true});if(!isFocused&&!event.defaultPrevented){navigation.navigate({name:name,merge:true});}};var label=options.tabBarLabel!==undefined?options.tabBarLabel:options.title!==undefined?options.title:name;return _react.default.createElement(TabElement,{icon:icon,isFocused:isFocused,key:index,label:label,size:size,tabBarActiveTintColor:tabBarActiveTintColor,tabBarInactiveTintColor:tabBarInactiveTintColor,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:11}});}));};exports.BottomTabBar=BottomTabBar;TabElement.propTypes={isFocused:_propTypes.default.bool,onPress:_propTypes.default.func,label:_propTypes.default.string,tabBarActiveTintColor:_propTypes.default.string,tabBarInactiveTintColor:_propTypes.default.string,icon:_propTypes.default.string,size:_propTypes.default.number};BottomTabBar.propTypes={state:_propTypes.default.object,descriptors:_propTypes.default.object,navigation:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomTabBar=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _reactNativeSizeMatters=require("react-native-size-matters");var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.jsx";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 TabElement=function TabElement(_ref){var isFocused=_ref.isFocused,onPress=_ref.onPress,label=_ref.label,tabBarActiveTintColor=_ref.tabBarActiveTintColor,tabBarInactiveTintColor=_ref.tabBarInactiveTintColor,Icon=_ref.icon,size=_ref.size;var offset=(0,_reactNativeReanimated.useSharedValue)(isFocused?1:0);(0,_react.useEffect)(function(){if(isFocused){offset.value=(0,_reactNativeReanimated.withTiming)(1,{duration:500});}else{offset.value=(0,_reactNativeReanimated.withTiming)(0,{duration:0});}},[isFocused]);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,1],[1,0],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,1],[1,0],{extrapolateRight:Extrapolation.CLAMP})};}}";_f.__workletHash=10271988492931;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.jsx (36:42)";_f.__optimalization=3;return _f;}());var animatedStyles2=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP}),transform:[{scale:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:Extrapolation.CLAMP}),transform:[{scale:interpolate(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:Extrapolation.CLAMP})}]};}}";_f.__workletHash=9420491443699;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.jsx (42:43)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:5}},_react.default.createElement(_.Container,{alignItems:"center",borderColor:"background.grey200",borderTopWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:7}},_react.default.createElement(_.Container,{alignItems:"center",height:(0,_reactNativeSizeMatters.moderateScale)(35),mb:(0,_reactNativeSizeMatters.moderateScale)(4),width:(0,_reactNativeSizeMatters.moderateScale)(48),__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:11}},_react.default.createElement(Icon,{size:size,color:isFocused?tabBarActiveTintColor:tabBarInactiveTintColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:13}})),_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles2],__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},_react.default.createElement(Icon,{size:size,color:isFocused?tabBarActiveTintColor:tabBarInactiveTintColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:78,columnNumber:13}}))),_react.default.createElement(_.Typography,{color:isFocused?tabBarActiveTintColor:tabBarInactiveTintColor,fontFamily:"sf500",fontSize:"4xs",__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:9}},label)));};var styles=_reactNative.StyleSheet.create({iconContainer:{position:"absolute",margin:(0,_reactNativeSizeMatters.moderateScale)(10)}});var BottomTabBar=function BottomTabBar(_ref2){var state=_ref2.state,descriptors=_ref2.descriptors,navigation=_ref2.navigation;var _useSafeAreaInsets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),bottom=_useSafeAreaInsets.bottom;return _react.default.createElement(_.Container,{bg:"background.white",flexDirection:"row",height:bottom===0?(0,_reactNativeSizeMatters.moderateScale)(63):(0,_reactNativeSizeMatters.moderateScale)(83),__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:5}},state.routes.map(function(_ref3,index){var key=_ref3.key,name=_ref3.name;var options=descriptors[key].options;var isFocused=state.index===index;var _ref4=(options==null?void 0:options.customTabBarProps)||{},icon=_ref4.icon,size=_ref4.size;var tabBarActiveTintColor=options.tabBarActiveTintColor,tabBarInactiveTintColor=options.tabBarInactiveTintColor;var onPress=function onPress(){var event=navigation.emit({type:"tabPress",target:key,canPreventDefault:true});if(!isFocused&&!event.defaultPrevented){navigation.navigate({name:name,merge:true});}};var label=options.tabBarLabel!==undefined?options.tabBarLabel:options.title!==undefined?options.title:name;return _react.default.createElement(TabElement,{icon:icon,isFocused:isFocused,key:index,label:label,size:size,tabBarActiveTintColor:tabBarActiveTintColor,tabBarInactiveTintColor:tabBarInactiveTintColor,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:11}});}));};exports.BottomTabBar=BottomTabBar;TabElement.propTypes={isFocused:_propTypes.default.bool,onPress:_propTypes.default.func,label:_propTypes.default.string,tabBarActiveTintColor:_propTypes.default.string,tabBarInactiveTintColor:_propTypes.default.string,icon:_propTypes.default.elementType,size:_propTypes.default.number};BottomTabBar.propTypes={state:_propTypes.default.object,descriptors:_propTypes.default.object,navigation:_propTypes.default.object};

package/lib/components/NotificationIcon.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.NotificationIcon=void 0;var _react=_interopRequireDefault(require("react"));var _neetoIconsRn=require("@bigbinary/neeto-icons-rn");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/NotificationIcon.jsx";var NotificationIcon=function NotificationIcon(_ref){var _ref$unreadCount=_ref.unreadCount,unreadCount=_ref$unreadCount===void 0?0:_ref$unreadCount,_ref$onPress=_ref.onPress,onPress=_ref$onPress===void 0?function(){}:_ref$onPress;return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:9,columnNumber:3}},_react.default.createElement(_.ActionIcon,{icon:_neetoIconsRn.Notification,onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:10,columnNumber:5}}),unreadCount>0&&_react.default.createElement(_.Container,{bg:"background.danger",borderRadius:5,height:10,position:"absolute",px:2,py:1,right:10,top:7,width:10,zIndex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:12,columnNumber:7}}));};exports.NotificationIcon=NotificationIcon;NotificationIcon.propTypes={unreadCount:_propTypes.default.number,onPress:_propTypes.default.func};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"AnimatedImage",{enumerable:true,get:function get(){return _AnimatedImage.AnimatedImage;}});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,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});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,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"ChatInput",{enumerable:true,get:function get(){return _ChatInput.ChatInput;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"InputEmailChip",{enumerable:true,get:function get(){return _InputEmailChip.InputEmailChip;}});Object.defineProperty(exports,"LineLoader",{enumerable:true,get:function get(){return _LineLoader.LineLoader;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"Loader",{enumerable:true,get:function get(){return _Loader.Loader;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"NotificationPreferenceList",{enumerable:true,get:function get(){return _NotificationPreferenceList.NotificationPreferenceList;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OrganizationItem",{enumerable:true,get:function get(){return _OrganizationItem.OrganizationItem;}});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,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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 _SocialButton=require("./SocialButton");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 _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");var _AnimatedImage=require("./AnimatedImage");var _NotificationPreferenceList=require("./NotificationPreferenceList");var _OrganizationItem=require("./OrganizationItem");var _ChatInput=require("./ChatInput/ChatInput");var _Loader=require("./Loader");var _InputEmailChip=require("./InputEmailChip");var _LineLoader=require("./LineLoader");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"ActionIcon",{enumerable:true,get:function get(){return _ActionIcon.ActionIcon;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"AnimatedImage",{enumerable:true,get:function get(){return _AnimatedImage.AnimatedImage;}});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,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});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,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});Object.defineProperty(exports,"ChatInput",{enumerable:true,get:function get(){return _ChatInput.ChatInput;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"InputEmailChip",{enumerable:true,get:function get(){return _InputEmailChip.InputEmailChip;}});Object.defineProperty(exports,"LineLoader",{enumerable:true,get:function get(){return _LineLoader.LineLoader;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"Loader",{enumerable:true,get:function get(){return _Loader.Loader;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"NotificationIcon",{enumerable:true,get:function get(){return _NotificationIcon.NotificationIcon;}});Object.defineProperty(exports,"NotificationPreferenceList",{enumerable:true,get:function get(){return _NotificationPreferenceList.NotificationPreferenceList;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OrganizationItem",{enumerable:true,get:function get(){return _OrganizationItem.OrganizationItem;}});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,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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 _SocialButton=require("./SocialButton");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 _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");var _AnimatedImage=require("./AnimatedImage");var _NotificationPreferenceList=require("./NotificationPreferenceList");var _OrganizationItem=require("./OrganizationItem");var _ChatInput=require("./ChatInput/ChatInput");var _Loader=require("./Loader");var _InputEmailChip=require("./InputEmailChip");var _LineLoader=require("./LineLoader");var _ActionIcon=require("./ActionIcon");var _NotificationIcon=require("./NotificationIcon");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.262",
+  "version": "0.0.264",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -51,6 +51,7 @@
     "react-native-webview": "11.14.4"
   },
   "dependencies": {
+    "@bigbinary/neeto-icons-rn": "^1.0.2",
     "@react-native-community/hooks": "^2.8.1",
     "@shopify/flash-list": "^1.2.0",
     "@styled-system/prop-types": "^5.1.5",

package/src/components/ActionIcon.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
+
+import { Loader, Typography, Touchable } from "@components";
+import { theme } from "@theme";
+
+export const ActionIcon = ({
+  isLoading = false,
+  icon: Icon,
+  onPress,
+  size = moderateScale(24),
+  color = theme.colors.font.grey800,
+  disabled = false,
+  label,
+  iconProps,
+  ...rest
+}) => (
+  <Touchable
+    alignItems="center"
+    aspectRatio={1}
+    disabled={disabled || isLoading}
+    height={moderateScale(40)}
+    justifyContent="center"
+    maxHeight={moderateScale(64)}
+    maxWidth={moderateScale(64)}
+    opacity={disabled ? 0.5 : 1}
+    onPress={onPress}
+    {...rest}
+  >
+    {isLoading ? <Loader /> : <Icon color={color} size={size} {...iconProps} />}
+    {!!label && (
+      <Typography
+        color="font.grey600"
+        fontFamily="sf400"
+        fontSize="4xs"
+        mt={moderateScale(2)}
+      >
+        {label}
+      </Typography>
+    )}
+  </Touchable>
+);
+
+ActionIcon.propTypes = {
+  /**
+   * The icon that should be displayed
+   */
+  icon: PropTypes.elementType,
+  /**
+   * The Func that should be triggered on click of the action icon
+   */
+  onPress: PropTypes.func,
+  /** To customize the size of the icon
+   */
+  size: PropTypes.number,
+  /** To customize the color of the icon
+   */
+  color: PropTypes.string,
+  /** To set the disabled state
+   */
+  disabled: PropTypes.bool,
+  /** The label that should be displayed next to the icon
+   */
+  label: PropTypes.string,
+  /** To display the loading state
+   */
+  isLoading: PropTypes.bool,
+  /** To additionally customize the icon
+   */
+  iconProps: PropTypes.object,
+};

package/src/components/BottomTabBar.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { StyleSheet, TouchableWithoutFeedback } from "react-native";
 
 import PropTypes from "prop-types";
@@ -9,10 +9,8 @@ import Animated, {
   interpolate,
   Extrapolation,
 } from "react-native-reanimated";
-import Icon from "react-native-remix-icon";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography } from "@components";
 
@@ -22,10 +20,9 @@ const TabElement = ({
   label,
   tabBarActiveTintColor,
   tabBarInactiveTintColor,
-  icon,
+  icon: Icon,
   size,
 }) => {
-  const theme = useContext(ThemeContext);
   const offset = useSharedValue(isFocused ? 1 : 0);
 
   useEffect(() => {
@@ -70,10 +67,20 @@ const TabElement = ({
           width={moderateScale(48)}
         >
           <Animated.View style={[styles.iconContainer, animatedStyles]}>
-            <Icon color={theme.colors.font.grey500} name={icon} size={size} />
+            <Icon
+              size={size}
+              color={
+                isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor
+              }
+            />
           </Animated.View>
           <Animated.View style={[styles.iconContainer, animatedStyles2]}>
-            <Icon color={theme.colors.font.base} name={icon} size={size} />
+            <Icon
+              size={size}
+              color={
+                isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor
+              }
+            />
           </Animated.View>
         </Container>
         <Typography
@@ -214,7 +221,7 @@ TabElement.propTypes = {
   label: PropTypes.string,
   tabBarActiveTintColor: PropTypes.string,
   tabBarInactiveTintColor: PropTypes.string,
-  icon: PropTypes.string,
+  icon: PropTypes.elementType,
   size: PropTypes.number,
 };
 

package/src/components/NotificationIcon.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { Notification } from "@bigbinary/neeto-icons-rn";
+import PropTypes from "prop-types";
+
+import { Container, ActionIcon } from "@components";
+
+export const NotificationIcon = ({ unreadCount = 0, onPress = () => {} }) => (
+  <Container>
+    <ActionIcon icon={Notification} {...{ onPress }} />
+    {unreadCount > 0 && (
+      <Container
+        bg="background.danger"
+        borderRadius={5}
+        height={10}
+        position="absolute"
+        px={2}
+        py={1}
+        right={10}
+        top={7}
+        width={10}
+        zIndex={1}
+      />
+    )}
+  </Container>
+);
+
+NotificationIcon.propTypes = {
+  /**
+   * The unread notifications count to show red indicator
+   */
+  unreadCount: PropTypes.number,
+  /**
+   * Func which will be triggered on click of the notification icon.
+   */
+  onPress: PropTypes.func,
+};

package/src/components/index.js

@@ -41,3 +41,5 @@ export { ChatInput } from "./ChatInput/ChatInput";
 export { Loader } from "./Loader";
 export { InputEmailChip } from "./InputEmailChip";
 export { LineLoader } from "./LineLoader";
+export { ActionIcon } from "./ActionIcon";
+export { NotificationIcon } from "./NotificationIcon";