@bigbinary/neetoui-rn 0.0.247 → 0.0.249

package/src/components/LineLoader.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import ContentLoader, { Rect } from "react-content-loader/native";
+import { moderateScale } from "react-native-size-matters";
+
+import { theme } from "../theme";
+
+export const LineLoader = ({
+  isLoading,
+  backgroundColor = theme.colors.background.primary,
+  foregroundColor = theme.colors.background.base,
+  height = moderateScale(1.5),
+}) => (
+  <ContentLoader
+    animate={isLoading}
+    backgroundColor={backgroundColor}
+    foregroundColor={foregroundColor}
+    height={height}
+    interval={0}
+    key={isLoading}
+    speed={1}
+    width="100%"
+  >
+    <Rect height={height} width="100%" x={0} y={0} />
+  </ContentLoader>
+);
+
+LineLoader.propTypes = {
+  /**
+   * Shows loader when true.
+   */
+  isLoading: PropTypes.bool,
+  /**
+   * Custom background color of loader.
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * Custom foreground color of loader.
+   */
+  foregroundColor: PropTypes.string,
+  /**
+   * Height of loader.
+   */
+  height: PropTypes.number,
+};

package/src/components/Popover.jsx

@@ -7,7 +7,7 @@ import { moderateScale } from "react-native-size-matters";
 import styled from "styled-components/native";
 import { flexbox, space, border, color, layout } from "styled-system";
 
-import { Typography } from "@components";
+import { Typography, Divider } from "@components";
 
 export const TouchableOpacity = styled.TouchableOpacity`
   ${space}
@@ -17,32 +17,45 @@ export const TouchableOpacity = styled.TouchableOpacity`
   ${layout}
 `;
 
-const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
+const PopOverItem = ({
+  item,
+  onPress,
+  fontFamily,
+  fontSize,
+  shouldShowDivider,
+}) => {
   const { Icon, label, labelProps } = item;
 
   return (
-    <TouchableOpacity
-      alignItems="center"
-      flexDirection="row"
-      p={moderateScale(2)}
-      px={moderateScale(3)}
-      onPress={onPress}
-    >
-      <Icon />
-      <Typography
-        fontColor="font.primary"
-        fontFamily={fontFamily}
-        fontSize={fontSize}
-        px={moderateScale(2)}
-        {...labelProps}
+    <>
+      <TouchableOpacity
+        alignItems="center"
+        flexDirection="row"
+        p={moderateScale(2)}
+        px={moderateScale(8)}
+        py={moderateScale(8)}
+        onPress={onPress}
       >
-        {label}
-      </Typography>
-    </TouchableOpacity>
+        <Icon />
+        <Typography
+          fontColor="font.primary"
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          px={moderateScale(2)}
+          {...labelProps}
+        >
+          {label}
+        </Typography>
+      </TouchableOpacity>
+      {shouldShowDivider && (
+        <Divider backgroundColor="background.grey200" mx={moderateScale(8)} />
+      )}
+    </>
   );
 };
 
 PopOverItem.propTypes = {
+  shouldShowDivider: PropTypes.bool,
   item: PropTypes.object,
   onPress: PropTypes.func,
   fontFamily: PropTypes.string,
@@ -171,6 +184,7 @@ export const Popover = ({
           fontSize={fontSize}
           item={item}
           key={index}
+          shouldShowDivider={index !== data.length - 1}
           onPress={() => {
             popoverRef?.current?.setState({ isVisible: false });
             onPressItemRef.current = item.onPress;
@@ -201,5 +215,8 @@ Popover.propTypes = {
 };
 
 const styles = StyleSheet.create({
-  popoverStyle: { borderRadius: moderateScale(15), padding: moderateScale(5) },
+  popoverStyle: {
+    borderRadius: moderateScale(10),
+    padding: moderateScale(5),
+  },
 });

package/src/components/index.js

@@ -37,5 +37,7 @@ export { BottomTabBar } from "./BottomTabBar";
 export { AnimatedImage } from "./AnimatedImage";
 export { NotificationPreferenceList } from "./NotificationPreferenceList";
 export { OrganizationItem } from "./OrganizationItem";
+export { ChatInput } from "./ChatInput/ChatInput";
 export { Loader } from "./Loader";
 export { InputEmailChip } from "./InputEmailChip";
+export { LineLoader } from "./LineLoader";

package/src/theme/index.js

@@ -64,6 +64,7 @@ const colors = {
     parentView: "#ffffff",
     primary: "#ffffff",
     secondary: "#F6F6FA",
+    oldLace: "#FDF6E5",
     ...defaultColors,
     ...greyVariants,
     ...lightBlueVariants,