@momo-kits/foundation 0.75.1-beta.9 → 0.76.1-beta.1

package/Input/InputTextArea.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Navigation';
 import {
   DEFAULT_HEIGHT,
   ErrorView,
@@ -18,26 +17,26 @@ import {
 } from './common';
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
+import {ApplicationContext} from '../Application';
 
-const InputTextArea: FC<InputTextAreaProps> = props => {
+const InputTextArea: FC<InputTextAreaProps> = ({
+  errorMessage,
+  onChangeText,
+  floatingIconColor,
+  floatingIcon,
+  floatingValue,
+  onFocus,
+  onBlur,
+  disabled,
+  value,
+  defaultValue,
+  height,
+  placeholder,
+  maxLength,
+  required,
+  ...props
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const {
-    errorMessage,
-    onChangeText,
-    floatingIconColor,
-    floatingIcon,
-    floatingValue,
-    onFocus,
-    onBlur,
-    disabled,
-    value,
-    defaultValue,
-    height,
-    placeholder,
-    maxLength,
-    required,
-  } = props;
-
   const [focused, setFocused] = useState(false);
   const [inputValue, setInputValue] = useState(defaultValue ?? '');
   const inputRef = useRef<any>(null);
@@ -101,6 +100,8 @@ const InputTextArea: FC<InputTextAreaProps> = props => {
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
             <TextInput
+              {...props}
+              accessibilityLabel={`TextInput`}
               ref={inputRef}
               editable={!disabled}
               textAlignVertical="top"

package/Input/common.tsx

@@ -2,7 +2,7 @@ import {View} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 

package/Input/index.tsx

@@ -89,6 +89,8 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
    * Defaults to `true` if not provided.
    */
   showBorder?: boolean;
+
+  onPressButtonText?: () => void;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Layout/Card.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import {Dimensions, View} from 'react-native';
-import {validateChildren} from './utils';
+import {useGridSystem, validateChildren} from './utils';
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
 import {GRIDVIEW} from '../Consts';
 import Item from './Item';
 
 const Card: React.FC<CardProps> = ({children, style}) => {
-  const numberOfColumns = 12;
+  const {numberOfColumns} = useGridSystem();
+
   const gutterSize = 8;
   const margin = 12;
 
@@ -115,20 +116,20 @@ const Card: React.FC<CardProps> = ({children, style}) => {
     return element;
   };
 
-  const styles: any = style ?? {};
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
         accessibilityLabel={`Card`}
-        style={{
-          ...styles,
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          padding: 12,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        }}>
+        style={[
+          style,
+          {
+            width: widthSection,
+            marginHorizontal: gridContext.margin,
+            padding: 12,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
         {renderView(validateChildren(children, [Item]))}
         {GRIDVIEW && renderOverlay()}
       </View>

package/Layout/GridSystem.tsx

@@ -1,13 +1,15 @@
 import React, {useContext} from 'react';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Dimensions, StyleSheet, View} from 'react-native';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors, Spacing} from '../Consts';
 import {GridContextProps} from './types';
+import {useGridSystem} from './utils';
 
 const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
-  const numberOfColumns = 12;
+  const {numberOfColumns} = useGridSystem();
+
   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,
@@ -33,22 +33,22 @@ const Item: React.FC<ItemProps> = ({
     );
   };
 
-  const styles: any = style ?? {};
-
   return (
     <View
       accessibilityLabel={`Item`}
-      style={{
-        ...styles,
-        width: grid.getSizeSpan(widthSpan),
-        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        overflow: 'hidden',
-        margin: undefined,
-        marginTop: undefined,
-        marginBottom: undefined,
-        marginLeft: undefined,
-        marginRight: undefined,
-      }}>
+      style={[
+        style,
+        {
+          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()}
     </View>

package/Layout/Screen.tsx

@@ -0,0 +1,188 @@
+import {
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+  Text,
+  View,
+} from 'react-native';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import React, {useContext, useEffect, useRef} from 'react';
+import {ScreenProps} from '../Application/types';
+import {Spacing, Styles} from '../Consts';
+import {Card, Section, validateChildren} from './index';
+import {ApplicationContext} from '../Application';
+import Navigation from '../Application/Navigation';
+import {HeaderTitle} from '../Application/Components';
+
+const Screen: React.FC<ScreenProps> = ({
+  children,
+  enableKeyboardAvoidingView = false,
+  scrollable = false,
+  navigation,
+  marginHeader,
+  useAnimatedHeader = false,
+  useExtendedHeader = false,
+  headerBackground,
+  scrollViewProps,
+  footerComponent: Footer,
+}) => {
+  const animatedValue = useRef<Animated.Value | undefined>(undefined);
+  const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
+  const headerTransparent = useAnimatedHeader || useExtendedHeader;
+
+  let handleScroll;
+  let imageAnimatedStyle = {};
+  let opacity;
+  let Component: any = View;
+  animatedValue.current = undefined;
+
+  /**
+   * automatic margin content if use header transparent
+   */
+  if (headerTransparent) {
+    animatedValue.current = new Animated.Value(0);
+    marginHeader = marginHeader ?? useHeaderHeight();
+    if (useExtendedHeader) {
+      headerBackground = theme.assets?.headerBackground;
+    }
+  }
+
+  useEffect(() => {
+    let title = {};
+    if (useExtendedHeader) {
+      title = {headerTitle: HeaderTitle};
+    }
+    navigation?.setOptions({
+      animatedValue: animatedValue.current,
+      headerTransparent,
+      ...title,
+    });
+  }, [useExtendedHeader, useAnimatedHeader]);
+
+  /**
+   * animated for header stack when used bottom tab
+   */
+  useEffect(() => {
+    const current: any = navigation;
+    if (headerTransparent) {
+      return current?.addListener?.('focus', () => {
+        const stackNavigation = new Navigation(current?.getParent(), theme);
+        stackNavigation?.setOptions({
+          animatedValue: animatedValue.current,
+          headerTransparent: true,
+        });
+      });
+    }
+  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+
+  /**
+   * animated when use scroll && animated value
+   */
+  if (scrollable) {
+    Component = Animated.ScrollView;
+    if (useAnimatedHeader) {
+      opacity = animatedValue.current?.interpolate({
+        inputRange: [0, 100],
+        outputRange: [1, 0],
+        extrapolate: 'clamp',
+      });
+      imageAnimatedStyle = {
+        transform: [
+          {
+            scale: animatedValue.current?.interpolate?.({
+              inputRange: [-300, 0, 1],
+              outputRange: [1.75, 1, 1],
+              extrapolate: 'clamp',
+            }),
+          },
+        ],
+      };
+      handleScroll = Animated.event(
+        [
+          {
+            nativeEvent: {
+              contentOffset: {y: animatedValue.current as Animated.Value},
+            },
+          },
+        ],
+        {useNativeDriver: true},
+      );
+    }
+  }
+
+  /**
+   * build content for screen
+   */
+  const renderContent = () => {
+    const results = validateChildren(children, [Section, Card]);
+    if (Array.isArray(results)) {
+      return results.map((item, index) => {
+        const space = item.props?.useMargin === false ? 0 : Spacing.M;
+        return (
+          <View
+            key={`ScreenItem${index}`}
+            style={{
+              marginTop: space,
+              flex: item.props?.expanded ? 1 : undefined,
+            }}>
+            {item}
+          </View>
+        );
+      });
+    }
+    return results;
+  };
+
+  return (
+    <View style={Styles.flex} accessibilityLabel={`ScreenContainer`}>
+      <View
+        style={{
+          position: 'absolute',
+          maxHeight: 215,
+          width: '100%',
+          overflow: 'hidden',
+        }}>
+        {!!headerBackground && (
+          <Animated.Image
+            source={{
+              uri: headerBackground,
+            }}
+            style={{
+              opacity: opacity ?? 1,
+              aspectRatio: 1.75,
+              ...imageAnimatedStyle,
+            }}
+          />
+        )}
+      </View>
+      <KeyboardAvoidingView
+        style={Styles.flex}
+        enabled={enableKeyboardAvoidingView}
+        behavior={Platform.select({
+          ios: 'padding',
+          android: undefined,
+        })}>
+        <Component
+          {...scrollViewProps}
+          onScroll={handleScroll}
+          style={[Styles.flex, {marginTop: marginHeader}]}>
+          {renderContent()}
+        </Component>
+        {Footer && (
+          <View
+            style={{
+              paddingTop: Spacing.S,
+              paddingBottom: insets.bottom + Spacing.S,
+              backgroundColor: theme.colors.background.surface,
+            }}>
+            <Section>{Footer}</Section>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+export default Screen;

package/Layout/Section.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import {Dimensions, View} from 'react-native';
-import {validateChildren} from './utils';
+import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps, SectionProps} from './types';
 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} = useGridSystem();
+
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
@@ -128,6 +133,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 {Alert, Dimensions} from 'react-native';
+import React, {useEffect, useState} from 'react';
 
 /**
  * validate children type
@@ -57,4 +56,25 @@ const validateChildren = (
   return results;
 };
 
-export {validateChildren};
+const useGridSystem = () => {
+  const [numberOfColumns, setNumberOfColumns] = useState(
+    Dimensions.get('window').width > 600 ? 24 : 12,
+  );
+
+  useEffect(() => {
+    const subscription: any = Dimensions.addEventListener(
+      'change',
+      ({window}: any) => {
+        const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+        if (newColumns != numberOfColumns) {
+          setNumberOfColumns(newColumns);
+        }
+      },
+    );
+    return () => subscription?.remove();
+  }, []);
+
+  return {numberOfColumns};
+};
+
+export {validateChildren, useGridSystem};

package/Pagination/Dot.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext} from 'react';
 import {Animated} from 'react-native';
 import styles from './styles';
 import {DotProps} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const Dot: FC<DotProps> = ({active, style}) => {
   const {theme} = useContext(ApplicationContext);

package/Pagination/PaginationDot.tsx

@@ -4,7 +4,7 @@ import {ChildPaginationProps} from './types';
 import Dot from './Dot';
 import styles from './styles';
 import {Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,

package/Pagination/PaginationNumber.tsx

@@ -3,14 +3,13 @@ import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   return (
     <View style={[styles.paginationNumberContainer]}>
       <Text color={Colors.black_01} typography={'label_default'}>{`${

package/Pagination/PaginationScroll.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
 import {ScrollIndicatorProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -31,6 +31,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
+        accessibilityLabel={'PaginationScroll'}
         ref={scrollViewRef}
         onScroll={Animated.event(
           [

package/Pagination/PaginationWhiteDot.tsx

@@ -4,7 +4,7 @@ import {ChildPaginationProps} from './types';
 import styles from './styles';
 import Dot from './Dot';
 import {Colors, Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,

package/Popup/PopupNotify.tsx

@@ -4,7 +4,7 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 

package/Popup/PopupPromotion.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';

package/Radio/index.tsx

@@ -4,7 +4,7 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 
 const Radio: FC<RadioProps> = ({

package/Switch/index.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {

package/Tag/index.tsx

@@ -60,7 +60,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={`Tag/${label}`}>
       {!!icon && (
         <Icon
           style={styles.icon}

package/Text/index.tsx

@@ -2,8 +2,9 @@ import React, {useContext} from 'react';
 import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 import {GridContext} from '../Layout';
+import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -93,8 +94,8 @@ const Text: React.FC<TextProps> = ({
 
     return {
       fontFamily,
-      fontSize,
-      lineHeight,
+      fontSize: scaleSize(fontSize),
+      lineHeight: scaleSize(lineHeight),
       fontStyle,
     };
   };
@@ -120,4 +121,4 @@ Text.defaultProps = {
   typography: 'paragraph_default',
 };
 
-export {Text};
+export {Text, scaleSize};

package/Text/utils.ts

@@ -0,0 +1,14 @@
+import {Dimensions} from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const scaleSize = (size: number) => {
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 5);
+  }
+
+  return size;
+};
+export {scaleSize};

package/index.ts

@@ -5,8 +5,15 @@ import {
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 
+/**
+ * native export
+ */
 export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 
+/**
+ * foundation component
+ */
+
 export * from './Consts';
 export * from './Layout';
 export * from './Layout/types';
@@ -15,8 +22,8 @@ export * from './Popup/types';
 export * from './Text';
 export * from './Text/types';
 export * from './Button';
-export * from './Navigation';
-export * from './Navigation/types';
+export * from './Application';
+export * from './Application/types';
 export * from './Icon';
 export * from './Icon/types';
 export * from './IconButton';