@momo-kits/foundation 1.0.8 → 1.0.9

package/Consts/styles.ts

@@ -47,38 +47,6 @@ const Styles = StyleSheet.create({
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
-  //padding
-  padding4: {
-    padding: 4,
-  },
-  padding8: {
-    padding: 8,
-  },
-  padding16: {
-    padding: 16,
-  },
-  padding24: {
-    padding: 24,
-  },
-  padding32: {
-    padding: 32,
-  },
-  //margin
-  margin4: {
-    margin: 4,
-  },
-  margin8: {
-    margin: 8,
-  },
-  margin16: {
-    margin: 16,
-  },
-  margin24: {
-    margin: 24,
-  },
-  margin32: {
-    margin: 32,
-  },
   //paddingHorizontal
   paddingHorizontal4: {
     paddingHorizontal: 4,
@@ -105,33 +73,6 @@ const Styles = StyleSheet.create({
   paddingVertical24: {
     paddingVertical: 24,
   },
-  //button
-  buttonContent: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    flexDirection: 'row',
-  },
-
-  headerRightButton: {
-    flexDirection: 'row',
-    overflow: 'hidden',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4,
-  },
-  //text
-  textCenter: {textAlign: 'center'},
-  //card
-  card: {
-    shadowColor: 'gray',
-    shadowOffset: {
-      width: 1,
-      height: 1,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 4,
-  },
 });
 
 export {Styles};

package/Consts/theme.ts

@@ -60,14 +60,14 @@ const defaultTheme: Theme = {
 const defaultDarkTheme: Theme = {
   dark: true,
   colors: {
-    primary: '#ff79b0',
-    secondary: '#ffacdc',
+    primary: Colors.pink_04,
+    secondary: Colors.pink_08,
     background: {
       default: '#121212', // Dark background
       surface: '#1e1e1e', // Slightly lighter surface background
-      tonal: '#171717', // Tonal background
+      tonal: Colors.pink_10,
       pressed: '#1a1a1a', // Pressed state background
-      selected: '#1a1a1a', // Selected state background
+      selected: Colors.pink_11,
       disable: '#303030', // Disabled state background
     },
     text: {

package/Input/SearchInput.tsx

@@ -25,8 +25,9 @@ const SearchInput: FC<SearchInputProps> = ({
   onChangeText,
   icon,
   buttonText = 'Hủy',
-  showButtonText,
+  showButtonText = true,
   showIcon = true,
+  style,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -63,32 +64,25 @@ const SearchInput: FC<SearchInputProps> = ({
       iconTintColor = disabledColor;
     }
     return (
-      <View style={styles.searchInputView}>
-        <Icon
-          source={'navigation_search'}
-          size={24}
-          color={theme.colors.text.hint}
-        />
-        <TextInput
-          {...props}
-          editable={!disabled}
-          textAlignVertical="top"
-          ref={inputRef}
-          style={[
-            styles.searchInput,
-            {
-              color: textColor,
-            },
-          ]}
-          value={value}
-          onChangeText={_onChangeText}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          placeholder={placeholder}
-          selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
-        />
-      </View>
+      <TextInput
+        {...props}
+        editable={!disabled}
+        textAlignVertical="top"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: textColor,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={placeholderColor}
+      />
     );
   };
 
@@ -108,7 +102,7 @@ const SearchInput: FC<SearchInputProps> = ({
           </TouchableOpacity>
         )}
         {showIcon && icon && (
-          <View>
+          <View style={{flexDirection: 'row'}}>
             <View
               style={[
                 styles.divider,
@@ -117,7 +111,6 @@ const SearchInput: FC<SearchInputProps> = ({
                 },
               ]}
             />
-
             <Image
               tintColor={iconTintColor}
               source={{uri: icon}}
@@ -129,13 +122,18 @@ const SearchInput: FC<SearchInputProps> = ({
     );
   };
   return (
-    <View style={styles.searchInputContainer}>
+    <View style={[style, styles.searchInputContainer]}>
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
           styles.searchInputWrapper,
           {backgroundColor: theme.colors.background.surface},
         ]}>
+        <Icon
+          source={'navigation_search'}
+          size={24}
+          color={theme.colors.text.hint}
+        />
         {renderInputView()}
         {renderIconView()}
       </View>

package/Input/styles.ts

@@ -96,12 +96,11 @@ export default StyleSheet.create({
     flex: 1,
   },
   searchInput: {
-    width: '100%',
     height: 36,
     marginLeft: Spacing.S,
+    flex: 1,
   },
   searchInputView: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },

package/Navigation/Components.tsx

@@ -1,11 +1,18 @@
 import React, {useContext} from 'react';
-import {DeviceEventEmitter, StatusBar, StyleSheet, View} from 'react-native';
+import {
+  DeviceEventEmitter,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Colors, Styles} from '../Consts';
+import {Colors, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
 import {useGridSystem} from '../Layout';
 import {Text} from '../Text';
+import {Icon} from '../Icon';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -29,10 +36,47 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.black_01,
   },
+  headerRightButton: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.M,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderWidth: 0.5,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
 });
 
-const HeaderLeft = (props: any) => {
-  const {navigator} = useContext(ApplicationContext);
+const HeaderTitle = (props: any) => {
+  return (
+    <Text
+      {...props}
+      typography="header_default"
+      weight="bold"
+      color={props.tintColor}
+    />
+  );
+};
+
+const HeaderLeft: React.FC<any> = ({tintColor}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
     if (canGoBack) {
@@ -43,12 +87,30 @@ const HeaderLeft = (props: any) => {
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
   };
-  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <View style={styles.headerLeft}>
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        backgroundColor={backgroundColor}
+        onPress={goBack}
+      />
+    </View>
+  );
 };
 
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  image,
+  backgroundColor,
+}) => {
   const {theme} = useContext(ApplicationContext);
-  let headerImage = image ?? theme.assets?.headerBackground;
+  let headerImage = theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }
@@ -56,10 +118,13 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
     <View
       style={[
         Styles.flex,
-        {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
+        {
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          overflow: 'hidden',
+        },
       ]}>
       <StatusBar
-        barStyle={image || theme.dark ? 'light-content' : 'dark-content'}
+        barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
       {headerImage && (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
@@ -126,7 +191,50 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     validType(children);
     return React.cloneElement(children, {...restProps});
   };
-  return <View style={Styles.headerRightButton}>{renderAction()}</View>;
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+};
+
+const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+  const {theme} = useContext(ApplicationContext);
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <View style={styles.headerRightButton}>
+      <NavigationButton
+        icon="addFavorite"
+        tintColor={tintColor}
+        backgroundColor={backgroundColor}
+        onPress={() => {}}
+      />
+      <View
+        style={[
+          styles.toolkitContainer,
+          {backgroundColor: backgroundColor ?? '#00000066'},
+        ]}>
+        <TouchableOpacity>
+          <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+        </TouchableOpacity>
+        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        <TouchableOpacity>
+          <Icon
+            color={tintColor}
+            source="16_navigation_close_circle"
+            size={20}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
 };
 
-export {HeaderLeft, HeaderBackground, HeaderRightAction, HeaderCustom};
+export {
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+};

package/Navigation/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
 import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
 import Navigation from './Navigation';
-import {ModalParams} from './types';
+import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {
   ApplicationContext,
@@ -19,15 +19,22 @@ import {
   NavigationContainer,
 } from './index';
 
-const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
+const ModalScreen: React.FC<any> = props => {
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = ({navigation, route}) => {
   const {theme} = useContext(ApplicationContext);
-  const {
-    isBottomSheet,
-    backgroundColor,
-    screen,
-    barrierDismissible,
-    options,
-  }: ModalParams = route.params;
+  const {screen, barrierDismissible}: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
@@ -35,61 +42,13 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   };
   delete params.screen;
 
-  /**
-   * onDismiss modal
-   */
   const onDismiss = (pop = true) => {
-    let action = navigation.pop;
-    if (!pop) {
-      action = () => {};
-    }
-    if (barrierDismissible && !isBottomSheet) {
+    if (barrierDismissible) {
       return;
     }
-    params?.onDismiss?.();
-    action();
+    navigation.pop();
   };
 
-  /**
-   * build bottom sheet
-   */
-  if (isBottomSheet) {
-    const bgColor = backgroundColor ?? theme.colors.background.surface;
-    const sheetTheme = {...theme, assets: undefined};
-    return (
-      <BottomSheet {...rest} onDismiss={onDismiss}>
-        <View style={[styles.sheetContainer, {backgroundColor: bgColor}]}>
-          <View style={styles.indicatorContainer}>
-            <View
-              style={[
-                styles.indicator,
-                {backgroundColor: theme.colors.text.disable},
-              ]}
-            />
-          </View>
-          <NavigationContainer
-            theme={sheetTheme}
-            screen={props => <Component {...props} {...params} />}
-            options={{
-              ...options,
-              hiddenBack: true,
-              headerTitleAlign: 'center',
-              headerRight: (props: any) => (
-                <HeaderRightAction>
-                  <NavigationButton
-                    icon="24_navigation_close"
-                    {...props}
-                    onPress={() => navigation.pop()}
-                  />
-                </HeaderRightAction>
-              ),
-            }}
-          />
-        </View>
-      </BottomSheet>
-    );
-  }
-
   return (
     <KeyboardAvoidingView
       style={Styles.flex}
@@ -121,7 +80,16 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   );
 };
 
-const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
+const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, options}: BottomSheetParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -142,24 +110,57 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
     />
   );
 
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+  const sheetTheme = {...theme, assets: undefined};
+
   return (
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        onDismiss={() => onDismiss?.(mountedRef.current)}
+        onDismiss={navigation.pop}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View style={{paddingBottom: bottom}}>{children}</View>
+        <View style={{paddingBottom: bottom}}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              theme={sheetTheme}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{headerLeft: null},
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      backgroundColor="transparent"
+                      useBorder={false}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+          </View>
+        </View>
       </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
-ModalScreen.defaultProps = {
-  barrierDismissible: false,
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {

package/Navigation/NavigationButton.tsx

@@ -8,20 +8,35 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
+  backgroundColor,
+  useBorder = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Icon source={icon} color={tintColor ?? theme.colors.text.default} />
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    height: 36,
-    width: 36,
-    borderRadius: 18,
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/Navigation/Navigator.ts

@@ -1,5 +1,5 @@
 import {StackActions} from '@react-navigation/native';
-import {ModalParams, ScreenParams} from './types';
+import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
 class Navigator {
   ref?: any;
@@ -28,7 +28,7 @@ class Navigator {
     this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
-  showBottomSheet = (params: ModalParams) => {
+  showBottomSheet = (params: BottomSheetParams) => {
     this.ref.current.dispatch(
       StackActions.push('Modal', {
         ...params,

package/Navigation/types.ts

@@ -85,18 +85,23 @@ export interface ModalParams extends ScreenParams {
   screen: React.ElementType;
   onDismiss?: (mounted?: boolean) => void;
   barrierDismissible?: boolean;
-  backgroundColor?: string;
+}
+
+export interface BottomSheetParams extends ScreenParams {
+  [key: string]: any;
+  onDismiss?: () => void;
 }
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
+  backgroundColor?: string;
+  useBorder?: boolean;
   onPress: () => void;
 };
 
 export type NavigationOptions = {
   surface?: boolean;
-  hiddenBack?: boolean;
   title?: string;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
@@ -105,6 +110,7 @@ export type NavigationOptions = {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
+  backgroundColor?: string | null;
 };
 
 export type TitleCustomProps = {

package/Navigation/utils.tsx

@@ -3,21 +3,15 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {HeaderBackground, HeaderCustom, HeaderLeft} from './Components';
+import {
+  HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
+  HeaderTitle,
+  HeaderToolkitAction,
+} from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {Text} from '../Text';
-
-const HeaderTitle = (props: any) => {
-  return (
-    <Text
-      {...props}
-      typography="header_default"
-      weight="bold"
-      color={props.tintColor}
-    />
-  );
-};
 
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
@@ -36,6 +30,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     ...getTintColor(theme),
   };
 };
@@ -45,6 +40,7 @@ const getDialogOptions = (theme: Theme): StackNavigationOptions => {
     headerTitleAlign: 'center',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     headerBackground: HeaderBackground,
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
@@ -77,23 +73,17 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backTheme: {};
   let surfaceTheme: {};
   let titleTheme: {};
 
-  if (params.hiddenBack == true) {
-    backTheme = {
-      headerLeft: null,
-    };
-  } else {
-    backTheme = {
-      headerLeft: (props: any) => <HeaderLeft {...props} />,
-    };
-  }
-
   if (params.surface == true) {
     surfaceTheme = {
-      headerBackground: () => <HeaderBackground image={null} />,
+      headerBackground: () => (
+        <HeaderBackground
+          image={null}
+          backgroundColor={theme.colors.background.surface}
+        />
+      ),
       ...getTintColor({
         ...theme,
         assets: {...theme.assets, headerBackground: undefined},
@@ -119,7 +109,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  return {...params, ...backTheme, ...surfaceTheme, ...titleTheme};
+  return {...params, ...surfaceTheme, ...titleTheme};
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Popup/PopupNotify.tsx

@@ -148,7 +148,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         </View>
         {information && (
           <View style={styles.information}>
-            <Text typography={'description_xs'} numberOfLines={1}>
+            <Text
+              typography={'description_xs'}
+              color={theme.colors.text.hint}
+              numberOfLines={1}>
               {information}
             </Text>
           </View>

package/Text/index.tsx

@@ -18,6 +18,20 @@ const SFProText: TypographyWeight = {
   bold: 'Bold',
 };
 
+const AlegreyaSans: TypographyWeight = {
+  100: 'Thin',
+  200: 'Thin',
+  300: 'Thin',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
 const FontStyle: {[key: string]: string} = {
   italic: 'Italic',
   normal: '',
@@ -43,14 +57,18 @@ const Text: React.FC<TextProps> = ({
     } = styles;
     const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
     const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
-    let fontFamily: string;
     const style = FontStyle[fontStyle ?? 'normal'];
+    let fontFamily: string;
 
     switch (theme.font) {
       case 'SFProText': {
         fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
         break;
       }
+      case 'AlegreyaSans': {
+        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
+        break;
+      }
       default: {
         fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {