@bigbinary/neetoui-rn 0.0.220 → 0.0.222

package/src/components/Button.js

@@ -3,9 +3,8 @@ import React, { useContext } from "react";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
-import { ActivityIndicator } from "react-native";
 
-import { Typography, Touchable, Container } from "@components";
+import { Typography, Touchable, Container, Loader } from "@components";
 
 export const BUTTON_VARIANTS = Object.freeze({
   SOLID: "solid",
@@ -68,21 +67,20 @@ export const BUTTON_VARIANTS = Object.freeze({
  *
  */
 
-export const Button = props => {
-  const {
-    variant,
-    label,
-    labelStyle,
-    RightIcon,
-    LeftIcon,
-    disabled,
-    isLoading,
-    loadingText,
-    fontFamily,
-    color,
-    fontSize,
-    ...rest
-  } = props;
+export const Button = ({
+  variant,
+  label,
+  labelStyle,
+  RightIcon,
+  LeftIcon,
+  disabled,
+  isLoading,
+  loadingText,
+  fontFamily,
+  color,
+  fontSize,
+  ...rest
+}) => {
   const theme = useContext(ThemeContext);
   const width = variant === "text" || variant === "danger-text" ? null : "100%";
 
@@ -169,7 +167,7 @@ export const Button = props => {
     >
       {isLoading ? (
         <Container flexDirection="row">
-          <ActivityIndicator color={getButtonColors().color} />
+          <Loader color={getButtonColors().color} />
           {!!loadingText && (
             <Typography
               textAlign="center"
@@ -254,4 +252,7 @@ Button.propTypes = {
    * To show loading text along with the loading indicator on the button.
    */
   loadingText: PropTypes.string,
+  fontFamily: PropTypes.string,
+  color: PropTypes.string,
+  fontSize: PropTypes.string,
 };

package/src/components/ButtonGroup.js

@@ -36,7 +36,9 @@ export const ButtonGroup = ({
   buttonItems,
   onPress,
   currentActiveBtn,
-  ...rest
+  wrapperStyle,
+  buttonStyle,
+  buttonTextStyle,
 }) => {
   return (
     <Container
@@ -47,7 +49,7 @@ export const ButtonGroup = ({
       flexDirection="row"
       justifyContent="space-between"
       alignSelf="center"
-      {...rest.wrapperStyle}
+      {...wrapperStyle}
     >
       {buttonItems.map(item => {
         return (
@@ -61,11 +63,11 @@ export const ButtonGroup = ({
                 onPress(item);
               }
             }}
-            {...rest.buttonStyle}
+            {...buttonStyle}
           >
             <Typography
               color={item === currentActiveBtn ? inActiveColor : activeColor}
-              {...rest.buttonTextStyle}
+              {...buttonTextStyle}
             >
               {item}
             </Typography>

package/src/components/Calendar.js

@@ -32,8 +32,7 @@ import { Calendar as RNCalender } from "react-native-calendars";
  * Checkout <a href=" https://www.npmjs.com/package/react-native-calendars">react-native-calendars</a> package for all the available props
  */
 
-export const Calendar = props => {
-  const { selectedDate, ...rest } = props;
+export const Calendar = ({ selectedDate, ...rest }) => {
   delete rest.markedDates;
   const theme = useContext(ThemeContext);
   const isCurrentDay = dayjs(selectedDate).isSame(dayjs(), "D");

package/src/components/Chip.js

@@ -61,7 +61,8 @@ export const Chip = ({
   isDisabled,
   closeIconSize,
   closeIcon,
-  ...rest
+  containerStyle,
+  closeIconContainerStyle,
 }) => {
   return (
     <Touchable
@@ -73,7 +74,7 @@ export const Chip = ({
       disabled={!onChipPress || isDisabled}
       {...(variant && variantStyleObj[variant])}
       {...(isDisabled && { opacity: 0.5 })}
-      {...rest.containerStyle}
+      {...containerStyle}
     >
       {LeftIcon && <LeftIcon />}
       <Typography mx={2} fontFamily="sf400" color={labelColor}>
@@ -85,7 +86,7 @@ export const Chip = ({
           borderRadius={10}
           disabled={isDisabled}
           onPress={onClose}
-          {...rest.closeIconContainerStyle}
+          {...closeIconContainerStyle}
         >
           <Icon name={closeIcon} size={closeIconSize} color={closeIconColor} />
         </Touchable>
@@ -149,4 +150,6 @@ Chip.propTypes = {
    * Whether the chip is disabled. A disabled chip has a overlay and onPress is not called on touch.
    */
   isDisabled: PropTypes.bool,
+  containerStyle: PropTypes.object,
+  closeIconContainerStyle: PropTypes.object,
 };

package/src/components/FAB.js

@@ -99,4 +99,13 @@ FAB.propTypes = {
    * Function to execute on press.
    */
   onPress: PropTypes.func.isRequired,
+  /**
+   * String to set background color.
+   */
+  bg: PropTypes.string,
+  /**
+   * Boolean to disable button.
+   */
+  disabled: PropTypes.bool,
+  variant: PropTypes.string,
 };

package/src/components/Input.js

@@ -94,23 +94,22 @@ const AnimatedLabel = Animated.createAnimatedComponent(Typography);
  *
  */
 
-export const Input = props => {
-  const {
-    label,
-    value = "",
-    onChangeText = () => {},
-    onBlur = () => {},
-    errorMessage = null,
-    PrefixIcon,
-    SuffixIcon,
-    autoFocus = false,
-    disabled = false,
-    noBorder = false,
-    showInputAccessoryView = true,
-    textAlignVertical = "top",
-    ...rest
-  } = props;
-
+export const Input = ({
+  label,
+  value = "",
+  onChangeText = () => {},
+  onBlur = () => {},
+  errorMessage = null,
+  PrefixIcon,
+  SuffixIcon,
+  autoFocus = false,
+  disabled = false,
+  noBorder = false,
+  showInputAccessoryView = true,
+  textAlignVertical = "top",
+  containerProps,
+  ...rest
+}) => {
   const { width } = useWindowDimensions();
   const colors = useContext(ThemeContext).colors;
   const inputRef = useRef();
@@ -203,7 +202,7 @@ export const Input = props => {
           justifyContent="space-between"
           {...(!rest.inputProps?.multiline && { height: 58 })}
           overflow="hidden"
-          {...rest.containerProps}
+          {...containerProps}
         >
           {!!PrefixIcon && (
             <View pl={2}>

package/src/components/Loader.js

@@ -0,0 +1,119 @@
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from "react";
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedProps,
+  withRepeat,
+  Easing,
+  useAnimatedStyle,
+  interpolate,
+} from "react-native-reanimated";
+import Svg, { Circle } from "react-native-svg";
+import PropTypes from "prop-types";
+import { theme } from "@theme";
+import { Container } from "@components";
+
+const LOADER_WIDTH = {
+  s: 24,
+  m: 36,
+  l: 48,
+};
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+/**
+ ** Component is used to show a loading indication to user.
+ *
+ * * <div class="screenshots">
+ *   <img src="screenshots/loaders/loaders.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, Loader } from '@bigbinary/neetoui-rn';
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *      <Loader size='l'/>
+ *    </Container>
+ *  )
+ * }
+ * ```
+ *
+ */
+
+export const Loader = ({ color, size }) => {
+  const progress = useSharedValue(0);
+  const width = LOADER_WIDTH[size];
+  const stroke_width = width * 0.15;
+  const radius = (width - stroke_width) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(2, {
+        duration: 1500,
+        easing: Easing.linear,
+      }),
+      -1,
+      false
+    );
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: -interpolate(
+      progress.value,
+      [0, 1, 2],
+      [0, circumference, circumference * 2]
+    ),
+  }));
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const scale = interpolate(progress.value, [0, 2], [0, 420]);
+    return {
+      width: width,
+      height: width,
+      alignItems: "center",
+      justifyContent: "center",
+      transform: [{ rotate: scale + "deg" }],
+    };
+  });
+
+  return (
+    <Container alignItems="center" justifyContent="center">
+      <Animated.View style={animatedStyles}>
+        <Svg width={width} height={width}>
+          <AnimatedCircle
+            cx={width / 2}
+            cy={width / 2}
+            r={radius}
+            strokeWidth={stroke_width}
+            stroke={color}
+            strokeDasharray={circumference}
+            animatedProps={animatedProps}
+            strokeLinecap="round"
+          />
+        </Svg>
+      </Animated.View>
+    </Container>
+  );
+};
+
+Loader.propTypes = {
+  /**
+   * Size variant to select the width of the loader.
+   */
+  size: PropTypes.oneOf(["s", "m", "l"]),
+  /**
+   * Color variant to select the color from the available options.
+   */
+  color: PropTypes.string,
+};
+
+Loader.defaultProps = {
+  size: "s",
+  color: theme.colors.background.lightBlue400,
+};

package/src/components/MultiSelect.js

@@ -1,10 +1,7 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import {
-  ActivityIndicator,
-  Keyboard,
-  TouchableWithoutFeedback,
-} from "react-native";
+import { Keyboard, TouchableWithoutFeedback } from "react-native";
 import Animated, {
   interpolate,
   useAnimatedStyle,
@@ -24,13 +21,7 @@ import {
   position,
 } from "styled-system";
 
-import {
-  BottomSheet,
-  CheckBox,
-  Container,
-  Touchable,
-  Alert,
-} from "@components";
+import { BottomSheet, CheckBox, Container, Alert, Loader } from "@components";
 
 const Typography = styled.Text`
   ${textStyle}
@@ -133,41 +124,6 @@ MultiSelectItem.propTypes = {
   confirmationAlertObj: PropTypes.object,
 };
 
-const DropdownItem = ({
-  label,
-  onPress,
-  defaultDropdownItemHeight,
-  itemContainerStyle,
-  itemLabelStyle,
-}) => {
-  return (
-    <Touchable bg="background.white" onPress={onPress}>
-      <Container
-        height={defaultDropdownItemHeight}
-        p={2}
-        {...itemContainerStyle}
-      >
-        <Typography
-          fontFamily="sf400"
-          fontSize="s"
-          color="font.grey"
-          {...itemLabelStyle}
-        >
-          {label}
-        </Typography>
-      </Container>
-    </Touchable>
-  );
-};
-
-DropdownItem.propTypes = {
-  label: PropTypes.string,
-  onPress: PropTypes.func,
-  defaultDropdownItemHeight: PropTypes.number,
-  itemContainerStyle: PropTypes.object,
-  itemLabelStyle: PropTypes.object,
-};
-
 const AnimatedLabel = Animated.createAnimatedComponent(Typography);
 
 /**
@@ -459,10 +415,7 @@ export const MultiSelect = ({
             )}
             <Container mt={10}>
               {isLoading ? (
-                <ActivityIndicator
-                  size="small"
-                  color={theme.colors.background.base}
-                />
+                <Loader color={theme.colors.background.base} />
               ) : (
                 <Icon
                   name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
@@ -564,10 +517,6 @@ MultiSelect.propTypes = {
    * Show loader while creating a searched option not present in the options list
    */
   showCreateOptionLoader: PropTypes.bool,
-  /**
-   * Custom label for creating searched option not present in the options list
-   */
-  createOptionLabel: PropTypes.string,
   /**
    * Callback when create searched option is pressed
    */
@@ -592,10 +541,6 @@ MultiSelect.propTypes = {
    * To customise dropdown item container styles.
    */
   itemContainerStyle: PropTypes.object,
-  /**
-   * To customise dropdown item text styles.
-   */
-  itemLabelStyle: PropTypes.object,
   /**
    * To customise item container styles for multi selected items.
    */
@@ -608,22 +553,6 @@ MultiSelect.propTypes = {
    * To customise confirmation alert popup.
    */
   confirmationAlertObj: PropTypes.object,
-  /**
-   * To customise search input container style.
-   */
-  searchInputContainerStyle: PropTypes.object,
-  /**
-   * To customise search input style.
-   */
-  searchInputStyle: PropTypes.object,
-  /**
-   * To customise empty options placeholder container style.
-   */
-  emptyOptionsContainerStyle: PropTypes.object,
-  /**
-   * To customise empty options placeholder text style.
-   */
-  emptyOptionsLabelStyle: PropTypes.object,
   /**
    * To customise empty options placeholder container style.
    */
@@ -694,7 +623,6 @@ MultiSelect.defaultProps = {
   isSearchable: false,
   showCreateOption: false,
   showCreateOptionLoader: false,
-  createOptionLabel: null,
   onPressCreateOption: () => {},
   onDonePress: () => {},
   maxItemSize: 5,

package/src/components/NotificationPreferenceList.js

@@ -74,16 +74,14 @@ import { Container, Typography, Divider, ToggleSwitch } from "@components";
  *
  */
 
-export const NotificationPreferenceList = props => {
-  const {
-    data,
-    itemWrapperProps,
-    itemContainerProps,
-    labelContainerProps,
-    labelProps,
-    ...rest
-  } = props;
-
+export const NotificationPreferenceList = ({
+  data,
+  itemWrapperProps,
+  itemContainerProps,
+  labelContainerProps,
+  labelProps,
+  ...rest
+}) => {
   return (
     <Container bg="background.secondary" borderRadius={8} {...rest}>
       {data?.map((item, index) => {

package/src/components/OrganizationItem.js

@@ -27,17 +27,16 @@ import { ThemeContext } from "styled-components/native";
  *
  */
 
-export const OrganizationItem = props => {
-  const {
-    label,
-    labelContainerProps,
-    iconContainerProps,
-    iconProps,
-    labelProps,
-    name,
-    nameProps,
-    ...rest
-  } = props;
+export const OrganizationItem = ({
+  label,
+  labelContainerProps,
+  iconContainerProps,
+  iconProps,
+  labelProps,
+  name,
+  nameProps,
+  ...rest
+}) => {
   const theme = useContext(ThemeContext);
   return (
     <Container

package/src/components/RichTextEditor.js

@@ -158,4 +158,6 @@ RichTextEditor.propTypes = {
    * Object which can be used to pass other supported props by the RichToolbar.
    */
   toolBarProps: PropTypes.object,
+  editorWrapperStyle: PropTypes.object,
+  toolbarWrapperStyle: PropTypes.object,
 };

package/src/components/SearchBar.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, TouchableWithoutFeedback } from "react-native";
 import {
@@ -47,15 +48,15 @@ const TextInput = styled.TextInput`
  * ```
  */
 
-export const SearchBar = props => {
-  const {
-    placeholder = "Search",
-    onChangeText = () => {},
-    onCancel = () => {},
-    debounceDelay = 1000,
-    showCancelButton = true,
-    ...rest
-  } = props;
+export const SearchBar = ({
+  placeholder = "Search",
+  onChangeText = () => {},
+  onCancel = () => {},
+  debounceDelay = 1000,
+  showCancelButton = true,
+  containerProps,
+  searchbarProps,
+}) => {
   const inputRef = useRef();
   const [searchText, setSearchText] = useState("");
   const debouncedSearchTextValue = useDebounce(
@@ -113,7 +114,7 @@ export const SearchBar = props => {
           borderRadius={8}
           flexDirection="row"
           alignItems="center"
-          {...rest.containerProps}
+          {...containerProps}
         >
           <Container px={10}>
             <Icon
@@ -139,7 +140,7 @@ export const SearchBar = props => {
             color="font.primary"
             autoCapitalize="none"
             returnKeyType="search"
-            {...rest.searchbarProps}
+            {...searchbarProps}
           />
         </Container>
       </TouchableWithoutFeedback>
@@ -190,4 +191,5 @@ SearchBar.propTypes = {
    * option to hide the cancel button. Default is true
    */
   showCancelButton: PropTypes.bool,
+  containerProps: PropTypes.object,
 };

package/src/components/SegmentedTopBar.js

@@ -18,7 +18,6 @@ const defaultShadowStyle = {
   },
   shadowOpacity: 0.23,
   shadowRadius: 2.62,
-
   elevation: 4,
 };
 
@@ -87,7 +86,6 @@ export const SegmentedTopBar = ({
 }) => {
   const translateValue = (width - 4) / routes?.length;
   const tabTranslateValue = useSharedValue(0);
-
   useEffect(() => {
     tabTranslateValue.value = withSpring(
       index * (translateValue * 1),
@@ -113,7 +111,7 @@ export const SegmentedTopBar = ({
           defaultShadowStyle,
           StyleSheet.absoluteFill,
           {
-            width: width / routes?.length,
+            width: (width - 4) / routes?.length,
           },
           tabTranslateAnimatedStyles,
         ]}
@@ -184,14 +182,9 @@ const styles = StyleSheet.create({
 
 SegmentedTopBar.propTypes = {
   /**
-   * Array of texts for the labels of each Segment/Tab.
+   * Navigation routes and additional data.
    */
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      Component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-    })
-  ).isRequired,
+  state: PropTypes.object,
   /**
    * To change the inactive segment container style.
    */
@@ -209,6 +202,8 @@ SegmentedTopBar.propTypes = {
    */
   activeTextStyle: PropTypes.object,
   height: PropTypes.number,
+  navigation: PropTypes.object,
+  descriptors: PropTypes.object,
 };
 
 SegmentedTopBar.defaultProps = {

package/src/components/Select.js

@@ -8,15 +8,18 @@ import Animated, {
   Easing,
   runOnJS,
 } from "react-native-reanimated";
-import {
-  ActivityIndicator,
-  TouchableWithoutFeedback,
-  Keyboard,
-} from "react-native";
+import { TouchableWithoutFeedback, Keyboard } from "react-native";
 import { ThemeContext } from "styled-components/native";
 import { ScrollView } from "react-native-gesture-handler";
 
-import { Card, Container, Input, Touchable, Typography } from "@components";
+import {
+  Card,
+  Container,
+  Input,
+  Touchable,
+  Typography,
+  Loader,
+} from "@components";
 
 const DropdownItem = ({
   label,
@@ -241,10 +244,7 @@ export const Select = ({
             {selectedOptionLabel || placeholder}
           </Typography>
           {isLoading ? (
-            <ActivityIndicator
-              size="small"
-              color={theme.colors.background.base}
-            />
+            <Loader color={theme.colors.background.base} />
           ) : (
             <Icon
               name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
@@ -305,10 +305,7 @@ export const Select = ({
                   {...createSearchedOptionContainerStyle}
                 >
                   {showCreateOptionLoader ? (
-                    <ActivityIndicator
-                      size="small"
-                      color={theme.colors.background.base}
-                    />
+                    <Loader size="s" color={theme.colors.background.base} />
                   ) : (
                     <Typography
                       fontFamily="sf400"