@momo-kits/foundation 0.77.2 → 0.77.4

package/Application/BottomTab.tsx

@@ -1,14 +1,14 @@
-import React, {FC, useContext} from 'react';
+import React, {useContext} from 'react';
+import {View} from 'react-native';
 import {BottomTabProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
-import {View} from 'react-native';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: FC<BottomTabProps> = ({tabs, listeners}) => {
+const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners}) => {
   const {theme} = useContext(ApplicationContext);
   return (
     <Tab.Navigator>

package/Application/Components.tsx

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const HeaderTitle: React.FC<any> = props => {
+const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
   const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
     inputRange: [0, 200],
@@ -88,7 +88,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={`HeaderTitle/${props.children}`}
+      accessibilityLabel={`HeaderTitle/${accessibilityLabel}${props.children}`}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -102,6 +102,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   useBorder,
   backgroundColor,
+  accessibilityLabel = '',
 }) => {
   const {navigator} = useContext(ApplicationContext);
   const goBack = () => {
@@ -138,7 +139,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBack}
-        accessibilityLabel={'Back'}
+        accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
         backgroundColor={backgroundColor}
       />

package/Application/ModalScreen.tsx

@@ -18,7 +18,7 @@ import {
   NavigationButton,
   NavigationContainer,
 } from './index';
-import {HeaderBackground, HeaderLeft} from './Components';
+import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   useEffect(() => {
@@ -160,10 +160,19 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                           {...props}
                           useBorder={false}
                           backgroundColor="transparent"
+                          accessibilityLabel={'BottomSheet/'}
                         />
                       );
                     }
                   },
+                  headerTitle: (props: any) => {
+                    return (
+                      <HeaderTitle
+                        {...props}
+                        accessibilityLabel={'BottomSheet/'}
+                      />
+                    );
+                  },
                   headerBackground: () => (
                     <HeaderBackground backgroundColor={backgroundColor} />
                   ),
@@ -178,6 +187,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       backgroundColor="transparent"
                       useBorder={false}
                       onPress={bottomSheetRef.current?.dismiss}
+                      accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>
                 ),

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
@@ -10,10 +10,9 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {GridSystem} from '../Layout';
-import {GRIDVIEW} from '../Consts';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
+import {DeviceEventEmitter} from 'react-native';
 
 const Stack = createStackNavigator();
 
@@ -25,13 +24,27 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
+  const [showGrid, setShowGrid] = useState(false);
+
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      'onChangeGrid',
+      enable => {
+        setShowGrid(!!enable);
+      },
+    );
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   navigator.current.maxApi = maxApi;
 
   return (
     <SafeAreaProvider>
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
-          value={{theme, navigator: navigator.current}}>
+          value={{theme, navigator: navigator.current, showGrid}}>
           <ReactNavigationContainer
             theme={{
               ...theme,
@@ -69,7 +82,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           </ReactNavigationContainer>
         </ApplicationContext.Provider>
       </BottomSheetModalProvider>
-      {GRIDVIEW && <GridSystem />}
     </SafeAreaProvider>
   );
 };

package/Application/StackScreen.tsx

@@ -2,10 +2,11 @@ import React, {useContext, useEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
+import {GridSystem} from '../Layout';
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -21,7 +22,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   }, [options]);
 
-  return <Component {...params} />;
+  return (
+    <>
+      <Component {...params} />
+      {showGrid && <GridSystem />}
+    </>
+  );
 };
 
 export default StackScreen;

package/Application/types.ts

@@ -4,6 +4,8 @@ import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
 
+type Screen = React.ComponentType<NavigationScreenProps>;
+
 export type Theme = {
   dark: boolean;
   colors: {
@@ -62,10 +64,11 @@ export type Theme = {
 export type Context = {
   theme: Theme;
   navigator?: Navigator;
+  showGrid?: boolean;
 };
 
 export type NavigationContainerProps = {
-  screen: React.ElementType;
+  screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
   maxApi?: any;
@@ -91,13 +94,12 @@ export interface ScreenProps extends ViewProps {
 
 export type ScreenParams = {
   [key: string]: any;
-  screen: React.ElementType;
+  screen: Screen;
   options?: NavigationOptions;
 };
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
-  screen: React.ElementType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
@@ -130,6 +132,7 @@ export type NavigationOptions = {
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
+  accessibilityLabel?: string;
 }
 
 export type HeaderBackgroundProps = {
@@ -163,7 +166,7 @@ export type BottomTabItemProps = {
   icon: string;
   showDot?: boolean;
   badgeLabel?: string;
-  screen: React.ComponentType<any>;
+  screen: Screen;
 };
 
 export type BottomTabProps = {

package/Consts/theme.ts

@@ -116,6 +116,7 @@ const defaultDarkTheme: Theme = {
 const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
+  showGrid: false,
 };
 
 export {defaultContext, defaultTheme, defaultDarkTheme};

package/Input/Input.tsx

@@ -124,7 +124,7 @@ const Input: FC<InputProps> = ({
   };
 
   return (
-    <View style={styles.wrapper} accessibilityLabel={`Input`}>
+    <View style={styles.wrapper} accessibilityLabel={`Input/${floatingValue}`}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} />
     </View>

package/Input/InputMoney.tsx

@@ -123,7 +123,9 @@ const InputMoney: FC<InputMoneyProps> = ({
   };
 
   return (
-    <View style={styles.wrapper} accessibilityLabel={`InputMoney`}>
+    <View
+      style={styles.wrapper}
+      accessibilityLabel={`InputMoney/${floatingValue}`}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} />
     </View>

package/Input/InputSearch.tsx

@@ -132,7 +132,7 @@ const InputSearch: FC<InputSearchProps> = ({
   return (
     <View
       style={[style, styles.searchInputContainer]}
-      accessibilityLabel={`InputSearch`}>
+      accessibilityLabel={`InputSearch/${placeholder}`}>
       <View
         style={[
           getBorderColor(),

package/Input/InputTextArea.tsx

@@ -139,7 +139,9 @@ const InputTextArea: FC<InputTextAreaProps> = ({
   };
 
   return (
-    <View style={styles.wrapper} accessibilityLabel={`InputTextArea`}>
+    <View
+      style={styles.wrapper}
+      accessibilityLabel={`InputTextArea/${floatingValue}`}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} />
     </View>

package/Layout/Card.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {Dimensions, View} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
 import Item from './Item';
+import {Image} from '../Image';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 
-const Card: React.FC<CardProps> = ({children, style}) => {
+const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
+  const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -29,20 +32,7 @@ const Card: React.FC<CardProps> = ({children, style}) => {
    * render overlay only dev mode
    */
   const renderOverlay = () => {
-    return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
-    );
+    return <View pointerEvents={'none'} style={styles.boxGrid} />;
   };
 
   /**
@@ -122,16 +112,20 @@ const Card: React.FC<CardProps> = ({children, style}) => {
         accessibilityLabel={`Card`}
         style={[
           style,
+          styles.card,
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
-            padding: 12,
-            flexDirection: 'row',
-            flexWrap: 'wrap',
           },
         ]}>
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={[style, styles.cardImage]}
+          />
+        )}
         {renderView(validateChildren(children, [Item]))}
-        {GRIDVIEW && renderOverlay()}
+        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/GridSystem.tsx

@@ -42,6 +42,7 @@ const GridSystem: React.FC = () => {
           {
             borderColor: theme.colors.error.primary,
             marginHorizontal: grid.margin,
+            top: Spacing.M,
           },
         ]}>
         {list.map((i, index) => {
@@ -66,7 +67,7 @@ const GridSystem: React.FC = () => {
       <View pointerEvents="none" style={styles.dangerRightContainer} />
       <View
         pointerEvents="none"
-        style={[styles.dangerTopContainer, {height: insets.top}]}
+        style={[styles.dangerTopContainer, {height: Spacing.M}]}
       />
       <View
         pointerEvents="none"

package/Layout/Item.tsx

@@ -3,7 +3,8 @@ import {View} from 'react-native';
 
 import {ItemProps} from './types';
 import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const Item: React.FC<ItemProps> = ({
   widthSpan,
@@ -11,26 +12,14 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
+  const {showGrid} = useContext(ApplicationContext);
   const grid = useContext(GridContext);
 
   /**
    * 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,
-        }}
-      />
-    );
+    return <View pointerEvents={'none'} style={styles.boxGrid} />;
   };
 
   return (
@@ -38,19 +27,14 @@ const Item: React.FC<ItemProps> = ({
       accessibilityLabel={`Item`}
       style={[
         style,
+        styles.item,
         {
           width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
           height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-          overflow: 'hidden',
-          margin: undefined,
-          marginTop: undefined,
-          marginBottom: undefined,
-          marginLeft: undefined,
-          marginRight: undefined,
         },
       ]}>
       {children}
-      {GRIDVIEW && renderOverlay()}
+      {showGrid && renderOverlay()}
     </View>
   );
 };

package/Layout/Section.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {Dimensions, View} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
 import Item from './Item';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
   backgroundColor,
 }) => {
+  const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 12;
@@ -37,20 +39,7 @@ const Section: React.FC<SectionProps> = ({
    * render overlay only dev mode
    */
   const renderOverlay = () => {
-    return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
-    );
+    return <View pointerEvents={'none'} style={styles.boxGrid} />;
   };
 
   /**
@@ -136,7 +125,7 @@ const Section: React.FC<SectionProps> = ({
           backgroundColor: backgroundColor,
         }}>
         {renderView(validateChildren(children, [Item]))}
-        {GRIDVIEW && renderOverlay()}
+        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/styles.ts

@@ -0,0 +1,47 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  boxGrid: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'red',
+    borderWidth: 1,
+  },
+  card: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    paddingVertical: undefined,
+    paddingHorizontal: undefined,
+    padding: 12,
+    margin: undefined,
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginVertical: undefined,
+  },
+  item: {
+    overflow: 'hidden',
+    margin: undefined,
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginVertical: undefined,
+    marginHorizontal: undefined,
+  },
+  cardImage: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/Layout/types.ts

@@ -57,5 +57,5 @@ export interface ItemProps extends ViewProps {
 }
 
 export interface CardProps extends ViewProps {
-  background?: string;
+  backgroundImage?: string;
 }

package/package.json

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