ordering-ui-react-native 0.14.79 → 0.14.80-release

package/src/components/Home/index.tsx

@@ -1,116 +1,114 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { StyleSheet, View, Dimensions } from 'react-native';
-import { OButton, OIcon, OText } from '../shared';
-import { LogoWrapper, Slogan } from './styles';
-import { LanguageSelector } from '../LanguageSelector'
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import { _setStoreData } from '../../providers/StoreUtil';
-
-const windowHeight = Dimensions.get('window').height
-
-export const Home = (props: any) => {
-  const { onNavigationRedirect } = props;
-
-  const theme = useTheme();
-  const [, t] = useLanguage();
-  const [orderState] = useOrder();
-
-  const handleGuessFlow = (page: string, params: any) => {
-    onNavigationRedirect(page, params);
-    _setStoreData('isGuestUser', true);
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.wrapperContent}>
-        <View style={styles.languageSelector}>
-          <LanguageSelector />
-        </View>
-        <LogoWrapper>
-          <OIcon
-            src={theme.images.logos.logotype}
-            style={styles.logo}
-          />
-        </LogoWrapper>
-        <Slogan>
-          <OIcon
-            src={theme.images.general.homeHero}
-            style={styles.slogan}
-          />
-        </Slogan>
-      </View>
-      <View style={styles.wrapperBtn}>
-        <OButton
-          text={t('LOGIN_NOW', 'Login now')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
-          style={styles.buttons}
-          textStyle={{ color: 'white' }}
-          onClick={() => onNavigationRedirect('Login')}
-        />
-        <OButton
-          text={t('SIGNUP', 'Signup')}
-          bgColor={theme.colors.white}
-          borderColor={theme.colors.primary}
-          style={styles.buttons}
-          onClick={() => onNavigationRedirect('Signup')}
-        />
-        <TouchableOpacity
-          style={{ ...styles.textLink, marginTop: 15 }}
-          onPress={() => orderState?.options?.address?.address
-            ? handleGuessFlow('BusinessList',{ isGuestUser: true } )
-            : handleGuessFlow('AddressForm',{ isGuestUser: true } )
-          }
-        >
-          <OText weight='bold' size={18}>
-            {t('CONTINUE_AS_GUEST', 'Continue as guest')}
-          </OText>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  languageSelector: {
-    marginRight: 10
-  },
-  textLink: {
-    flexDirection: 'row',
-    textAlign: 'center',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  logo: {
-    height: 80,
-    width: 250,
-    marginTop: 10
-  },
-  slogan: {
-    height: windowHeight / 2,
-    width: 400
-  },
-  buttons: {
-    marginVertical: 10,
-    marginHorizontal: 30
-  },
-  sloganText: {
-    textAlign: 'center'
-  },
-  wrapperContent: {
-    marginTop: 20,
-  },
-  wrapperBtn: {
-    width: '100%',
-    position: 'absolute',
-    bottom: 0,
-    marginBottom: 20
-  }
-});
+import React from 'react';
+import { useLanguage, useOrder } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { StyleSheet, View, Dimensions, Platform, useWindowDimensions } from 'react-native';
+import { OButton, OIcon, OText } from '../shared';
+import { LogoWrapper, Slogan } from './styles';
+import { LanguageSelector } from '../LanguageSelector'
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { _setStoreData } from '../../providers/StoreUtil';
+
+const windowHeight = Dimensions.get('window').height
+
+export const Home = (props: any) => {
+  const { width, height } = useWindowDimensions();
+  const { onNavigationRedirect } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+
+  const handleGuessFlow = (page: string, params: any) => {
+    onNavigationRedirect(page, params);
+    _setStoreData('isGuestUser', true);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.wrapperContent}>
+        <View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0, marginLeft: 10 }}>
+          <LanguageSelector />
+        </View>
+        <LogoWrapper>
+          <OIcon
+            src={theme.images.logos.logotype}
+            style={styles.logo}
+          />
+        </LogoWrapper>
+        <Slogan>
+          <OIcon
+            src={theme.images.general.homeHero}
+            style={styles.slogan}
+          />
+        </Slogan>
+      </View>
+      <View style={styles.wrapperBtn}>
+        <OButton
+          text={t('LOGIN_NOW', 'Login now')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={styles.buttons}
+          textStyle={{ color: 'white' }}
+          onClick={() => onNavigationRedirect('Login')}
+        />
+        <OButton
+          text={t('SIGNUP', 'Signup')}
+          bgColor={theme.colors.white}
+          borderColor={theme.colors.primary}
+          style={styles.buttons}
+          onClick={() => onNavigationRedirect('Signup')}
+        />
+        <TouchableOpacity
+          style={{ ...styles.textLink, marginTop: 15 }}
+          onPress={() => orderState?.options?.address?.address
+            ? handleGuessFlow('BusinessList',{ isGuestUser: true } )
+            : handleGuessFlow('AddressForm',{ isGuestUser: true } )
+          }
+        >
+          <OText weight='bold' size={18}>
+            {t('CONTINUE_AS_GUEST', 'Continue as guest')}
+          </OText>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  textLink: {
+    flexDirection: 'row',
+    textAlign: 'center',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  logo: {
+    height: 80,
+    width: 250,
+    marginTop: 10
+  },
+  slogan: {
+    height: windowHeight / 2,
+    width: 400
+  },
+  buttons: {
+    marginVertical: 10,
+    marginHorizontal: 30
+  },
+  sloganText: {
+    textAlign: 'center'
+  },
+  wrapperContent: {
+    marginTop: 20,
+  },
+  wrapperBtn: {
+    width: '100%',
+    position: 'absolute',
+    bottom: 0,
+    marginBottom: 20
+  }
+});

package/src/components/Home/styles.tsx

@@ -1,18 +1,18 @@
-import styled from 'styled-components/native';
-
-export const Container = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`
-
-export const LogoWrapper = styled.View`
-  align-items: center;
-`;
-
-export const Slogan = styled.View`
-  align-items: center;
-  margin-bottom: 10px;
-`;
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`
+
+export const LogoWrapper = styled.View`
+  align-items: center;
+`;
+
+export const Slogan = styled.View`
+  align-items: center;
+  margin-bottom: 10px;
+`;

package/src/components/LanguageSelector/index.tsx

@@ -1,149 +1,117 @@
-import React, { useState, useEffect } from 'react'
-import { I18nManager, TouchableOpacity, ActivityIndicator, View, Platform } from 'react-native'
-import { useTheme } from 'styled-components/native'
-import {
-  LanguageSelector as LanguageSelectorController,
-  useLanguage
-} from 'ordering-components/native'
-import { StyleSheet } from 'react-native'
-import RNRestart from 'react-native-restart'
-import Picker from 'react-native-country-picker-modal';
-
-import { Container, SelectItemBtn, SelectItem } from './styles'
-import { LanguageSelectorParams } from '../../types'
-import { OText } from '../shared'
-
-const LanguageSelectorUI = (props: LanguageSelectorParams) => {
-  const {
-    languagesState,
-    currentLanguage,
-    handleChangeLanguage,
-    isFromProfile
-  } = props
-
-  const theme = useTheme()
-  const [languageState] = useLanguage()
-  const [isOpen, setIsOpen] = useState(false);
-  const [optionSelected, setOptionSelected] = useState<any>(null)
-  let current;
-
-  const styles = StyleSheet.create({
-    itemSelected: {
-      backgroundColor: theme.colors.disabled,
-    },
-    closeBtn: {
-      width: 40,
-      height: 40,
-    }
-  })
-
-  const _languages = languagesState?.languages?.map((language: any) => {
-    return {
-      key: language.code,
-      value: language.code,
-      label: language.name.toUpperCase()
-    }
-  })
-  _languages && _languages.sort((a: any, b: any) =>
-    (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0)
-  )
-
-  const langSelectedObj: any = _languages && _languages.find((item: any) => item.value === currentLanguage) || {}
-
-  const changeDirection = async (language: any) => {
-    if(language !== 'ar'){
-      if (I18nManager.isRTL){
-        await I18nManager.forceRTL(false)
-        RNRestart.Restart();
-      }
-    } else {
-      if(!I18nManager.isRTL){
-        await I18nManager.forceRTL(true)
-        RNRestart.Restart();
-      }
-    }
-  }
-
-  const handlerChangeLanguage = (langCode: any) => {
-    setOptionSelected(langCode)
-    changeDirection(langCode)
-    handleChangeLanguage(langCode)
-  }
-
-  useEffect(() => {
-    if (optionSelected === languageState?.language?.code && !languageState.loading) {
-      setIsOpen(false)
-    }
-  }, [languageState])
-
-  return (
-    <Container>
-      {languagesState?.languages && (
-        <Picker
-          countryCodes={current}
-          visible={isOpen}
-          onClose={() => setIsOpen(false)}
-          withCountryNameButton
-          // @ts-ignore
-          closeButtonStyle={{
-            width: '100%',
-            alignItems: 'flex-end',
-            padding: 10
-          }}
-          closeButtonImageStyle={Platform.OS === 'ios' && styles.closeBtn}
-          renderFlagButton={() => (
-            <>
-              <TouchableOpacity
-                onPress={() => setIsOpen(true)}
-                disabled={_languages.length === 0 || languageState.loading}
-              >
-                <SelectItemBtn isFromProfile={isFromProfile}>
-                  <OText
-                    color={theme.colors.secundaryContrast}
-                    size={14}
-                  >
-                    {langSelectedObj.key.toUpperCase()}
-                  </OText>
-                </SelectItemBtn>
-              </TouchableOpacity>
-            </>
-          )}
-          flatListProps={{
-            keyExtractor: (item: any) => item.value,
-            data: _languages || [],
-            renderItem: ({ item }: any) => (
-              <TouchableOpacity
-                style={langSelectedObj.value === item.value && styles.itemSelected}
-                disabled={langSelectedObj.value === item.value || languageState.loading}
-                onPress={() => handlerChangeLanguage(item.value)}
-              >
-                <SelectItem>
-                  <View style={{ width: 40 }}>
-                    {optionSelected === item.value && languageState.loading && (
-                      <ActivityIndicator size="small" color={theme.colors.primary} />
-                    )}
-                  </View>
-                  <OText
-                    size={14}
-                    style={{ marginRight: 10 }}
-                  >
-                    {item.label}
-                  </OText>
-                </SelectItem>
-              </TouchableOpacity>
-            ),
-          }}
-        />
-      )}
-    </Container>
-  )
-}
-
-export const LanguageSelector = (props: LanguageSelectorParams) => {
-  const LanguageProps = {
-    ...props,
-    UIComponent: LanguageSelectorUI
-  }
-
-  return <LanguageSelectorController {...LanguageProps} />
-}
+import React, { useState } from 'react'
+import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { I18nManager, Platform, StyleSheet, View } from 'react-native'
+
+import RNPickerSelect from 'react-native-picker-select'
+import { Container, DummyContainer } from './styles'
+import { LanguageSelectorParams } from '../../types'
+import { OIcon } from '../shared'
+import RNRestart from 'react-native-restart'
+
+const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+
+  const {
+    languagesState,
+    currentLanguage,
+    handleChangeLanguage,
+    pickerStyle
+  } = props
+
+  const [orderState] = useOrder()
+  const theme = useTheme();
+
+  const [language, setLanguage] = useState(currentLanguage)
+
+  const _pickerStyle = StyleSheet.create({
+    inputAndroid: {
+      color: '#000',
+      borderWidth: 1,
+      borderColor: theme.colors.clear,
+      padding: 10,
+      height: 40,
+      backgroundColor: theme.colors.disabled,
+      borderRadius: 8
+    },
+    inputIOS: {
+      color: '#000',
+      padding: 10,
+      height: 40,
+      borderWidth: 1,
+      marginStart: 20,
+      borderColor: theme.colors.clear,
+      backgroundColor: theme.colors.clear,
+    },
+    icon: {
+      width: 10,
+      marginTop: 9,
+      marginEnd: 10
+    },
+    placeholder: {
+      color: theme.colors.secundaryContrast
+    },
+    chevronDown: {
+      display: 'none'
+    },
+    chevronUp: {
+      display: 'none'
+    }
+  })
+
+  const _languages = languagesState?.languages?.map((language: any) => {
+    return {
+      value: language?.code,
+      label: language?.name,
+      inputLabel: language?.name
+    }
+  })
+  _languages && _languages.sort((a: any, b: any) =>
+    (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
+  )
+
+  const changeDirection = async (language: any) => {
+    if (language !== 'ar') {
+      if (I18nManager.isRTL) {
+        await I18nManager.forceRTL(false)
+        RNRestart.Restart();
+      }
+    } else {
+      if (!I18nManager.isRTL) {
+        await I18nManager.forceRTL(true)
+        RNRestart.Restart();
+      }
+    }
+  }
+
+  const handlerChangeLanguage = (langCode?: any) => {
+    changeDirection(Platform.OS === 'ios' ? language : langCode)
+    handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
+  }
+
+  return (
+    <Container>
+      {languagesState?.languages ? (
+        <RNPickerSelect
+          onValueChange={(val) => Platform.OS === 'ios' ? setLanguage(val) : handlerChangeLanguage(val)}
+          items={_languages || []}
+          value={Platform.OS === 'ios' ? language : currentLanguage}
+          style={pickerStyle ? pickerStyle : _pickerStyle}
+          useNativeAndroidPickerStyle={false}
+          placeholder={{}}
+          disabled={orderState.loading}
+          onClose={() => Platform.OS === 'ios' ? handlerChangeLanguage() : {}}
+          onDonePress={() => handlerChangeLanguage()}
+        />
+      ) : <DummyContainer />}
+    </Container>
+  )
+}
+
+export const LanguageSelector = (props: LanguageSelectorParams) => {
+  const LanguageProps = {
+    ...props,
+    UIComponent: LanguageSelectorUI
+  }
+
+  return <LanguageSelectorController {...LanguageProps} />
+}

package/src/components/LanguageSelector/styles.tsx

@@ -1,23 +1,10 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-  align-items: flex-end;
-  justify-content: flex-end;
-  flex-direction: row;
-`
-
-export const SelectItem = styled.View`
-  padding: 8px;
-  align-items: center;
-  flex-direction: row;
-`;
-
-export const SelectItemBtn = styled(SelectItem)`
-  border-width: 1px;
-  border-color: transparent;
-  border-radius: 10px;
-  max-width: 140px;
-  margin-vertical: 5px;
-  padding: 15px 20px;
-  background-color: ${(props: any) => props.isFromProfile ? 'transparent' : props.theme.colors.inputDisabled};
-`
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+`
+export const DummyContainer = styled.View`
+  height: 40px;
+`