@momo-kits/foundation 1.0.0 → 1.0.3

package/Layout/SectionItem.tsx

@@ -0,0 +1,63 @@
+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();
+
+  /**
+   * render overlay view only dev mode
+   */
+  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,83 @@
-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;
+/**
+ * hook component for use grid system
+ * @param useMargin
+ */
+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;
+  /**
+   * get size of element with number span
+   * @param span
+   */
+  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,
+  };
+};
+
+/**
+ * validate children type
+ * @param children
+ * @param childrenType
+ */
+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,10 @@
 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';
+import {HeaderBackgroundProps, TitleCustomProps} from './types';
+import {useGridSystem} from '../Layout';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -9,19 +13,48 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
-const HeaderBackground: React.FC<any> = () => {
-  const {theme} = useContext(NavigationContext);
-  const source: any = theme.assets?.headerBackground;
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  surface = false,
+  image,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const allowImage = !surface && theme.assets?.headerBackground;
   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} />
+      <StatusBar
+        barStyle={allowImage || theme.dark ? 'light-content' : 'dark-content'}
+      />
+      {allowImage && (
+        <Image
+          style={styles.headerBackground}
+          source={{uri: image ?? theme.assets?.headerBackground}}
+        />
+      )}
+    </View>
+  );
+};
+
+const HeaderCustom: React.FC<TitleCustomProps> = ({
+  title,
+  subTitle,
+  image,
+  content,
+}) => {
+  const {getSizeSpan} = useGridSystem();
+
+  return (
+    <View style={[styles.headerTitleContainer, {width: getSizeSpan(10)}]}>
+      {content ?? <View />}
     </View>
   );
 };
@@ -29,7 +62,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.',
       );
     }
@@ -52,4 +85,4 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={Styles.headerRightButton}>{renderAction()}</View>;
 };
 
-export {HeaderBackground, HeaderRightAction};
+export {HeaderBackground, HeaderRightAction, HeaderCustom};

package/Navigation/ModalScreen.tsx

@@ -6,21 +6,27 @@ 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,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
 
-const ModalScreen: React.FC<any> = props => {
-  const {navigation, route} = props;
-  const {isBottomSheet, screen, onRequestClose}: ModalParams = route.params;
+const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {
+    isBottomSheet,
+    backgroundColor,
+    screen,
+    barrierDismissible,
+  }: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
@@ -36,11 +42,7 @@ const ModalScreen: React.FC<any> = props => {
     if (!pop) {
       action = () => {};
     }
-    if (typeof onRequestClose === 'function' && !isBottomSheet) {
-      onRequestClose(() => {
-        params?.onDismiss?.();
-        action();
-      });
+    if (barrierDismissible && !isBottomSheet) {
       return;
     }
     params?.onDismiss?.();
@@ -51,9 +53,41 @@ const ModalScreen: React.FC<any> = props => {
    * build bottom sheet
    */
   if (isBottomSheet) {
+    const bgColor = backgroundColor ?? theme.colors.background.surface;
     return (
-      <BottomSheet {...props} onDismiss={onDismiss}>
-        <Component {...params} />
+      <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={{...theme, assets: undefined}}
+            screen={props => <Component {...params} {...props} />}
+            onDismiss={() => {
+              navigation.pop();
+            }}
+            screenOptions={{
+              headerRight: (props: any) => (
+                <HeaderRightAction>
+                  <NavigationButton
+                    icon="24_navigation_close"
+                    {...props}
+                    onPress={onDismiss}
+                  />
+                </HeaderRightAction>
+              ),
+              headerBackground: () => (
+                <View style={[Styles.flex, {backgroundColor: bgColor}]} />
+              ),
+            }}
+            hideBackFirst={true}
+          />
+        </View>
       </BottomSheet>
     );
   }
@@ -89,9 +123,7 @@ 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 snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -104,11 +136,6 @@ const BottomSheet: React.FC<any> = props => {
     };
   }, []);
 
-  const handleComponent = () => (
-    <View style={styles.indicatorContainer}>
-      <View style={[styles.indicator, {backgroundColor: theme.colors.card}]} />
-    </View>
-  );
   const backdropComponent = (backdropProps: any) => (
     <BottomSheetBackdrop
       disappearsOnIndex={-1}
@@ -122,23 +149,22 @@ const BottomSheet: React.FC<any> = props => {
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        handleHeight={24}
         onDismiss={() => onDismiss?.(mountedRef.current)}
-        handleComponent={handleComponent}
+        handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View style={[styles.bottomSheetContainer, {paddingBottom: bottom}]}>
-          {children}
-        </View>
+        <View style={{paddingBottom: bottom}}>{children}</View>
       </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
+ModalScreen.defaultProps = {
+  barrierDismissible: false,
+};
+
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
-    borderRadius: Radius.M,
-    overflow: 'hidden',
     maxWidth: '100%',
     maxHeight: '80%',
   },
@@ -153,23 +179,22 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  bottomSheetContainer: {
+  sheetContainer: {
+    height: '100%',
+    width: '100%',
     borderTopLeftRadius: Radius.M,
     borderTopRightRadius: Radius.M,
     overflow: 'hidden',
-    backgroundColor: 'blue',
   },
   indicatorContainer: {
     width: '100%',
-    height: 4,
-    position: 'absolute',
-    top: -8,
-    flexDirection: 'row',
+    paddingTop: Spacing.S,
+    alignItems: 'center',
     justifyContent: 'center',
   },
   indicator: {
     width: 64,
-    height: '100%',
+    height: 4,
     borderRadius: Radius.S,
   },
 });

package/Navigation/Navigation.ts

@@ -1,6 +1,7 @@
 import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions} from './types';
-import {HeaderRightAction} from './Components';
+import {HeaderRightAction} from './index';
+import {getOptions} from './utils';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -13,9 +14,10 @@ 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.',
         );
+        return;
       }
     }
   };
@@ -27,6 +29,7 @@ class Navigation {
   setOptions = (params: NavigationOptions) => {
     this.verifyParams(params);
     params = this.filterParams(params);
+    params = getOptions(params);
     this.instance.setOptions(params);
   };
 }

package/Navigation/NavigationButton.tsx

@@ -1,13 +1,18 @@
 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 NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+}) => {
+  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,10 +1,6 @@
-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,
@@ -14,17 +10,24 @@ 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';
 
 const Stack = createStackNavigator();
 
-const NavigationContext = createContext(defaultContext);
+const ApplicationContext = createContext(defaultContext);
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
   onDismiss,
+  screenOptions,
+  hideBackFirst,
 }) => {
+  const grid = useGridSystem();
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
+  const themed: any = theme;
 
   const goBack = () => {
     const canGoBack = navigationRef?.current?.canGoBack();
@@ -38,18 +41,18 @@ 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, hideBackFirst}}
+                options={{...getStackOptions(theme, goBack), ...screenOptions}}
               />
               <Stack.Screen
                 name="Dialog"
@@ -65,10 +68,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               />
             </Stack.Navigator>
           </ReactNavigationContainer>
-        </NavigationContext.Provider>
+        </ApplicationContext.Provider>
       </BottomSheetModalProvider>
+      {grid.isDevMode && <GridSystem />}
     </SafeAreaProvider>
   );
 };
 
-export {NavigationContext, NavigationContainer};
+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, hideBackFirst}: ScreenParams = route.params;
 
   const params = {
     ...route.params,
@@ -13,6 +13,12 @@ const StackScreen: React.FC<any> = props => {
 
   delete params.screen;
 
+  useLayoutEffect(() => {
+    if (hideBackFirst && !navigation?.canGoBack()) {
+      navigation?.setOptions({headerLeft: null});
+    }
+  }, []);
+
   return <Component {...params} />;
 };
 

package/Navigation/index.ts

@@ -1,10 +1,12 @@
-import {NavigationContainer, NavigationContext} from './NavigationContainer';
-import ScreenContainer from './ScreenContainer';
+import {NavigationContainer, ApplicationContext} from './NavigationContainer';
+import ScreenContainer from '../Layout/ScreenContainer';
 import NavigationButton from './NavigationButton';
+import {HeaderRightAction} from './Components';
 
 export {
   NavigationContainer,
-  NavigationContext,
+  ApplicationContext,
   ScreenContainer,
   NavigationButton,
+  HeaderRightAction,
 };