@momo-kits/foundation 1.0.14 → 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/InputSearch.tsx

@@ -22,7 +22,6 @@ const InputSearch: FC<InputSearchProps> = ({
   icon,
   buttonText = 'Hủy',
   showButtonText = true,
-  showIcon = true,
   showBorder = true,
   style,
   ...props
@@ -104,7 +103,7 @@ const InputSearch: FC<InputSearchProps> = ({
             />
           </TouchableOpacity>
         )}
-        {showIcon && icon && (
+        {icon || (
           <View style={{flexDirection: 'row'}}>
             <View
               style={[
@@ -116,7 +115,7 @@ const InputSearch: FC<InputSearchProps> = ({
             />
             <Icon
               color={iconTintColor}
-              source={icon}
+              source={icon as string}
               style={styles.iconSearchInput}
             />
           </View>

package/Input/common.tsx

@@ -1,10 +1,10 @@
 import {View} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
-import {Image} from '../Image';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Navigation';
 import {Icon} from '../Icon';
+import {Styles} from '../Consts';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -56,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>
@@ -99,10 +103,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
             </Text>
           )}
         </Text>
-        {floatingIcon && (
+        {floatingIcon || (
           <Icon
             color={floatingIconTintColor}
-            source={floatingIcon}
+            source={floatingIcon as string}
             size={16}
             style={styles.floatingIcon}
           />

package/Input/index.tsx

@@ -33,7 +33,6 @@ export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
 export interface InputSearchProps extends InputPropsOmitForSearch {
   buttonText?: string;
   showButtonText?: boolean;
-  showIcon?: boolean;
   showBorder?: boolean;
 }
 

package/Layout/ScreenContainer.tsx

@@ -30,7 +30,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
       transform: [
         {
           scale: scrollY.interpolate?.({
-            inputRange: [-300, -110, 100],
+            inputRange: [-300, 0, 1],
             outputRange: [1.75, 1, 1],
             extrapolate: 'clamp',
           }),
@@ -76,7 +76,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           height: 300,
           width: '100%',
         }}>
-        {headerBackground && (
+        {headerBackground || (
           <Animated.Image
             source={{
               uri: headerBackground,

package/Navigation/Components.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Colors, Spacing, Styles} from '../Consts';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
 import {Text} from '../Text';
@@ -26,7 +26,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: '100%',
   },
-  avatar: {width: 36, height: 36, borderRadius: 18},
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
   dotAvatar: {
     position: 'absolute',
     width: 12,
@@ -138,7 +139,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <StatusBar
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {headerImage && (
+      {headerImage || (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
       )}
     </Animated.View>
@@ -149,15 +150,17 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
   image,
+  imageShape = 'circle',
   content,
   tintColor,
   dotColor,
 }) => {
+  const avatarStyle = imageShape == 'circle' ? styles.square : styles.square;
   const header = (
     <View style={Styles.row}>
       <View>
-        <Image source={{uri: image}} style={styles.avatar} />
-        {dotColor && (
+        <Image source={{uri: image}} style={avatarStyle} />
+        {dotColor || (
           <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
         )}
       </View>

package/Navigation/types.ts

@@ -124,6 +124,7 @@ export type TitleCustomProps = {
   title?: string;
   subTitle?: string;
   image?: string;
+  imageShape?: 'circle' | 'square';
   dotColor?: string;
   tintColor?: string;
   content?: React.ReactNode;

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/Popup/PopupNotify.tsx

@@ -36,11 +36,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     const renderRow = () => {
       return (
         <View style={Styles.row}>
-          {secondary?.title && (
+          {secondary?.title || (
             <>
               <View style={Styles.flex}>
                 <Button
-                  title={secondary.title}
+                  title={secondary?.title as string}
                   type="text"
                   size="medium"
                   onPress={() => {
@@ -73,11 +73,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               onAction(primary.onPress);
             }}
           />
-          {secondary?.title && (
+          {secondary?.title || (
             <>
               <View style={styles.buttonSpace} />
               <Button
-                title={secondary.title}
+                title={secondary?.title as string}
                 type="text"
                 size="medium"
                 onPress={() => {
@@ -147,7 +147,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             {description}
           </Text>
         </View>
-        {information && (
+        {information || (
           <View style={styles.information}>
             <Text
               typography={'description_xs'}

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/Skeleton/index.tsx

@@ -2,9 +2,8 @@ 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 {Styles} from '../Consts';
+import {Colors, Styles} from '../Consts';
 import styles from './styles';
-import {Colors} from '@momo-kits/foundation';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const [width, setWidth] = useState(0);

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.14",
+  "version": "1.0.16",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {