@momo-kits/foundation 0.79.6-beta.1 → 0.79.6-beta.12

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>
   );
@@ -255,11 +241,12 @@ const styles = StyleSheet.create({
   indicatorContainer: {
     width: '100%',
     paddingTop: Spacing.S,
+    paddingBottom: Spacing.XS,
     alignItems: 'center',
     justifyContent: 'center',
   },
   indicator: {
-    width: 64,
+    width: 40,
     height: 4,
     borderRadius: Radius.S,
   },

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/Input/InputOTP.tsx

@@ -0,0 +1,171 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  KeyboardType,
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {InputOTPProps} from './index';
+import {Text} from '../Text';
+import styles from './styles';
+import {ErrorView, getBorderColor} from './common';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+import OTPCaret from './OTPCaret';
+
+const InputOTP: FC<InputOTPProps> = ({
+  length,
+  errorMessage,
+  errorSpacing,
+  floatingValue,
+  floatingIconColor,
+  floatingIcon,
+  placeholder,
+  onChangeText,
+  onFocus,
+  onBlur,
+  dataType = 'number',
+  ...props
+}) => {
+  const MAX_LENGTH = 10;
+  const [value, setValue] = useState('');
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+  const {theme} = useContext(ApplicationContext);
+
+  const onFocusInput = () => {
+    setFocused(true);
+    inputRef.current?.focus();
+  };
+
+  const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const _onChangeText = (text: string) => {
+    if (text.length > MAX_LENGTH) return;
+    if (dataType === 'number' && isNaN(Number(text))) return;
+    if (
+      !isNaN(Number(text)) &&
+      value.length >= Number(length) &&
+      text.length >= value.length
+    )
+      return;
+
+    setValue(text);
+    onChangeText?.(text);
+  };
+
+  const renderInputs = (length: number) => {
+    const TextInputs = [];
+    for (let i = 0; i < length; i++) {
+      TextInputs.push(
+        <View>
+          {focused && value.length === i ? (
+            <OTPCaret index={i} length={length} />
+          ) : (
+            <Text
+              style={i !== length - 1 && {marginRight: Spacing.L}}
+              color={
+                !!value[i] ? theme.colors.text.default : theme.colors.text.hint
+              }
+              typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+              {value[i] || '-'}
+            </Text>
+          )}
+        </View>,
+      );
+    }
+    return TextInputs;
+  };
+
+  const renderUnidentifiedInputs = () => {
+    const splitValue = value.split('');
+
+    if (!focused && value.length === 0 && !!placeholder) {
+      return (
+        <Text color={theme.colors.text.hint} typography={'description_s'}>
+          {placeholder}
+        </Text>
+      );
+    }
+
+    return (
+      <View style={{flexDirection: 'row'}}>
+        {splitValue.map((letter, index) => {
+          return (
+            <Text
+              style={
+                (index !== value.length - 1 ||
+                  (focused && value.length !== MAX_LENGTH)) && {
+                  marginRight: Spacing.L,
+                }
+              }
+              typography={'title_s'}>
+              {letter}
+            </Text>
+          );
+        })}
+        {focused && value.length !== MAX_LENGTH && <OTPCaret />}
+      </View>
+    );
+  };
+
+  const renderInputView = () => {
+    let placeholderColor = theme.colors.text.hint;
+    const keyboardType: KeyboardType =
+      dataType === 'number' ? 'number-pad' : 'default';
+    return (
+      <View
+        style={[
+          styles.otpInput,
+          {backgroundColor: theme.colors.background.surface},
+          getBorderColor(theme, focused, errorMessage),
+        ]}>
+        {!!floatingValue && (
+          <View
+            style={[
+              styles.otpFloatingView,
+              {backgroundColor: theme.colors.background.surface},
+            ]}>
+            <Text typography={'description_s'}>{floatingValue}</Text>
+          </View>
+        )}
+        <View style={styles.otpInputsView}>
+          {length ? renderInputs(length) : renderUnidentifiedInputs()}
+        </View>
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            accessibilityLabel={`TextInput`}
+            ref={inputRef}
+            value={value}
+            onChangeText={_onChangeText}
+            keyboardType={keyboardType}
+            onFocus={onFocusInput}
+            onBlur={onBlurInput}
+            style={{opacity: 0}}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onFocusInput}
+      style={styles.otpWrapper}
+      accessibilityLabel={`Input/${floatingValue}`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
+  );
+};
+
+export default InputOTP;

package/Input/OTPCaret.tsx

@@ -0,0 +1,50 @@
+import React, {FC, useContext, useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
+import {Spacing} from '../Consts';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {CaretProps} from './index';
+
+const OtpCaret: FC<CaretProps> = ({index, length}) => {
+  const DURATION = 300;
+  const {theme} = useContext(ApplicationContext);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: DURATION,
+          useNativeDriver: true,
+        }),
+        Animated.delay(DURATION * 2),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: DURATION,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, []);
+  const spacingStyle = !isNaN(Number(length)) &&
+    index !== Number(length) - 1 && {marginRight: Spacing.L};
+
+  return (
+    <View style={[{flexDirection: 'row', alignItems: 'center'}, spacingStyle]}>
+      <Animated.View
+        style={{
+          height: scaleSize(12),
+          width: 1,
+          backgroundColor: theme.colors.primary,
+          opacity,
+        }}
+      />
+      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+        -
+      </Text>
+    </View>
+  );
+};
+
+export default OtpCaret;

package/Input/common.tsx

@@ -1,4 +1,4 @@
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
@@ -13,6 +13,7 @@ type FloatingViewProps = {
   disabled?: boolean;
   floatingIcon?: string;
   required?: boolean;
+  style?: ViewStyle;
 };
 
 export const DEFAULT_HEIGHT = 112;
@@ -81,6 +82,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   disabled,
   floatingIcon,
   required,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -100,6 +102,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
             backgroundColor: theme.colors.background.surface,
             zIndex: 10,
           },
+          style,
         ]}>
         <Text color={floatingTextColor} typography={'label_s'}>
           {floatingValue}

package/Input/index.tsx

@@ -2,6 +2,7 @@ import Input from './Input';
 import InputTextArea from './InputTextArea';
 import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
+import InputOTP from './InputOTP';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -109,4 +110,15 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 
-export {Input, InputTextArea, InputSearch, InputMoney};
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
+export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  length?: OTPInputLength;
+  dataType?: 'string' | 'number';
+}
+
+export type CaretProps = {
+  index?: number;
+  length?: number;
+};
+export {Input, InputTextArea, InputSearch, InputMoney, InputOTP};

package/Input/styles.ts

@@ -142,4 +142,28 @@ export default StyleSheet.create({
     paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
+
+  //OTP
+  otpWrapper: {
+    width: '100%',
+    marginTop: Spacing.M,
+  },
+  otpInput: {
+    height: scaleSize(56),
+    borderRadius: Radius.S,
+    borderWidth: 1,
+  },
+  otpFloatingView: {
+    position: 'absolute',
+    top: -Spacing.S,
+    alignSelf: 'center',
+    paddingHorizontal: Spacing.S,
+  },
+  otpInputsView: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });

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.6-beta.1",
+    "version": "0.79.6-beta.12",
     "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);
+}