@momo-kits/foundation 1.0.0 → 1.0.1

package/ActivityIndicator.tsx

@@ -0,0 +1,244 @@
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+export type Props = React.ComponentPropsWithRef<typeof View> & {
+  /**
+   * Whether to show the indicator or hide it.
+   */
+  animating?: boolean;
+  /**
+   * The color of the spinner.
+   */
+  color?: string;
+  /**
+   * Size of the indicator.
+   */
+  size?: 'small' | 'large' | number;
+  /**
+   * Whether the indicator should hide when not animating.
+   */
+  hidesWhenStopped?: boolean;
+  /**
+   * Style for position indicator.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+const DURATION = 2400;
+
+/**
+ * Activity indicator is used to present progress of some activity in the app.
+ * It can be used as a drop-in for the ActivityIndicator shipped with React Native.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const ActivityIndicator = ({
+  animating = true,
+  color: indicatorColor,
+  hidesWhenStopped = true,
+  size: indicatorSize = 'small',
+  style,
+  ...rest
+}: Props) => {
+  const { current: timer } = React.useRef<Animated.Value>(
+    new Animated.Value(0)
+  );
+  const { current: fade } = React.useRef<Animated.Value>(
+    new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)
+  );
+
+  const rotation = React.useRef<Animated.CompositeAnimation | undefined>(
+    undefined
+  );
+
+  const startRotation = React.useCallback(() => {
+    // Show indicator
+    Animated.timing(fade, {
+      duration: 200,
+      toValue: 1,
+      isInteraction: false,
+      useNativeDriver: true,
+    }).start();
+
+    // Circular animation in loop
+    if (rotation.current) {
+      timer.setValue(0);
+      // $FlowFixMe
+      Animated.loop(rotation.current).start();
+    }
+  }, [fade, timer]);
+
+  const stopRotation = () => {
+    if (rotation.current) {
+      rotation.current.stop();
+    }
+  };
+
+  React.useEffect(() => {
+    if (rotation.current === undefined) {
+      // Circular animation in loop
+      rotation.current = Animated.timing(timer, {
+        duration: DURATION,
+        easing: Easing.linear,
+        // Animated.loop does not work if useNativeDriver is true on web
+        useNativeDriver: Platform.OS !== 'web',
+        toValue: 1,
+        isInteraction: false,
+      });
+    }
+
+    if (animating) {
+      startRotation();
+    } else if (hidesWhenStopped) {
+      // Hide indicator first and then stop rotation
+      Animated.timing(fade, {
+        duration: 200,
+        toValue: 0,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start(stopRotation);
+    } else {
+      stopRotation();
+    }
+  }, [animating, fade, hidesWhenStopped, startRotation, timer]);
+
+  const color = indicatorColor || 'red';
+  const size =
+    typeof indicatorSize === 'string'
+      ? indicatorSize === 'small'
+        ? 24
+        : 48
+      : indicatorSize
+      ? indicatorSize
+      : 24;
+
+  const frames = (60 * DURATION) / 1000;
+  const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
+  const containerStyle = {
+    width: size,
+    height: size / 2,
+    overflow: 'hidden' as const,
+  };
+
+  return (
+    <View
+      style={[styles.container, style]}
+      {...rest}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityState={{ busy: animating }}
+    >
+      <Animated.View
+        style={[{ width: size, height: size, opacity: fade }]}
+        collapsable={false}
+      >
+        {[0, 1].map((index) => {
+          // Thanks to https://github.com/n4kz/react-native-indicators for the great work
+          const inputRange = Array.from(
+            new Array(frames),
+            (_, frameIndex) => frameIndex / (frames - 1)
+          );
+          const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+            let progress = (2 * frameIndex) / (frames - 1);
+            const rotation = index ? +(360 - 15) : -(180 - 15);
+
+            if (progress > 1.0) {
+              progress = 2.0 - progress;
+            }
+
+            const direction = index ? -1 : +1;
+
+            return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
+          });
+
+          const layerStyle = {
+            width: size,
+            height: size,
+            transform: [
+              {
+                rotate: timer.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],
+                }),
+              },
+            ],
+          };
+
+          const viewportStyle = {
+            width: size,
+            height: size,
+            transform: [
+              {
+                translateY: index ? -size / 2 : 0,
+              },
+              {
+                rotate: timer.interpolate({ inputRange, outputRange }),
+              },
+            ],
+          };
+
+          const offsetStyle = index ? { top: size / 2 } : null;
+
+          const lineStyle = {
+            width: size,
+            height: size,
+            borderColor: color,
+            borderWidth: size / 10,
+            borderRadius: size / 2,
+          };
+
+          return (
+            <Animated.View key={index} style={[styles.layer]}>
+              <Animated.View style={layerStyle}>
+                <Animated.View
+                  style={[containerStyle, offsetStyle]}
+                  collapsable={false}
+                >
+                  <Animated.View style={viewportStyle}>
+                    <Animated.View style={containerStyle} collapsable={false}>
+                      <Animated.View style={lineStyle} />
+                    </Animated.View>
+                  </Animated.View>
+                </Animated.View>
+              </Animated.View>
+            </Animated.View>
+          );
+        })}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  layer: {
+    ...StyleSheet.absoluteFillObject,
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default ActivityIndicator;

package/Button/index.tsx

@@ -1,98 +1,71 @@
-import React, {useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {
-  ActivityIndicator,
+  GestureResponderEvent,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {NavigationContext, Colors, Styles, Text} from '../index';
+import {ApplicationContext} from '../Navigation';
+import {Text} from '../Text';
+import {Typography} from '../Text/types';
+import {Colors} from '../Consts';
 import styles from './styles';
+import {ButtonProps} from './types';
+import {Image} from '../Image';
 
-const Index = props => {
-  const {theme} = useContext(NavigationContext);
-  const {
-    style,
-    textStyle,
-    type,
-    size,
-    full,
-    disabled,
-    leading,
-    trailing,
-    loading,
-    children,
-  } = props;
+const Button: FC<ButtonProps> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {type, size, useTintColor, full, iconRight, iconLeft, title, onPress} =
+    props;
 
   /**
    * export size style
    */
   const getSizeStyle = () => {
-    switch (size) {
-      case 'large':
-        return styles.large;
-      case 'medium':
-        return styles.medium;
-      case 'small':
-        return styles.small;
-
-      default:
-        return styles.large;
-    }
+    const styleSheet: {[key: string]: any} = styles;
+    return styleSheet[size ?? 'small'];
   };
 
   /**
    * export type style
    */
   const getTypeStyle = () => {
-    if (disabled) {
-      return {
-        backgroundColor: theme.colors.border,
-      };
-    }
     switch (type) {
+      case 'disabled':
+        return {
+          backgroundColor: theme.colors.background.disable,
+        };
       case 'primary':
         return {backgroundColor: theme.colors.primary};
       case 'secondary':
         return {
-          backgroundColor: theme.colors.card,
+          backgroundColor: theme.colors.background.disable,
           borderWidth: 1,
-          borderColor: theme.colors.border,
+          borderColor: theme.colors.border.default,
         };
       case 'outline':
         return {
-          backgroundColor: theme.colors.card,
+          backgroundColor: Colors.black_01,
           borderWidth: 1,
           borderColor: theme.colors.primary,
         };
+      case 'tonal':
+        return {
+          backgroundColor: theme.colors.background.tonal,
+        };
+      case 'danger':
+        return {
+          backgroundColor: theme.colors.error.primary,
+        };
       case 'text':
-        return {};
-
+        return {
+          backgroundColor: Colors.black_01,
+        };
       default:
         return {backgroundColor: theme.colors.primary};
     }
   };
 
-  /**
-   * export loading color
-   */
-  const getLoadingColor = () => {
-    if (disabled) {
-      return theme.colors.textSecondary;
-    }
-    switch (type) {
-      case 'primary':
-        return Colors.black_01;
-      case 'secondary':
-        return theme.colors.text;
-      case 'outline':
-        return theme.colors.primary;
-      case 'text':
-        return theme.colors.primary;
-      default:
-        return theme.colors.primary;
-    }
-  };
-
   /**
    * export icon size
    */
@@ -128,109 +101,74 @@ const Index = props => {
   /**
    * export typography style
    */
-  const getTypography = () => {
+  const getTypography = (): Typography => {
     switch (size) {
       case 'large':
-        return 'h4';
+        return 'action_default';
       case 'medium':
-        return 'title';
+        return 'action_s';
       case 'small':
-        return 'subtitle';
+        return 'action_xs';
 
       default:
-        return 'h4';
+        return 'action_default';
     }
   };
 
-  /**
-   * render Text
-   */
-  const renderText = () => {
-    const typography = getTypography();
-    if (disabled) {
-      return (
-        <Text
-          typography={typography}
-          weight="bold"
-          type="secondary"
-          numberOfLines={1}
-          style={textStyle}>
-          {children}
-        </Text>
-      );
-    }
+  const getTextColor = (): string => {
     switch (type) {
+      case 'disabled':
+        return theme.colors.text.disable;
       case 'primary':
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            color="white"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return Colors.black_01;
       case 'secondary':
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return theme.colors.text.default;
       case 'outline':
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            color="primary"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return theme.colors.primary;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'danger':
+        return Colors.black_01;
       case 'text':
-        return (
-          <Text
-            typography={typography}
-            type="secondary"
-            weight="bold"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
-
+        return theme.colors.primary;
       default:
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return Colors.black_01;
     }
   };
 
+  /**
+   * render Text
+   */
+  const renderText = () => {
+    const typography = getTypography();
+    const color = getTextColor();
+    return (
+      <Text typography={typography} color={color} numberOfLines={1}>
+        {title}
+      </Text>
+    );
+  };
+
   /**
    * render leading
    */
   const renderLeading = () => {
-    if (leading) {
+    if (iconLeft) {
       const iconSize = getIconSize();
       const marginRight = getIconSpace();
+      const color = useTintColor ? getTextColor() : undefined;
+
       return (
         <View
           style={[
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          {leading}
+          <Image
+            tintColor={color}
+            source={{uri: iconLeft}}
+            style={{width: iconSize, height: iconSize}}
+          />
         </View>
       );
     }
@@ -241,16 +179,8 @@ const Index = props => {
    */
   const renderTrailing = () => {
     const marginLeft = getIconSpace();
-    if (loading) {
-      return (
-        <View style={[styles.trailing, {marginLeft}]}>
-          <View style={Styles.flexCenter}>
-            <ActivityIndicator color={getLoadingColor()} />
-          </View>
-        </View>
-      );
-    }
-    if (trailing) {
+    const color = useTintColor ? getTextColor() : undefined;
+    if (iconRight) {
       const iconSize = getIconSize();
       return (
         <View
@@ -258,7 +188,11 @@ const Index = props => {
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          {trailing}
+          <Image
+            tintColor={color}
+            source={{uri: iconRight}}
+            style={{width: iconSize, height: iconSize}}
+          />
         </View>
       );
     }
@@ -268,11 +202,22 @@ const Index = props => {
     getSizeStyle(),
     getTypeStyle(),
     full && {width: '100%'},
-    style,
   ]);
 
+  const onPressButton = (e: GestureResponderEvent) => {
+    if (type === 'disabled') {
+      return () => {};
+    }
+    onPress?.(e);
+  };
+
+  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   return (
-    <TouchableOpacity {...props} style={buttonStyle}>
+    <TouchableOpacity
+      {...props}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
       {renderLeading()}
       {renderText()}
       {renderTrailing()}
@@ -280,28 +225,13 @@ const Index = props => {
   );
 };
 
-// Index.propTypes = {
-//   textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-//   type: PropTypes.oneOf(['primary', 'secondary','' ,'outline', 'text']),
-//   size: PropTypes.oneOf(['large', 'medium', 'small']),
-//   full: PropTypes.bool,
-//   disabled: PropTypes.bool,
-//   leading: PropTypes.element,
-//   trailing: PropTypes.element,
-//   loading: PropTypes.bool,
-//   children: PropTypes.string,
-// };
-
-Index.defaultProps = {
-  textStyle: {},
+Button.defaultProps = {
   type: 'primary',
   size: 'large',
   full: true,
   disabled: false,
-  leading: null,
-  trailing: null,
-  loading: false,
-  children: 'Button',
+  title: 'Button',
+  useTintColor: true,
 };
 
-export default Index;
+export default Button;

package/Button/types.ts

@@ -8,11 +8,20 @@ export type ButtonType =
   | 'secondary'
   | 'tonal'
   | 'outline'
-  | 'disable'
-  | 'text';
+  | 'danger'
+  | 'text'
+  | 'disabled';
 
 export type ButtonSize = 'large' | 'medium' | 'small';
 
 export interface ButtonProps
   extends TouchableOpacityProps,
-    TouchableNativeFeedbackProps {}
+    TouchableNativeFeedbackProps {
+  type?: ButtonType;
+  size?: ButtonSize;
+  full?: boolean;
+  iconRight?: string;
+  iconLeft?: string;
+  title: string;
+  useTintColor?: boolean;
+}

package/CheckBox/index.tsx

@@ -0,0 +1,57 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+
+import {CheckBoxProps} from './types';
+import {Text} from '@momo-kits/foundation';
+import styles from './styles';
+import Image from 'react-native-fast-image';
+import {ApplicationContext} from '../Navigation';
+import {Colors} from '../Consts';
+
+const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
+const IC_CHECKED_DEFAULT =
+  'https://img.mservice.com.vn/app/img/kits/checked_ic.png';
+const CheckBox: FC<CheckBoxProps> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {value, disabled, onChange, label, indeterminated} = props;
+
+  const haveValue = value || indeterminated;
+  let borderColor = haveValue
+    ? theme.colors.primary
+    : theme.colors.text.default;
+  let backgroundColor = haveValue ? theme.colors.primary : Colors.black_01;
+
+  let iconSource = value ? IC_CHECKED_DEFAULT : undefined;
+
+  if (indeterminated) {
+    iconSource = IC_INDETERMINATED;
+  }
+
+  if (disabled) {
+    borderColor = haveValue
+      ? theme.colors.background.disable
+      : theme.colors.border.disable;
+    backgroundColor = haveValue
+      ? theme.colors.background.disable
+      : Colors.black_01;
+  }
+  const checkboxStyle = {borderColor, backgroundColor, borderWidth: 1};
+
+  const onChangeValue = () => {
+    onChange?.(!value);
+  };
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onChangeValue}
+      disabled={disabled}
+      style={styles.container}>
+      <View style={[checkboxStyle, styles.checkbox]}>
+        <Image style={styles.icon} source={{uri: iconSource}} />
+      </View>
+      <Text typography={'description_default'}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export {CheckBox};

package/CheckBox/styles.ts

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: Radius.XS,
+    borderWidth: 2,
+    marginRight: Spacing.S,
+  },
+  container: {flexDirection: 'row'},
+  icon: {width: 20, height: 20},
+});