@momo-kits/step 0.102.5 → 0.103.1-beta.2

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 renderStepItem = (item: Step, index: number) => {
+    const {title, description, error, time} = item;
+    let typoStyle = getStepTypo(activeIndex, index, error, size, 'horizontal');
+    const {theme} = useContext(ApplicationContext);
     let alignItems: FlexAlignType = 'center';
     let textAlign: TextAlign = 'center';
 
@@ -28,39 +32,41 @@ const StepsHorizontal: FC<StepsProps> = ({
       alignItems = 'flex-end';
       textAlign = 'right';
     } else if (align === 'stretch') {
-      if (ii === 0) {
+      if (index === 0) {
         alignItems = 'flex-start';
         textAlign = 'left';
-      } else if (ii === steps.length - 1) {
+      } else if (index === steps.length - 1) {
         textAlign = 'right';
         alignItems = 'flex-end';
       }
     }
 
     const haveMarginRight =
-      ii !== steps.length - 1 && align !== 'center' && align !== 'stretch';
+      index !== steps.length - 1 && align !== 'center' && align !== 'stretch';
 
     return (
-      <View
-        key={`Step ${ii}`}
+      <TouchableOpacity
+        key={`Step ${index}`}
         style={{
           flex: 1,
           alignItems,
           marginRight: haveMarginRight ? Spacing.XS : 0,
-        }}>
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}>
         {!!time && (
           <Text
             style={{textAlign}}
-            color={typoStyle.time.color}
+            color={disabled ? theme.colors.text.disable : typoStyle.time.color}
             typography={typoStyle.time.typography}>
             {time}
           </Text>
         )}
-        {renderStepIcon(i, ii, align)}
+        {renderStepIcon(item, index, align, disabled)}
         {!!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,25 +74,33 @@ 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 {error} = steps[ii];
+  const renderStepIcon = (
+    item: Step,
+    index: number,
+    align: string = 'center',
+    disabled?: boolean
+  ) => {
+    const {error} = item;
 
-    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length, disabled);
     const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
       stepStyle;
 
-    const lineLeftHide = (align === 'stretch' && ii === 0) || align === 'left';
+    const lineLeftHide =
+      (align === 'stretch' && index === 0) || align === 'left';
     const lineRightHide =
-      (align === 'stretch' && ii === steps.length - 1) || align === 'right';
+      (align === 'stretch' && index === steps.length - 1) || align === 'right';
 
     return (
       <View style={styles.rowStep}>
@@ -104,15 +118,17 @@ 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,
             marginVertical: Spacing.XS,
           }}
-          index={ii}
+          index={index}
           useNumber={useNumber}
+          isActive={activeIndex === index}
+          customIcon={customIcon}
         />
         {!lineRightHide && (
           <View
@@ -131,8 +147,8 @@ const StepsHorizontal: FC<StepsProps> = ({
 
   return (
     <View style={{flexDirection: 'row'}}>
-      {steps.map((i, ii) => {
-        return renderStepItem(i, ii);
+      {steps.map((item, index) => {
+        return renderStepItem(item, index);
       })}
     </View>
   );

package/StepsVertical.tsx

@@ -1,37 +1,59 @@
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
 import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import {View, TouchableOpacity} 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,
   activeIndex,
   size,
   useNumber = false,
+  onPress,
+  disabled,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const renderStepItem = (i: Step, ii: number) => {
-    const {error, description, title, time} = steps[ii];
+  const renderStepItem = (item: Step, index: number) => {
+    const {error, description, title, time} = item;
 
-    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
-    let typoStyle = getStepTypo(activeIndex, ii, error, size);
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length);
+    const typoStyle = getStepTypo(activeIndex, index, error, size, 'vertical');
 
     const {backgroundColor, borderColor} = stepStyle;
     const lineColor =
-      activeIndex > ii
+      activeIndex > index
         ? theme.colors.primary + '33'
         : theme.colors.background.default;
+
+    /**
+     * build description
+     */
+    const buildDescription = () => {
+      if (typeof description == 'string') {
+        return (
+          <Text
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        );
+      }
+      return description;
+    };
+
     return (
-      <View
-        key={`Step ${ii}`}
+      <TouchableOpacity
+        key={`Step ${index}`}
         style={{
           flexDirection: 'row',
           marginBottom: Spacing.XS,
-        }}>
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}
+      >
         <View
           style={{
             alignItems: 'center',
@@ -41,12 +63,13 @@ const StepsVertical: FC<StepsProps> = ({
           <StepIcon
             size={size}
             error={error}
-            backgroundColor={backgroundColor}
-            borderColor={borderColor}
+            backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+            borderColor={disabled ? Colors.pink_10 : borderColor}
             useNumber={useNumber}
-            index={ii}
+            index={index}
+            isActive={activeIndex === index}
           />
-          {ii !== steps.length - 1 && (
+          {index !== steps.length - 1 && (
             <View
               style={[
                 styles.lineVertical,
@@ -57,38 +80,36 @@ const StepsVertical: FC<StepsProps> = ({
         </View>
         <View style={{flex: 1}}>
           <View
-            style={[
-              {
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-              },
-            ]}>
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}>
             <Text
               numberOfLines={2}
               style={{marginRight: Spacing.S, flex: 1}}
-              color={typoStyle.title.color}
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.title.color
+              }
               typography={typoStyle.title.typography}>
               {title}
             </Text>
             <Text
-              color={typoStyle.time.color}
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.time.color
+              }
               typography={typoStyle.time.typography}>
               {time}
             </Text>
           </View>
-          <Text
-            color={typoStyle.description.color}
-            typography={typoStyle.description.typography}>
-            {description}
-          </Text>
+          {buildDescription()}
         </View>
-      </View>
+      </TouchableOpacity>
     );
   };
   return (
     <View style={{width: '100%'}}>
-      {steps.map((i, ii) => {
-        return renderStepItem(i, ii);
+      {steps.map((item, index: number) => {
+        return renderStepItem(item, index);
       })}
     </View>
   );

package/index.tsx

@@ -1,6 +1,6 @@
 import React, {FC} from 'react';
 import {View} from 'react-native';
-import {Step, StepsProps} from './types';
+import {Step, StepsProps, Align} from './types';
 import StepsHorizontal from './StepsHorizontal';
 import StepsVertical from './StepsVertical';
 
@@ -17,4 +17,4 @@ const Steps: FC<StepsProps> = ({horizontal = false, ...props}) => {
 };
 
 export {Steps};
-export type {StepsProps, Step};
+export type {StepsProps, Step, Align};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.102.5",
+    "version": "0.103.1-beta.2",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/publish.sh

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

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

@@ -1,4 +1,5 @@
 import {ViewStyle} from 'react-native';
+import React from 'react';
 
 /**
  * Properties for the Steps component, a guided progress through a sequence of procedural steps.
@@ -29,11 +30,34 @@ export type StepsProps = {
    */
   activeIndex: number;
 
+  /**
+   * Optional. If `true`, the step numbers are displayed within the step icons.
+   */
   useNumber?: boolean;
 
-  align?: 'left' | 'right' | 'center' | 'stretch';
+  /**
+   * Optional. Specifies the alignment of the steps within the component.
+   */
+  align?: Align;
+
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  customIcon?: string;
+
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  onPress?: (item: Step, index: number) => void;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Steps component.
+   */
+  disabled?: boolean;
 };
 
+export type Align = 'left' | 'right' | 'center' | 'stretch';
+
 /**
  * Represents a single step within the Steps component. Each step has a
  * title and can have optional properties such as a description or error state.
@@ -48,7 +72,7 @@ export type Step = {
    * Optional. More detailed text about this particular step.
    * It can provide users with guidance on what to expect or what's required.
    */
-  description?: string;
+  description?: string | React.ReactNode;
 
   /**
    * Optional. If `true`, the step is marked as having an error, typically displayed
@@ -98,7 +122,36 @@ export type StepIconProps = {
    */
   style?: ViewStyle;
 
+  /**
+   * Optional. If `true`, the step number is displayed within the step icon.
+   */
   useNumber?: boolean;
 
+  /**
+   * Optional. The number to display within the step icon.
+   */
   index: number;
+
+  /**
+   * Optional. If `true`, the step icon is marked as active.
+   */
+  isActive?: boolean;
+
+  /**
+   * Optional. Custom active icon
+   */
+  customIcon?: string;
+};
+
+/**
+ * Properties for the ProgressInfo component, which displays a progress bar
+ */
+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,68 +1,99 @@
-import {useContext} from 'react';
 import {ApplicationContext, Colors, Typography} from '@momo-kits/foundation';
+import {Step} from '@momo-kits/step';
+import {useContext} from 'react';
 
-type StepStatus = 'inactive' | 'active' | 'completed' | 'error';
+type StepStatus = 'incomplete' | 'current' | 'completed' | 'error' | 'disable';
 type StepTypo = {
   typography: Typography;
   color: string;
 };
 
+const getStatus = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean
+): StepStatus => {
+  if (disabled) return 'disable';
+  if (error) return 'error';
+  if (activeIndex === currentIndex) return 'current';
+  if (activeIndex > currentIndex) return 'completed';
+  return 'incomplete';
+};
+const checkSizeAndStepType = (
+  stepType?: 'vertical' | 'horizontal',
+  size?: 'small' | 'large'
+) => {
+  return (
+    stepType === 'horizontal' || (stepType === 'vertical' && size === 'small')
+  );
+};
+
+const getTypoTitle = (
+  status: StepStatus,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
+): Typography => {
+  const defaultTypo =
+    !!size && stepType === 'vertical'
+      ? 'body_default_regular'
+      : 'description_default_regular';
+
+  switch (status) {
+    case 'current':
+    case 'error': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'header_xs_semibold'
+        : 'header_s_semibold';
+    }
+    case 'incomplete':
+    case 'completed': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'description_default_regular'
+        : 'body_default_regular';
+    }
+    default: {
+      return defaultTypo;
+    }
+  }
+};
+
 export const getStepTypo = (
   activeIndex: number,
   currentIndex: number,
   error?: boolean,
   size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
 ) => {
   const {theme} = useContext(ApplicationContext);
+  const status = getStatus(activeIndex, currentIndex, error);
 
   let title: StepTypo = {
     color: theme.colors.text.default,
-    typography: 'description_default_regular',
+    typography: getTypoTitle(status, size, stepType),
   };
   let description: StepTypo = {
     color: theme.colors.text.hint,
-    typography: 'description_default_regular',
+    typography: !!size
+      ? 'description_xs_regular'
+      : 'description_default_regular',
   };
   let time: StepTypo = {
     color: theme.colors.text.hint,
     typography: 'description_xs_regular',
   };
 
-  let status: StepStatus = 'inactive';
-  if (activeIndex > currentIndex) {
-    status = 'completed';
-  }
-  if (activeIndex === currentIndex) {
-    status = 'active';
-  }
-  if (error) {
-    status = 'error';
-  }
-
   switch (status) {
-    case 'active': {
-      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;
+    case 'current': {
+      title.color = theme.colors.primary;
       break;
     }
-
     case 'error': {
-      title.typography = 'header_xs_semibold';
       title.color = theme.colors.error.primary;
       break;
     }
   }
 
-  if (size === 'small') {
-    description.typography = 'description_xs_regular';
-  }
-
   return {title, description, time};
 };
 
@@ -71,6 +102,7 @@ export const getStepColor = (
   currentIndex: number,
   error?: boolean,
   length: number = 1,
+  disabled?: boolean
 ) => {
   const {theme} = useContext(ApplicationContext);
   const DEFAULT_LINE_COLOR = theme.colors.background.default;
@@ -80,20 +112,15 @@ export const getStepColor = (
   let borderColor = theme.colors.border.default;
   let lineColorLeft = DEFAULT_LINE_COLOR;
   let lineColorRight = DEFAULT_LINE_COLOR;
-  let status: StepStatus = 'inactive';
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
 
   if (activeIndex > currentIndex) {
-    status = 'completed';
     lineColorLeft = COMPLETED_LINE_COLOR;
     lineColorRight = COMPLETED_LINE_COLOR;
   }
   if (activeIndex === currentIndex) {
-    status = 'active';
     lineColorLeft = COMPLETED_LINE_COLOR;
   }
-  if (error) {
-    status = 'error';
-  }
 
   if (currentIndex === 0) {
     lineColorLeft = 'transparent';
@@ -103,15 +130,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;
     }
 
@@ -120,7 +147,29 @@ export const getStepColor = (
       borderColor = theme.colors.error.container;
       break;
     }
+
+    case 'disable': {
+      backgroundColor = Colors.pink_08;
+      borderColor = Colors.pink_10;
+      break;
+    }
   }
 
   return {backgroundColor, borderColor, lineColorLeft, lineColorRight, status};
 };
+
+export const getOnPressCompleted = (
+  item: Step,
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean,
+  onPress?: (item: Step, index: number) => void
+) => {
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
+
+  if (status === 'completed' && onPress) {
+    return () => onPress(item, currentIndex);
+  }
+  return undefined;
+};