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

package/src/foundations/Pagination/PaginationScroll.tsx

@@ -1,99 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,276 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

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