@momo-kits/foundation 0.75.1-beta.10

package/Navigation/utils.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import {
+  StackNavigationOptions,
+  TransitionPresets,
+} from '@react-navigation/stack';
+import {
+  HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
+  HeaderTitle,
+  HeaderToolkitAction,
+} from './Components';
+import {NavigationOptions, Theme} from './types';
+import {Colors} from '../Consts';
+
+const getTintColor = (theme: Theme): any => {
+  if (theme.assets?.headerBackground) {
+    return {
+      headerTintColor: Colors.black_01,
+    };
+  }
+  return {
+    headerTintColor: theme.colors.text.default,
+  };
+};
+
+const getStackOptions = (theme: Theme): StackNavigationOptions => {
+  return {
+    headerTitleAlign: 'center',
+    headerTitle: HeaderTitle,
+    headerBackground: HeaderBackground,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    ...getTintColor(theme),
+  };
+};
+
+const getDialogOptions = (theme: Theme): StackNavigationOptions => {
+  return {
+    headerTitleAlign: 'center',
+    headerTitle: HeaderTitle,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerBackground: HeaderBackground,
+    ...getTintColor(theme),
+    ...TransitionPresets.ModalTransition,
+  };
+};
+
+const getModalOptions = (): StackNavigationOptions => {
+  return {
+    headerShown: false,
+    headerBackground: undefined,
+    cardStyle: {backgroundColor: 'transparent'},
+    cardOverlayEnabled: true,
+    animationEnabled: false,
+    cardStyleInterpolator: ({current: {progress}}) => ({
+      cardStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
+      },
+      overlayStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.2, 0.4, 0.6],
+          extrapolate: 'clamp',
+        }),
+      },
+    }),
+  };
+};
+
+const getOptions = (params: NavigationOptions, theme: Theme) => {
+  let backgroundProps = {};
+  let titleProps = {};
+  let options = {};
+
+  if (params.preventBack) {
+    options = {
+      ...options,
+      headerLeft: (props: any) => (
+        <HeaderLeft {...props} preventBack={params.preventBack} />
+      ),
+    };
+  }
+  if (params.surface == true) {
+    options = {
+      ...options,
+      ...getTintColor({
+        ...theme,
+        assets: {...theme.assets, headerBackground: undefined},
+      }),
+    };
+    backgroundProps = {
+      ...backgroundProps,
+      image: null,
+      backgroundColor: theme.colors.background.surface,
+      useBorder: true,
+    };
+  } else {
+    backgroundProps = {};
+    options = {...options, ...getTintColor(theme)};
+  }
+
+  if (params.animatedValue) {
+    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
+    titleProps = {...titleProps, animatedValue: params.animatedValue};
+    options = {...options, headerTransparent: true};
+  } else {
+    options = {...options, headerTransparent: false};
+  }
+
+  if (params.customTitle) {
+    options = {
+      ...options,
+      headerTitleAlign: 'left',
+      headerTitle: (props: any) => {
+        return <HeaderCustom {...params.customTitle} {...props} />;
+      },
+    };
+  } else {
+    options = {
+      ...options,
+      headerTitle: (props: any) => {
+        return <HeaderTitle {...titleProps} {...props} />;
+      },
+    };
+  }
+
+  return {
+    ...params,
+    ...options,
+    headerBackground: () => <HeaderBackground {...backgroundProps} />,
+  };
+};
+
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Pagination/Dot.tsx

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

package/Pagination/PaginationDot.tsx

@@ -0,0 +1,33 @@
+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 '../Navigation';
+
+const PaginationDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const renderDots = () => {
+    const dots = [];
+    for (let i = 0; i < dataLength; i++) {
+      dots.push(
+        <Dot
+          key={`Dot${i}`}
+          style={[
+            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
+            {backgroundColor: theme.colors.primary},
+          ]}
+          active={activeIndex === i}
+        />,
+      );
+    }
+    return dots;
+  };
+  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+};
+
+export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -0,0 +1,23 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ChildPaginationProps} from './types';
+import styles from './styles';
+import {Text} from '../Text';
+import {ApplicationContext} from '../Navigation';
+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'}>{`${
+        activeIndex + 1
+      }/${dataLength}`}</Text>
+    </View>
+  );
+};
+
+export default PaginationNumber;

package/Pagination/PaginationScroll.tsx

@@ -0,0 +1,88 @@
+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';
+
+const INDICATOR_WIDTH = 24;
+const INDICATOR_CONTAINER_WIDTH = 72;
+const PaginationScroll: FC<ScrollIndicatorProps> = ({
+  style,
+  children,
+  scrollViewRef,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const left = useRef(new Animated.Value(0)).current;
+  const [scrollViewWidth, setScrollViewWidth] = useState(0);
+  const [scrollContentWidth, setScrollContentWidth] = useState(0);
+
+  const translateX = () => {
+    if (scrollViewWidth && scrollContentWidth) {
+      const value = left.interpolate({
+        inputRange: [0, scrollContentWidth - scrollViewWidth],
+        outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
+        extrapolate: 'clamp',
+      });
+      return {transform: [{translateX: value}]};
+    }
+    return {};
+  };
+
+  const renderScrollView = () => {
+    return (
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {
+                  x: left,
+                },
+              },
+            },
+          ],
+          {useNativeDriver: true},
+        )}
+        alwaysBounceHorizontal={false}
+        showsHorizontalScrollIndicator={false}
+        horizontal
+        style={styles.scrollView}
+        onContentSizeChange={width => {
+          setScrollContentWidth(width);
+        }}
+        onLayout={e => {
+          setScrollViewWidth(e.nativeEvent.layout.width);
+        }}>
+        {children}
+      </Animated.ScrollView>
+    );
+  };
+  const renderIndicator = () => {
+    return (
+      <View
+        style={[
+          styles.indicatorContainer,
+          {backgroundColor: theme.colors.background.pressed},
+        ]}>
+        <Animated.View
+          style={[
+            styles.indicator,
+            {
+              backgroundColor: theme.colors.primary,
+            },
+            translateX(),
+          ]}
+        />
+      </View>
+    );
+  };
+  return (
+    <View style={[style, styles.scrollContainer]}>
+      {renderScrollView()}
+      {renderIndicator()}
+    </View>
+  );
+};
+
+export default PaginationScroll;

package/Pagination/PaginationWhiteDot.tsx

@@ -0,0 +1,32 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ChildPaginationProps} from './types';
+import styles from './styles';
+import Dot from './Dot';
+import {Colors, Spacing} from '../Consts';
+import {ApplicationContext} from '../Navigation';
+
+const PaginationWhiteDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const renderDots = () => {
+    const dots = [];
+    for (let i = 0; i < dataLength; i++) {
+      dots.push(
+        <Dot
+          style={[
+            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
+            {backgroundColor: Colors.black_01},
+          ]}
+          active={activeIndex === i}
+        />,
+      );
+    }
+    return dots;
+  };
+  return <View style={[styles.paginationWhiteContainer]}>{renderDots()}</View>;
+};
+
+export default PaginationWhiteDot;

package/Pagination/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react';
+import {PaginationProps} from './types';
+import PaginationWhiteDot from './PaginationWhiteDot';
+import PaginationDot from './PaginationDot';
+import PaginationNumber from './PaginationNumber';
+import PaginationScroll from './PaginationScroll';
+
+const Pagination: FC<PaginationProps> = props => {
+  const {type} = props;
+
+  const getComponent = (): any => {
+    switch (type) {
+      case 'black_white':
+        return <PaginationWhiteDot {...props} />;
+      case 'number':
+        return <PaginationNumber {...props} />;
+      default:
+        return <PaginationDot {...props} />;
+    }
+  };
+
+  return getComponent();
+};
+
+export {Pagination, PaginationScroll};

package/Pagination/styles.ts

@@ -0,0 +1,47 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  activeDot: {
+    height: 4,
+    width: 12,
+    borderRadius: Radius.XS,
+  },
+  inactiveDot: {
+    height: 4,
+    width: 4,
+    borderRadius: Radius.XS,
+  },
+  paginationPinkContainer: {
+    flexDirection: 'row',
+  },
+  paginationWhiteContainer: {
+    flexDirection: 'row',
+    padding: Spacing.XS,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.black_20 + '33',
+  },
+  paginationNumberContainer: {
+    paddingHorizontal: Spacing.S,
+    borderRadius: Radius.L,
+    backgroundColor: Colors.black_20 + '33',
+  },
+  scrollContainer: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  scrollView: {
+    marginBottom: Spacing.L,
+  },
+
+  indicator: {
+    width: 24,
+    height: 4,
+    borderRadius: Radius.XS,
+  },
+  indicatorContainer: {
+    width: 72,
+    height: 4,
+    borderRadius: Radius.XS,
+  },
+});

package/Pagination/types.ts

@@ -0,0 +1,38 @@
+import {ScrollView, ScrollViewProps, ViewStyle} from 'react-native';
+import {Ref} from 'react';
+
+export type PaginationProps = {
+  /**
+   * Optional. Defines the visual style of the Pagination component.
+   * - 'default': Represents the default style.
+   * - 'black_white': Represents a pagination that have black background.
+   * - 'number': Represents a style where pages are represented by numbers.
+   * - 'scroll': Represents a scrollable style.
+   */
+  type?: 'default' | 'black_white' | 'number' | 'scroll';
+
+  /**
+   * Represents the currently active (selected) index in the Pagination component.
+   */
+  activeIndex: number;
+
+  /**
+   * Represents the total number of items (pages) in the Pagination component.
+   */
+  dataLength: number;
+};
+
+export type DotProps = {
+  active: boolean;
+  style: ViewStyle | ViewStyle[];
+};
+
+export interface ScrollIndicatorProps extends ScrollViewProps {
+  /**
+   * Optional. Represents a reference to the ScrollView component.
+   * It can be used to access the instance methods of the ScrollView.
+   */
+  scrollViewRef?: Ref<ScrollView>;
+}
+
+export type ChildPaginationProps = Omit<PaginationProps, 'type'>;

package/Popup/PopupNotify.tsx

@@ -0,0 +1,215 @@
+import React, {useContext} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {PopupNotifyProps} from './types';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Image} from '../Image';
+import {Text} from '../Text';
+import {ApplicationContext} from '../Navigation';
+import {Button} from '../Button';
+import {Icon} from '../Icon';
+
+const PopupNotify: React.FC<PopupNotifyProps> = ({
+  image,
+  title,
+  description,
+  information,
+  secondary,
+  primary,
+  buttonDirection = 'row',
+  onIconClose,
+}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    navigator?.pop();
+    callback?.();
+  };
+
+  /**
+   *  build main action of popup
+   */
+  const buildAction = () => {
+    const renderRow = () => {
+      return (
+        <View style={Styles.row}>
+          {!!secondary?.title && (
+            <>
+              <View style={Styles.flex}>
+                <Button
+                  title={secondary?.title}
+                  type="text"
+                  size="medium"
+                  onPress={() => {
+                    onAction(secondary?.onPress);
+                  }}
+                />
+              </View>
+              <View style={styles.buttonSpace} />
+            </>
+          )}
+          <View style={Styles.flex}>
+            <Button
+              title={primary.title}
+              size="medium"
+              onPress={() => {
+                onAction(primary.onPress);
+              }}
+            />
+          </View>
+        </View>
+      );
+    };
+    const renderColumn = () => {
+      return (
+        <View style={Styles.columnCenter}>
+          <Button
+            title={primary.title}
+            size="medium"
+            onPress={() => {
+              onAction(primary.onPress);
+            }}
+          />
+          {!!secondary?.title && (
+            <>
+              <View style={styles.buttonSpace} />
+              <Button
+                title={secondary?.title}
+                type="text"
+                size="medium"
+                onPress={() => {
+                  onAction(secondary?.onPress);
+                }}
+              />
+            </>
+          )}
+        </View>
+      );
+    };
+
+    if (buttonDirection == 'auto') {
+      if (
+        secondary?.title &&
+        (secondary.title.length > 12 || primary.title.length > 12)
+      ) {
+        return renderColumn();
+      }
+      return renderRow();
+    }
+    if (buttonDirection == 'row') {
+      return renderRow();
+    }
+    return renderColumn();
+  };
+
+  /**
+   * build close action
+   */
+  const buildCloseIcon = () => {
+    return (
+      <View style={styles.iconCloseContainer}>
+        <TouchableOpacity
+          onPress={() => onAction(onIconClose)}
+          style={[
+            styles.iconClose,
+            {
+              backgroundColor: theme.colors.text.default,
+              borderColor: theme.colors.background.surface,
+            },
+          ]}>
+          <Icon
+            source="navigation_close"
+            color={theme.colors.background.surface}
+            size={14}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  return (
+    <View
+      accessibilityLabel={'PopupNotify'}
+      style={[
+        styles.container,
+        {backgroundColor: theme.colors.background.surface},
+      ]}>
+      {!!image && <Image source={{uri: image}} style={styles.image} />}
+      <View style={styles.content}>
+        <Text typography={'title_xs'} numberOfLines={1}>
+          {title}
+        </Text>
+        <View style={styles.description}>
+          <Text typography={'paragraph_default'} numberOfLines={3}>
+            {description}
+          </Text>
+        </View>
+        {!!information && (
+          <View style={styles.information}>
+            <Text
+              typography={'description_xs'}
+              color={theme.colors.text.hint}
+              numberOfLines={1}>
+              {information}
+            </Text>
+          </View>
+        )}
+      </View>
+      <View style={styles.contentAction}>{buildAction()}</View>
+      {buildCloseIcon()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: Radius.L,
+    minWidth: '100%',
+  },
+  image: {
+    borderTopLeftRadius: Radius.L,
+    borderTopRightRadius: Radius.L,
+    aspectRatio: 1.7777,
+  },
+  content: {padding: Spacing.XL},
+  description: {
+    marginTop: Spacing.S,
+  },
+  information: {
+    marginTop: Spacing.S,
+  },
+  contentAction: {
+    paddingHorizontal: Spacing.XL,
+    paddingBottom: Spacing.XL,
+  },
+  buttonSpace: {
+    width: Spacing.S,
+    height: Spacing.S,
+  },
+  iconCloseContainer: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -Spacing.S,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
+  },
+});
+
+PopupNotify.defaultProps = {
+  title: 'Title',
+  primary: {
+    title: 'Primary',
+    onPress: () => {},
+  },
+};
+
+export default PopupNotify;