@momo-kits/foundation 1.0.15 → 1.0.16

package/Button/index.tsx

@@ -27,6 +27,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   iconLeft?: string;
   title: string;
   useTintColor?: boolean;
+  onPress: () => void;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -211,11 +212,11 @@ const Button: FC<ButtonProps> = ({
     full && {width: '100%'},
   ]);
 
-  const onPressButton = (e: any) => {
+  const onPressButton = () => {
     if (type === 'disabled') {
       return () => {};
     }
-    onPress?.(e);
+    onPress?.();
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;

package/Consts/theme.ts

@@ -10,7 +10,7 @@ const defaultTheme: Theme = {
       default: '#f2f2f6',
       surface: Colors.black_01,
       tonal: Colors.pink_09,
-      pressed: '#fef4fa',
+      pressed: '#dfdfe6',
       selected: Colors.pink_10,
       disable: '#ebebf2',
     },

package/Input/common.tsx

@@ -4,6 +4,7 @@ import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Navigation';
 import {Icon} from '../Icon';
+import {Styles} from '../Consts';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -55,7 +56,11 @@ export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
         <View style={styles.errorIcon}>
           <Icon color={errorColor} source="ic_error" size={16} />
         </View>
-        <Text color={errorColor} typography={'description_s'}>
+        <Text
+          style={Styles.flex}
+          color={errorColor}
+          numberOfLines={1}
+          typography={'description_s'}>
           {errorMessage}
         </Text>
       </View>

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,22 @@
+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';
+
+const PaginationNumber: FC<ChildPaginationProps> = ({
+  activeIndex = 0,
+  dataLength = 2,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  return (
+    <View style={[styles.paginationNumberContainer]}>
+      <Text
+        color={theme.colors.background.surface}
+        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 {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: theme.colors.background.surface},
+          ]}
+          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,
+    backgroundColor: Colors.black_20 + '33',
+    borderRadius: Radius.L,
+  },
+  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/Radio/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
+import {Radius} from '../Consts';
 
 export default StyleSheet.create({
   radio: {
@@ -7,5 +7,5 @@ export default StyleSheet.create({
     width: 20,
     borderRadius: Radius.M,
   },
-  container: {flex: 1, backgroundColor: 'red'},
+  container: {flex: 1},
 });

package/Tag/index.tsx

@@ -0,0 +1,74 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {TagProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+
+const backgroundColor = {
+  default: Colors.black_04,
+  orange: Colors.orange_08,
+  green: Colors.green_08,
+  red: Colors.red_08,
+  blue: Colors.blue_08,
+  grey: Colors.black_04,
+};
+
+const textColor = {
+  default: Colors.black_17,
+  orange: Colors.orange_03,
+  green: Colors.green_03,
+  red: Colors.red_03,
+  blue: Colors.blue_03,
+  grey: Colors.black_12,
+};
+
+const Tag: FC<TagProps> = ({
+  label = 'Label',
+  icon,
+  color = 'default',
+  size = 'large',
+  style,
+  customColor,
+}) => {
+  let labelColor = textColor[color];
+  let tagColor = backgroundColor[color];
+
+  //Check if custom color is [color]_03 (only check in dev mode)
+  const validateCustomColor = (color: string) => {
+    if (__DEV__) {
+      const colorCore: {[key: string]: string} = Colors;
+      const primaryColors = Object.keys(Colors)
+        .map(i => {
+          if (i.includes('_03')) {
+            return colorCore[i];
+          }
+        })
+        .filter(color => color);
+      return primaryColors.includes(color);
+    }
+    return true;
+  };
+
+  const sizeStyle =
+    size === 'large' ? styles.container : styles.mediumContainer;
+
+  if (customColor && validateCustomColor(customColor)) {
+    labelColor = Colors.black_01;
+    tagColor = customColor;
+  }
+
+  return (
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+      {!!icon && (
+        <Icon style={styles.icon} size={16} source={icon} color={labelColor} />
+      )}
+      <Text color={labelColor} typography={'label_s'}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+export {Tag};

package/Tag/styles.ts

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: Spacing.S,
+    borderRadius: Radius.S,
+    flexDirection: 'row',
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mediumContainer: {
+    paddingHorizontal: Spacing.S,
+    borderRadius: Radius.S,
+    height: 18,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.XS,
+  },
+});

package/Tag/types.ts

@@ -0,0 +1,10 @@
+import {ViewStyle} from 'react-native';
+
+export type TagProps = {
+  label: string;
+  size?: 'medium' | 'large';
+  icon?: string;
+  color?: 'default' | 'orange' | 'green' | 'red' | 'blue' | 'grey';
+  style?: ViewStyle;
+  customColor?: string;
+};

package/index.ts

@@ -32,3 +32,7 @@ export * from './Switch';
 export * from './Switch/types';
 export * from './Input';
 export * from './Divider';
+export * from './Tag';
+export * from './Tag/types';
+export * from './Pagination';
+export * from './Pagination/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {