ordering-ui-react-native 0.12.77 → 0.12.78

package/src/components/FacebookLogin/styles.tsx

@@ -1,23 +1,23 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-  margin-bottom: 10px;
-`
-
-export const FacebookButton = styled.TouchableOpacity`
-  background-color: #EFEFEF;
-  border-color: #EFEFEF;
-  border-radius: 30px;
-  font-size: 16px;
-  padding: 15px 30px;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  height: 52px;
-`
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  margin-bottom: 10px;
+`
+
+export const FacebookButton = styled.TouchableOpacity`
+  background-color: #EFEFEF;
+  border-color: #EFEFEF;
+  border-radius: 30px;
+  font-size: 16px;
+  padding: 15px 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 52px;
+`

package/src/components/FloatingButton/index.tsx

@@ -1,74 +1,74 @@
-import React from 'react'
-import { FloatingButton as FloatingButtonController } from 'ordering-components/native'
-import { FloatingButtonParams } from '../../types'
-import {
-  Container,
-  Button
-} from './styles'
-import { OText } from '../shared'
-import { StyleSheet, Platform } from 'react-native'
-import { useTheme } from 'styled-components/native'
-
-const FloatingButtonUI = (props: FloatingButtonParams) => {
-  const {
-    btnLeftValue,
-    btnRightValue,
-    btnLeftValueShow,
-    btnRightValueShow,
-    btnText,
-    handleButtonClick,
-    disabled,
-    isSecondaryBtn
-  } = props
-
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    primaryBtn: {
-      backgroundColor: theme.colors.primary,
-    },
-    secodaryBtn: {
-      backgroundColor: theme.colors.textSecondary,
-    },
-    btnTextStyle: {
-      position: 'absolute',
-      width: '100%',
-      paddingBottom: 5,
-      left: 0,
-      textAlign: 'center',
-    }
-  })
-
-  return (
-    <Container
-      isIos={Platform.OS === 'ios'}
-    >
-      <Button
-        style={[isSecondaryBtn ? styles.secodaryBtn: styles.primaryBtn]}
-        onPress={handleButtonClick}
-        disabled={disabled}
-      >
-        <OText color={theme.colors.white} size={16} mLeft={20}>
-          {btnLeftValueShow ? btnLeftValue : ''}
-        </OText>
-        <OText style={styles.btnTextStyle} color={theme.colors.white} size={16} weight='bold'>
-          {btnText}
-        </OText>
-        <OText color={theme.colors.white} size={16} mRight={20}>
-          {btnRightValueShow ? btnRightValue : ''}
-        </OText>
-      </Button>
-    </Container>
-  )
-}
-
-export const FloatingButton = (props: FloatingButtonParams) => {
-  const floatingButtonProps = {
-    ...props,
-    UIComponent: FloatingButtonUI
-  }
-
-  return (
-    <FloatingButtonController {...floatingButtonProps} />
-  )
-}
+import React from 'react'
+import { FloatingButton as FloatingButtonController } from 'ordering-components/native'
+import { FloatingButtonParams } from '../../types'
+import {
+  Container,
+  Button
+} from './styles'
+import { OText } from '../shared'
+import { StyleSheet, Platform } from 'react-native'
+import { useTheme } from 'styled-components/native'
+
+const FloatingButtonUI = (props: FloatingButtonParams) => {
+  const {
+    btnLeftValue,
+    btnRightValue,
+    btnLeftValueShow,
+    btnRightValueShow,
+    btnText,
+    handleButtonClick,
+    disabled,
+    isSecondaryBtn
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    primaryBtn: {
+      backgroundColor: theme.colors.primary,
+    },
+    secodaryBtn: {
+      backgroundColor: theme.colors.textSecondary,
+    },
+    btnTextStyle: {
+      position: 'absolute',
+      width: '100%',
+      paddingBottom: 5,
+      left: 0,
+      textAlign: 'center',
+    }
+  })
+
+  return (
+    <Container
+      isIos={Platform.OS === 'ios'}
+    >
+      <Button
+        style={[isSecondaryBtn ? styles.secodaryBtn: styles.primaryBtn]}
+        onPress={handleButtonClick}
+        disabled={disabled}
+      >
+        <OText color={theme.colors.white} size={16} mLeft={20}>
+          {btnLeftValueShow ? btnLeftValue : ''}
+        </OText>
+        <OText style={styles.btnTextStyle} color={theme.colors.white} size={16} weight='bold'>
+          {btnText}
+        </OText>
+        <OText color={theme.colors.white} size={16} mRight={20}>
+          {btnRightValueShow ? btnRightValue : ''}
+        </OText>
+      </Button>
+    </Container>
+  )
+}
+
+export const FloatingButton = (props: FloatingButtonParams) => {
+  const floatingButtonProps = {
+    ...props,
+    UIComponent: FloatingButtonUI
+  }
+
+  return (
+    <FloatingButtonController {...floatingButtonProps} />
+  )
+}

package/src/components/FloatingButton/styles.tsx

@@ -1,32 +1,32 @@
-import styled, { css } from 'styled-components/native'
-
-export const Container = styled.View`
-  position: absolute;
-  flex: 1;
-  bottom: 0px;
-  left: 0;
-  padding: 10px;
-  border-top-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.lightGray};
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #FFF;
-  z-index: 1000;
-
-  ${((props: any) => props.isIos && css `
-    padding-bottom: 20px;
-  `)}
-`
-
-export const Button = styled.TouchableOpacity`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  width: 90%;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 25px;
-  height: 50px;
-`
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  position: absolute;
+  flex: 1;
+  bottom: 0px;
+  left: 0;
+  padding: 10px;
+  border-top-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.lightGray};
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFF;
+  z-index: 1000;
+
+  ${((props: any) => props.isIos && css `
+    padding-bottom: 20px;
+  `)}
+`
+
+export const Button = styled.TouchableOpacity`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 90%;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 25px;
+  height: 50px;
+`

package/src/components/ForgotPasswordForm/index.tsx

@@ -1,150 +1,150 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-
-import {
-  ForgotPasswordForm as ForgotPasswordController,
-  useLanguage,
-  ToastType,
-  useToast
-} from 'ordering-components/native';
-
-import NavBar from '../NavBar';
-import { FormInput, FormSide } from '../../components/LoginForm/styles'
-import {Container} from './styles'
-
-import { OButton, OInput, OText } from '../shared';
-import { useTheme } from 'styled-components/native';
-
-const ForgotPasswordUI = (props: any) => {
-  const {
-    navigation,
-    formState,
-    handleButtonForgotPasswordClick,
-  } = props;
-
-  const theme = useTheme();
-
-  const styles = StyleSheet.create({
-    inputStyle: {
-      marginBottom: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.disabled
-    }
-  });
-
-  const [, t] = useLanguage();
-  const [, { showToast }] = useToast();
-  const { control, handleSubmit, errors } = useForm();
-
-  const [emailSent, setEmailSent] = useState(null);
-
-  const onSubmit = (values: any) => {
-    setEmailSent(values.email)
-    handleButtonForgotPasswordClick && handleButtonForgotPasswordClick(values)
-  }
-
-  const handleChangeInputEmail = (value : string, onChange : any) => {
-    onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-  }
-
-  useEffect(() => {
-    if (!formState.loading && emailSent) {
-      if (formState.result?.error) {
-        setEmailSent(null)
-        formState.result?.result && showToast(
-          ToastType.Error,
-          formState.result?.result[0]
-        )
-        return
-      }
-      showToast(
-        ToastType.Success,
-        `${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${emailSent}`
-      )
-    }
-  }, [formState])
-
-  useEffect(() => {
-    if (Object.keys(errors).length > 0) {
-      // Convert all errors in one string to show in toast provider
-      const list = Object.values(errors)
-      let stringError = ''
-      list.map((item: any, i: number) => {
-        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
-      })
-      showToast(ToastType.Error, stringError)
-    }
-  }, [errors])
-
-  return (
-    <Container>
-      <NavBar
-        title={t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
-        titleAlign={'center'}
-        onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-        showCall={false}
-        paddingTop={0}
-      />
-      <FormSide>
-        <OText
-          color={'gray'}
-          size={16}
-          weight={'300'}
-          style={{ marginBottom: 30 }}
-        >
-          {t('FORGOT_PASSWORD_TEXT_MESSAGE', "Enter your email address and we'll sent a link to reset your password.")}
-        </OText>
-        <FormInput>
-          <Controller
-            control={control}
-            render={({ onChange, value }: any) => (
-              <OInput
-                placeholder={t('EMAIL', 'Email')}
-                style={styles.inputStyle}
-                icon={theme.images.general.email}
-                onChange={(e: any) => {
-                  handleChangeInputEmail(e, onChange)
-                }}
-                value={value}
-                autoCapitalize='none'
-                autoCorrect={false}
-                type='email-address'
-                autoCompleteType='email'
-                returnKeyType='done'
-                blurOnSubmit
-                onSubmitEditing={handleSubmit(onSubmit)}
-              />
-            )}
-            name="email"
-            rules={{
-              required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
-              pattern: {
-                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-              }
-            }}
-            defaultValue=""
-          />
-
-          <OButton
-            text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-            textStyle={{ color: 'white' }}
-            bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-            borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-            isLoading={formState.loading}
-            onClick={emailSent && !formState.result?.error ? () => {} : handleSubmit(onSubmit)}
-          />
-        </FormInput>
-      </FormSide>
-    </Container>
-  );
-};
-
-export const ForgotPasswordForm = (props:  any) => {
-  const ForgotPasswordProps = {
-    ...props,
-    UIComponent: ForgotPasswordUI
-  }
-  return <ForgotPasswordController {...ForgotPasswordProps} />
-}
+import React, { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+
+import {
+  ForgotPasswordForm as ForgotPasswordController,
+  useLanguage,
+  ToastType,
+  useToast
+} from 'ordering-components/native';
+
+import NavBar from '../NavBar';
+import { FormInput, FormSide } from '../../components/LoginForm/styles'
+import {Container} from './styles'
+
+import { OButton, OInput, OText } from '../shared';
+import { useTheme } from 'styled-components/native';
+
+const ForgotPasswordUI = (props: any) => {
+  const {
+    navigation,
+    formState,
+    handleButtonForgotPasswordClick,
+  } = props;
+
+  const theme = useTheme();
+
+  const styles = StyleSheet.create({
+    inputStyle: {
+      marginBottom: 25,
+      borderWidth: 1,
+      borderColor: theme.colors.disabled
+    }
+  });
+
+  const [, t] = useLanguage();
+  const [, { showToast }] = useToast();
+  const { control, handleSubmit, errors } = useForm();
+
+  const [emailSent, setEmailSent] = useState(null);
+
+  const onSubmit = (values: any) => {
+    setEmailSent(values.email)
+    handleButtonForgotPasswordClick && handleButtonForgotPasswordClick(values)
+  }
+
+  const handleChangeInputEmail = (value : string, onChange : any) => {
+    onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
+  }
+
+  useEffect(() => {
+    if (!formState.loading && emailSent) {
+      if (formState.result?.error) {
+        setEmailSent(null)
+        formState.result?.result && showToast(
+          ToastType.Error,
+          formState.result?.result[0]
+        )
+        return
+      }
+      showToast(
+        ToastType.Success,
+        `${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${emailSent}`
+      )
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors)
+      let stringError = ''
+      list.map((item: any, i: number) => {
+        stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
+      })
+      showToast(ToastType.Error, stringError)
+    }
+  }, [errors])
+
+  return (
+    <Container>
+      <NavBar
+        title={t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
+        titleAlign={'center'}
+        onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+        showCall={false}
+        paddingTop={0}
+      />
+      <FormSide>
+        <OText
+          color={'gray'}
+          size={16}
+          weight={'300'}
+          style={{ marginBottom: 30 }}
+        >
+          {t('FORGOT_PASSWORD_TEXT_MESSAGE', "Enter your email address and we'll sent a link to reset your password.")}
+        </OText>
+        <FormInput>
+          <Controller
+            control={control}
+            render={({ onChange, value }: any) => (
+              <OInput
+                placeholder={t('EMAIL', 'Email')}
+                style={styles.inputStyle}
+                icon={theme.images.general.email}
+                onChange={(e: any) => {
+                  handleChangeInputEmail(e, onChange)
+                }}
+                value={value}
+                autoCapitalize='none'
+                autoCorrect={false}
+                type='email-address'
+                autoCompleteType='email'
+                returnKeyType='done'
+                blurOnSubmit
+                onSubmitEditing={handleSubmit(onSubmit)}
+              />
+            )}
+            name="email"
+            rules={{
+              required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
+              }
+            }}
+            defaultValue=""
+          />
+
+          <OButton
+            text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
+            textStyle={{ color: 'white' }}
+            bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
+            borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
+            isLoading={formState.loading}
+            onClick={emailSent && !formState.result?.error ? () => {} : handleSubmit(onSubmit)}
+          />
+        </FormInput>
+      </FormSide>
+    </Container>
+  );
+};
+
+export const ForgotPasswordForm = (props:  any) => {
+  const ForgotPasswordProps = {
+    ...props,
+    UIComponent: ForgotPasswordUI
+  }
+  return <ForgotPasswordController {...ForgotPasswordProps} />
+}

package/src/components/ForgotPasswordForm/styles.tsx

@@ -1,11 +1,11 @@
-import styled from 'styled-components/native';
-
-export const Wrapper = styled.View`
-  background-color: white;
-  min-height: 200px;
-  padding: 0px 25px;
-`;
-
-export const Container = styled.View`
-  padding-bottom: 40px;
-`
+import styled from 'styled-components/native';
+
+export const Wrapper = styled.View`
+  background-color: white;
+  min-height: 200px;
+  padding: 0px 25px;
+`;
+
+export const Container = styled.View`
+  padding-bottom: 40px;
+`