@momo-kits/foundation 0.80.7 → 0.80.8-beta.10

package/Layout/Screen.tsx

@@ -1,5 +1,6 @@
 import {
   Animated,
+  Image,
   KeyboardAvoidingView,
   Platform,
   ScrollViewProps,
@@ -8,13 +9,24 @@ import {
 } from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {ReactNode, useContext, useEffect, useRef} from 'react';
+import React, {
+  forwardRef,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
-import {ApplicationContext, HeaderTitle} from '../Application';
+import {
+  ApplicationContext,
+  HeaderBackground,
+  HeaderTitle,
+} from '../Application';
 import Navigation from '../Application/Navigation';
 
 export interface ScreenProps extends ViewProps {
+  children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
    */
@@ -25,31 +37,31 @@ export interface ScreenProps extends ViewProps {
    */
   enableKeyboardAvoidingView?: boolean;
 
-  /**
-   * Optional. Background color of the header.
-   */
-  headerBackground?: string;
-
   /**
    * Optional. If `true`, the screen content is scrollable.
    */
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an animated header for the screen.
+   * Optional. If `true`, use an extended header for the screen.
    */
-  useAnimatedHeader?: boolean;
+  useExtendedHeader?: boolean;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Props for the animated component or bool used top navigation animated.
    */
-  useExtendedHeader?: boolean;
+  animatedHeader?: boolean | ((props?: any) => React.ReactElement);
 
   /**
    * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
    */
   scrollViewProps?: ScrollViewProps;
 
+  /**
+   * Optional. ReactNode representing the header component of the screen.
+   */
+  headerComponent?: ReactNode;
+
   /**
    * Optional. ReactNode representing the footer component of the screen.
    */
@@ -66,191 +78,204 @@ export interface ScreenProps extends ViewProps {
   backgroundColor?: string;
 }
 
-const Screen: React.FC<ScreenProps> = ({
-  children,
-  enableKeyboardAvoidingView = false,
-  scrollable = false,
-  navigation,
-  marginHeader,
-  useAnimatedHeader,
-  useExtendedHeader,
-  headerBackground,
-  scrollViewProps,
-  footerComponent: Footer,
-  backgroundColor,
-}) => {
-  const animatedValue = useRef<Animated.Value | undefined>(undefined);
-  const {theme} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-  const headerTransparent = useAnimatedHeader || useExtendedHeader;
+const Screen = forwardRef(
+  (
+    {
+      children,
+      enableKeyboardAvoidingView = false,
+      scrollable = false,
+      navigation,
+      marginHeader,
+      useExtendedHeader,
+      animatedHeader,
+      scrollViewProps,
+      headerComponent: Header,
+      footerComponent: Footer,
+      backgroundColor,
+    }: ScreenProps,
+    ref,
+  ) => {
+    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const {theme} = useContext(ApplicationContext);
+    const insets = useSafeAreaInsets();
 
-  let handleScroll;
-  let imageAnimatedStyle = {};
-  let opacity;
-  let Component: any = View;
-  animatedValue.current = undefined;
+    let handleScroll;
+    let headerBackground: string | undefined = undefined;
+    let Component: any = View;
+    animatedValue.current = undefined;
+
+    if (useExtendedHeader || animatedHeader) {
+      marginHeader = marginHeader ?? useHeaderHeight();
+    }
 
-  /**
-   * 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(() => {
-    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
-      let title = {};
+    useEffect(() => {
       if (useExtendedHeader) {
-        title = {headerTitle: HeaderTitle};
+        navigation?.setOptions({
+          headerTransparent: true,
+          headerBackground: () => null,
+        });
       }
-      navigation?.setOptions({
-        animatedValue: animatedValue.current,
-        headerTransparent: headerTransparent,
-        ...title,
-      });
-    }
-  }, [useExtendedHeader, useAnimatedHeader]);
+    }, [useExtendedHeader]);
 
-  /**
-   * 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,
+    useEffect(() => {
+      if (animatedHeader) {
+        navigation?.setOptions({
+          headerTransparent: true,
+          headerBackground: (props: any) => (
+            <HeaderBackground
+              {...props}
+              animatedValue={animatedValue.current}
+            />
+          ),
+          headerTitle: (props: any) => (
+            <HeaderTitle {...props} animatedValue={animatedValue.current} />
+          ),
         });
-      });
-    }
-  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+        const current: any = navigation;
+        const parent = current?.getParent?.();
+        if (parent) {
+          return current?.addListener?.('focus', () => {
+            const stackNavigation = new Navigation(parent, theme);
+            stackNavigation?.setOptions({
+              headerTransparent: true,
+              headerBackground: (props: any) => (
+                <HeaderBackground
+                  {...props}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+              headerTitle: (props: any) => (
+                <HeaderTitle {...props} animatedValue={animatedValue.current} />
+              ),
+            });
+          });
+        }
+      }
+    }, [animatedHeader]);
 
-  /**
-   * 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},
+    /**
+     * animated when use scroll && animated value
+     */
+    if (scrollable) {
+      Component = Animated.ScrollView;
+      handleScroll = scrollViewProps?.onScroll;
+      if (animatedHeader) {
+        animatedValue.current = new Animated.Value(0);
+        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>
+          ],
+          {useNativeDriver: true, listener: scrollViewProps?.onScroll},
         );
-      });
-    } else {
-      const item: any = children;
-      const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-      return (
-        <View
-          key={`ScreenItem`}
-          style={{
-            marginTop: space,
-            flex: item?.props?.expanded ? 1 : undefined,
-          }}>
-          {children}
-        </View>
-      );
+      }
     }
-  };
 
-  return (
-    <View
-      style={[Styles.flex, {backgroundColor}]}
-      accessibilityLabel={`ScreenContainer`}>
-      <View
-        style={{
-          position: 'absolute',
-          maxHeight: 215,
-          width: '100%',
-          overflow: 'hidden',
-        }}>
-        {!!headerBackground && (
-          <Animated.Image
+    /**
+     * render top navigation banner
+     */
+    const renderHeader = () => {
+      if (headerBackground != undefined) {
+        return (
+          <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}
-          showsVerticalScrollIndicator={false}
-          onScroll={handleScroll}
-          style={[Styles.flex, {marginTop: marginHeader}]}>
-          {renderContent()}
-        </Component>
-        {Footer && (
+        );
+      }
+      if (typeof animatedHeader === 'function') {
+        return animatedHeader({animatedValue: animatedValue.current});
+      }
+    };
+
+    /**
+     * 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>
+          );
+        });
+      } else {
+        const item: any = children;
+        const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+        return (
           <View
+            key={`ScreenItem`}
             style={{
-              paddingTop: Spacing.S,
-              paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              backgroundColor: theme.colors.background.surface,
+              marginTop: space,
+              flex: item?.props?.expanded ? 1 : undefined,
             }}>
-            <Section>{Footer}</Section>
+            {children}
           </View>
-        )}
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
+        );
+      }
+    };
+
+    return (
+      <View
+        style={[Styles.flex, {backgroundColor}]}
+        accessibilityLabel={`ScreenContainer`}>
+        <View
+          style={{
+            position: 'absolute',
+            width: '100%',
+            maxHeight: 215,
+          }}>
+          {renderHeader()}
+        </View>
+        <KeyboardAvoidingView
+          style={[Styles.flex, {paddingTop: marginHeader}]}
+          enabled={enableKeyboardAvoidingView}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}>
+          {Header}
+          <Component
+            {...scrollViewProps}
+            ref={ref}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            style={Styles.flex}>
+            {renderContent()}
+          </Component>
+          {Footer && (
+            <View
+              style={{
+                paddingTop: Spacing.S,
+                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
+                backgroundColor: theme.colors.background.surface,
+              }}>
+              <Section>{Footer}</Section>
+            </View>
+          )}
+        </KeyboardAvoidingView>
+      </View>
+    );
+  },
+);
 
 export default Screen;

package/Layout/styles.ts

@@ -47,6 +47,7 @@ export default StyleSheet.create({
     marginLeft: undefined,
     marginRight: undefined,
     marginVertical: undefined,
+    overflow: 'hidden',
   },
   item: {
     overflow: 'hidden',

package/Pagination/PaginationDot.tsx

@@ -9,6 +9,7 @@ import {ApplicationContext} from '../Application';
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
@@ -27,7 +28,11 @@ const PaginationDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -8,12 +8,15 @@ import {Colors} from '../Consts';
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
+  style,
 }) => {
   return (
-    <View style={[styles.paginationNumberContainer]}>
-      <Text color={Colors.black_01} typography={'label_default'}>{`${
-        activeIndex + 1
-      }/${dataLength}`}</Text>
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
     </View>
   );
 };

package/Pagination/PaginationWhiteDot.tsx

@@ -8,6 +8,7 @@ import {Colors, Spacing} from '../Consts';
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
@@ -24,7 +25,11 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={[styles.paginationWhiteContainer]}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationWhiteDot;

package/Pagination/styles.ts

@@ -25,6 +25,8 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.L,
     backgroundColor: Colors.black_20 + '33',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   scrollContainer: {
     alignItems: 'center',
@@ -44,4 +46,5 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XS,
   },
+  row: {flexDirection: 'row'},
 });

package/Pagination/types.ts

@@ -20,6 +20,8 @@ export type PaginationProps = {
    * Represents the total number of items (pages) in the Pagination component.
    */
   dataLength: number;
+
+  style?: ViewStyle | ViewStyle[];
 };
 
 export type DotProps = {

package/Radio/types.ts

@@ -5,7 +5,7 @@ export type RadioProps = {
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
    */
-  value: string;
+  value: any;
 
   /**
    * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
@@ -28,7 +28,7 @@ export type RadioProps = {
    * `groupValue`: Represents the value of the selected Radio component within a group of Radio components.
    * The Radio component for which `value` equals `groupValue` will be selected.
    */
-  groupValue: string;
+  groupValue: any;
 
   /**
    * `style`: Optional. Used to apply custom styling to the Radio component.

package/Title/index.tsx

@@ -5,7 +5,6 @@ import {Icon} from '../Icon';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Colors, Spacing} from '../Consts';
-import {Button} from '../Button';
 import {scaleSize, Text} from '../Text';
 
 const Title: FC<TitleProps> = ({

package/Title/types.ts

@@ -1,11 +1,51 @@
 export type TitleProps = {
+  /**
+   * Optional. Defines the type of Title component.
+   * 'screen' - Used for screen titles.
+   * 'section' - Used for section titles within a screen.
+   * 'card' - Used for titles within a card component.
+   */
   type?: 'screen' | 'section' | 'card';
+
+  /**
+   * Required. The text of the title.
+   */
   title: string;
+
+  /**
+   * Optional. A description or subtitle that appears below the title.
+   */
   description?: string;
+
+  /**
+   * Optional. Defines the size of the Title component.
+   * 'large' - A larger, more prominent title.
+   * 'small' - A smaller, less prominent title.
+   */
   size?: 'large' | 'small';
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed alongside the title.
+   */
   icon?: string;
+
+  /**
+   * Optional. If `true`, the title will be flexible in its container, adjusting its width dynamically.
+   */
   titleFlex?: boolean;
+
+  /**
+   * Optional. Text for an action button associated with the title.
+   */
   actionTitle?: string;
+
+  /**
+   * Optional. Function to be called when the action associated with the title is pressed.
+   */
   onPressAction?: () => void;
+
+  /**
+   * Optional. If `true`, an action button or icon is displayed alongside the title.
+   */
   showAction?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.80.7",
+    "version": "0.80.8-beta.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -42,4 +42,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}