@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/foundations/Pagination/PaginationScroll.tsx

@@ -0,0 +1,99 @@
+import React, { FC, useContext, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+import { ScrollIndicatorProps } from './types';
+import styles from './styles';
+import { ApplicationContext, MiniAppContext } from '../Context';
+
+const INDICATOR_WIDTH = 24;
+const INDICATOR_CONTAINER_WIDTH = 72;
+const PaginationScroll: FC<ScrollIndicatorProps> = ({
+  style,
+  children,
+  scrollViewRef,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const left = useRef(new Animated.Value(0)).current;
+  const [scrollViewWidth, setScrollViewWidth] = useState(0);
+  const [scrollContentWidth, setScrollContentWidth] = useState(0);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  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,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {renderScrollView()}
+      {scrollContentWidth > scrollViewWidth && renderIndicator()}
+    </View>
+  );
+};
+
+export default PaginationScroll;

package/src/foundations/Pagination/PaginationWhiteDot.tsx

@@ -0,0 +1,43 @@
+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 { MiniAppContext } from '../Context';
+
+const PaginationWhiteDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+  style,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  const renderDots = () => {
+    const dots: React.ReactElement[] = [];
+    for (let i = 0; i < dataLength; i++) {
+      dots.push(
+        <Dot
+          key={`Dot${i}`}
+          style={[
+            i !== dataLength - 1 ? { marginRight: Spacing.XS } : {},
+            { backgroundColor: Colors.black_01 },
+          ]}
+          active={activeIndex === i}
+        />,
+      );
+    }
+    return dots;
+  };
+  return (
+    <View
+      style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
+    >
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
+};
+
+export default PaginationWhiteDot;

package/src/foundations/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/src/foundations/Pagination/styles.ts

@@ -0,0 +1,51 @@
+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',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    width: '100%',
+  },
+  scrollView: {
+    marginBottom: Spacing.L,
+  },
+
+  indicator: {
+    width: 24,
+    height: 4,
+    borderRadius: Radius.XS,
+  },
+  indicatorContainer: {
+    alignSelf: 'center',
+    width: 72,
+    height: 4,
+    borderRadius: Radius.XS,
+  },
+  row: { flexDirection: 'row' },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});

package/src/foundations/Pagination/types.ts

@@ -0,0 +1,40 @@
+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;
+
+  style?: ViewStyle | ViewStyle[];
+};
+
+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/src/foundations/Popup/PopupNotify.tsx

@@ -0,0 +1,276 @@
+import React, { useContext, useRef, useState } from 'react';
+import {
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import { Button } from '../Button';
+import { Colors, Radius, Spacing, Styles } from '../Consts';
+import { Icon } from '../Icon';
+import { Image } from '../Image';
+import { Text, useScaleSize } from '../Text';
+import { PopupNotifyProps } from './types';
+import { runOnJS } from 'react-native-reanimated';
+
+const PopupNotify: React.FC<PopupNotifyProps> = ({
+  image,
+  title = 'Title',
+  description = 'Description',
+  error,
+  secondary,
+  primary,
+  buttonDirection = 'row',
+  onIconClose,
+  onRequestClose,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const { theme, navigator, translate } = useContext(ApplicationContext);
+  const [scrollContent, setScrollContent] = useState(false);
+  const { width: widthDevice } = Dimensions.get('window');
+  const scaledMaxHeight = useScaleSize(172);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const closeAction = useRef('touch_outside');
+  let descriptionStyle = {};
+  let Description: any = View;
+  if (scrollContent) {
+    Description = ScrollView;
+    descriptionStyle = { maxHeight: scaledMaxHeight };
+  }
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    if (typeof onRequestClose === 'function') {
+      onRequestClose?.(callback);
+    } else {
+      navigator?.pop();
+      runOnJS(() => 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={() => {
+                    closeAction.current = 'button_action';
+                    onAction(secondary?.onPress);
+                  }}
+                  accessibilityLabel={'btn_popup_cancel'}
+                />
+              </View>
+              <View style={styles.buttonSpace} />
+            </>
+          )}
+          <View style={Styles.flex}>
+            <Button
+              title={primary.title}
+              size="medium"
+              onPress={() => {
+                closeAction.current = 'button_action';
+                onAction(primary.onPress);
+              }}
+              accessibilityLabel={'btn_popup_allow'}
+            />
+          </View>
+        </View>
+      );
+    };
+    const renderColumn = () => {
+      return (
+        <View style={Styles.columnCenter}>
+          <Button
+            accessibilityLabel={'btn_popup_allow'}
+            title={primary.title}
+            size="medium"
+            onPress={() => {
+              closeAction.current = 'button_action';
+              onAction(primary.onPress);
+            }}
+          />
+          {!!secondary?.title && (
+            <>
+              <View style={styles.buttonSpace} />
+              <Button
+                accessibilityLabel={'btn_popup_cancel'}
+                title={secondary?.title}
+                type="text"
+                size="medium"
+                onPress={() => {
+                  closeAction.current = 'button_action';
+                  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 = () => {
+    if (typeof onIconClose === 'function') {
+      return (
+        <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
+          style={styles.iconCloseContainer}
+          onPress={() => {
+            closeAction.current = 'icon_close';
+            onAction(onIconClose);
+          }}
+        >
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}
+          >
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    }
+  };
+
+  return (
+    <View
+      accessibilityLabel={'popup_notify'}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          width: widthDevice - Spacing.XL * 2,
+        },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
+      {!!image && <Image source={{ uri: image }} style={styles.image} />}
+      <View style={styles.content}>
+        <Text
+          typography={'header_default_bold'}
+          numberOfLines={3}
+          accessibilityLabel={'title_popup_notify'}
+        >
+          {title}
+        </Text>
+        <Description style={[styles.description, descriptionStyle]}>
+          {typeof description === 'string' ? (
+            <Text
+              accessibilityLabel={'description_popup_notify'}
+              typography={'body_default_regular'}
+              onTextLayout={({ nativeEvent: { lines } }) => {
+                const enableScroll = lines.length > 8.5;
+                if (enableScroll !== scrollContent) {
+                  setScrollContent(enableScroll);
+                }
+              }}
+            >
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
+        </Description>
+        {!!error && (
+          <View style={styles.information}>
+            <Text
+              accessibilityLabel={'description_popup_notify'}
+              typography={'description_xs_regular'}
+              color={theme.colors.text.hint}
+              numberOfLines={1}
+            >
+              {translate?.('errorCode')}
+              {error}
+            </Text>
+          </View>
+        )}
+      </View>
+      <View style={styles.contentAction}>{buildAction()}</View>
+      {buildCloseIcon()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: Radius.L,
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  image: {
+    borderTopLeftRadius: Radius.L,
+    borderTopRightRadius: Radius.L,
+    aspectRatio: 1.7777,
+    overflow: 'hidden',
+  },
+  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.M,
+    right: -Spacing.M,
+    padding: Spacing.XS,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
+  },
+});
+
+export default PopupNotify;

package/src/foundations/Popup/PopupPromotion.tsx

@@ -0,0 +1,118 @@
+import React, { useContext, useRef } from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { PopupPromotionProps } from './types';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import { Image } from '../Image';
+import { Colors, Radius, Spacing } from '../Consts';
+import { Icon } from '../Icon';
+
+const PopupPromotion: React.FC<PopupPromotionProps> = ({
+  image,
+  onIconClose,
+  onRequestClose,
+  onActionClick,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const { theme, navigator } = useContext(ApplicationContext);
+  const { width: widthDevice } = Dimensions.get('window');
+  const closeAction = useRef('touch_outside');
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    if (typeof onRequestClose === 'function') {
+      onRequestClose?.(callback);
+    } else {
+      navigator?.pop();
+      callback?.();
+    }
+  };
+
+  /**
+   * build close action
+   */
+  const buildCloseIcon = () => {
+    return (
+      <View style={styles.iconCloseContainer}>
+        <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
+          onPress={() => {
+            closeAction.current = 'icon_close';
+            onAction(onIconClose);
+          }}
+          style={styles.iconButton}
+        >
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}
+          >
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  return (
+    <View
+      accessibilityLabel={'popup_promotion'}
+      style={showBaseLineDebug && styles.debugBaseLine}
+    >
+      <TouchableOpacity onPress={() => onAction(onActionClick)}>
+        <Image
+          source={{
+            uri: image,
+          }}
+          resizeMode="contain"
+          style={[
+            styles.container,
+            {
+              width: widthDevice - Spacing.XL * 2,
+            },
+          ]}
+        />
+      </TouchableOpacity>
+      {buildCloseIcon()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 0.5625, // 9:16
+    width: '100%',
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  iconCloseContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: Spacing.S,
+  },
+  iconButton: {
+    padding: 8,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
+  },
+});
+
+export default PopupPromotion;

package/src/foundations/Popup/index.tsx

@@ -0,0 +1,4 @@
+import PopupNotify from './PopupNotify';
+import PopupPromotion from './PopupPromotion';
+
+export {PopupNotify, PopupPromotion};