ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/LanguageSelector/index.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View, StyleSheet } from 'react-native';
+import CountryPicker, { Flag } from 'react-native-country-picker-modal';
+import { useTheme } from 'styled-components/native';
+import {
+  LanguageSelector as LanguageSelectorController,
+  useLanguage,
+} from 'ordering-components/native';
+import { Container, LanguageItem } from './styles';
+import langCountries from './lang_country.json';
+import { OText, OIcon } from '../shared';
+import { LanguageSelectorParams } from '../../types';
+
+const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+  const { languagesState, currentLanguage, handleChangeLanguage } = props;
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+
+  const [isCountryModalVisible, setCountryModalVisible] = useState(false);
+
+  const _languages = languagesState?.languages?.map((language: any) => {
+    return {
+      key: language?.code,
+      value: language?.code,
+      label: language?.name,
+      inputLabel: language?.code.toUpperCase(),
+      countryCode: langCountries.find(item => item.value == language?.code)
+        ?.countryCode,
+    };
+  });
+
+  _languages &&
+    _languages?.sort((a: any, b: any) =>
+      a.content > b.content ? 1 : b.content > a.content ? -1 : 0,
+    );
+
+  const countryCodes = _languages?.map((item: any) => item.countryCode);
+
+  const currentLanguageData = _languages?.find(
+    (item: any) => item.value == currentLanguage,
+  );
+
+  const styles = StyleSheet.create({
+    text: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 16,
+    },
+  });
+
+  return (
+    <Container style={{ backgroundColor: theme.colors.inputChat }}>
+      {languagesState?.languages && (
+        <CountryPicker
+          countryCode={currentLanguageData}
+          visible={isCountryModalVisible}
+          onClose={() => setCountryModalVisible(false)}
+          withCountryNameButton
+          countryCodes={countryCodes}
+          //@ts-ignore
+          renderFlagButton={() => (
+            <TouchableOpacity onPress={() => setCountryModalVisible(true)}>
+              <LanguageItem justifyContent="space-between">
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  <Flag
+                    withEmoji
+                    flagSize={24}
+                    countryCode={currentLanguageData?.countryCode}
+                  />
+
+                  <OText style={styles.text}>
+                    {currentLanguageData?.label}
+                  </OText>
+                </View>
+
+                <OIcon
+                  src={theme?.images?.general?.chevronDown}
+
+                  width={20}
+                  height={20}
+                />
+              </LanguageItem>
+            </TouchableOpacity>
+          )}
+          flatListProps={{
+            keyExtractor: (item: any) => item.value,
+            data: _languages || [],
+            renderItem: ({ item }: any) => (
+              <TouchableOpacity
+                onPress={() => {
+                  handleChangeLanguage(item.value);
+                  setCountryModalVisible(false);
+                }}
+                activeOpacity={1}>
+                <LanguageItem>
+                  <View />
+
+                  <Flag
+                    withEmoji
+                    flagSize={24}
+                    countryCode={item.countryCode}
+                  />
+
+                  <OText style={styles.text}>{t(item.code, item.label)}</OText>
+                </LanguageItem>
+              </TouchableOpacity>
+            ),
+          }}
+        />
+      )}
+    </Container>
+  );
+};
+
+export const LanguageSelector = (props: LanguageSelectorParams) => {
+  const LanguageProps = {
+    ...props,
+    UIComponent: LanguageSelectorUI,
+  };
+
+  return <LanguageSelectorController {...LanguageProps} />;
+};

package/themes/business/src/components 2/LanguageSelector/lang_country.json

@@ -0,0 +1,152 @@
+[
+  {
+    "inputLabel": "EN",
+    "label": "English",
+    "value": "en",
+    "countryCode": "US"
+  },
+  {
+    "inputLabel": "DE",
+    "label": "German",
+    "value": "de",
+    "countryCode": "DE"
+  },
+  {
+    "inputLabel": "ES",
+    "label": "Spanish",
+    "value": "es",
+    "countryCode": "ES"
+  },
+  {
+    "inputLabel": "MX",
+    "label": "Spanish",
+    "value": "es-419-1",
+    "countryCode": "MX"
+  },
+  {
+    "inputLabel": "MX",
+    "label": "Spanish",
+    "value": "es-419-2",
+    "countryCode": "GT"
+  },
+  {
+    "inputLabel": "DA",
+    "label": "Danish",
+    "value": "da",
+    "countryCode": "DK"
+  },
+  {
+    "inputLabel": "NL",
+    "label": "Dutch",
+    "value": "nl",
+    "countryCode": "NL"
+  },
+  {
+    "inputLabel": "PT",
+    "label": "Portuguese",
+    "value": "pt",
+    "countryCode": "PT"
+  },
+  {
+    "inputLabel": "CA",
+    "label": "Catalan",
+    "value": "ca",
+    "countryCode": "ES"
+  },
+  {
+    "inputLabel": "FR",
+    "label": "French",
+    "value": "fr",
+    "countryCode": "FR"
+  },
+  {
+    "inputLabel": "TR",
+    "label": "Turkish",
+    "value": "tr",
+    "countryCode": "TR"
+  },
+  {
+    "inputLabel": "KM",
+    "label": "Cambodian",
+    "value": "km",
+    "countryCode": "KH"
+  },
+  {
+    "inputLabel": "ZH-CN",
+    "label": "Chinese Simplified",
+    "value": "zh-CN",
+    "countryCode": "CN"
+  },
+  {
+    "inputLabel": "HI",
+    "label": "Hindi",
+    "value": "hi",
+    "countryCode": "IN"
+  },
+  {
+    "inputLabel": "ID",
+    "label": "Indonesian",
+    "value": "id",
+    "countryCode": "ID"
+  },
+  {
+    "inputLabel": "KN",
+    "label": "Kannad",
+    "value": "kn",
+    "countryCode": "IN"
+  },
+  {
+    "inputLabel": "MS",
+    "label": "Malay",
+    "value": "ms",
+    "countryCode": "MY"
+  },
+  {
+    "inputLabel": "TA",
+    "label": "Tamil",
+    "value": "ta",
+    "countryCode": "IN"
+  },
+  {
+    "inputLabel": "AR",
+    "label": "Arabic",
+    "value": "ar",
+    "countryCode": "EG"
+  },
+  {
+    "inputLabel": "RU",
+    "label": "Russian",
+    "value": "ru",
+    "countryCode": "RU"
+  },
+  {
+    "inputLabel": "JA",
+    "label": "Japanese",
+    "value": "ja",
+    "countryCode": "JP"
+  },
+  {
+    "inputLabel": "BN",
+    "label": "Bengali",
+    "value": "bn",
+    "countryCode": "BD"
+  },
+  {
+    "inputLabel": "IT",
+    "label": "Italian",
+    "value": "it",
+    "countryCode": "IT"
+  },
+  {
+    "inputLabel": "EL",
+    "label": "Greek",
+    "value": "el",
+    "countryCode": "GR"
+  },
+  {
+    "inputLabel": "BG",
+    "label": "Bulgarian Translation",
+    "value": "bg",
+    "countryCode": "BG"
+  }
+]

package/themes/business/src/components 2/LanguageSelector/styles.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  justify-content: flex-end;
+  flex-direction: column;
+  border-radius: 7.6px;
+  margin-bottom: 18px;
+  width: 100%;
+`;
+
+export const LanguageItem = styled.View`
+  padding: 8px;
+  align-items: center;
+  flex-direction: row;
+  justify-content: ${(props: any) =>
+    props?.justifyContent ? props?.justifyContent : 'flex-start'};
+`;