@momo-kits/foundation 0.103.1 → 0.103.2

package/Application/Localize.ts

@@ -17,20 +17,27 @@ class Localize {
     }
   }
 
+  get getCurrentLanguage() {
+    return this.currentLanguage;
+  }
+
+  get getAssets() {
+    return this.assets;
+  }
+
   translate(key: string) {
     return this.assets[this.currentLanguage]?.[key] || key;
   }
 
   translateData(data: {vi: string; en: string}) {
-    return data[this.currentLanguage] || data.vi || JSON.stringify(data);
+    return data[this.currentLanguage] || JSON.stringify(data);
   }
 
   addTranslations(translations: LocalizationObject) {
-    this.assets = translations;
-  }
-
-  setLanguage(language: 'en' | 'vi') {
-    this.currentLanguage = language;
+    this.assets = {
+      vi: {...translations?.vi, ...this.assets.vi},
+      en: {...translations?.en, ...this.assets.en},
+    };
   }
 }
 

package/Application/NavigationContainer.tsx

@@ -13,12 +13,13 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import Localize from './Localize';
+import {defaultTheme} from '../Consts';
 
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
-  theme,
+  theme = defaultTheme,
   options,
   maxApi,
   initialParams,

package/Layout/styles.ts

@@ -42,7 +42,6 @@ export default StyleSheet.create({
     padding: 12,
   },
   item: {
-    overflow: 'hidden',
     margin: undefined,
     marginTop: undefined,
     marginBottom: undefined,

package/Tag/index.tsx

@@ -31,6 +31,8 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
+  accessibilityLabelContainer,
+  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -60,7 +62,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={accessibilityLabelContainer}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -69,7 +73,10 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s_medium'}>
+      <Text
+        color={labelColor}
+        typography={'label_s_medium'}
+        accessibilityLabel={accessibilityLabelText}>
         {label}
       </Text>
     </View>

package/Tag/types.ts

@@ -33,4 +33,16 @@ export type TagProps = {
    * that can be applied to the Tag component.
    */
   customColor?: string;
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabelContainer?: string;
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabelText?: string;
 };

package/Text/index.tsx

@@ -3,7 +3,7 @@ import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Application';
-import {scaleSize} from './utils';
+import {getAccessibilityID, scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -109,6 +109,7 @@ const Text: React.FC<TextProps> = ({
     };
   };
 
+
   const textStyle = getTypoStyle(typography);
 
   if (deprecatedValues.includes(typography)) {
@@ -120,6 +121,7 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
+      {...getAccessibilityID((rest.accessibilityLabel))}
       style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>

package/Text/utils.ts

@@ -1,4 +1,4 @@
-import {Dimensions} from 'react-native';
+import {Dimensions, Platform} from 'react-native';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
@@ -11,4 +11,16 @@ const scaleSize = (size: number) => {
 
   return size;
 };
-export {scaleSize};
+const getAccessibilityID = (accessibilityLabel = '') => {
+  if (Platform.OS ==='ios') {
+    return {
+      accessible: true,
+      testID: accessibilityLabel,
+    };
+  } else {
+    return {
+      accessibilityLabel,
+    };
+  }
+};
+export {scaleSize,getAccessibilityID};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.103.1",
+    "version": "0.103.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -39,8 +39,9 @@
         "react-test-renderer": "17.0.1",
         "typescript": "^4.0.3",
         "@momo-platform/versions": "4.1.11",
-        "react-scanner": "^1.1.0"
+        "react-scanner": "^1.1.0",
+        "@types/color": "3.0.6"
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/publish.sh

@@ -1,16 +1,16 @@
 #!/bin/bash
 
 if [ "$1" == "stable" ]; then
-  #npm version $(npm view @momo-kits/foundation@stable version)
-  #npm version patch
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  #npm version $(npm view @momo-kits/foundation@latest version)
-  #npm version prerelease --preid=rc
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm version prerelease --preid=rc
   npm publish --tag latest --access=public
 else
-  #npm version $(npm view @momo-kits/foundation@beta version)
-  #npm version prerelease --preid=beta
+  npm version $(npm view @momo-kits/foundation@beta version)
+  npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi