@servesall/atoms 1.1.17 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.17",
+  "version": "1.1.20",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -23,7 +23,9 @@
     "react-native-reanimated": "*"
   },
   "dependencies": {
-    "react-native-status-bar-height": "^2.6.0"
+    "@gorhom/bottom-sheet": "^5.0.5",
+    "react-native-status-bar-height": "^2.6.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",

package/src/Buttons/RoundButton/RoundButton.style.js

@@ -3,7 +3,17 @@ import styled from "styled-components/native";
 export const ButtonWrapper = styled.View``;
 
 export const ButtonStyle = styled.Pressable`
-  min-height: ${(props) => (props.size === "big" ? "70px" : "56px")};
+  min-height: ${(props) => {
+    if (props.size === "big") {
+      return "70px";
+    } else if (props.size === "small") {
+      return "56px";
+    } else if (props.size === "xsmall") {
+      return "40px";
+    } else {
+      return "70px";
+    }
+  }};
   border-radius: 50px;
   background-color: ${(props) => props.color};
   opacity: ${(props) => (props.active ? 1 : 0.7)};

package/src/Buttons/RoundedButton/RoundedButton.style.js

@@ -3,7 +3,17 @@ import styled from "styled-components/native";
 export const ButtonWrapper = styled.View``;
 
 export const ButtonStyle = styled.Pressable`
-  min-height: ${(props) => (props.size === "big" ? "60px" : "54px")};
+  min-height: ${(props) => {
+    if (props.size === "big") {
+      return "60px";
+    } else if (props.size === "small") {
+      return "54px";
+    } else if (props.size === "xsmall") {
+      return "44px";
+    } else {
+      return "54px";
+    }
+  }};
   width: 100%;
   border-radius: ${(props) =>
     props.smallBorder

package/src/CountryFlatList/index.js

@@ -88,7 +88,6 @@ export default function NewCustomer({
   }, []);
 
   // variables
-  const snapPoints = useMemo(() => ["90%"], []);
 
   const searchText = (e = "") => {
     let text = e.toLowerCase();
@@ -121,23 +120,26 @@ export default function NewCustomer({
     <BottomSheet
       index={0}
       ref={sheetRef}
-      snapPoints={snapPoints}
+      snapPoints={["90%"]}
       onChange={handleSheetChanges}
       enablePanDownToClose={true}
       keyboardBehavior={"fillParent"}
       ListEmptyComponent={<H4>Not found</H4>}
+      enableDynamicSizing={false}
     >
       <Margin>
         <Input autoFocus={false} {...defaultProps} error="Invalid">
           <H4>Search</H4>
         </Input>
       </Margin>
+
       <BottomSheetFlatList
         data={data}
         renderItem={renderItem}
         keyExtractor={(item) => item.name}
         windowSize={3}
         initialNumToRender={15}
+        keyboardShouldPersistTaps="handled"
         maxToRenderPerBatch={4}
         removeClippedSubviews={false}
         getItemLayout={(data, index) => ({

package/src/Inputs/InputNormal/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { H4 } from "../../Text";
 import { MarginHorizontal, Row } from "../../Layout";
-import { KeyboardAvoidingView, Platform } from "react-native";
+import { KeyboardAvoidingView, Platform, Keyboard } from "react-native";
 import { InputWrapper, InputElement, BorderWrapper } from "./Animated.style";
 import Placeholder from "./Placeholder";
 
@@ -27,19 +27,43 @@ const Input = ({
   isRightBound = false,
   isLeftBound = false,
   euro = false,
+  focused = () => {},
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [textValue, setTextValue] = useState(value || defaultValue);
   const inputRef = useRef();
 
+  useEffect(() => {
+    focused();
+  }, [isFocused]);
+
   useEffect(() => {
     textChange(textValue);
   }, [textValue]);
 
+  useEffect(() => {
+    defaultValue && setTextValue(defaultValue);
+  }, [defaultValue]);
+
   useEffect(() => {
     autoFocus && inputRef.current?.focus();
   }, [autoFocus]);
 
+  function blurTextInput() {
+    inputRef.current?.blur();
+  }
+
+  useEffect(() => {
+    const keyboardDidHideSubscription = Keyboard.addListener(
+      "keyboardDidHide",
+      blurTextInput
+    );
+
+    return () => {
+      keyboardDidHideSubscription?.remove();
+    };
+  }, []);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -106,6 +130,7 @@ const Input = ({
                 active={isFocused}
                 style={style}
                 returnKeyType="done"
+                onSubmitEditing={blurTextInput}
               />
             </Row>
           </MarginHorizontal>

package/src/Layout/BorderBottom.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { BorderBottomElement } from "./Layout.style";
+
+const BorderBottom = ({ children, style }) => {
+  return (
+    <BorderBottomElement style={{ ...style }}>{children}</BorderBottomElement>
+  );
+};
+
+export default BorderBottom;

package/src/Layout/BorderBox.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { BorderBoxElement } from "./Layout.style";
+
+const BorderBox = ({ children, style }) => {
+  return <BorderBoxElement style={{ ...style }}>{children}</BorderBoxElement>;
+};
+
+export default BorderBox;

package/src/Layout/BorderTop.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { BorderTopElement } from "./Layout.style";
+
+const BorderTop = ({ children, style }) => {
+  return <BorderTopElement style={{ ...style }}>{children}</BorderTopElement>;
+};
+
+export default BorderTop;

package/src/Layout/ImageWrapper.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { ImageWrapperElement } from "./Layout.style";
+
+const ImageWrapper = ({ children, box = false, style }) => {
+  return (
+    <ImageWrapperElement style={{ ...style }}>{children}</ImageWrapperElement>
+  );
+};
+
+export default ImageWrapper;

package/src/Layout/Layout.style.js

@@ -141,6 +141,25 @@ export const BoxElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const BorderBottomElement = styled.View`
+  border-bottom-width: 2px;
+  border-color: ${(props) => props.theme.color7};
+  ${(props) => props.style};
+`;
+
+export const BorderTopElement = styled.View`
+  border-top-width: 2px;
+  border-color: ${(props) => props.theme.color7};
+  ${(props) => props.style};
+`;
+
+export const BorderBoxElement = styled.View`
+  border-width: 2px;
+  border-color: ${(props) => props.theme.color7};
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  ${(props) => props.style};
+`;
+
 export const FullScreenElement = styled.View`
   position: absolute;
   top: 0;
@@ -157,3 +176,10 @@ export const WebSmallWrapperElement = styled.View`
   width: 500px;
   ${(props) => props.style};
 `;
+
+export const ImageWrapperElement = styled.View`
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  background-color: ${(props) => props.theme.color7};
+  overflow: hidden;
+  ${(props) => props.styles};
+`;

package/src/Layout/index.js

@@ -21,6 +21,10 @@ import FullScreen from "./FullScreen";
 import WebSmallWrapper from "./WebSmallWrapper";
 import Box from "./Box";
 import RoundedTopBox from "./RoundedTopBox";
+import BorderBottom from "./BorderBottom";
+import BorderTop from "./BorderTop";
+import BorderBox from "./BorderBox";
+import ImageWrapper from "./ImageWrapper";
 
 export {
   Center,
@@ -46,4 +50,8 @@ export {
   WebSmallWrapper,
   Box,
   RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
 };

package/src/SlideToConfirm/Swipe.style.js

@@ -14,7 +14,7 @@ export const RoundWrapper = styled(Animated.View)`
   ${(props) => props.style};
 `;
 
-export const RoundSlider = styled.View`
+export const RoundSlider = styled(Animated.View)`
   width: 62px;
   height: 52px;
   background-color: ${(props) => props.theme.color1};

package/src/SlideToConfirm/index.js

@@ -114,7 +114,18 @@ const SwipeButton = ({
 
   return (
     <Wrapper onLayout={onLayout}>
-      <RoundWrapper style={[animatedBorder]}>
+      <Animated.View
+        style={[
+          animatedBorder,
+          {
+            width: "100%",
+            borderRadius: parseInt(theme.borderRadiusMedium, 10),
+            overflow: "hidden",
+            padding: 8,
+            borderWidth: 2,
+          },
+        ]}
+      >
         <Animated.View
           style={[
             colorWave,
@@ -150,7 +161,7 @@ const SwipeButton = ({
             </RoundSlider>
           </Animated.View>
         </PanGestureHandler>
-      </RoundWrapper>
+      </Animated.View>
     </Wrapper>
   );
 };

package/src/index.js

@@ -24,6 +24,10 @@ import {
   WebSmallWrapper,
   Box,
   RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
 } from "./Layout";
 import {
   Input,
@@ -52,7 +56,7 @@ import Switch from "./Switch";
 import SwipeButton from "./SlideToConfirm";
 import ErrorText from "./ErrorText";
 import CountryList from "./CountryFlatList";
-import SplashScreen from "./SplashScreen";
+//import SplashScreen from "./SplashScreen";
 
 export {
   ThemeWrapper,
@@ -87,6 +91,10 @@ export {
   WebSmallWrapper,
   Box,
   RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
   Input,
   InputNormal,
   AnimatedPlaceholder,
@@ -110,5 +118,5 @@ export {
   ErrorText,
   AnimatedRoundedButton,
   CountryList,
-  SplashScreen,
+  //SplashScreen,
 };