@bigbinary/neetoui-rn 0.0.263 → 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/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.263",
+  "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/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";