@momo-kits/step 0.103.1 → 0.103.2-rc.10

package/StepIcon.tsx

@@ -1,8 +1,8 @@
+import {Colors, Icon, Text} from '@momo-kits/foundation';
 import React, {FC} from 'react';
 import {View} from 'react-native';
-import {StepIconProps} from './types';
 import styles from './styles';
-import {Colors, Icon, Text} from '@momo-kits/foundation';
+import {StepIconProps} from './types';
 
 const StepIcon: FC<StepIconProps> = ({
   size = 'large',
@@ -12,34 +12,62 @@ const StepIcon: FC<StepIconProps> = ({
   style,
   useNumber,
   index,
+  isActive,
+  customIcon,
 }) => {
   let iconStyle = styles.stepIcon;
   let checkIconSize = 16;
-  let iconSource = error ? 'navigation_close' : 'notifications_check';
+  let contentIconSize = 8;
 
   if (size === 'small') {
     iconStyle = styles.stepIconSmall;
     checkIconSize = 12;
+    contentIconSize = 6;
   }
-  return (
-    <View
-      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
-      {useNumber ? (
+
+  let iconSource = error ? 'navigation_close' : 'notifications_check';
+
+  const renderIcon = () => {
+    // useNumber is true, render number
+    if (useNumber) {
+      return (
         <Text
-          style={{
-            position: 'absolute',
-          }}
+          style={{position: 'absolute'}}
           typography={'header_xs_semibold'}
           color={Colors.black_01}>
           {index + 1}
         </Text>
-      ) : (
-        <Icon
-          size={checkIconSize}
-          color={Colors.black_01}
-          source={iconSource}
+      );
+    }
+
+    if (isActive) {
+      // customIcon is true, render customIcon
+      if (customIcon) {
+        return (
+          <Icon
+            size={checkIconSize}
+            color={Colors.black_01}
+            source={customIcon}
+          />
+        );
+      }
+      // render default Icon
+      return (
+        <View
+          style={[styles.currIcon, {width: contentIconSize, aspectRatio: 1}]}
         />
-      )}
+      );
+    }
+
+    return (
+      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
+    );
+  };
+
+  return (
+    <View
+      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
+      {renderIcon()}
     </View>
   );
 };

package/StepsHorizontal.tsx

@@ -1,10 +1,10 @@
-import React, {FC} from 'react';
-import {FlexAlignType, View} from 'react-native';
-import {Step, StepsProps} from './types';
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
+import React, {FC, useContext} from 'react';
+import {FlexAlignType, TouchableOpacity, View} from 'react-native';
 import StepIcon from './StepIcon';
-import {Spacing, Text} from '@momo-kits/foundation';
-import {getStepColor, getStepTypo} from './utils';
 import styles from './styles';
+import {Step, StepsProps} from './types';
+import {getStepColor, getStepTypo} from './utils';
 
 type TextAlign = 'left' | 'right' | 'center';
 
@@ -14,10 +14,14 @@ const StepsHorizontal: FC<StepsProps> = ({
   activeIndex,
   useNumber = false,
   align = 'center',
+  customIcon,
+  onPress,
+  disabled,
 }) => {
   const renderStepItem = (i: Step, ii: number) => {
     const {title, description, error, time} = steps[ii];
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
+    const {theme} = useContext(ApplicationContext);
     let alignItems: FlexAlignType = 'center';
     let textAlign: TextAlign = 'center';
 
@@ -41,17 +45,19 @@ const StepsHorizontal: FC<StepsProps> = ({
       ii !== steps.length - 1 && align !== 'center' && align !== 'stretch';
 
     return (
-      <View
+      <TouchableOpacity
         key={`Step ${ii}`}
         style={{
           flex: 1,
           alignItems,
           marginRight: haveMarginRight ? Spacing.XS : 0,
-        }}>
+        }}
+        disabled={disabled || !onPress}
+        onPress={onPress}>
         {!!time && (
           <Text
             style={{textAlign}}
-            color={typoStyle.time.color}
+            color={disabled ? theme.colors.text.disable : typoStyle.time.color}
             typography={typoStyle.time.typography}>
             {time}
           </Text>
@@ -60,7 +66,7 @@ const StepsHorizontal: FC<StepsProps> = ({
         {!!title && (
           <Text
             style={[styles.title, {textAlign}]}
-            color={typoStyle.title.color}
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
             typography={typoStyle.title.typography}>
             {title}
           </Text>
@@ -68,16 +74,23 @@ const StepsHorizontal: FC<StepsProps> = ({
         {!!description && (
           <Text
             style={{textAlign}}
-            color={typoStyle.description.color}
+            color={
+              disabled ? theme.colors.text.disable : typoStyle.description.color
+            }
             typography={typoStyle.description.typography}>
             {description}
           </Text>
         )}
-      </View>
+      </TouchableOpacity>
     );
   };
 
-  const renderStepIcon = (i: Step, ii: number, align: string = 'center') => {
+  const renderStepIcon = (
+    i: Step,
+    ii: number,
+    align: string = 'center',
+    disabled: boolean
+  ) => {
     const {error} = steps[ii];
 
     const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
@@ -104,8 +117,8 @@ const StepsHorizontal: FC<StepsProps> = ({
         <StepIcon
           size={size}
           error={error}
-          backgroundColor={backgroundColor}
-          borderColor={borderColor}
+          backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+          borderColor={disabled ? Colors.pink_10 : borderColor}
           style={{
             marginRight: !lineRightHide ? Spacing.XS : 0,
             marginLeft: !lineLeftHide ? Spacing.XS : 0,
@@ -113,6 +126,8 @@ const StepsHorizontal: FC<StepsProps> = ({
           }}
           index={ii}
           useNumber={useNumber}
+          isActive={activeIndex === ii}
+          customIcon={customIcon}
         />
         {!lineRightHide && (
           <View

package/StepsVertical.tsx

@@ -1,10 +1,10 @@
+import {ApplicationContext, Spacing, Text} from '@momo-kits/foundation';
 import React, {FC, useContext} from 'react';
 import {View} from 'react-native';
+import StepIcon from './StepIcon';
+import styles from './styles';
 import {Step, StepsProps} from './types';
 import {getStepColor, getStepTypo} from './utils';
-import {ApplicationContext, Spacing, Text} from '@momo-kits/foundation';
-import styles from './styles';
-import StepIcon from './StepIcon';
 
 const StepsVertical: FC<StepsProps> = ({
   steps,
@@ -45,6 +45,7 @@ const StepsVertical: FC<StepsProps> = ({
             borderColor={borderColor}
             useNumber={useNumber}
             index={ii}
+            isActive={activeIndex === ii}
           />
           {ii !== steps.length - 1 && (
             <View

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.103.1",
+    "version": "0.103.2-rc.10",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -14,4 +14,4 @@
         "@momo-platform/versions": "4.1.11"
     },
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -7,15 +7,15 @@ rsync -r --exclude=/dist ./* dist
 cd dist
 
 if [ "$1" == "stable" ]; then
-  #npm version $(npm view @momo-kits/step@stable version)
-  #npm version patch
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  #npm version $(npm view @momo-kits/foundation@latest version)
+  npm version $(npm view @momo-kits/foundation@latest version)
   npm publish --tag latest --access=public
 else
-  #npm version $(npm view @momo-kits/step@beta version)
-  #npm version prerelease --preid=beta
+  npm version $(npm view @momo-kits/step@beta version)
+  npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi
 

package/styles.ts

@@ -1,6 +1,5 @@
-import {StyleSheet} from 'react-native';
 import {Radius, scaleSize, Spacing} from '@momo-kits/foundation';
-
+import {StyleSheet} from 'react-native';
 export default StyleSheet.create({
   stepIcon: {
     width: 24,
@@ -53,4 +52,9 @@ export default StyleSheet.create({
     fontSize: scaleSize(8),
     lineHeight: scaleSize(12),
   },
+  currIcon: {
+    backgroundColor: 'white',
+    borderRadius: Radius.L,
+    aspectRatio: 1,
+  },
 });

package/types.ts

@@ -32,6 +32,12 @@ export type StepsProps = {
   useNumber?: boolean;
 
   align?: 'left' | 'right' | 'center' | 'stretch';
+
+  customIcon?: string;
+
+  onPress?: () => void;
+
+  disabled?: boolean;
 };
 
 /**
@@ -101,4 +107,21 @@ export type StepIconProps = {
   useNumber?: boolean;
 
   index: number;
+
+  isActive?: boolean;
+
+  /**
+   * Optional. Custom active icon
+   */
+  customIcon?: string;
+};
+
+export type ProgressInfoProps = {
+  steps: Step[];
+  horizontal?: boolean;
+  size?: 'small' | 'large';
+  useNumber?: boolean;
+  align?: 'left' | 'right' | 'center' | 'stretch' | undefined;
+  showDescription?: boolean;
+  customIcon?: string;
 };

package/utils.ts

@@ -1,7 +1,7 @@
-import {useContext} from 'react';
 import {ApplicationContext, Colors, Typography} from '@momo-kits/foundation';
+import {useContext} from 'react';
 
-type StepStatus = 'inactive' | 'active' | 'completed' | 'error';
+type StepStatus = 'incomplete' | 'current' | 'completed' | 'error';
 type StepTypo = {
   typography: Typography;
   color: string;
@@ -11,7 +11,7 @@ export const getStepTypo = (
   activeIndex: number,
   currentIndex: number,
   error?: boolean,
-  size?: 'small' | 'large',
+  size?: 'small' | 'large'
 ) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -28,27 +28,26 @@ export const getStepTypo = (
     typography: 'description_xs_regular',
   };
 
-  let status: StepStatus = 'inactive';
+  let status: StepStatus = 'incomplete';
   if (activeIndex > currentIndex) {
     status = 'completed';
   }
   if (activeIndex === currentIndex) {
-    status = 'active';
+    status = 'current';
   }
   if (error) {
     status = 'error';
   }
 
   switch (status) {
-    case 'active': {
+    case 'current': {
+      title.color = theme.colors.primary;
       title.typography = 'header_xs_semibold';
       break;
     }
 
     case 'completed': {
-      title.color = theme.colors.text.disable;
-      description.color = theme.colors.text.disable;
-      time.color = theme.colors.text.disable;
+      title.typography = 'header_xs_semibold';
       break;
     }
 
@@ -70,7 +69,7 @@ export const getStepColor = (
   activeIndex: number,
   currentIndex: number,
   error?: boolean,
-  length: number = 1,
+  length: number = 1
 ) => {
   const {theme} = useContext(ApplicationContext);
   const DEFAULT_LINE_COLOR = theme.colors.background.default;
@@ -80,7 +79,7 @@ export const getStepColor = (
   let borderColor = theme.colors.border.default;
   let lineColorLeft = DEFAULT_LINE_COLOR;
   let lineColorRight = DEFAULT_LINE_COLOR;
-  let status: StepStatus = 'inactive';
+  let status: StepStatus = 'incomplete';
 
   if (activeIndex > currentIndex) {
     status = 'completed';
@@ -88,7 +87,7 @@ export const getStepColor = (
     lineColorRight = COMPLETED_LINE_COLOR;
   }
   if (activeIndex === currentIndex) {
-    status = 'active';
+    status = 'current';
     lineColorLeft = COMPLETED_LINE_COLOR;
   }
   if (error) {
@@ -103,15 +102,15 @@ export const getStepColor = (
   }
 
   switch (status) {
-    case 'active': {
+    case 'current': {
       backgroundColor = theme.colors.primary;
       borderColor = theme.colors.background.tonal;
       break;
     }
 
     case 'completed': {
-      backgroundColor = theme.colors.primary + '33';
-      borderColor = theme.colors.background.selected;
+      backgroundColor = theme.colors.primary;
+      borderColor = theme.colors.background.tonal;
       break;
     }