@momo-kits/step 0.167.1-duotest.1 → 0.167.1-rc.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

@@ -29,10 +29,8 @@ const StepsVertical: FC<StepsProps> = ({
     const typoStyle = GetStepTypo(activeIndex, index, error, size, 'vertical');
 
     const { backgroundColor, borderColor } = stepStyle;
-    const lineColor =
-      activeIndex > index
-        ? theme.colors.primary + '33'
-        : theme.colors.border.default;
+    const { primary, border } = theme.colors;
+    const lineColor = activeIndex > index ? primary + '33' : border.default;
 
     /**
      * build description
@@ -55,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}
@@ -88,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
               }
@@ -122,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.167.1-duotest.1",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
-}
+  "name": "@momo-kits/step",
+  "version": "0.167.1-rc.2",
+  "private": false,
+  "main": "index.tsx",
+  "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,
+  },
 });

package/utils.ts

@@ -34,23 +34,20 @@ const getTypoTitle = (
   size?: 'small' | 'large',
   stepType?: 'vertical' | 'horizontal'
 ): Typography => {
-  const defaultTypo =
-    !!size && stepType === 'vertical'
-      ? 'body_default_regular'
-      : 'description_default_regular';
+  let defaultTypo: Typography = 'description_default_regular';
+  if (size && stepType === 'vertical') {
+    defaultTypo = 'body_default_regular';
+  }
+  const isCompact = checkSizeAndStepType(stepType, size);
 
   switch (status) {
     case 'current':
     case 'error': {
-      return checkSizeAndStepType(stepType, size)
-        ? 'header_xs_semibold'
-        : 'header_s_semibold';
+      return isCompact ? 'header_xs_semibold' : 'header_s_semibold';
     }
     case 'incomplete':
     case 'completed': {
-      return checkSizeAndStepType(stepType, size)
-        ? 'description_default_regular'
-        : 'body_default_regular';
+      return isCompact ? 'description_default_regular' : 'body_default_regular';
     }
     default: {
       return defaultTypo;
@@ -74,9 +71,7 @@ export const GetStepTypo = (
   };
   let description: StepTypo = {
     color: theme.colors.text.hint,
-    typography: !!size
-      ? 'description_xs_regular'
-      : 'description_default_regular',
+    typography: size ? 'description_xs_regular' : 'description_default_regular',
   };
   let time: StepTypo = {
     color: theme.colors.text.hint,