@momo-kits/foundation 0.79.5 → 0.79.6-beta.10

package/Application/Components.tsx

@@ -225,7 +225,11 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
       {!!headerImage && (
-        <Image style={styles.headerBackground} source={{uri: headerImage}} />
+        <Image
+          style={styles.headerBackground}
+          source={{uri: headerImage}}
+          loading={false}
+        />
       )}
     </Animated.View>
   );

package/Application/ModalScreen.tsx

@@ -1,11 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -13,8 +6,12 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -90,12 +87,9 @@ const Modal: React.FC<ModalParams> = props => {
 };
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
-  const {
-    screen,
-    options,
-    useSnap = true,
-  }: BottomSheetParams = props.route.params;
+  const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -105,31 +99,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
-  const [contentHeight, setContentHeight] = useState(undefined);
   const snapPoints = useMemo(() => {
-    if (useSnap) {
-      return ['50%', '90%'];
+    if (snapPoint) {
+      return [snapPoint];
     }
-    return [contentHeight ?? '50%'];
-  }, [contentHeight]);
+    return ['50%', '70%', '90%'];
+  }, []);
 
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
-  let handleOnLayout;
-  if (!useSnap) {
-    handleOnLayout = useCallback(
-      ({
-        nativeEvent: {
-          layout: {height},
-        },
-      }) => {
-        setContentHeight(height);
-      },
-      [],
-    );
-  }
-
   let backgroundColor = theme.colors.background.default;
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
@@ -162,8 +141,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
-          <View style={[styles.sheetContainer, {backgroundColor}]}>
+        <BottomSheetView accessibilityLabel={'BottomSheet'}>
+          <View
+            style={[
+              styles.sheetContainer,
+              {
+                backgroundColor,
+                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
+              },
+            ]}>
             <View style={styles.indicatorContainer}>
               <View
                 style={[
@@ -222,7 +208,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           </View>
-        </View>
+        </BottomSheetView>
       </BottomSheetModal>
     </SafeAreaView>
   );

package/Application/NavigationContainer.tsx

@@ -10,9 +10,10 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {NavigationContainerProps} from './types';
+import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import {DeviceEventEmitter} from 'react-native';
+import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
 
@@ -52,7 +53,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   navigator.current.maxApi = maxApi;
 
   const translate = (key: string) => {
-    return localization?.[language]?.[key] || key;
+    const mergedLocalization: LocalizationObject = {
+      vi: {...localization?.vi, ...kitLocalization.vi},
+      en: {...localization?.en, ...kitLocalization.en},
+    };
+    return mergedLocalization?.[language]?.[key] || key;
   };
 
   return (

package/Application/types.ts

@@ -107,7 +107,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  useSnap?: boolean;
+  snapPoint?: '30%' | '50%' | '70%' | '90%';
 }
 
 export type NavigationButtonProps = {

package/Switch/index.tsx

@@ -1,19 +1,17 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {
-  const {theme} = useContext(ApplicationContext);
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
-  let backgroundColor = value ? theme.colors.primary : Colors.black_07;
+  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
-    backgroundColor = value ? theme.colors.background.tonal : Colors.black_05;
+    backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
   return (

package/Title/index.tsx

@@ -0,0 +1,89 @@
+import React, {FC, useContext} from 'react';
+import {Text as RNText, TouchableOpacity, View} from 'react-native';
+import {TitleProps} from './types';
+import {Icon} from '../Icon';
+import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Colors, Spacing} from '../Consts';
+import {Button} from '../Button';
+import {scaleSize, Text} from '../Text';
+
+const Title: FC<TitleProps> = ({
+  size = 'large',
+  type = 'section',
+  onPressAction,
+  actionTitle,
+  title = 'Title',
+  titleFlex = true,
+  showAction = true,
+  icon,
+  description,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const flexStyle = titleFlex ? {flex: 1} : {};
+  const typeStyle =
+    type === 'screen' ? styles.screen : styles[`${type}_${size}`];
+  const actionColor = titleFlex
+    ? theme.colors.primary
+    : theme.colors.text.default;
+  const actionBackground = titleFlex ? Colors.pink_08 + '4D' : Colors.black_06;
+  const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
+  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
+  const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
+
+  const renderAction = () => {
+    return !!actionTitle && titleFlex ? (
+      <Button
+        onPress={() => onPressAction?.()}
+        type={'text'}
+        full={false}
+        size={'small'}
+        title={actionTitle}
+      />
+    ) : (
+      <TouchableOpacity
+        style={[
+          {backgroundColor: actionBackground},
+          styles.actionIcon,
+          {width: actionSize, height: actionSize},
+        ]}
+        onPress={onPressAction}>
+        <Icon
+          size={actionSize}
+          color={actionColor}
+          source={'arrow_chevron_right_small'}
+        />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <View style={[styles.container, marginStyle]}>
+        {!!icon && type !== 'screen' && (
+          <Icon style={styles.icon} source={icon} />
+        )}
+        <RNText
+          style={[
+            typeStyle,
+            flexStyle,
+            styles.title,
+            {
+              fontFamily: `${theme.font}-${titleWeight}`,
+            },
+          ]}>
+          {title}
+        </RNText>
+        {showAction && type !== 'screen' && renderAction()}
+      </View>
+      {!!description && !!icon && type !== 'screen' && (
+        <Text typography={'description_s'} color={theme.colors.text.secondary}>
+          {description}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export {Title};
+export type {TitleProps};

package/Title/styles.ts

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {scaleSize} from '../Text';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  card_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  card_large: {
+    fontSize: scaleSize(18),
+    lineHeight: scaleSize(26),
+  },
+  section_small: {
+    fontSize: scaleSize(20),
+    lineHeight: scaleSize(28),
+  },
+  section_large: {
+    fontSize: scaleSize(24),
+    lineHeight: scaleSize(34),
+  },
+  screen: {
+    fontSize: scaleSize(36),
+    lineHeight: scaleSize(44),
+  },
+  title: {
+    marginRight: Spacing.XS,
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.XS,
+    borderRadius: Radius.XS,
+  },
+  wrapper: {
+    width: '100%',
+  },
+});

package/Title/types.ts

@@ -0,0 +1,11 @@
+export type TitleProps = {
+  type?: 'screen' | 'section' | 'card';
+  title: string;
+  description?: string;
+  size?: 'large' | 'small';
+  icon?: string;
+  titleFlex?: boolean;
+  actionTitle?: string;
+  onPressAction?: () => void;
+  showAction?: boolean;
+};

package/index.ts

@@ -45,3 +45,5 @@ export * from './Pagination';
 export * from './Pagination/types';
 export * from './Loader';
 export * from './Loader/types';
+export * from './Title';
+export * from './Title/types';

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.79.5",
+    "version": "0.79.6-beta.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "postinstall": "node verify.js"
     },
     "keywords": [
         "@momo-kits/foundation"

package/verify.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+
+try {
+  const package = path.join(`${__dirname}`, 'package.json');
+  const packageInfo = JSON.parse(fs.readFileSync(package, 'utf8'));
+  const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
+
+  const app = path.join(`${__dirname}/../../../`, 'app.json');
+  const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
+  const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
+  const androidAppTarget = appInfo?.client?.android.deploymentTarget;
+
+  if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
+    throw new Error(
+      `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,
+    );
+  }
+} catch (error) {
+  console.error(`Installation failed: ${error.message}`);
+  process.exit(1);
+}