@servesall/atoms 1.1.16 → 1.1.19

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

@@ -5,7 +5,7 @@ const Box = ({ children, color = "", style, direction = false }) => {
   return (
     <BoxElement
       style={{ backgroundColor: color, ...style }}
-      flexDirection={direction}
+      direction={direction}
     >
       {children}
     </BoxElement>

package/src/Layout/Center.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { CenterElement } from './Layout.style';
+import React from "react";
+import { CenterElement } from "./Layout.style";
 
 const Center = ({ children, style, direction = false }) => {
-    return (
-        <CenterElement style={style} flexDirection={direction}>
-            {children}
-        </CenterElement>
-    );
+  return (
+    <CenterElement style={style} direction={direction}>
+      {children}
+    </CenterElement>
+  );
 };
 
 export default Center;

package/src/Layout/CenterLeft.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { CenterLeftElement } from './Layout.style';
+import React from "react";
+import { CenterLeftElement } from "./Layout.style";
 
 const CenterLeft = ({ children, style, direction = false }) => {
-    return (
-        <CenterLeftElement style={style} flexDirection={direction}>
-            {children}
-        </CenterLeftElement>
-    );
+  return (
+    <CenterLeftElement style={style} direction={direction}>
+      {children}
+    </CenterLeftElement>
+  );
 };
 
 export default CenterLeft;

package/src/Layout/CenterRight.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { CenterRightElement } from './Layout.style';
+import React from "react";
+import { CenterRightElement } from "./Layout.style";
 
 const CenterRight = ({ children, style, direction = false }) => {
-    return (
-        <CenterRightElement style={style} flexDirection={direction}>
-            {children}
-        </CenterRightElement>
-    );
+  return (
+    <CenterRightElement style={style} direction={direction}>
+      {children}
+    </CenterRightElement>
+  );
 };
 
 export default CenterRight;

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

@@ -7,119 +7,119 @@ export const CenterElement = styled.View`
   align-items: center;
   justify-content: center;
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flexdirection: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const CenterLeftElement = styled.View`
   align-items: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "center"
       : "flex-start"};
   justify-content: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "flex-start"
       : "center"};
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const CenterRightElement = styled.View`
   align-items: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "center"
       : "flex-end"};
   justify-content: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "flex-end"
       : "center"};
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginElement = styled.View`
   margin: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginHorizontalElement = styled.View`
   margin: 0 ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginVerticalElement = styled.View`
   margin: ${(props) => props.theme.margin} 0;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginBottomElement = styled.View`
   margin-bottom: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginTopElement = styled.View`
   margin-top: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginRightElement = styled.View`
   margin-right: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginLeftElement = styled.View`
   margin-left: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingElement = styled.View`
   padding: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingHorizontalElement = styled.View`
   padding: 0 ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingVerticalElement = styled.View`
   padding: ${(props) => props.theme.padding} 0;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingTopElement = styled.View`
   padding-top: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingBottomElement = styled.View`
   padding-bottom: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingLeftElement = styled.View`
   padding-left: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingRightElement = styled.View`
   padding-right: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
@@ -131,13 +131,32 @@ export const RowElement = styled.View`
 export const StretchElement = styled.View`
   align-items: stretch;
   align-self: stretch;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const BoxElement = styled.View`
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(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};
 `;
 
@@ -148,12 +167,19 @@ export const FullScreenElement = styled.View`
   left: 0;
   right: 0;
   z-index: 11;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const WebSmallWrapperElement = styled.View`
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   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/Margin.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginElement } from './Layout.style';
+import React from "react";
+import { MarginElement } from "./Layout.style";
 
 const Margin = ({ children, style, direction = false }) => {
-    return (
-        <MarginElement style={style} flexDirection={direction}>
-            {children}
-        </MarginElement>
-    );
+  return (
+    <MarginElement style={style} direction={direction}>
+      {children}
+    </MarginElement>
+  );
 };
 
 export default Margin;

package/src/Layout/MarginBottom.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginBottomElement } from './Layout.style';
+import React from "react";
+import { MarginBottomElement } from "./Layout.style";
 
 const MarginBottom = ({ children, style, direction = false }) => {
-    return (
-        <MarginBottomElement style={style} flexDirection={direction}>
-            {children}
-        </MarginBottomElement>
-    );
+  return (
+    <MarginBottomElement style={style} direction={direction}>
+      {children}
+    </MarginBottomElement>
+  );
 };
 
 export default MarginBottom;

package/src/Layout/MarginHorizontal.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginHorizontalElement } from './Layout.style';
+import React from "react";
+import { MarginHorizontalElement } from "./Layout.style";
 
 const MarginHorizontal = ({ children, style, direction = false }) => {
-    return (
-        <MarginHorizontalElement style={style} flexDirection={direction}>
-            {children}
-        </MarginHorizontalElement>
-    );
+  return (
+    <MarginHorizontalElement style={style} direction={direction}>
+      {children}
+    </MarginHorizontalElement>
+  );
 };
 
 export default MarginHorizontal;

package/src/Layout/MarginLeft.js

@@ -3,7 +3,7 @@ import { MarginLeftElement } from "./Layout.style";
 
 const MarginLeft = ({ children, style, direction = false }) => {
   return (
-    <MarginLeftElement style={style} flexDirection={direction}>
+    <MarginLeftElement style={style} direction={direction}>
       {children}
     </MarginLeftElement>
   );

package/src/Layout/MarginRight.js

@@ -3,7 +3,7 @@ import { MarginRightElement } from "./Layout.style";
 
 const MarginRight = ({ children, style, direction = false }) => {
   return (
-    <MarginRightElement style={style} flexDirection={direction}>
+    <MarginRightElement style={style} direction={direction}>
       {children}
     </MarginRightElement>
   );

package/src/Layout/MarginTop.js

@@ -3,7 +3,7 @@ import { MarginTopElement } from "./Layout.style";
 
 const MarginTop = ({ children, style, direction = false }) => {
   return (
-    <MarginTopElement style={style} flexDirection={direction}>
+    <MarginTopElement style={style} direction={direction}>
       {children}
     </MarginTopElement>
   );

package/src/Layout/MarginVertical.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginVerticalElement } from './Layout.style';
+import React from "react";
+import { MarginVerticalElement } from "./Layout.style";
 
 const MarginVertical = ({ children, style, direction = false }) => {
-    return (
-        <MarginVerticalElement style={style} flexDirection={direction}>
-            {children}
-        </MarginVerticalElement>
-    );
+  return (
+    <MarginVerticalElement style={style} direction={direction}>
+      {children}
+    </MarginVerticalElement>
+  );
 };
 
 export default MarginVertical;

package/src/Layout/Padding.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PaddingElement } from './Layout.style';
+import React from "react";
+import { PaddingElement } from "./Layout.style";
 
 const Padding = ({ children, style, direction = false }) => {
-    return (
-        <PaddingElement style={style} flexDirection={direction}>
-            {children}
-        </PaddingElement>
-    );
+  return (
+    <PaddingElement style={style} direction={direction}>
+      {children}
+    </PaddingElement>
+  );
 };
 
 export default Padding;

package/src/Layout/PaddingBottom.js

@@ -3,7 +3,7 @@ import { PaddingBottomElement } from "./Layout.style";
 
 const PaddingBottom = ({ children, style, direction = false }) => {
   return (
-    <PaddingBottomElement style={style} flexDirection={direction}>
+    <PaddingBottomElement style={style} direction={direction}>
       {children}
     </PaddingBottomElement>
   );

package/src/Layout/PaddingHorizontal.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PaddingHorizontalElement } from './Layout.style';
+import React from "react";
+import { PaddingHorizontalElement } from "./Layout.style";
 
 const PaddingHorizontal = ({ children, style, direction = false }) => {
-    return (
-        <PaddingHorizontalElement style={style} flexDirection={direction}>
-            {children}
-        </PaddingHorizontalElement>
-    );
+  return (
+    <PaddingHorizontalElement style={style} direction={direction}>
+      {children}
+    </PaddingHorizontalElement>
+  );
 };
 
 export default PaddingHorizontal;

package/src/Layout/PaddingLeft.js

@@ -3,7 +3,7 @@ import { PaddingLeftElement } from "./Layout.style";
 
 const PaddingLeft = ({ children, style, direction = false }) => {
   return (
-    <PaddingLeftElement style={style} flexDirection={direction}>
+    <PaddingLeftElement style={style} direction={direction}>
       {children}
     </PaddingLeftElement>
   );

package/src/Layout/PaddingRight.js

@@ -3,7 +3,7 @@ import { PaddingRightElement } from "./Layout.style";
 
 const PaddingRight = ({ children, style, direction = false }) => {
   return (
-    <PaddingRightElement style={style} flexDirection={direction}>
+    <PaddingRightElement style={style} direction={direction}>
       {children}
     </PaddingRightElement>
   );

package/src/Layout/PaddingTop.js

@@ -3,7 +3,7 @@ import { PaddingTopElement } from "./Layout.style";
 
 const PaddingTop = ({ children, style, direction = false }) => {
   return (
-    <PaddingTopElement style={style} flexDirection={direction}>
+    <PaddingTopElement style={style} direction={direction}>
       {children}
     </PaddingTopElement>
   );

package/src/Layout/PaddingVertical.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PaddingVerticalElement } from './Layout.style';
+import React from "react";
+import { PaddingVerticalElement } from "./Layout.style";
 
 const PaddingVertical = ({ children, style, direction = false }) => {
-    return (
-        <PaddingVerticalElement style={style} flexDirection={direction}>
-            {children}
-        </PaddingVerticalElement>
-    );
+  return (
+    <PaddingVerticalElement style={style} direction={direction}>
+      {children}
+    </PaddingVerticalElement>
+  );
 };
 
 export default PaddingVertical;

package/src/Layout/RoundedTopBox.js

@@ -11,7 +11,7 @@ const RoundedTopBox = ({ children, color = "", style, direction = false }) => {
         overflow: "hidden",
         ...style,
       }}
-      flexDirection={direction}
+      direction={direction}
     >
       {children}
     </BoxElement>

package/src/Layout/Stretch.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { StretchElement } from './Layout.style';
+import React from "react";
+import { StretchElement } from "./Layout.style";
 
 const Stretch = ({ children, style, direction = false }) => {
-    return (
-        <StretchElement style={style} flexDirection={direction}>
-            {children}
-        </StretchElement>
-    );
+  return (
+    <StretchElement style={style} direction={direction}>
+      {children}
+    </StretchElement>
+  );
 };
 
 export default Stretch;

package/src/Layout/WebSmallWrapper.js

@@ -1,13 +1,12 @@
-import React from 'react';
-import { WebSmallWrapperElement } from './Layout.style';
+import React from "react";
+import { WebSmallWrapperElement } from "./Layout.style";
 
 const WebSmallWrapper = ({ children, style, direction = false }) => {
-    return (
-        <WebSmallWrapperElement style={style} flexDirection={direction}>
-            {children}
-        </WebSmallWrapperElement>
-    );
+  return (
+    <WebSmallWrapperElement style={style} direction={direction}>
+      {children}
+    </WebSmallWrapperElement>
+  );
 };
 
 export default WebSmallWrapper;
-