@momo-kits/foundation 0.151.2-beta.1 → 0.152.1-beta.1

package/Layout/TrackingScope.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TrackingScopeContext} from '../Application';
+import { TrackingScopeContext } from '../Context';
 
 const TrackingScope = ({
   scopeName,
@@ -9,10 +9,10 @@ const TrackingScope = ({
   children: any;
 }) => {
   return (
-    <TrackingScopeContext.Provider value={{scopeName}}>
+    <TrackingScopeContext.Provider value={{ scopeName }}>
       {children}
     </TrackingScopeContext.Provider>
   );
 };
 
-export {TrackingScope};
+export { TrackingScope };

package/Loader/DotLoader.tsx

@@ -1,12 +1,12 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext } from 'react';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/DotAnimation.json';
-import {ApplicationContext} from '../Application';
-import {hexToRGBA} from './utils';
-import {LoaderProps} from './types';
+import { ApplicationContext } from '../Context';
+import { hexToRGBA } from './utils';
+import { LoaderProps } from './types';
 
-const DotLoader: FC<LoaderProps> = ({color, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const DotLoader: FC<LoaderProps> = ({ color, style }) => {
+  const { theme } = useContext(ApplicationContext);
 
   const arrayColor = [
     color ?? theme.colors.primary,
@@ -28,7 +28,7 @@ const DotLoader: FC<LoaderProps> = ({color, style}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={[{width: 52, height: 18}, style]}
+      style={[{ width: 52, height: 18 }, style]}
       autoPlay
     />
   );

package/Loader/ProgressBar.tsx

@@ -1,12 +1,12 @@
-import React, {FC, useContext, useEffect, useRef} from 'react';
-import {Animated, View} from 'react-native';
+import React, { FC, useContext, useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
 import styles from './styles';
-import {ProgressBarProps} from './types';
-import {ApplicationContext} from '../Application';
-import {Radius} from '../Consts';
+import { ProgressBarProps } from './types';
+import { ApplicationContext } from '../Context';
+import { Radius } from '../Consts';
 
-const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
+  const { theme } = useContext(ApplicationContext);
   const animation = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -27,8 +27,9 @@ const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
       style={[
         style,
         styles.progressContainer,
-        {backgroundColor: theme.colors.background.default},
-      ]}>
+        { backgroundColor: theme.colors.background.default },
+      ]}
+    >
       <Animated.View
         style={{
           height: 4,

package/Loader/Spinner.tsx

@@ -1,12 +1,12 @@
-import React, {FC, useContext} from 'react';
+import React, { FC, useContext } from 'react';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/SpinnerAnimation.json';
-import {hexToRGBA} from './utils';
-import {ApplicationContext} from '../Application';
-import {LoaderProps} from './types';
+import { hexToRGBA } from './utils';
+import { ApplicationContext } from '../Context';
+import { LoaderProps } from './types';
 
-const Spinner: FC<LoaderProps> = ({color, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const Spinner: FC<LoaderProps> = ({ color, style }) => {
+  const { theme } = useContext(ApplicationContext);
 
   let source: any = animation;
   source.assets[0].layers.forEach((layer: any) => {
@@ -20,7 +20,7 @@ const Spinner: FC<LoaderProps> = ({color, style}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={[{width: 24, height: 24}, style]}
+      style={[{ width: 24, height: 24 }, style]}
       autoPlay
     />
   );

package/Pagination/Dot.tsx

@@ -1,14 +1,17 @@
-import React, {FC, useContext} from 'react';
-import {Animated} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { Animated } from 'react-native';
 import styles from './styles';
-import {DotProps} from './types';
-import {ApplicationContext} from '../Application';
+import { DotProps } from './types';
+import { ApplicationContext } from '../Context';
 
-const Dot: FC<DotProps> = ({active, style}) => {
-  const {theme} = useContext(ApplicationContext);
+const Dot: FC<DotProps> = ({ active, style }) => {
+  const { theme } = useContext(ApplicationContext);
   const dotStyle = active
     ? [styles.activeDot]
-    : [styles.inactiveDot, {backgroundColor: theme.colors.background.pressed}];
+    : [
+        styles.inactiveDot,
+        { backgroundColor: theme.colors.background.pressed },
+      ];
 
   return <Animated.View style={[style, dotStyle]} />;
 };

package/Pagination/PaginationDot.tsx

@@ -1,17 +1,17 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
-import {ChildPaginationProps} from './types';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { ChildPaginationProps } from './types';
 import Dot from './Dot';
 import styles from './styles';
-import {Spacing} from '../Consts';
-import {ApplicationContext} from '../Application';
+import { Spacing } from '../Consts';
+import { ApplicationContext } from '../Context';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
     for (let i = 0; i < dataLength; i++) {
@@ -19,8 +19,8 @@ const PaginationDot: FC<ChildPaginationProps> = ({
         <Dot
           key={`Dot${i}`}
           style={[
-            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
-            {backgroundColor: theme.colors.primary},
+            i !== dataLength - 1 ? { marginRight: Spacing.XS } : {},
+            { backgroundColor: theme.colors.primary },
           ]}
           active={activeIndex === i}
         />,

package/Pagination/PaginationScroll.tsx

@@ -1,8 +1,8 @@
-import React, {FC, useContext, useRef, useState} from 'react';
-import {Animated, View} from 'react-native';
-import {ScrollIndicatorProps} from './types';
+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 '../Application';
+import { ApplicationContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -11,7 +11,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   children,
   scrollViewRef,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const left = useRef(new Animated.Value(0)).current;
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
@@ -23,7 +23,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
         extrapolate: 'clamp',
       });
-      return {transform: [{translateX: value}]};
+      return { transform: [{ translateX: value }] };
     }
     return {};
   };
@@ -42,7 +42,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
               },
             },
           ],
-          {useNativeDriver: true}
+          { useNativeDriver: true },
         )}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
@@ -53,7 +53,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
         }}
         onLayout={e => {
           setScrollViewWidth(e.nativeEvent.layout.width);
-        }}>
+        }}
+      >
         {children}
       </Animated.ScrollView>
     );
@@ -63,8 +64,9 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
       <View
         style={[
           styles.indicatorContainer,
-          {backgroundColor: theme.colors.background.pressed},
-        ]}>
+          { backgroundColor: theme.colors.background.pressed },
+        ]}
+      >
         <Animated.View
           style={[
             styles.indicator,

package/Popup/PopupNotify.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext, MiniAppContext } from '../Application';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
 import { Radius, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
@@ -226,7 +226,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <Text
               accessibilityLabel={'description_popup_notify'}
               typography={'body_default_regular'}
-              onTextLayout={({nativeEvent: {lines}}) => {
+              onTextLayout={({ nativeEvent: { lines } }) => {
                 const enableScroll = lines.length > 8.5;
                 if (enableScroll !== scrollContent) {
                   setScrollContent(enableScroll);

package/Popup/PopupPromotion.tsx

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

package/Radio/index.tsx

@@ -1,15 +1,12 @@
-import React, {FC, useContext} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import React, { FC, useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 
-import {RadioProps} from './types';
-import {Text} from '../Text';
+import { RadioProps } from './types';
+import { Text } from '../Text';
 import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  useComponentId,
-} from '../Application';
-import {Spacing} from '../Consts';
+import { useComponentId } from '../Application';
+import { ApplicationContext, ComponentContext } from '../Context';
+import { Spacing } from '../Consts';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -23,12 +20,12 @@ const Radio: FC<RadioProps> = ({
   accessibilityLabel,
   ...props
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const selected = value === groupValue;
   const componentName = 'Radio';
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}${label ? `/${label}` : ''}`,
-    accessibilityLabel
+    accessibilityLabel,
   );
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -58,7 +55,8 @@ const Radio: FC<RadioProps> = ({
         params,
         state: disabled ? 'disabled' : 'enabled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         disabled={disabled}
@@ -75,20 +73,22 @@ const Radio: FC<RadioProps> = ({
           disabled: disabled as boolean,
           ...accessibilityState,
         }}
-        accessibilityLabel={componentId}>
+        accessibilityLabel={componentId}
+      >
         <View
           style={[
             styles.radio,
             checkBoxStyle,
             disabledStyle,
-            {marginRight: label ? Spacing.S : 0},
+            { marginRight: label ? Spacing.S : 0 },
           ]}
         />
         {!!label && (
           <Text
             typography={'body_default_regular'}
             style={styles.radioText}
-            accessibilityLabel={componentId + '|text'}>
+            accessibilityLabel={componentId + '|text'}
+          >
             {label}
           </Text>
         )}
@@ -97,4 +97,4 @@ const Radio: FC<RadioProps> = ({
   );
 };
 
-export {Radio};
+export { Radio };

package/Skeleton/index.tsx

@@ -12,7 +12,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { SkeletonTypes } from './types';
 import { Colors, Styles } from '../Consts';
 import styles from './styles';
-import { ScreenContext, SkeletonContext } from '../Application';
+import { ScreenContext, SkeletonContext } from '../Context';
 
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const screen = useContext<any>(ScreenContext);

package/Switch/index.tsx

@@ -1,9 +1,10 @@
-import React, {FC} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {SwitchProps} from './types';
+import React, { FC } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SwitchProps } from './types';
 import styles from './styles';
-import {Colors} from '../Consts';
-import {ComponentContext, useComponentId} from '../Application';
+import { Colors } from '../Consts';
+import { useComponentId } from '../Application';
+import { ComponentContext } from '../Context';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -18,7 +19,7 @@ const Switch: FC<SwitchProps> = ({
   const circleAlign = value ? 'flex-end' : 'flex-start';
   const componentName = 'Switch';
 
-  const {componentId} = useComponentId(componentName, accessibilityLabel);
+  const { componentId } = useComponentId(componentName, accessibilityLabel);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -32,7 +33,8 @@ const Switch: FC<SwitchProps> = ({
         params,
         state: disabled ? 'disabled' : 'enabled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         disabled={disabled}
@@ -46,14 +48,17 @@ const Switch: FC<SwitchProps> = ({
         style={[
           style,
           styles.container,
-          {backgroundColor, alignItems: circleAlign},
-        ]}>
-        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-          <View style={[styles.circleSmall, {backgroundColor}]} />
+          { backgroundColor, alignItems: circleAlign },
+        ]}
+      >
+        <View
+          style={[styles.circle, { backgroundColor: circleBackgroundColor }]}
+        >
+          <View style={[styles.circleSmall, { backgroundColor }]} />
         </View>
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
-export {Switch};
+export { Switch };

package/Text/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { Text as RNText, TextProps as RNTextProps, View } from 'react-native';
 import styles from './styles';
 import { Typography, TypographyWeight } from './types';
-import { ApplicationContext, SkeletonContext } from '../Application';
+import { ApplicationContext, SkeletonContext } from '../Context';
 import { scaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
 

package/Title/index.tsx

@@ -1,13 +1,19 @@
-import React, {FC, useContext, useState} from 'react';
-import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
-import {ApplicationContext, useComponentId} from '../Application';
-import {Badge} from '../Badge';
-import {Colors} from '../Consts';
+import React, { FC, useContext, useState } from 'react';
+import {
+  Text as RNText,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { Icon } from '../Icon';
+import { scaleSize, Text } from '../Text';
+import { useComponentId } from '../Application';
+import { ApplicationContext } from '../Context';
+import { Badge } from '../Badge';
+import { Colors } from '../Consts';
 import styles from './styles';
-import {TitleProps} from './types';
-import {Typography} from '../Text/types';
+import { TitleProps } from './types';
+import { Typography } from '../Text/types';
 
 const Title: FC<TitleProps> = ({
   accessibilityLabel,
@@ -28,7 +34,7 @@ const Title: FC<TitleProps> = ({
   textOnly = false,
   style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
   const styleSheet: {
@@ -39,10 +45,10 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const flexStyle: ViewStyle = showTrailingAction ? {maxWidth: '95%'} : {};
+  const flexStyle: ViewStyle = showTrailingAction ? { maxWidth: '95%' } : {};
   const componentName = 'Title';
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${title}`,
     accessibilityLabel,
   );
@@ -55,17 +61,18 @@ const Title: FC<TitleProps> = ({
     };
 
     if (iconAlign === 'middle') {
-      iconStyle = {justifyContent: 'center'};
+      iconStyle = { justifyContent: 'center' };
     }
 
     if (iconAlign === 'bottom') {
-      iconStyle = {justifyContent: 'flex-end'};
+      iconStyle = { justifyContent: 'flex-end' };
     }
 
     return (
       <View
         accessibilityLabel={componentId + '|icon'}
-        style={[styles.iconView, iconStyle]}>
+        style={[styles.iconView, iconStyle]}
+      >
         <Icon color={iconColor} source={icon} />
       </View>
     );
@@ -80,7 +87,8 @@ const Title: FC<TitleProps> = ({
               setContentWidth(e.nativeEvent.layout.width);
             }
           }}
-          style={[styles.iconLeftView, flexStyle]}>
+          style={[styles.iconLeftView, flexStyle]}
+        >
           <RNText
             accessibilityLabel={componentId + '|title-text'}
             numberOfLines={numberOfLines}
@@ -91,7 +99,8 @@ const Title: FC<TitleProps> = ({
                 maxWidth:
                   contentWidth > 0 ? contentWidth - badgeWidth : undefined,
               },
-            ]}>
+            ]}
+          >
             {title}
           </RNText>
           {badgeLabel && (
@@ -103,7 +112,8 @@ const Title: FC<TitleProps> = ({
               }}
               style={{
                 alignItems: 'center',
-              }}>
+              }}
+            >
               <Badge
                 style={styles.badge}
                 label={badgeLabel}
@@ -118,7 +128,8 @@ const Title: FC<TitleProps> = ({
             accessibilityLabel={componentId + '|description-text'}
             style={styles.description}
             color={theme.colors.text.secondary}
-            typography={'description_default_regular'}>
+            typography={'description_default_regular'}
+          >
             {description}
           </Text>
         )}
@@ -132,7 +143,8 @@ const Title: FC<TitleProps> = ({
         accessibilityLabel={componentId + '|trailing-touch'}
         onPress={onPressTrailingAction}
         style={styles.iconLeftView}
-        hitSlop={{top: 10, bottom: 10, left: 50, right: 10}}>
+        hitSlop={{ top: 10, bottom: 10, left: 50, right: 10 }}
+      >
         {showTrailingAction && !showRightAction && (
           <View
             style={[
@@ -142,7 +154,8 @@ const Title: FC<TitleProps> = ({
                   ? Colors.black_06 + '99'
                   : Colors.black_06 + '4D',
               },
-            ]}>
+            ]}
+          >
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(18)}
@@ -164,7 +177,8 @@ const Title: FC<TitleProps> = ({
         style={{
           height: lineHeight,
           justifyContent: 'center',
-        }}>
+        }}
+      >
         {!buttonTitle ? (
           <TouchableOpacity
             onPress={onPressRightAction}
@@ -174,7 +188,8 @@ const Title: FC<TitleProps> = ({
                 backgroundColor: theme.colors.primary + '0F',
               },
             ]}
-            accessibilityLabel={componentId + '|label-right-action-touch'}>
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(22)}
@@ -184,11 +199,13 @@ const Title: FC<TitleProps> = ({
         ) : (
           <TouchableOpacity
             onPress={onPressRightAction}
-            accessibilityLabel={componentId + '|label-right-action-touch'}>
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
             <Text
               color={theme.colors.primary}
               typography={buttonTypo}
-              accessibilityLabel={componentId + '|label-right-action-text'}>
+              accessibilityLabel={componentId + '|label-right-action-text'}
+            >
               {buttonTitle}
             </Text>
           </TouchableOpacity>
@@ -203,7 +220,8 @@ const Title: FC<TitleProps> = ({
         <RNText
           accessibilityLabel={componentId + '|title-text'}
           numberOfLines={numberOfLines}
-          style={[styleSheet[typography], styles.title]}>
+          style={[styleSheet[typography], styles.title]}
+        >
           {title}
         </RNText>
       </View>
@@ -213,7 +231,8 @@ const Title: FC<TitleProps> = ({
   return (
     <View
       style={[style, styles.wrapper, isSection && styles.margin]}
-      accessibilityLabel={componentId}>
+      accessibilityLabel={componentId}
+    >
       {renderIcon()}
       {renderContent()}
       {renderActionRight()}
@@ -221,5 +240,5 @@ const Title: FC<TitleProps> = ({
   );
 };
 
-export {Title};
-export type {TitleProps};
+export { Title };
+export type { TitleProps };

package/index.ts

@@ -10,6 +10,7 @@ export * from 'react-native-safe-area-context';
  * foundation component
  */
 export * from './Consts';
+export * from './Context';
 export * from './Layout';
 export * from './Layout/types';
 export * from './Popup';

package/package.json

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

package/Application/Components/index.ts

@@ -1,7 +0,0 @@
-export * from './HeaderAnimated';
-export * from './HeaderBackground';
-export * from './HeaderExtendHeader';
-export * from './HeaderLeft';
-export * from './HeaderTitle';
-export * from './NavigationButton';
-export * from './HeaderRight';