@momo-kits/foundation 0.103.1 → 0.103.2-beta.1

package/Application/BottomSheet.tsx

@@ -19,7 +19,7 @@ import {Icon} from '../Icon';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const heightDevice = Dimensions.get('screen').height;
+  const heightDevice = Dimensions.get('screen').height;    // lấy chiều cao thiết bị
   const insets = useSafeAreaInsets();
   const {
     screen: Screen,

package/Application/BottomTab/index.tsx

@@ -18,6 +18,7 @@ const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
   let options = {};
+
   if (route.params?.options) {
     options = getOptions(route.params?.options);
   }

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

@@ -16,7 +16,7 @@ import Localize from './Localize';
 
 const Stack = createStackNavigator();
 
-const NavigationContainer: React.FC<NavigationContainerProps> = ({
+const NavigationContainer: React.FC<NavigationContainerProps> = ({ // screen: Screen; options?: NavigationOptions; theme: Theme; maxApi: any; initialParams?: any; localize: Localize;
   screen,
   theme,
   options,

package/Application/Navigator.ts

@@ -73,6 +73,7 @@ class Navigator {
    * @param params
    */
   showBottomSheet = (params: BottomSheetParams) => {
+    // console.log(this);
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
         StackActions.push('Modal', {

package/Application/StackScreen.tsx

@@ -14,7 +14,7 @@ import {Colors, Radius, Spacing} from '../Consts';
  * @constructor
  */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {showGrid, navigator} = useContext(ApplicationContext);
+  const {showGrid, navigator} = useContext(ApplicationContext); //showGrid: false, navigator: undefined,
   const tracking = useRef<any>({
     timeoutLoad: undefined,
     timeoutInteraction: undefined,
@@ -31,6 +31,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   const context = useContext<any>(MiniAppContext);
   const {screen: Component, options, initialParams} = props.route.params;
+  console.log(props.route.params);
   const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 

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',
@@ -113,13 +113,14 @@ const Text: React.FC<TextProps> = ({
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
-      `Warning: The typography value "${typography}" is deprecated.`,
+      `Warning: The typography value "${typography}" is deprecated.`
     );
   }
 
   return (
     <RNText
       {...rest}
+      {...getAccessibilityID(rest.accessibilityLabel)}
       style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>

package/Text/utils.ts

@@ -1,14 +1,25 @@
-import {Dimensions} from 'react-native';
+import {Dimensions, Platform} from 'react-native';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
 const scaleSize = (size: number) => {
   const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
-
   if (scaleRate > 1) {
     return Math.min(Math.round(size * scaleRate), size + 3);
   }
 
   return size;
 };
-export {scaleSize};
+const getAccessibilityID = (accessibilityLabel = '') => {
+  if (Platform.OS === 'ios') {
+    return {
+      accessible: true,
+      testID: accessibilityLabel,
+    };
+  } else {
+    return {
+      accessibilityLabel,
+    };
+  }
+};
+export {scaleSize, getAccessibilityID};

package/index.ts

@@ -49,10 +49,3 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
-
-/**
- * export trick for keep old mini app working
- * @deprecated
- */
-export * from 'react-native-modalize';
-export * from '@gorhom/bottom-sheet';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.103.1",
+    "version": "0.103.2-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,11 +8,9 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "2.4.1",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
-        "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "https://gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
@@ -39,8 +37,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