@momo-kits/step 0.168.1-rn862.1 → 0.169.2

package/StepIcon.tsx

@@ -43,7 +43,7 @@ const StepIcon: FC<StepIconProps> = ({
     if (useNumber) {
       return (
         <Text
-          style={{position: 'absolute'}}
+          style={styles.numberLabel}
           typography={'header_xs_semibold'}
           color={Colors.black_01}>
           {index + 1}
@@ -65,7 +65,7 @@ const StepIcon: FC<StepIconProps> = ({
       // render default Icon
       return (
         <View
-          style={[styles.currIcon, {width: contentIconSize, aspectRatio: 1}]}
+          style={[styles.currIcon, {width: contentIconSize}]}
         />
       );
     }

package/StepsHorizontal.tsx

@@ -56,23 +56,28 @@ const StepsHorizontal: FC<StepsProps> = ({
 
     const haveMarginRight =
       index !== steps.length - 1 && align !== 'center' && align !== 'stretch';
+    const marginRight = haveMarginRight ? Spacing.XS : 0;
 
     return (
       <TouchableOpacity
         key={`Step ${index}`}
-        style={{
-          flex: 1,
-          alignItems,
-          marginRight: haveMarginRight ? Spacing.XS : 0,
-        }}
+        style={[
+          styles.flex1,
+          {
+            alignItems,
+            marginRight,
+          },
+        ]}
         disabled={disabled || !onPress}
         onPress={() => onPress && onPress(item, index)}
         accessibilityLabel={`${accessibilityLabel}-touch-${index}`}>
         <View
-          style={{
-            minHeight: timeHeight,
-            justifyContent: 'flex-end',
-          }}>
+          style={[
+            styles.timeContainer,
+            {
+              minHeight: timeHeight,
+            },
+          ]}>
           {!!time && (
             <Text
               onLayout={onTimesLayout}
@@ -114,8 +119,8 @@ const StepsHorizontal: FC<StepsProps> = ({
   const renderStepIcon = (
     item: Step,
     index: number,
-    align: string = 'center',
-    disabled?: boolean
+    stepAlign: string = 'center',
+    stepDisabled?: boolean
   ) => {
     const {error} = item;
 
@@ -124,15 +129,18 @@ const StepsHorizontal: FC<StepsProps> = ({
       index,
       error,
       steps.length,
-      disabled
+      stepDisabled
     );
     const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
       stepStyle;
 
     const lineLeftHide =
-      (align === 'stretch' && index === 0) || align === 'left';
+      (stepAlign === 'stretch' && index === 0) || stepAlign === 'left';
     const lineRightHide =
-      (align === 'stretch' && index === steps.length - 1) || align === 'right';
+      (stepAlign === 'stretch' && index === steps.length - 1) ||
+      stepAlign === 'right';
+    const iconMarginRight = !lineRightHide ? Spacing.XS : 0;
+    const iconMarginLeft = !lineLeftHide ? Spacing.XS : 0;
 
     return (
       <View style={styles.rowStep}>
@@ -150,11 +158,11 @@ const StepsHorizontal: FC<StepsProps> = ({
         <StepIcon
           size={size}
           error={error}
-          backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
-          borderColor={disabled ? Colors.pink_10 : borderColor}
+          backgroundColor={stepDisabled ? Colors.pink_08 : backgroundColor}
+          borderColor={stepDisabled ? Colors.pink_10 : borderColor}
           style={{
-            marginRight: !lineRightHide ? Spacing.XS : 0,
-            marginLeft: !lineLeftHide ? Spacing.XS : 0,
+            marginRight: iconMarginRight,
+            marginLeft: iconMarginLeft,
             marginVertical: Spacing.XS,
           }}
           index={index}
@@ -178,7 +186,7 @@ const StepsHorizontal: FC<StepsProps> = ({
   };
 
   return (
-    <View style={{flexDirection: 'row'}}>
+    <View style={styles.row}>
       {steps.map((item, index) => {
         return renderStepItem(item, index);
       })}

package/StepsVertical.tsx

@@ -53,21 +53,12 @@ const StepsVertical: FC<StepsProps> = ({
     return (
       <TouchableOpacity
         key={`Step ${index}`}
-        style={{
-          flexDirection: 'row',
-          marginBottom: Spacing.XS,
-        }}
+        style={styles.verticalItem}
         disabled={disabled || !onPress}
         onPress={() => onPress && onPress(item, index)}
         accessibilityLabel={`${accessibilityLabel}-touch-${index}`}
       >
-        <View
-          style={{
-            alignItems: 'center',
-            marginRight: Spacing.M,
-            minHeight: 48,
-          }}
-        >
+        <View style={styles.stepIconColumn}>
           <StepIcon
             size={size}
             error={error}
@@ -86,16 +77,11 @@ const StepsVertical: FC<StepsProps> = ({
             />
           )}
         </View>
-        <View style={{ flex: 1 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-            }}
-          >
+        <View style={styles.flex1}>
+          <View style={styles.titleRow}>
             <Text
               numberOfLines={2}
-              style={{ marginRight: Spacing.S, flex: 1 }}
+              style={styles.verticalTitle}
               color={
                 disabled ? theme.colors.text.disable : typoStyle.title.color
               }
@@ -120,7 +106,7 @@ const StepsVertical: FC<StepsProps> = ({
     );
   };
   return (
-    <View style={{ width: '100%' }}>
+    <View style={styles.fullWidth}>
       {steps.map((item, index: number) => {
         return renderStepItem(item, index);
       })}

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.168.1-rn862.1",
+    "version": "0.169.2",
     "private": false,
-    "license": "MoMo",
     "main": "index.tsx",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {},
     "peerDependencies": {
         "@momo-kits/foundation": "latest",
         "react": "*",
         "react-native": "*"
-    }
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
 }

package/styles.ts

@@ -44,4 +44,36 @@ export default StyleSheet.create({
     borderRadius: Radius.L,
     aspectRatio: 1,
   },
+  row: {
+    flexDirection: 'row',
+  },
+  flex1: {
+    flex: 1,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  numberLabel: {
+    position: 'absolute',
+  },
+  timeContainer: {
+    justifyContent: 'flex-end',
+  },
+  verticalItem: {
+    flexDirection: 'row',
+    marginBottom: Spacing.XS,
+  },
+  stepIconColumn: {
+    alignItems: 'center',
+    marginRight: Spacing.M,
+    minHeight: 48,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  verticalTitle: {
+    marginRight: Spacing.S,
+    flex: 1,
+  },
 });