@momo-kits/foundation 0.75.1-beta.3

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,19 @@
+import {ScrollView, ScrollViewProps, ViewStyle} from 'react-native';
+import {Ref} from 'react';
+
+export type PaginationProps = {
+  type?: 'default' | 'black_white' | 'number' | 'scroll';
+  activeIndex: number;
+  dataLength: number;
+};
+
+export type DotProps = {
+  active: boolean;
+  style: ViewStyle | ViewStyle[];
+};
+
+export interface ScrollIndicatorProps extends ScrollViewProps {
+  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.L,
+  },
+  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;

package/Popup/PopupPromotion.tsx

@@ -0,0 +1,77 @@
+import React, {useContext} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {PopupPromotionProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Image} from '../Image';
+import {Radius, Spacing} from '../Consts';
+import {Icon} from '../Icon';
+
+const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+
+  /**
+   * build close action
+   */
+  const buildCloseIcon = () => {
+    return (
+      <View style={styles.iconCloseContainer}>
+        <TouchableOpacity
+          onPress={() => {
+            navigator?.pop();
+            onClose?.();
+          }}
+          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={'PopupPromotion'}>
+      <Image
+        style={styles.container}
+        source={{
+          uri: image,
+        }}
+      />
+      {buildCloseIcon()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 0.72,
+  },
+  iconCloseContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: Spacing.L,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
+  },
+});
+
+PopupPromotion.defaultProps = {
+  image: 'https://google.com',
+};
+
+export default PopupPromotion;

package/Popup/index.tsx

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

package/Popup/types.ts

@@ -0,0 +1,22 @@
+export type PopupNotifyProps = {
+  image?: string;
+  title: string;
+  description: string;
+  information?: string;
+  secondary?: PopupAction;
+  primary: PopupAction;
+  buttonDirection?: PopupActionDirection;
+  onIconClose?: () => void;
+};
+
+export type PopupPromotionProps = {
+  image: string;
+  onClose?: () => void;
+};
+
+type PopupAction = {
+  title: string;
+  onPress: () => void;
+};
+
+type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -0,0 +1,65 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+
+import {RadioProps} from './types';
+import {Text} from '../Text';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Spacing} from '../Consts';
+
+const Radio: FC<RadioProps> = ({
+  value,
+  groupValue,
+  disabled,
+  onChange,
+  label,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const selected = value === groupValue;
+  let disabledStyle = {};
+  let checkBoxStyle = {
+    borderWidth: 2,
+    borderColor: theme.colors.text.default,
+  };
+
+  if (selected) {
+    checkBoxStyle = {
+      borderWidth: 6,
+      borderColor: theme.colors.primary,
+    };
+  }
+  if (disabled) {
+    disabledStyle = {
+      borderColor: selected
+        ? theme.colors.background.tonal
+        : theme.colors.text.disable,
+    };
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`Radio/${label}`}
+      onPress={onChange}
+      disabled={disabled}
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      ]}>
+      <View
+        style={[
+          styles.radio,
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'description_default'}>{label}</Text>}
+    </TouchableOpacity>
+  );
+};
+
+export {Radio};

package/Radio/styles.ts

@@ -0,0 +1,11 @@
+import {StyleSheet} from 'react-native';
+import {Radius} from '../Consts';
+
+export default StyleSheet.create({
+  radio: {
+    height: 20,
+    width: 20,
+    borderRadius: Radius.M,
+  },
+  container: {flex: 1},
+});

package/Radio/types.ts

@@ -0,0 +1,10 @@
+import {ViewStyle} from 'react-native';
+
+export type RadioProps = {
+  value: string;
+  disabled?: boolean;
+  label?: string;
+  onChange: () => void;
+  groupValue: string;
+  style?: ViewStyle;
+};

package/Skeleton/index.tsx

@@ -0,0 +1,72 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {SkeletonTypes} from './types';
+import {Colors, Styles} from '../Consts';
+import styles from './styles';
+
+const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
+  const [width, setWidth] = useState(0);
+  const PRIMARY_COLOR = Colors.black_05;
+  const HIGHLIGHT_COLOR1 = Colors.black_05;
+  const HIGHLIGHT_COLOR2 = Colors.black_03;
+  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
+
+  const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
+  const linearTranslate = beginShimmerPosition.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-width, width],
+  });
+  const animatedValue = useMemo(() => {
+    return Animated.loop(
+      Animated.timing(beginShimmerPosition, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    );
+  }, [beginShimmerPosition]);
+
+  useEffect(() => {
+    animatedValue.start();
+    return () => {
+      animatedValue.stop();
+    };
+  }, [animatedValue]);
+
+  const onLayout = (newWidth: number) => {
+    if (newWidth !== width) {
+      setWidth(newWidth);
+    }
+  };
+  return (
+    <View style={[styles.container, style]} accessibilityLabel={'Skeleton'}>
+      <View
+        onLayout={e => onLayout(e.nativeEvent.layout.width)}
+        style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>
+        <Animated.View
+          style={{
+            transform: [{translateX: linearTranslate}],
+            width: '60%',
+            height: '100%',
+          }}>
+          <LinearGradient
+            style={[StyleSheet.absoluteFill]}
+            colors={shimmerColors}
+            start={{
+              x: 0,
+              y: 0,
+            }}
+            end={{
+              x: 1,
+              y: 0,
+            }}
+          />
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+export {Skeleton};

package/Skeleton/styles.ts

@@ -0,0 +1,5 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {overflow: 'hidden', width: '100%', height: '100%'},
+});

package/Skeleton/types.ts

@@ -0,0 +1,3 @@
+export type SkeletonTypes = {
+  style?: object;
+};

package/Switch/index.tsx

@@ -0,0 +1,40 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import {SwitchProps} from './types';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Colors} from '../Consts';
+
+const Switch: FC<SwitchProps> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {value, onChange, disabled, style} = props;
+  const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
+  const circleAlign = value ? 'flex-end' : 'flex-start';
+
+  let backgroundColor = value ? theme.colors.primary : Colors.black_07;
+  if (disabled) {
+    backgroundColor = value ? theme.colors.background.tonal : Colors.black_05;
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={'Switch'}
+      disabled={disabled}
+      onPress={() => onChange?.(!value)}
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
+      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+        <View style={[styles.circleSmall, {backgroundColor}]} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+Switch.defaultProps = {
+  value: false,
+  disabled: false,
+};
+export {Switch};

package/Switch/styles.ts

@@ -0,0 +1,23 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: 38,
+    height: 24,
+    borderRadius: 20,
+    justifyContent: 'center',
+    paddingHorizontal: 4,
+  },
+  circle: {
+    width: 14,
+    height: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleSmall: {
+    width: 6,
+    height: 6,
+    borderRadius: 4,
+  },
+});

package/Switch/types.ts

@@ -0,0 +1,8 @@
+import {ViewStyle} from 'react-native';
+
+export type SwitchProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+  style?: ViewStyle;
+};