@momo-kits/step 0.103.2-rc.4 → 0.103.2-rc.41

package/StepsHorizontal.tsx

@@ -18,9 +18,9 @@ const StepsHorizontal: FC<StepsProps> = ({
   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';
@@ -32,28 +32,28 @@ 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 (
       <TouchableOpacity
-        key={`Step ${ii}`}
+        key={`Step ${index}`}
         style={{
           flex: 1,
           alignItems,
           marginRight: haveMarginRight ? Spacing.XS : 0,
         }}
         disabled={disabled || !onPress}
-        onPress={onPress}>
+        onPress={() => onPress && onPress(item, index)}>
         {!!time && (
           <Text
             style={{textAlign}}
@@ -62,7 +62,7 @@ const StepsHorizontal: FC<StepsProps> = ({
             {time}
           </Text>
         )}
-        {renderStepIcon(i, ii, align)}
+        {renderStepIcon(item, index, align, false)}
         {!!title && (
           <Text
             style={[styles.title, {textAlign}]}
@@ -86,20 +86,21 @@ const StepsHorizontal: FC<StepsProps> = ({
   };
 
   const renderStepIcon = (
-    i: Step,
-    ii: number,
+    item: Step,
+    index: number,
     align: string = 'center',
     disabled: boolean
   ) => {
-    const {error} = steps[ii];
+    const {error} = item;
 
-    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length);
     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}>
@@ -124,9 +125,9 @@ const StepsHorizontal: FC<StepsProps> = ({
             marginLeft: !lineLeftHide ? Spacing.XS : 0,
             marginVertical: Spacing.XS,
           }}
-          index={ii}
+          index={index}
           useNumber={useNumber}
-          isActive={activeIndex === ii}
+          isActive={activeIndex === index}
           customIcon={customIcon}
         />
         {!lineRightHide && (
@@ -146,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

@@ -14,20 +14,37 @@ const StepsVertical: FC<StepsProps> = ({
 }) => {
   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={typoStyle.description.color}
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        );
+      }
+      return description;
+    };
+
     return (
       <View
-        key={`Step ${ii}`}
+        key={`Step ${index}`}
         style={{
           flexDirection: 'row',
           marginBottom: Spacing.XS,
@@ -44,10 +61,10 @@ const StepsVertical: FC<StepsProps> = ({
             backgroundColor={backgroundColor}
             borderColor={borderColor}
             useNumber={useNumber}
-            index={ii}
-            isActive={activeIndex === ii}
+            index={index}
+            isActive={activeIndex === index}
           />
-          {ii !== steps.length - 1 && (
+          {index !== steps.length - 1 && (
             <View
               style={[
                 styles.lineVertical,
@@ -77,19 +94,15 @@ const StepsVertical: FC<StepsProps> = ({
               {time}
             </Text>
           </View>
-          <Text
-            color={typoStyle.description.color}
-            typography={typoStyle.description.typography}>
-            {description}
-          </Text>
+          {buildDescription()}
         </View>
       </View>
     );
   };
   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.103.2-rc.4",
+    "version": "0.103.2-rc.41",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

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,17 +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;
 
-  onPress?: () => void;
+  /**
+   * 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.
@@ -54,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
@@ -104,10 +122,19 @@ 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;
 
   /**
@@ -116,6 +143,9 @@ export type StepIconProps = {
   customIcon?: string;
 };
 
+/**
+ * Properties for the ProgressInfo component, which displays a progress bar
+ */
 export type ProgressInfoProps = {
   steps: Step[];
   horizontal?: boolean;

package/utils.ts

@@ -11,7 +11,8 @@ export const getStepTypo = (
   activeIndex: number,
   currentIndex: number,
   error?: boolean,
-  size?: 'small' | 'large'
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
 ) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -47,7 +48,12 @@ export const getStepTypo = (
     }
 
     case 'completed': {
-      title.typography = 'header_xs_semibold';
+      if (
+        stepType === 'horizontal' ||
+        (stepType === 'vertical' && size === 'small')
+      ) {
+        title.typography = 'description_default_regular';
+      } else title.typography = 'body_default_regular';
       break;
     }