@momo-kits/foundation 0.75.1-beta.13 → 0.75.1-beta.14

package/Assets/icon.json

@@ -3943,5 +3943,11 @@
   },
   "ic_minus": {
     "uri": "https://img.mservice.com.vn/app/img/kits/minus.png"
+  },
+  "ic_navigation": {
+    "uri": "https://static.momocdn.net/app/img/kits/ic_navigation.png"
+  },
+  "ic_money_bag": {
+    "uri": "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
   }
 }

package/Layout/Card.tsx

@@ -7,7 +7,7 @@ import {GRIDVIEW} from '../Consts';
 import Item from './Item';
 
 const Card: React.FC<CardProps> = ({children, style}) => {
-  const numberOfColumns = 12;
+  const numberOfColumns = Dimensions.get('window').width > 600 ? 24 : 12;
   const gutterSize = 8;
   const margin = 12;
 

package/Layout/GridSystem.tsx

@@ -7,7 +7,7 @@ import {GridContextProps} from './types';
 
 const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
-  const numberOfColumns = 12;
+  const numberOfColumns = Dimensions.get('window').width > 600 ? 24 : 12;
   const gutterSize = 12;
   const margin = 12;
   const widthSection = Dimensions.get('window').width - margin * 2;

package/Layout/Item.tsx

@@ -6,7 +6,7 @@ import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
 
 const Item: React.FC<ItemProps> = ({
-  widthSpan = 12,
+  widthSpan,
   heightSpan,
   children,
   style,
@@ -39,7 +39,7 @@ const Item: React.FC<ItemProps> = ({
       style={[
         style,
         {
-          width: grid.getSizeSpan(widthSpan),
+          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
           height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
           overflow: 'hidden',
           margin: undefined,

package/Layout/ScreenContainer.tsx

@@ -4,7 +4,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import React, {useContext} from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
 import {Spacing, Styles} from '../Consts';
-import {Section, Card, validateChildren} from './index';
+import {Card, Section, validateChildren} from './index';
 import {ApplicationContext} from '../Navigation';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
@@ -78,8 +78,9 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
       <View
         style={{
           position: 'absolute',
-          height: 300,
+          maxHeight: 215,
           width: '100%',
+          overflow: 'hidden',
         }}>
         {!!headerBackground && (
           <Animated.Image
@@ -88,7 +89,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
             }}
             style={{
               opacity: opacity ?? 1,
-              aspectRatio: 1.3,
+              aspectRatio: 1.75,
               ...imageAnimatedStyle,
             }}
           />
@@ -111,7 +112,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           <View
             style={{
               paddingTop: Spacing.S,
-              paddingBottom: insets.bottom,
+              paddingBottom: insets.bottom + Spacing.S,
               backgroundColor: theme.colors.background.surface,
             }}>
             <Section>{Footer}</Section>

package/Layout/Section.tsx

@@ -6,8 +6,12 @@ import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
 import Item from './Item';
 
-const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
-  const numberOfColumns = 12;
+const Section: React.FC<SectionProps> = ({
+  children,
+  useMargin = true,
+  backgroundColor,
+}) => {
+  const numberOfColumns = Dimensions.get('window').width > 600 ? 24 : 12;
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
@@ -128,6 +132,7 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
           marginHorizontal: gridContext.margin,
           flexDirection: 'row',
           flexWrap: 'wrap',
+          backgroundColor: backgroundColor,
         }}>
         {renderView(validateChildren(children, [Item]))}
         {GRIDVIEW && renderOverlay()}

package/Layout/types.ts

@@ -40,13 +40,15 @@ export interface SectionProps extends ViewProps {
    * Defaults to `false` if not provided.
    */
   useMargin?: boolean;
+
+  backgroundColor?: string;
 }
 
 export interface ItemProps extends ViewProps {
   /**
    * Represents the width of the Card component in terms of span numbers (1-12).
    */
-  widthSpan: SpanNumber;
+  widthSpan?: SpanNumber;
 
   /**
    * Optional. Represents the height of the Card component in terms of span numbers (1-12).

package/Layout/utils.ts

@@ -1,6 +1,5 @@
 import {Alert} from 'react-native';
-import React, {ReactElement} from 'react';
-import {SectionProps} from './types';
+import React from 'react';
 
 /**
  * validate children type

package/Navigation/Components.tsx

@@ -44,12 +44,13 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.black_01,
   },
+  headerButton: {paddingHorizontal: 4},
   headerRightButton: {
     flexDirection: 'row',
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.M,
+    paddingRight: Spacing.S,
   },
   toolkitContainer: {
     marginLeft: Spacing.S,
@@ -214,7 +215,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validType = (item: any) => {
-    if (item.type !== NavigationButton) {
+    if (__DEV__ && item.type !== NavigationButton) {
       console.warn(
         'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
       );
@@ -224,19 +225,21 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const renderAction = () => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
-        if (__DEV__) {
-          validType(child);
-        }
+        validType(child);
         return (
-          <React.Fragment key={index}>
+          <View key={index} style={styles.headerButton}>
             {React.cloneElement(child, {...restProps})}
-          </React.Fragment>
+          </View>
         );
       });
     }
 
     validType(children);
-    return React.cloneElement(children, {...restProps});
+    return (
+      <View style={styles.headerButton}>
+        {React.cloneElement(children, {...restProps})}
+      </View>
+    );
   };
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };

package/package.json

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