@momo-kits/step 0.92.21-beta.1 → 0.92.21-beta.2

package/StepsHorizontal.tsx

@@ -1,35 +1,65 @@
 import React, {FC} from 'react';
-import {View} from 'react-native';
+import {FlexAlignType, View} from 'react-native';
 import {Step, StepsProps} from './types';
 import StepIcon from './StepIcon';
 import {Spacing, Text} from '@momo-kits/foundation';
 import {getStepColor, getStepTypo} from './utils';
 import styles from './styles';
 
+type TextAlign = 'left' | 'right' | 'center';
+
 const StepsHorizontal: FC<StepsProps> = ({
   steps,
   size,
   activeIndex,
   useNumber = false,
+  align = 'center',
 }) => {
   const renderStepItem = (i: Step, ii: number) => {
     const {title, description, error, time} = steps[ii];
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
+    let alignItems: FlexAlignType = 'center';
+    let textAlign: TextAlign = 'center';
+
+    if (align === 'left') {
+      alignItems = 'flex-start';
+      textAlign = 'left';
+    } else if (align === 'right') {
+      alignItems = 'flex-end';
+      textAlign = 'right';
+    } else if (align === 'stretch') {
+      if (ii === 0) {
+        alignItems = 'flex-start';
+        textAlign = 'left';
+      } else if (ii === steps.length - 1) {
+        textAlign = 'right';
+        alignItems = 'flex-end';
+      }
+    }
+
+    const haveMarginRight =
+      ii !== steps.length - 1 && align !== 'center' && align !== 'stretch';
 
     return (
-      <View key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
+      <View
+        key={`Step ${ii}`}
+        style={{
+          flex: 1,
+          alignItems,
+          marginRight: haveMarginRight ? Spacing.XS : 0,
+        }}>
         {!!time && (
           <Text
-            style={styles.textCenter}
+            style={{textAlign}}
             color={typoStyle.time.color}
             typography={typoStyle.time.typography}>
             {time}
           </Text>
         )}
-        {renderStepIcon(i, ii)}
+        {renderStepIcon(i, ii, align)}
         {!!title && (
           <Text
-            style={[styles.title, styles.textCenter]}
+            style={[styles.title, {textAlign}]}
             color={typoStyle.title.color}
             typography={typoStyle.title.typography}>
             {title}
@@ -37,7 +67,7 @@ const StepsHorizontal: FC<StepsProps> = ({
         )}
         {!!description && (
           <Text
-            style={styles.textCenter}
+            style={{textAlign}}
             color={typoStyle.description.color}
             typography={typoStyle.description.typography}>
             {description}
@@ -47,16 +77,20 @@ const StepsHorizontal: FC<StepsProps> = ({
     );
   };
 
-  const renderStepIcon = (i: Step, ii: number) => {
+  const renderStepIcon = (i: Step, ii: number, align: string = 'center') => {
     const {error} = steps[ii];
 
     const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
     const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
       stepStyle;
 
+    const lineLeftHide = (align === 'stretch' && ii === 0) || align === 'left';
+    const lineRightHide =
+      (align === 'stretch' && ii === steps.length - 1) || align === 'right';
+
     return (
       <View style={styles.rowStep}>
-        {
+        {!lineLeftHide && (
           <View
             style={[
               styles.lineHorizontal,
@@ -66,25 +100,31 @@ const StepsHorizontal: FC<StepsProps> = ({
               },
             ]}
           />
-        }
+        )}
         <StepIcon
           size={size}
           error={error}
           backgroundColor={backgroundColor}
           borderColor={borderColor}
-          style={{marginHorizontal: Spacing.XS, marginVertical: Spacing.XS}}
+          style={{
+            marginRight: !lineRightHide ? Spacing.XS : 0,
+            marginLeft: !lineLeftHide ? Spacing.XS : 0,
+            marginVertical: Spacing.XS,
+          }}
           index={ii}
           useNumber={useNumber}
         />
-        <View
-          style={[
-            styles.lineHorizontal,
-            styles.radiusLeft,
-            {
-              backgroundColor: lineColorRight,
-            },
-          ]}
-        />
+        {!lineRightHide && (
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusLeft,
+              {
+                backgroundColor: lineColorRight,
+              },
+            ]}
+          />
+        )}
       </View>
     );
   };

package/package.json

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

package/publish.sh

@@ -11,7 +11,7 @@ if [ "$1" == "stable" ]; then
   npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  npm version $(npm view @momo-kits/step@latest version)
+  npm version $(npm view @momo-kits/foundation@latest version)
   npm version prerelease --preid=rc
   npm publish --tag latest --access=public
 else

package/types.ts

@@ -30,6 +30,8 @@ export type StepsProps = {
   activeIndex: number;
 
   useNumber?: boolean;
+
+  align?: 'left' | 'right' | 'center' | 'stretch';
 };
 
 /**