ordering-ui-react-native 0.15.7 → 0.15.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/Home/index.tsx

@@ -1,7 +1,7 @@
 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 { StyleSheet, View, Dimensions, Platform, useWindowDimensions } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LogoWrapper, Slogan } from './styles';
 import { LanguageSelector } from '../LanguageSelector'
@@ -11,6 +11,7 @@ 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();
@@ -25,7 +26,7 @@ export const Home = (props: any) => {
   return (
     <View style={styles.container}>
       <View style={styles.wrapperContent}>
-        <View style={styles.languageSelector}>
+        <View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0, marginLeft: 10 }}>
           <LanguageSelector />
         </View>
         <LogoWrapper>
@@ -74,9 +75,6 @@ export const Home = (props: any) => {
 };
 
 const styles = StyleSheet.create({
-  languageSelector: {
-    marginRight: 10
-  },
   textLink: {
     flexDirection: 'row',
     textAlign: 'center',

package/src/components/LanguageSelector/index.tsx

@@ -1,140 +1,108 @@
-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 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 { Container, SelectItemBtn, SelectItem } from './styles'
+import RNPickerSelect from 'react-native-picker-select'
+import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
-import { OText } from '../shared'
+import { OIcon } from '../shared'
+import RNRestart from 'react-native-restart'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+
   const {
     languagesState,
     currentLanguage,
     handleChangeLanguage,
-    isFromProfile
+    pickerStyle
   } = props
 
-  const theme = useTheme()
-  const [languageState] = useLanguage()
-  const [isOpen, setIsOpen] = useState(false);
-  const [optionSelected, setOptionSelected] = useState<any>(null)
-  let current;
+  const [orderState] = useOrder()
+  const theme = useTheme();
 
-  const styles = StyleSheet.create({
-    itemSelected: {
+  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
     },
-    closeBtn: {
-      width: 40,
+    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 {
-      key: language.code,
-      value: language.code,
-      label: language.name.toUpperCase()
+      value: language?.code,
+      label: language?.name,
+      inputLabel: language?.name
     }
   })
   _languages && _languages.sort((a: any, b: any) =>
-    (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0)
+    (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
   )
 
-  const langSelectedObj: any = _languages && _languages.find((item: any) => item.value === currentLanguage) || {}
-
   const changeDirection = async (language: any) => {
-    if(language !== 'ar'){
-      if (I18nManager.isRTL){
+    if (language !== 'ar') {
+      if (I18nManager.isRTL) {
         await I18nManager.forceRTL(false)
         RNRestart.Restart();
       }
     } else {
-      if(!I18nManager.isRTL){
+      if (!I18nManager.isRTL) {
         await I18nManager.forceRTL(true)
         RNRestart.Restart();
       }
     }
   }
 
-  const handlerChangeLanguage = (langCode: any) => {
-    setOptionSelected(langCode)
-    changeDirection(langCode)
-    handleChangeLanguage(langCode)
+  const handlerChangeLanguage = (langCode?: any) => {
+    changeDirection(Platform.OS === 'ios' ? language : langCode)
+    handleChangeLanguage(Platform.OS === 'ios' ? language : 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>
-            ),
-          }}
+      {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>
   )
 }

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;
+  justify-content: flex-start;
   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};
+`
+export const DummyContainer = styled.View`
+  height: 40px;
 `

package/src/components/UserProfileForm/index.tsx

@@ -47,6 +47,40 @@ export const UserProfileForm = (props: ProfileParams) => {
     }
   });
 
+  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,
+      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 onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
@@ -97,7 +131,7 @@ export const UserProfileForm = (props: ProfileParams) => {
       <View>
         <LanguageContainer>
           <Ionicons name='globe-outline' style={styles.iconStyle} />
-          <LanguageSelector isFromProfile />
+          <LanguageSelector pickerStyle={_pickerStyle} />
         </LanguageContainer>
         <LogoutButton />
       </View>

package/src/types/index.tsx

@@ -113,6 +113,7 @@ export interface LanguageSelectorParams {
   currentLanguage?: string;
   handleChangeLanguage?: any;
   isFromProfile?: boolean,
+  pickerStyle?: any
 }
 export interface BusinessesListingParams {
   navigation?: any;