@bigbinary/neetoui-rn 0.0.223 → 0.0.225

package/src/components/{Input.js → Input.jsx}

@@ -1,5 +1,16 @@
-/* eslint-disable react/display-name */
 import React, { useCallback, useContext, useEffect, useRef } from "react";
+import {
+  Animated,
+  InputAccessoryView,
+  Keyboard,
+  StyleSheet,
+  useWindowDimensions,
+  Platform,
+  TouchableWithoutFeedback,
+} from "react-native";
+
+import PropTypes from "prop-types";
+import styled, { ThemeContext } from "styled-components/native";
 import {
   flexbox,
   space,
@@ -12,19 +23,10 @@ import {
   system,
   position,
 } from "styled-system";
-import {
-  Animated,
-  InputAccessoryView,
-  Keyboard,
-  StyleSheet,
-  useWindowDimensions,
-  Platform,
-  TouchableWithoutFeedback,
-} from "react-native";
-import styled, { ThemeContext } from "styled-components/native";
-import PropTypes from "prop-types";
+
 import { Button, Container } from "@components";
-import { theme } from "../../src/theme";
+
+import { theme } from "../theme";
 
 const TextInput = styled.TextInput`
   ${flexbox}
@@ -122,7 +124,6 @@ export const Input = ({
     } else {
       handleLabelAnimation(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoFocus]);
 
   useEffect(() => {
@@ -133,7 +134,6 @@ export const Input = ({
     } else {
       handleLabelAnimation(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   const handleLabelAnimation = isFocused => {
@@ -162,7 +162,6 @@ export const Input = ({
           : colors.border.grey400,
         borderWidth: errorMessage || isFocused ? 1.5 : 1,
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const labelStyles = {
@@ -179,6 +178,7 @@ export const Input = ({
   const handleFocusBlur = isFocused => {
     if (label) {
       if (!value) handleLabelAnimation(isFocused);
+
       if (!noBorder) handleStyles(isFocused);
     }
   };
@@ -193,13 +193,13 @@ export const Input = ({
         }}
       >
         <View
-          ref={containerRef}
+          alignItems="center"
+          borderColor={errorMessage ? "border.danger" : "border.grey400"}
           borderRadius={8}
           borderWidth={noBorder ? 0 : 1}
-          borderColor={errorMessage ? "border.danger" : "border.grey400"}
-          alignItems="center"
           flexDirection="row"
           justifyContent="space-between"
+          ref={containerRef}
           {...(!rest.inputProps?.multiline && { height: 58 })}
           overflow="hidden"
           {...containerProps}
@@ -214,37 +214,37 @@ export const Input = ({
               <AnimatedLabel
                 color={disabled ? "font.grey400" : "font.grey600"}
                 position="absolute"
-                zIndex={1}
                 style={labelStyles}
+                zIndex={1}
               >
                 {label}
               </AnimatedLabel>
             )}
             <TextInput
-              ref={inputRef}
-              value={value}
-              returnKeyType={rest.inputProps?.multiline ? "default" : "done"}
-              onChangeText={onChangeText}
+              autoCapitalize="none"
               autoFocus={autoFocus}
-              editable={!disabled}
-              onFocus={() => {
-                handleFocusBlur(true);
-              }}
-              onBlur={() => {
-                onBlur();
-                handleFocusBlur(false);
-              }}
-              inputAccessoryViewID={label}
               color={disabled ? "font.grey500" : "font.primary"}
+              editable={!disabled}
               fontSize={17}
-              pr={3}
-              top={0}
-              zIndex={2}
-              autoCapitalize="none"
+              inputAccessoryViewID={label}
               mt={10}
               pb={3}
+              pr={3}
               pt={1}
+              ref={inputRef}
+              returnKeyType={rest.inputProps?.multiline ? "default" : "done"}
               textAlignVertical={textAlignVertical}
+              top={0}
+              value={value}
+              zIndex={2}
+              onChangeText={onChangeText}
+              onBlur={() => {
+                onBlur();
+                handleFocusBlur(false);
+              }}
+              onFocus={() => {
+                handleFocusBlur(true);
+              }}
               {...rest.inputProps}
             />
             {rest.inputProps?.multiline &&
@@ -252,23 +252,23 @@ export const Input = ({
               Platform.OS === "ios" && (
                 <InputAccessoryView nativeID={label}>
                   <Container
+                    alignItems="center"
                     bg="background.white"
                     flexDirection="row"
-                    p={2}
-                    width={width}
                     justifyContent="flex-end"
-                    alignItems="center"
+                    p={2}
                     pr={20}
+                    width={width}
                   >
                     <Button
                       height={30}
-                      left={10}
+                      label="Done"
                       labelStyle={styles.doneButtonStyle}
+                      left={10}
                       variant="text"
                       onPress={() => {
                         Keyboard.dismiss();
                       }}
-                      label="Done"
                     />
                   </Container>
                 </InputAccessoryView>
@@ -282,7 +282,7 @@ export const Input = ({
         </View>
       </TouchableWithoutFeedback>
       {!!errorMessage && (
-        <Typography pt={2} color="font.danger">
+        <Typography color="font.danger" pt={2}>
           {errorMessage}
         </Typography>
       )}

package/src/components/{ListItem.js → ListItem.jsx}

@@ -1,6 +1,7 @@
 import * as React from "react";
-import PropTypes from "prop-types";
+
 import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
 
 import { Typography, Container } from "@components";
 
@@ -30,31 +31,29 @@ import { Typography, Container } from "@components";
  * ```
  */
 
-export const ListItem = ({ LeftComponent, label, RightComponent, ...rest }) => {
-  return (
-    <Container
-      flexDirection="row"
-      bg="background.secondary"
-      width="100%"
-      px={16}
-      py={12}
-      borderRadius={6}
-      alignItems="center"
-      justifyContent="space-between"
-      {...rest}
-    >
-      <Container flexDirection="row" alignItems="center" width="50%">
-        {LeftComponent && <LeftComponent />}
-        <Typography color="font.grey800" fontSize="l" fontFamily="sf500">
-          {label}
-        </Typography>
-      </Container>
-      <Container width="50%" alignItems="flex-end">
-        <RightComponent />
-      </Container>
+export const ListItem = ({ LeftComponent, label, RightComponent, ...rest }) => (
+  <Container
+    alignItems="center"
+    bg="background.secondary"
+    borderRadius={6}
+    flexDirection="row"
+    justifyContent="space-between"
+    px={16}
+    py={12}
+    width="100%"
+    {...rest}
+  >
+    <Container alignItems="center" flexDirection="row" width="50%">
+      {LeftComponent && <LeftComponent />}
+      <Typography color="font.grey800" fontFamily="sf500" fontSize="l">
+        {label}
+      </Typography>
     </Container>
-  );
-};
+    <Container alignItems="flex-end" width="50%">
+      <RightComponent />
+    </Container>
+  </Container>
+);
 
 ListItem.propTypes = {
   ...propTypes.flexbox,

package/src/components/{Loader.js → Loader.jsx}

@@ -1,6 +1,6 @@
-/* eslint-disable @bigbinary/neeto/no-dangling-constants */
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from "react";
+
+import PropTypes from "prop-types";
 import Animated, {
   useSharedValue,
   withTiming,
@@ -11,10 +11,11 @@ import Animated, {
   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";
+import { theme } from "@theme";
 
+// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 const LOADER_WIDTH = {
   s: 24,
   m: 36,
@@ -73,28 +74,29 @@ export const Loader = ({ color, size }) => {
 
   const animatedStyles = useAnimatedStyle(() => {
     const scale = interpolate(progress.value, [0, 2], [0, 420]);
+
     return {
-      width: width,
+      width,
       height: width,
       alignItems: "center",
       justifyContent: "center",
-      transform: [{ rotate: scale + "deg" }],
+      transform: [{ rotate: `${scale}deg` }],
     };
   });
 
   return (
     <Container alignItems="center" justifyContent="center">
       <Animated.View style={animatedStyles}>
-        <Svg width={width} height={width}>
+        <Svg height={width} width={width}>
           <AnimatedCircle
+            animatedProps={animatedProps}
             cx={width / 2}
             cy={width / 2}
             r={radius}
-            strokeWidth={stroke_width}
             stroke={color}
             strokeDasharray={circumference}
-            animatedProps={animatedProps}
             strokeLinecap="round"
+            strokeWidth={stroke_width}
           />
         </Svg>
       </Animated.View>

package/src/components/{MultiSelect.js → MultiSelect.jsx}

@@ -1,7 +1,7 @@
-/* eslint-disable react-native/no-inline-styles */
 import React, { useContext, useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import { Keyboard, TouchableWithoutFeedback } from "react-native";
+
+import PropTypes from "prop-types";
 import Animated, {
   interpolate,
   useAnimatedStyle,
@@ -80,21 +80,21 @@ const MultiSelectItem = ({
 
   return (
     <Container
+      alignItems="center"
       bg="background.secondary"
       borderRadius={12}
       flexDirection="row"
-      alignItems="center"
       justifyContent="space-between"
+      m={1}
       px={2}
       py={1}
-      m={1}
       {...multiSelectedItemContainerStyle}
     >
       <Typography
+        color="font.grey800"
         fontFamily="sf400"
         fontSize="s"
         mr={2}
-        color="font.grey800"
         {...multiSelectedItemLabelStyle}
       >
         {label}
@@ -105,9 +105,9 @@ const MultiSelectItem = ({
           onPress={handleItemUnSelection}
         >
           <Icon
+            color={theme.colors.font.grey800}
             name="ri-close-line"
             size="20"
-            color={theme.colors.font.grey800}
           />
         </TouchableWithoutFeedback>
       )}
@@ -222,11 +222,13 @@ export const MultiSelect = ({
           selectedItem => valueExtractor(selectedItem) === optionValue
         )
       );
+
       return !isItemAlreadySelected;
     })
     .filter((item, index) => {
       const optionLabel = labelExtractor(item, index);
       if (searchQuery.length === 0) return true;
+
       return formatStr(optionLabel).includes(formatStr(searchQuery));
     });
 
@@ -250,13 +252,11 @@ export const MultiSelect = ({
         ? emptySearchedOptionsHeight
         : 0);
 
-  const getValue = (item, index) => {
-    return item?.value || valueExtractor(item, index) || item;
-  };
+  const getValue = (item, index) =>
+    item?.value || valueExtractor(item, index) || item;
 
-  const getLabel = (item, index) => {
-    return item?.label || labelExtractor(item, index) || item;
-  };
+  const getLabel = (item, index) =>
+    item?.label || labelExtractor(item, index) || item;
 
   const handleCheckbox = item => {
     const oldData = [...value];
@@ -280,10 +280,10 @@ export const MultiSelect = ({
     return (
       <Container py={12}>
         <CheckBox
-          disabled={disabled}
           checked={itemIndex !== -1}
-          onSelect={onPress}
+          disabled={disabled}
           label={item?.label || labelExtractor(item, index) || item}
+          onSelect={onPress}
         />
       </Container>
     );
@@ -295,6 +295,7 @@ export const MultiSelect = ({
     if (!showDropdown) {
       setShowDropdown(true);
     }
+
     if (showDropdown) {
       dropdownAnimatedHeight.value = 0;
     }
@@ -315,14 +316,12 @@ export const MultiSelect = ({
         duration: 250,
       }
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, showDropdown]);
 
   useEffect(() => {
     if (showDropdown) {
       dropdownAnimatedHeight.value = dropdownHeight;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showDropdown, dropdownHeight]);
 
   CheckBoxContent.propTypes = {
@@ -331,13 +330,11 @@ export const MultiSelect = ({
     index: PropTypes.number,
   };
 
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      top: interpolate(animatedLabelValue.value, [0, 1], [7, -5]),
-      fontSize: interpolate(animatedLabelValue.value, [0, 1], [17, 13]),
-      color: "font.grey600",
-    };
-  });
+  const animatedStyles = useAnimatedStyle(() => ({
+    top: interpolate(animatedLabelValue.value, [0, 1], [7, -5]),
+    fontSize: interpolate(animatedLabelValue.value, [0, 1], [17, 13]),
+    color: "font.grey600",
+  }));
 
   return (
     <Container {...containerStyle}>
@@ -346,62 +343,60 @@ export const MultiSelect = ({
         onPress={handleOpenDropdown}
       >
         <Container
+          borderColor={showDropdown ? "border.base" : "border.grey400"}
           borderRadius={12}
           borderWidth={1}
-          borderColor={showDropdown ? "border.base" : "border.grey400"}
+          minHeight={58}
           p={2}
           pr={2}
-          minHeight={58}
           {...inputContainerStyle}
           {...rest}
         >
           <Container
+            alignItems="center"
             flexDirection="row"
             justifyContent="space-between"
-            alignItems="center"
           >
             <AnimatedLabel
               position="absolute"
-              zIndex={1}
               style={[animatedStyles, { marginLeft: 5, ...labelStyle }]}
+              zIndex={1}
             >
               {label}
             </AnimatedLabel>
             {!multipleOptionsSelected && <Container />}
             {multipleOptionsSelected && (
               <Container
-                flexWrap="wrap"
                 flexDirection="row"
+                flexWrap="wrap"
                 maxWidth="85%"
-                onStartShouldSetResponder={() => true}
                 mt={3}
+                onStartShouldSetResponder={() => true}
               >
-                {value?.slice(0, maxItemSize).map((item, index) => {
-                  return (
-                    <MultiSelectItem
-                      key={index}
-                      label={getLabel(item)}
-                      onUnselect={() => handleUnSelection(item)}
-                      multiSelectedItemContainerStyle={
-                        multiSelectedItemContainerStyle
-                      }
-                      multiSelectedItemLabelStyle={multiSelectedItemLabelStyle}
-                      disabled={disabled}
-                      confirmationAlertObj={confirmationAlertObj}
-                    />
-                  );
-                })}
+                {value?.slice(0, maxItemSize).map((item, index) => (
+                  <MultiSelectItem
+                    confirmationAlertObj={confirmationAlertObj}
+                    disabled={disabled}
+                    key={index}
+                    label={getLabel(item)}
+                    multiSelectedItemLabelStyle={multiSelectedItemLabelStyle}
+                    multiSelectedItemContainerStyle={
+                      multiSelectedItemContainerStyle
+                    }
+                    onUnselect={() => handleUnSelection(item)}
+                  />
+                ))}
                 {value?.length > maxItemSize &&
                   (!MoreItemComponent ? (
                     <Container
+                      alignItems="center"
                       bg="background.secondary"
                       borderRadius={12}
                       flexDirection="row"
-                      alignItems="center"
                       justifyContent="space-between"
+                      m={1}
                       px={2}
                       py={1}
-                      m={1}
                       {...moreItemLabelContainerStyle}
                     >
                       <Typography {...moreItemLabelStyle}>
@@ -418,44 +413,43 @@ export const MultiSelect = ({
                 <Loader color={theme.colors.background.base} />
               ) : (
                 <Icon
+                  color="grey"
                   name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
                   size="20"
-                  color="grey"
                 />
               )}
             </Container>
           </Container>
         </Container>
       </TouchableWithoutFeedback>
-
       <BottomSheet
-        title={label}
-        onItemPress={({ item }) => {
-          handleCheckbox(item);
-          selectedValue(item);
-        }}
-        disabled={disabled}
-        onDonePress={onDonePress}
-        isVisible={showDropdown}
-        hide={() => setShowDropdown(false)}
-        canSearch={isSearchable}
-        data={options}
-        contentType="checkbox"
         ContentRow={CheckBoxContent}
-        showCreateOption={showCreateOption}
         CreateItemComponent={CreateItemComponent}
-        showCreateOptionLoader={showCreateOptionLoader}
-        createSearchedOptionLabelStyle={createSearchedOptionLabelStyle}
-        onPressCreateOption={onPressCreateOption}
+        NoResultsComponent={NoResultsComponent}
+        canSearch={isSearchable}
+        contentType="checkbox"
         createSearchedOptionContainerStyle={createSearchedOptionContainerStyle}
+        createSearchedOptionLabelStyle={createSearchedOptionLabelStyle}
+        data={options}
+        disabled={disabled}
+        hide={() => setShowDropdown(false)}
+        isVisible={showDropdown}
+        labelExtractor={labelExtractor}
+        noResultsLabel={noResultsLabel}
         noResultsLabelContainerStyle={noResultsLabelContainerStyle}
         noResultsLabelStyle={noResultsLabelStyle}
-        noResultsLabel={noResultsLabel}
-        NoResultsComponent={NoResultsComponent}
+        searchBarProps={searchBarProps}
+        showCreateOption={showCreateOption}
+        showCreateOptionLoader={showCreateOptionLoader}
+        title={label}
         valueExtractor={valueExtractor}
-        labelExtractor={labelExtractor}
         onBackdropPress={onBackdropPress}
-        searchBarProps={searchBarProps}
+        onDonePress={onDonePress}
+        onPressCreateOption={onPressCreateOption}
+        onItemPress={({ item }) => {
+          handleCheckbox(item);
+          selectedValue(item);
+        }}
       />
     </Container>
   );

package/src/components/{NotificationPreferenceList.js → NotificationPreferenceList.jsx}

@@ -1,4 +1,5 @@
 import React from "react";
+
 import PropTypes from "prop-types";
 
 import { Container, Typography, Divider, ToggleSwitch } from "@components";
@@ -81,55 +82,54 @@ export const NotificationPreferenceList = ({
   labelContainerProps,
   labelProps,
   ...rest
-}) => {
-  return (
-    <Container bg="background.secondary" borderRadius={8} {...rest}>
-      {data?.map((item, index) => {
-        const { label, enabled, onSwitch, LeftIcon } = item;
-        const isLastItem = index === data.length - 1;
-        return (
-          <Container key={index} px={12} {...itemWrapperProps}>
+}) => (
+  <Container bg="background.secondary" borderRadius={8} {...rest}>
+    {data?.map((item, index) => {
+      const { label, enabled, onSwitch, LeftIcon } = item;
+      const isLastItem = index === data.length - 1;
+
+      return (
+        <Container key={index} px={12} {...itemWrapperProps}>
+          <Container
+            alignItems="center"
+            flexDirection="row"
+            justifyContent="space-between"
+            py={15}
+            {...itemContainerProps}
+          >
             <Container
-              py={15}
-              flexDirection="row"
               alignItems="center"
-              justifyContent="space-between"
-              {...itemContainerProps}
+              flexDirection="row"
+              pr={15}
+              width="85%"
+              {...labelContainerProps}
             >
-              <Container
-                flexDirection="row"
-                alignItems="center"
-                width="85%"
-                pr={15}
-                {...labelContainerProps}
+              {LeftIcon && (
+                <Container mr={10}>
+                  <LeftIcon />
+                </Container>
+              )}
+              <Typography
+                color="font.grey800"
+                fontFamily="sf400"
+                fontSize="l"
+                {...labelProps}
               >
-                {LeftIcon && (
-                  <Container mr={10}>
-                    <LeftIcon />
-                  </Container>
-                )}
-                <Typography
-                  color="font.grey800"
-                  fontSize="l"
-                  fontFamily="sf400"
-                  {...labelProps}
-                >
-                  {label}
-                </Typography>
-              </Container>
-              <ToggleSwitch
-                value={enabled}
-                onValueChange={() => onSwitch(item, index)}
-                mt={4}
-              />
+                {label}
+              </Typography>
             </Container>
-            {!isLastItem && <Divider bg="background.grey300" />}
+            <ToggleSwitch
+              mt={4}
+              value={enabled}
+              onValueChange={() => onSwitch(item, index)}
+            />
           </Container>
-        );
-      })}
-    </Container>
-  );
-};
+          {!isLastItem && <Divider bg="background.grey300" />}
+        </Container>
+      );
+    })}
+  </Container>
+);
 
 NotificationPreferenceList.propTypes = {
   /**