@servesall/atoms 1.1.7 → 1.1.10

package/src/Inputs/InputNormal/index.js

@@ -24,6 +24,8 @@ const Input = ({
   keyboardVerticalOffset = 0,
   hasError = false,
   error,
+  isRightBound = false,
+  isLeftBound = false,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [textValue, setTextValue] = useState(value || defaultValue);
@@ -50,6 +52,8 @@ const Input = ({
         }}
       >
         <BorderWrapper
+          isRightBound={isRightBound}
+          isLeftBound={isLeftBound}
           active={isFocused}
           color={
             !hasError

package/src/Inputs/PhoneNumber/Animated.style.js

@@ -0,0 +1,23 @@
+import styled from "styled-components/native";
+
+export const InputWrapper = styled.Pressable`
+  min-height: 70px;
+`;
+
+export const InputElement = styled.TextInput`
+  min-height: 40px;
+  font-family: ${(props) => props.theme.fontFamily2};
+  font-size: ${(props) => props.theme.small};
+  color: ${(props) => props.theme.color2};
+  background-color: ${(props) =>
+    props.active ? props.theme.color1 : props.theme.color10};
+`;
+export const BorderWrapper = styled.View`
+  min-height: 70px;
+  padding-top: 26px;
+  border-width: 2px;
+  border-color: ${(props) => props.color};
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  background-color: ${(props) =>
+    props.active ? props.theme.color1 : props.theme.color10};
+`;

package/src/Inputs/PhoneNumber/Placeholder/index.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+const PlaceholderElement = React.memo(({ children, active }) => {
+  const top = useSharedValue(active ? 10 : 30);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      top: withTiming(top.value, {
+        duration: 250,
+        easing: Easing.bezier(0.19, 1.0, 0.22, 1.0),
+      }),
+    };
+  });
+
+  useEffect(() => {
+    if (active) {
+      top.value = 10;
+    }
+    if (!active) {
+      top.value = 30;
+    }
+  }, [active]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          zIndex: 1,
+          justifyContent: "center",
+        },
+        animatedStyle,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+});
+
+export default PlaceholderElement;

package/src/Inputs/PhoneNumber/index.js

@@ -0,0 +1,151 @@
+import React, { useEffect, useState, useRef } from "react";
+import { H4 } from "../../Text";
+import { MarginHorizontal, Row, Box } from "../../Layout";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { InputWrapper, InputElement, BorderWrapper } from "./Animated.style";
+import Placeholder from "./Placeholder";
+
+const InputPhone = ({
+  children,
+  style,
+  borderColorIdle,
+  borderColorActive,
+  borderColorError,
+  textChangePrefix = () => {},
+  textChangeNumber = () => {},
+  onPress = () => {},
+  valuePrefix,
+  valueNumber,
+  defaultValuePrefix,
+  defaultValueNumber,
+  multiline = false,
+  numberOfLines = 1,
+  maxLength = 1000,
+  autoFocus = false,
+  keyboardType,
+  editable = true,
+  keyboardVerticalOffset = 0,
+  hasError = false,
+  error,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [textValue, setTextValue] = useState(valuePrefix || defaultValuePrefix);
+  const [isFocusedPrefix, setIsFocusedPrefix] = useState(false);
+  const [textPrefixValue, setTextPrefixValue] = useState(
+    valueNumber || defaultValueNumber
+  );
+  const inputRef = useRef();
+
+  useEffect(() => {
+    textChangeNumber(textValue);
+  }, [textValue]);
+
+  useEffect(() => {
+    textChangePrefix(textPrefixValue);
+  }, [textPrefixValue]);
+
+  useEffect(() => {
+    autoFocus && inputRef.current?.focus();
+  }, [autoFocus]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      <InputWrapper
+        onPress={() => {
+          onPress();
+          editable && setIsFocused(true);
+          editable && inputRef.current?.focus();
+        }}
+      >
+        <BorderWrapper
+          active={isFocused}
+          color={
+            !hasError
+              ? isFocused
+                ? borderColorActive
+                : borderColorIdle
+              : borderColorError
+          }
+        >
+          <Row style={{ backgroundColor: "red", width: "100%" }}>
+            <Box>
+              <Placeholder
+                active={
+                  isFocusedPrefix ||
+                  (textPrefixValue && textPrefixValue.length > 0) ||
+                  (valuePrefix && valuePrefix.length > 0)
+                }
+              >
+                <MarginHorizontal>
+                  {!hasError ? (
+                    children[0]
+                  ) : (
+                    <H4 color={borderColorError}>{error || hasError}</H4>
+                  )}
+                </MarginHorizontal>
+              </Placeholder>
+            </Box>
+            <Box>
+              <Placeholder
+                active={
+                  isFocused ||
+                  (textValue && textValue.length > 0) ||
+                  (valueNumber && valueNumber.length > 0)
+                }
+              >
+                <MarginHorizontal>
+                  {!hasError ? (
+                    children[1]
+                  ) : (
+                    <H4 color={borderColorError}>{error || hasError}</H4>
+                  )}
+                </MarginHorizontal>
+              </Placeholder>
+            </Box>
+          </Row>
+
+          <MarginHorizontal>
+            <Row>
+              <InputElement
+                onFocus={() => setIsFocusedPrefix(true)}
+                onBlur={() => setIsFocusedPrefix(false)}
+                onChangeText={(text) => setTextPrefixValue(text)}
+                defaultValue={defaultValuePrefix}
+                value={valuePrefix}
+                multiline={multiline}
+                numberOfLines={numberOfLines}
+                maxLength={maxLength}
+                autoFocus={autoFocus}
+                keyboardType={keyboardType}
+                editable={editable}
+                active={isFocusedPrefix}
+                style={style}
+              />
+              <InputElement
+                ref={inputRef}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                onChangeText={(text) => setTextValue(text)}
+                defaultValue={defaultValueNumber}
+                value={valueNumber}
+                multiline={multiline}
+                numberOfLines={numberOfLines}
+                maxLength={maxLength}
+                autoFocus={autoFocus}
+                keyboardType={keyboardType}
+                editable={editable}
+                active={isFocused}
+                style={style}
+              />
+            </Row>
+          </MarginHorizontal>
+        </BorderWrapper>
+      </InputWrapper>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default InputPhone;

package/src/Inputs/index.js

@@ -2,5 +2,6 @@ import Input from "./Animated";
 import AnimatedPlaceholder from "./AnimatedPlaceholder";
 import InputOtp from "./Otp";
 import InputNormal from "./InputNormal";
+import InputPhone from "./PhoneNumber";
 
-export { Input, AnimatedPlaceholder, InputOtp, InputNormal };
+export { Input, AnimatedPlaceholder, InputOtp, InputNormal, InputPhone };

package/src/Layout/Layout.style.js

@@ -105,6 +105,18 @@ export const PaddingBottomElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const PaddingLeftElement = styled.View`
+  padding-left: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.flexDirection || 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};
+  ${(props) => props.style};
+`;
+
 export const RowElement = styled.View`
   flex-direction: row;
   ${(props) => props.style};

package/src/Layout/PaddingLeft.js

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

package/src/Layout/PaddingRight.js

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

package/src/Layout/index.js

@@ -12,6 +12,8 @@ import PaddingHorizontal from "./PaddingHorizontal";
 import PaddingVertical from "./PaddingVertical";
 import PaddingTop from "./PaddingTop";
 import PaddingBottom from "./PaddingBottom";
+import PaddingLeft from "./PaddingLeft";
+import PaddingRight from "./PaddingRight";
 import Row from "./Row";
 import Stretch from "./Stretch";
 import FullScreen from "./FullScreen";
@@ -34,6 +36,8 @@ export {
   PaddingVertical,
   PaddingTop,
   PaddingBottom,
+  PaddingLeft,
+  PaddingRight,
   Row,
   Stretch,
   FullScreen,

package/src/Theme/definitions/colors.js

@@ -36,6 +36,7 @@ const colors = {
   greenLight: "#F3FFFC",
   greenDark: "#236A56",
   greyText: "#b2bec3",
+  greyButton: "#94A3A9",
   red: "#ff7675",
   redlight: "#FFFAF9",
   redDark: "#9C4140",

package/src/index.js

@@ -15,6 +15,8 @@ import {
   PaddingVertical,
   PaddingTop,
   PaddingBottom,
+  PaddingLeft,
+  PaddingRight,
   Row,
   Stretch,
   FullScreen,
@@ -22,7 +24,13 @@ import {
   Box,
   RoundedTopBox,
 } from "./Layout";
-import { Input, AnimatedPlaceholder, InputOtp, InputNormal } from "./Inputs";
+import {
+  Input,
+  AnimatedPlaceholder,
+  InputOtp,
+  InputNormal,
+  InputPhone,
+} from "./Inputs";
 import {
   TextBtn,
   RoundedBtn,
@@ -68,6 +76,8 @@ export {
   PaddingVertical,
   PaddingTop,
   PaddingBottom,
+  PaddingLeft,
+  PaddingRight,
   Row,
   Stretch,
   FullScreen,
@@ -78,6 +88,7 @@ export {
   InputNormal,
   AnimatedPlaceholder,
   InputOtp,
+  InputPhone,
   TextBtn,
   RoundedBtn,
   RoundBtn,

package/src/Inputs/PhoneNumber/PrefixPicker/index.js

@@ -1,200 +0,0 @@
-import React, { useMemo, useCallback, useState, useEffect } from "react";
-import { View, StatusBar } from "react-native";
-import {
-  FullScreen,
-  Center,
-  Loader,
-  Success,
-  Error,
-  Switch,
-  Row,
-  Box,
-  Margin,
-  MarginHorizontal,
-  MarginVertical,
-  Padding,
-  H4,
-  H2,
-  H3,
-  RoundedBtn,
-  ErrorText,
-  MarginRight,
-  MarginBottom,
-  PaddingVertical,
-  PaddingTop,
-  useThemeContext,
-  Input,
-} from "@servesall/atoms";
-import BottomSheet, {
-  BottomSheetScrollView,
-  BottomSheetFooter,
-} from "@gorhom/bottom-sheet";
-import { useNavigation } from "@react-navigation/native";
-import { useSubmitHook } from "@servesall/organisms";
-import {
-  UserRolesQueryProvider,
-  useUserRoles,
-  UPDATE_MERCHANT_USER,
-} from "@servesall/merchantglobalstate";
-import LottieView from "lottie-react-native";
-
-export default function NewUser({ data }) {
-  const { merchant } = data;
-  const [selectedRole, setSelectedRole] = useState(false);
-  const [userPhoneNumber, setUserPhoneNumber] = useState("");
-  const [userPrefix, setUserPrefix] = useState("+356");
-  const theme = useThemeContext();
-  const navigation = useNavigation();
-
-  const { submitForm, loading, success, error, errorText } = useSubmitHook({
-    gql: UPDATE_MERCHANT_USER,
-    formState: { isValid: true, isDirty: true },
-  });
-
-  useEffect(() => {
-    success && setTimeout(() => navigation.goBack(), 1000);
-  }, [success]);
-
-  const submit = () => {};
-
-  // variables
-  const snapPoints = useMemo(() => ["90%"], []);
-
-  // callbacks
-  const handleSheetChanges = useCallback((index) => {
-    if (index === -1) {
-      navigation.goBack();
-    }
-  }, []);
-
-  const renderFooter = useCallback(
-    (props) => (
-      <BottomSheetFooter {...props} bottomInset={0}>
-        <View
-          style={{
-            backgroundColor: theme.color1,
-            borderTopWidth: 2,
-            borderColor: theme.color7,
-          }}
-        >
-          <Margin>
-            <RoundedBtn
-              active={
-                userPrefix !== "" && userPhoneNumber !== "" && selectedRole
-              }
-              size="small"
-              color={theme.color2}
-              onClick={submit}
-            >
-              <Center>
-                <H3 color={theme.color1}>Save</H3>
-              </Center>
-            </RoundedBtn>
-          </Margin>
-        </View>
-      </BottomSheetFooter>
-    ),
-    [selectedRole, userPhoneNumber, userPrefix]
-  );
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: "rgba(0, 0, 0, 0.4)",
-      }}
-    >
-      <StatusBar barStyle="dark-content" backgroundColor="rgba(0, 0, 0, 0.4)" />
-
-      <BottomSheet
-        index={0}
-        snapPoints={snapPoints}
-        onChange={handleSheetChanges}
-        enablePanDownToClose={true}
-        footerComponent={renderFooter}
-      >
-        <BottomSheetScrollView contentContainerStyle={{ paddingBottom: 100 }}>
-          {loading && (
-            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
-              <Center>
-                <Loader color={theme.color2} />
-              </Center>
-            </FullScreen>
-          )}
-
-          {success && (
-            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
-              <Center>
-                <Success />
-              </Center>
-            </FullScreen>
-          )}
-
-          {error && (
-            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
-              <Center>
-                <Error />
-              </Center>
-            </FullScreen>
-          )}
-          <Box>
-            <View style={{ borderBottomWidth: 2, borderColor: theme.color7 }}>
-              <Margin style={{ alignItems: "center" }}>
-                <LottieView
-                  style={{
-                    width: 80,
-                  }}
-                  autoPlay={true}
-                  loop={true}
-                  source={adduser}
-                />
-                <PaddingTop>
-                  <H3>Add a new user to {merchant.profile.name}</H3>
-                </PaddingTop>
-              </Margin>
-            </View>
-
-            <Margin>
-              {errorText && (
-                <PaddingVertical>
-                  <ErrorText>
-                    <Center>
-                      <Padding>
-                        <H4 color={theme.red}>{errorText}</H4>
-                      </Padding>
-                    </Center>
-                  </ErrorText>
-                </PaddingVertical>
-              )}
-            </Margin>
-
-            <MarginBottom>
-              <Margin>
-                <H3>User phone number</H3>
-              </Margin>
-              <UserPhone
-                theme={theme}
-                setUserPhoneNumber={setUserPhoneNumber}
-                setUserPrefix={setUserPrefix}
-                userPrefix={userPrefix}
-              />
-            </MarginBottom>
-
-            <Margin>
-              <PaddingVertical>
-                <H3>Choose Role</H3>
-              </PaddingVertical>
-              <UserRolesQueryProvider>
-                <Roles
-                  selectedRole={selectedRole}
-                  setSelectedRole={setSelectedRole}
-                  theme={theme}
-                />
-              </UserRolesQueryProvider>
-            </Margin>
-          </Box>
-        </BottomSheetScrollView>
-      </BottomSheet>
-    </View>
-  );
-}