@bigbinary/neetoui-rn 0.0.219 → 0.0.221

package/src/components/FlashList.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 /* eslint-disable react/prop-types */
 import React, { useCallback, useContext, useEffect } from "react";
 import { FlashList as ShopifyFlashList } from "@shopify/flash-list";
@@ -34,127 +35,139 @@ const Placeholder = () => {
   );
 };
 
-export const FlashList = ({
-  animationDuration = 2000,
-  SkeletonComponent,
-  placeHolderItemCount = 10,
-  isLoading = false,
-  data = [],
-  onRefresh = () => {},
-  onEndReached = () => {},
-  keyExtractor,
-  ...rest
-}) => {
-  const dummyData = Array.apply(null, Array(placeHolderItemCount));
-
-  const { isRefetchingByUser, refetchByUser } = useRefreshByUser(onRefresh);
-
-  return (
-    <FadeInFlatList
-      key={isLoading}
-      animationDuration={animationDuration}
-      SkeletonComponent={SkeletonComponent}
-      isLoading={isLoading}
-      extraData={{ isLoading, placeHolderItemCount }}
-      data={isLoading ? dummyData : data}
-      refreshControl={
-        onRefresh && (
-          <RefreshControl
-            refreshing={isRefetchingByUser}
-            onRefresh={refetchByUser}
-          />
-        )
-      }
-      placeHolderItemCount={placeHolderItemCount}
-      keyExtractor={(item, index) => {
-        return isLoading || !keyExtractor
-          ? index.toString()
-          : keyExtractor(item, index);
-      }}
-      {...rest}
-      onEndReached={isLoading ? undefined : onEndReached}
-    />
-  );
-};
+export const FlashList = React.forwardRef(
+  (
+    {
+      animationDuration = 2000,
+      SkeletonComponent,
+      placeHolderItemCount = 10,
+      isLoading = false,
+      data = [],
+      onRefresh = () => {},
+      onEndReached = () => {},
+      keyExtractor,
+      ...rest
+    },
+    ref
+  ) => {
+    const dummyData = Array.apply(null, Array(placeHolderItemCount));
 
-const FadeInFlatList = ({
-  renderItem: originalRenderItem,
-  animationDuration,
-  isLoading = false,
-  SkeletonComponent,
-  ...props
-}) => {
-  const value = useSharedValue(0);
+    const { isRefetchingByUser, refetchByUser } = useRefreshByUser(onRefresh);
 
-  const FadeInComponent = useCallback(
-    ({ index, children }) => {
-      const inputRange = [index - 1, index, index + 1, index + 2];
-      const animatedStyles = useAnimatedStyle(() => {
-        return {
-          opacity: interpolate(
-            value.value,
-            inputRange,
-            [0, 0.6, 1, 1],
-            Extrapolation.CLAMP
-          ),
-          transform: [
-            {
-              translateX: interpolate(
-                value.value,
-                inputRange,
-                [25, 15, 10, 0],
-                Extrapolation.CLAMP
-              ),
-            },
-          ],
-        };
-      });
+    return (
+      <FadeInFlatList
+        ref={ref}
+        key={isLoading}
+        animationDuration={animationDuration}
+        SkeletonComponent={SkeletonComponent}
+        isLoading={isLoading}
+        extraData={{ isLoading, placeHolderItemCount }}
+        data={isLoading ? dummyData : data}
+        refreshControl={
+          onRefresh && (
+            <RefreshControl
+              refreshing={isRefetchingByUser}
+              onRefresh={refetchByUser}
+            />
+          )
+        }
+        placeHolderItemCount={placeHolderItemCount}
+        keyExtractor={(item, index) => {
+          return isLoading || !keyExtractor
+            ? index.toString()
+            : keyExtractor(item, index);
+        }}
+        {...rest}
+        onEndReached={isLoading ? undefined : onEndReached}
+      />
+    );
+  }
+);
 
-      return <Animated.View style={animatedStyles}>{children}</Animated.View>;
+// eslint-disable-next-line react/display-name
+const FadeInFlatList = React.forwardRef(
+  (
+    {
+      renderItem: originalRenderItem,
+      animationDuration,
+      isLoading = false,
+      SkeletonComponent,
+      ...props
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+    ref
+  ) => {
+    const value = useSharedValue(0);
 
-  const Item = ({ item }) => {
-    return item?.extraData?.isLoading ? (
-      <FadeInComponent index={item.index}>
-        {SkeletonComponent || <Placeholder />}
-      </FadeInComponent>
-    ) : (
-      <FadeInComponent index={item.index}>
-        {originalRenderItem(item)}
-      </FadeInComponent>
-    );
-  };
+    const FadeInComponent = useCallback(
+      ({ index, children }) => {
+        const inputRange = [index - 1, index, index + 1, index + 2];
+        const animatedStyles = useAnimatedStyle(() => {
+          return {
+            opacity: interpolate(
+              value.value,
+              inputRange,
+              [0, 0.6, 1, 1],
+              Extrapolation.CLAMP
+            ),
+            transform: [
+              {
+                translateX: interpolate(
+                  value.value,
+                  inputRange,
+                  [25, 15, 10, 0],
+                  Extrapolation.CLAMP
+                ),
+              },
+            ],
+          };
+        });
 
-  const renderItem = item => {
-    return isLoading || item.index < props.placeHolderItemCount ? (
-      <Item item={item} />
-    ) : (
-      originalRenderItem(item)
+        return <Animated.View style={animatedStyles}>{children}</Animated.View>;
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
     );
-  };
 
-  useEffect(() => {
-    value.value = 0;
-    value.value = withSequence(
-      withTiming(20, {
-        duration: animationDuration,
-      }),
-      withTiming(10000, {
-        duration: 0,
-      })
-    );
+    const Item = ({ item }) => {
+      return item?.extraData?.isLoading ? (
+        <FadeInComponent index={item.index}>
+          {SkeletonComponent || <Placeholder />}
+        </FadeInComponent>
+      ) : (
+        <FadeInComponent index={item.index}>
+          {originalRenderItem(item)}
+        </FadeInComponent>
+      );
+    };
 
-    return () => {
-      cancelAnimation(value);
+    const renderItem = item => {
+      return isLoading || item.index < props.placeHolderItemCount ? (
+        <Item item={item} />
+      ) : (
+        originalRenderItem(item)
+      );
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animationDuration, value, isLoading]);
 
-  return <ShopifyFlashList {...props} renderItem={renderItem} />;
-};
+    useEffect(() => {
+      value.value = 0;
+      value.value = withSequence(
+        withTiming(20, {
+          duration: animationDuration,
+        }),
+        withTiming(10000, {
+          duration: 0,
+        })
+      );
+
+      return () => {
+        cancelAnimation(value);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationDuration, value, isLoading]);
+
+    return <ShopifyFlashList ref={ref} {...props} renderItem={renderItem} />;
+  }
+);
 
 FlashList.propTypes = {
   SkeletonComponent: PropTypes.element,

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/MultiSelect.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import {
@@ -24,13 +25,7 @@ import {
   position,
 } from "styled-system";
 
-import {
-  BottomSheet,
-  CheckBox,
-  Container,
-  Touchable,
-  Alert,
-} from "@components";
+import { BottomSheet, CheckBox, Container, Alert } from "@components";
 
 const Typography = styled.Text`
   ${textStyle}
@@ -133,41 +128,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);
 
 /**
@@ -564,10 +524,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 +548,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 +560,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 +630,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/SocialButton.js

@@ -33,8 +33,13 @@ import { Container, Typography, Touchable } from "@components";
  *
  */
 
-export const SocialButton = props => {
-  const { variant, disabled, labelStyle, isLoading, ...rest } = props;
+export const SocialButton = ({
+  variant,
+  disabled,
+  labelStyle,
+  isLoading,
+  ...rest
+}) => {
   const theme = useContext(ThemeContext);
   const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
 
@@ -93,4 +98,8 @@ SocialButton.propTypes = {
    * Customize label style of the button
    */
   labelStyle: PropTypes.object,
+  /**
+   * Button loading status
+   */
+  isLoading: PropTypes.bool,
 };

package/src/components/Touchable.js

@@ -84,4 +84,5 @@ Touchable.propTypes = {
   ...propTypes.buttonStyle,
 
   children: PropTypes.node,
+  elevation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };