@momo-kits/foundation 1.0.0 → 1.0.1

package/Layout/ScreenSection.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
+import SectionItem from './SectionItem';
+import {ScreenSectionProps} from './types';
+
+const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
+  const grid = useGridSystem();
+
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  const addRowView = (
+    rows: any[],
+    cursor: number = 0,
+    endRow: boolean = false,
+  ) => {
+    return (
+      <View
+        key={`SectionItem${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : grid.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View
+              key={`SectionItem${cursor}${index}`}
+              style={{flexDirection: 'row'}}>
+              {index != 0 && <View style={{width: grid.gutterSize}}></View>}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const renderView = (
+    children: any,
+  ): React.ReactElement | React.ReactElement[] => {
+    const element: React.ReactElement | React.ReactElement[] = [];
+    if (Array.isArray(children)) {
+      let cursor = 0;
+      let rows: any[] = [];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
+
+        if (totalSpan <= grid.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == children.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+    }
+    return element;
+  };
+
+  return (
+    <View
+      style={{
+        width: grid.getSizeSpan(),
+        marginHorizontal: grid.screenPadding,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      }}>
+      {renderView(validateChildren(children, SectionItem))}
+      {grid.isDevMode && renderOverlay()}
+    </View>
+  );
+};
+
+ScreenSection.displayName = 'ScreenSection';
+
+export default ScreenSection;

package/Layout/SectionItem.tsx

@@ -0,0 +1,60 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {useGridSystem} from './index';
+import {SectionItemProps} from './types';
+import {ApplicationContext} from '../Navigation';
+
+const SectionItem: React.FC<SectionItemProps> = ({
+  widthSpan = 12,
+  heightSpan,
+  children,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const grid = useGridSystem();
+
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  const styles: any = style ?? {};
+
+  return (
+    <View
+      style={{
+        ...styles,
+        width: grid.getSizeSpan(widthSpan),
+        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        overflow: 'hidden',
+        margin: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        marginRight: undefined,
+      }}>
+      {children}
+      {grid.isDevMode && renderOverlay()}
+    </View>
+  );
+};
+
+SectionItem.defaultProps = {
+  widthSpan: 12,
+};
+
+SectionItem.displayName = 'SectionItem';
+
+export default SectionItem;

package/Layout/index.ts

@@ -1,6 +1,12 @@
-import MMRow from './Row';
-import MMView from './View';
-import MMScreen from './Screen';
-import MMSection from './Section';
+import SectionItem from './SectionItem';
+import ScreenSection from './ScreenSection';
+import GridSystem from './GridSystem';
+import {useGridSystem, validateChildren} from './utils';
 
-export {MMRow, MMView, MMScreen, MMSection};
+export {
+  SectionItem,
+  ScreenSection,
+  GridSystem,
+  useGridSystem,
+  validateChildren,
+};

package/Layout/types.ts

@@ -1,39 +1,12 @@
-import {ReactElement} from 'react';
+import {ViewProps} from 'react-native';
 
 type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type ViewAlignItems = 'flex-start' | 'flex-end' | 'center';
 
-type ViewJustifyContent =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
-
-type ViewDirection = 'row' | 'column';
-
-type ViewShadow = 'none' | 'light' | 'dark';
-export interface MMScreenProps {
-  children: ReactElement;
-  scrollable: boolean;
-}
-
-export interface MMSectionProps {
-  haveMargin?: boolean;
-  children: ReactElement;
+export interface ScreenSectionProps extends ViewProps {
+  expanded?: boolean;
 }
 
-export interface MMViewProps {
-  span: SpanNumber;
-  children: ReactElement;
-  isEndLine?: boolean;
-  isRowChild?: boolean;
-  alignItems?: ViewAlignItems;
-  justifyContent: ViewJustifyContent;
-  padding: Array<number>;
-  backgroundColor: string;
-  borderRadius: number;
-  direction: ViewDirection;
-  shadow: ViewShadow;
+export interface SectionItemProps extends ViewProps {
+  widthSpan: SpanNumber;
+  heightSpan?: SpanNumber;
 }

package/Layout/utils.ts

@@ -1,37 +1,69 @@
-import {Dimensions} from 'react-native';
-import {FC, JSXElementConstructor, ReactElement, ReactNode} from 'react';
-import {MMSectionProps} from './types';
+import {Alert, Dimensions} from 'react-native';
+import React, {ReactElement} from 'react';
+import {GutterSize, NumberOfColumns, ScreenPadding} from '../Consts';
 
-export const screenWidth = Dimensions.get('window').width;
+const useGridSystem = (useMargin: boolean = true) => {
+  const isDevMode = false;
+  const gutterSize = GutterSize;
+  const screenPadding = useMargin ? ScreenPadding : 0;
+  const numberOfColumns = NumberOfColumns;
+  const widthDevice = Dimensions.get('window').width;
+  const parentWidth = widthDevice - screenPadding * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (parentWidth - totalGutterSize) / numberOfColumns;
 
-export const DEFAULT_SCREEN_PADDING = 12;
+  const getSizeSpan = (span: number = numberOfColumns): number => {
+    return span * sizePerSpan + (span - 1) * gutterSize;
+  };
 
-export const DEFAULT_GUTTER = 12;
-export const validateChildren = (
-  children: ReactElement<any, string | JSXElementConstructor<any>> & ReactNode,
-  childrenType:
+  return {
+    isDevMode,
+    gutterSize,
+    screenPadding,
+    numberOfColumns,
+    sizePerSpan,
+    getSizeSpan,
+  };
+};
+const validateChildren = (
+  children:
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
     | string
-    | FC<MMSectionProps>
-    | JSXElementConstructor<any>
-    | FC<any>,
+    | number
+    | {}
+    | Iterable<React.ReactNode>
+    | React.ReactPortal
+    | null
+    | undefined
+    | boolean,
+  childrenType: React.FC<any>,
 ) => {
+  if (!__DEV__) return children;
+  let results: React.ReactElement[] = [];
   if (Array.isArray(children)) {
-    return children?.map((child: ReactElement) => {
+    results = children?.filter((child: ReactElement) => {
       if (child?.type === childrenType) {
         return child;
+      } else {
+        Alert.alert(
+          'Component Kits',
+          `Wrong children type for this component, expected is ${childrenType.displayName}.`,
+        );
       }
-      console.error(
-        'Wrong children type for this container, please check document.',
-      );
-      return null;
     });
   } else {
-    if (children?.type === childrenType) {
-      return children;
+    const singleChild: any = children;
+    if (singleChild?.type === childrenType) {
+      results = [singleChild];
+    } else {
+      Alert.alert(
+        'Component Kits',
+        `Wrong children type for this component, expected is ${childrenType.displayName}.`,
+      );
     }
-    console.error(
-      'Wrong children type for this container, please check document.',
-    );
-    return null;
   }
+
+  return results;
 };
+
+export {useGridSystem, validateChildren};

package/Navigation/Components.tsx

@@ -1,6 +1,8 @@
 import React, {useContext} from 'react';
 import {StatusBar, StyleSheet, View} from 'react-native';
-import {Image, NavigationButton, NavigationContext, Styles} from '../index';
+import {ApplicationContext, NavigationButton} from './index';
+import {Styles} from '../Consts';
+import {Image} from '../Image';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -11,17 +13,23 @@ const styles = StyleSheet.create({
   },
 });
 
-const HeaderBackground: React.FC<any> = () => {
-  const {theme} = useContext(NavigationContext);
-  const source: any = theme.assets?.headerBackground;
+const HeaderBackground = () => {
+  const {theme} = useContext(ApplicationContext);
   return (
     <View
       style={[
         Styles.flex,
-        {backgroundColor: theme.colors.background, overflow: 'hidden'},
+        {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
       ]}>
-      <StatusBar barStyle="light-content" />
-      <Image style={styles.headerBackground} source={source} />
+      {theme.assets?.headerBackground && (
+        <>
+          <StatusBar barStyle="light-content" />
+          <Image
+            style={styles.headerBackground}
+            source={{uri: theme.assets?.headerBackground}}
+          />
+        </>
+      )}
     </View>
   );
 };
@@ -29,7 +37,7 @@ const HeaderBackground: React.FC<any> = () => {
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validType = (item: any) => {
     if (item.type !== NavigationButton) {
-      console.error(
+      console.warn(
         'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
       );
     }

package/Navigation/ModalScreen.tsx

@@ -6,20 +6,17 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {
-  ModalParams,
-  NavigationContext,
-  Radius,
-  SafeAreaView,
-  Styles,
-  useSafeAreaInsets,
-} from '../index';
+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 {Radius, Spacing, Styles} from '../Consts';
+import {ApplicationContext, NavigationContainer} from './index';
 
 const ModalScreen: React.FC<any> = props => {
   const {navigation, route} = props;
+  const {theme} = useContext(ApplicationContext);
   const {isBottomSheet, screen, onRequestClose}: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
@@ -53,7 +50,16 @@ const ModalScreen: React.FC<any> = props => {
   if (isBottomSheet) {
     return (
       <BottomSheet {...props} onDismiss={onDismiss}>
-        <Component {...params} />
+        <View style={{height: '100%'}}>
+          <NavigationContainer
+            theme={{...theme, assets: undefined}}
+            screen={props => <Component {...params} {...props} />}
+            onDismiss={() => {
+              navigation.pop();
+            }}
+            isBottomSheet={isBottomSheet}
+          />
+        </View>
       </BottomSheet>
     );
   }
@@ -89,9 +95,8 @@ const ModalScreen: React.FC<any> = props => {
   );
 };
 
-const BottomSheet: React.FC<any> = props => {
-  const {children, onDismiss}: ModalParams = props;
-  const {theme} = useContext(NavigationContext);
+const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
+  const {theme} = useContext(ApplicationContext);
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -105,8 +110,14 @@ const BottomSheet: React.FC<any> = props => {
   }, []);
 
   const handleComponent = () => (
-    <View style={styles.indicatorContainer}>
-      <View style={[styles.indicator, {backgroundColor: theme.colors.card}]} />
+    <View
+      style={[
+        styles.indicatorContainer,
+        {backgroundColor: theme.colors.background.surface},
+      ]}>
+      <View
+        style={[styles.indicator, {backgroundColor: theme.colors.text.disable}]}
+      />
     </View>
   );
   const backdropComponent = (backdropProps: any) => (
@@ -126,7 +137,11 @@ const BottomSheet: React.FC<any> = props => {
         onDismiss={() => onDismiss?.(mountedRef.current)}
         handleComponent={handleComponent}
         backdropComponent={backdropComponent}>
-        <View style={[styles.bottomSheetContainer, {paddingBottom: bottom}]}>
+        <View
+          style={{
+            paddingBottom: bottom,
+            backgroundColor: theme.colors.background.default,
+          }}>
           {children}
         </View>
       </BottomSheetModal>
@@ -153,23 +168,18 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  bottomSheetContainer: {
+  indicatorContainer: {
+    width: '100%',
+    paddingTop: Spacing.S,
     borderTopLeftRadius: Radius.M,
     borderTopRightRadius: Radius.M,
     overflow: 'hidden',
-    backgroundColor: 'blue',
-  },
-  indicatorContainer: {
-    width: '100%',
-    height: 4,
-    position: 'absolute',
-    top: -8,
-    flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
   },
   indicator: {
     width: 64,
-    height: '100%',
+    height: 4,
     borderRadius: Radius.S,
   },
 });

package/Navigation/Navigation.ts

@@ -1,6 +1,6 @@
 import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions} from './types';
-import {HeaderRightAction} from './Components';
+import {HeaderRightAction} from './index';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -13,7 +13,7 @@ class Navigation {
     if (params.headerRight) {
       const headerRight = params.headerRight?.();
       if (headerRight.type !== HeaderRightAction) {
-        console.error(
+        console.warn(
           'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
         );
       }

package/Navigation/NavigationButton.tsx

@@ -1,13 +1,15 @@
 import {StyleSheet, TouchableOpacity} from 'react-native';
 import React, {useContext} from 'react';
-import {Icon, NavigationContext, NavigationButtonProps} from '../index';
+import {NavigationButtonProps} from './types';
+import {ApplicationContext} from './index';
+import {Icon} from '../Icon';
 
 const NavigationButton: React.FC<NavigationButtonProps> = props => {
   const {icon, tintColor, onPress} = props;
-  const {theme} = useContext(NavigationContext);
+  const {theme} = useContext(ApplicationContext);
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Icon name={icon} color={tintColor ?? theme.colors.text} />
+      <Icon source={icon} color={tintColor ?? theme.colors.text.default} />
     </TouchableOpacity>
   );
 };

package/Navigation/NavigationContainer.tsx

@@ -1,31 +1,50 @@
-import {
-  defaultContext,
-  NavigationContainerProps,
-  SafeAreaProvider,
-} from '../index';
 import React, {createContext, useRef} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
+import {
+  createStackNavigator,
+  StackNavigationOptions,
+} from '@react-navigation/stack';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
+import {GridSystem, useGridSystem} from '../Layout';
+import {defaultContext, defaultTheme} from '../Consts';
+import {NavigationContainerProps} from './types';
+import {HeaderRightAction, NavigationButton} from './index';
 
 const Stack = createStackNavigator();
 
-const NavigationContext = createContext(defaultContext);
+const ApplicationContext = createContext(defaultContext);
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
   onDismiss,
+  isBottomSheet,
 }) => {
+  const grid = useGridSystem();
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
-
+  const themed: any = theme;
+  let options: StackNavigationOptions = {};
+  if (isBottomSheet) {
+    options = {
+      headerRight: (props: any) => (
+        <HeaderRightAction {...props}>
+          <NavigationButton
+            icon="24_navigation_close"
+            {...props}
+            onPress={onDismiss}
+          />
+        </HeaderRightAction>
+      ),
+    };
+  }
   const goBack = () => {
     const canGoBack = navigationRef?.current?.canGoBack();
     if (canGoBack) {
@@ -38,24 +57,41 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   return (
     <SafeAreaProvider>
       <BottomSheetModalProvider>
-        <NavigationContext.Provider
+        <ApplicationContext.Provider
           value={{theme, navigator: navigator.current}}>
           <ReactNavigationContainer
-            theme={theme}
+            theme={themed}
             ref={navigator.current?.ref}
             independent={true}>
-            <Stack.Navigator initialRouteName="Stack">
+            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
               <Stack.Screen
                 name="Stack"
                 component={StackScreen}
-                initialParams={{screen}}
-                options={getStackOptions(theme, goBack)}
+                initialParams={{screen, isBottomSheet}}
+                options={getStackOptions(theme, {
+                  headerLeft: (props: any) => (
+                    <NavigationButton
+                      icon="ic_back"
+                      {...props}
+                      onPress={goBack}
+                    />
+                  ),
+                  ...options,
+                })}
               />
               <Stack.Screen
                 name="Dialog"
                 component={StackScreen}
-                options={getDialogOptions(theme, goBack)}
-                initialParams={{screen}}
+                options={getDialogOptions(theme, {
+                  headerLeft: props => (
+                    <NavigationButton
+                      icon="ic_back"
+                      {...props}
+                      onPress={goBack}
+                    />
+                  ),
+                })}
+                initialParams={{screen, isBottomSheet}}
               />
               <Stack.Screen
                 name="Modal"
@@ -65,10 +101,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               />
             </Stack.Navigator>
           </ReactNavigationContainer>
-        </NavigationContext.Provider>
+        </ApplicationContext.Provider>
       </BottomSheetModalProvider>
+      {grid.isDevMode && <GridSystem />}
     </SafeAreaProvider>
   );
 };
 
-export {NavigationContext, NavigationContainer};
+NavigationContainer.defaultProps = {
+  theme: defaultTheme,
+  isBottomSheet: false,
+};
+
+export {ApplicationContext, NavigationContainer};

package/Navigation/StackScreen.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, {useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 
 const StackScreen: React.FC<any> = props => {
   const {route, navigation} = props;
-  const {screen: Component}: ScreenParams = route.params;
+  const {screen: Component, isBottomSheet}: ScreenParams = route.params;
 
   const params = {
     ...route.params,
@@ -13,6 +13,12 @@ const StackScreen: React.FC<any> = props => {
 
   delete params.screen;
 
+  useLayoutEffect(() => {
+    if (isBottomSheet && !navigation?.canGoBack()) {
+      navigation?.setOptions({headerLeft: null});
+    }
+  }, []);
+
   return <Component {...params} />;
 };