@momo-kits/foundation 0.77.2-beta.1 → 0.77.2-beta.2

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

@@ -64,6 +64,7 @@ export type Theme = {
 export type Context = {
   theme: Theme;
   navigator?: Navigator;
+  showGrid?: boolean;
 };
 
 export type NavigationContainerProps = {
@@ -131,6 +132,7 @@ export type NavigationOptions = {
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
+  accessibilityLabel?: string;
 }
 
 export type HeaderBackgroundProps = {

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,13 @@
-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 {ApplicationContext} from '../Application';
 
 const Card: React.FC<CardProps> = ({children, style}) => {
+  const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -131,7 +132,7 @@ const Card: React.FC<CardProps> = ({children, style}) => {
           },
         ]}>
         {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,7 @@ import {View} from 'react-native';
 
 import {ItemProps} from './types';
 import {GridContext} from './index';
-import {GRIDVIEW} from '../Consts';
+import {ApplicationContext} from '../Application';
 
 const Item: React.FC<ItemProps> = ({
   widthSpan,
@@ -11,6 +11,7 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
+  const {showGrid} = useContext(ApplicationContext);
   const grid = useContext(GridContext);
 
   /**
@@ -50,7 +51,7 @@ const Item: React.FC<ItemProps> = ({
         },
       ]}>
       {children}
-      {GRIDVIEW && renderOverlay()}
+      {showGrid && renderOverlay()}
     </View>
   );
 };

package/Layout/Section.tsx

@@ -1,16 +1,17 @@
-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';
 
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
   backgroundColor,
 }) => {
+  const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 12;
@@ -136,7 +137,7 @@ const Section: React.FC<SectionProps> = ({
           backgroundColor: backgroundColor,
         }}>
         {renderView(validateChildren(children, [Item]))}
-        {GRIDVIEW && renderOverlay()}
+        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/package.json

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