@momo-kits/step 0.92.1-beta.4 → 0.92.1-rc.10

package/StepIcon.tsx

@@ -1,14 +1,8 @@
 import React, {FC, useContext} from 'react';
-import {TextStyle, View} from 'react-native';
+import {View} from 'react-native';
 import {StepIconProps} from './types';
 import styles from './styles';
-import {
-  ApplicationContext,
-  Colors,
-  Icon,
-  Text,
-  Typography,
-} from '@momo-kits/foundation';
+import {ApplicationContext, Icon, Colors} from '@momo-kits/foundation';
 
 const StepIcon: FC<StepIconProps> = ({
   size = 'large',
@@ -16,38 +10,20 @@ const StepIcon: FC<StepIconProps> = ({
   borderColor,
   error,
   style,
-  useNumber,
-  index,
 }) => {
+  const {theme} = useContext(ApplicationContext);
   let iconStyle = styles.stepIcon;
   let checkIconSize = 16;
   let iconSource = error ? 'navigation_close' : 'notifications_check';
-  let typography: Typography = 'header_xs_semibold';
 
   if (size === 'small') {
     iconStyle = styles.stepIconSmall;
     checkIconSize = 12;
-    typography = 'label_s_medium';
   }
   return (
     <View
       style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
-      {useNumber ? (
-        <Text
-          style={{
-            position: 'absolute',
-          }}
-          typography={typography}
-          color={Colors.black_01}>
-          {index + 1}
-        </Text>
-      ) : (
-        <Icon
-          size={checkIconSize}
-          color={Colors.black_01}
-          source={iconSource}
-        />
-      )}
+      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
     </View>
   );
 };

package/StepsHorizontal.tsx

@@ -6,23 +6,15 @@ import {Spacing, Text, getAccessibilityID} from '@momo-kits/foundation';
 import {getStepColor, getStepTypo} from './utils';
 import styles from './styles';
 
-const StepsHorizontal: FC<StepsProps> = ({
-  steps,
-  size,
-  activeIndex,
-  useNumber = false,
-}) => {
+const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
   const renderStepItem = (i: Step, ii: number) => {
     const {title, description, error, time} = steps[ii];
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
-    const {status} = getStepColor(activeIndex, ii, error, steps.length);
-    const accessibilityID = getAccessibilityID?.(`ic_step_${ii}_${status}`);
+    const {status} = getStepColor(activeIndex, ii, error, steps.length)
+      const accessibilityID = getAccessibilityID?.(`ic_step_${ii}_${status}`)
 
     return (
-      <View
-        {...accessibilityID}
-        key={`Step ${ii}`}
-        style={{flex: 1, alignItems: 'center'}}>
+      <View {...accessibilityID} key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
         {!!time && (
           <Text
             style={styles.textCenter}
@@ -78,8 +70,6 @@ const StepsHorizontal: FC<StepsProps> = ({
           backgroundColor={backgroundColor}
           borderColor={borderColor}
           style={{marginHorizontal: Spacing.XS, marginVertical: Spacing.XS}}
-          index={ii}
-          useNumber={useNumber}
         />
         <View
           style={[
@@ -97,6 +87,7 @@ const StepsHorizontal: FC<StepsProps> = ({
   return (
     <View style={{flexDirection: 'row'}}>
       {steps.map((i, ii) => {
+
         return renderStepItem(i, ii);
       })}
     </View>

package/StepsVertical.tsx

@@ -2,21 +2,11 @@ import React, {FC, useContext} from 'react';
 import {View} from 'react-native';
 import {Step, StepsProps} from './types';
 import {getStepColor, getStepTypo} from './utils';
-import {
-  ApplicationContext,
-  getAccessibilityID,
-  Spacing,
-  Text,
-} from '@momo-kits/foundation';
+import {ApplicationContext, getAccessibilityID, Spacing, Text} from '@momo-kits/foundation';
 import styles from './styles';
 import StepIcon from './StepIcon';
 
-const StepsVertical: FC<StepsProps> = ({
-  steps,
-  activeIndex,
-  size,
-  useNumber = false,
-}) => {
+const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
   const {theme} = useContext(ApplicationContext);
 
   const renderStepItem = (i: Step, ii: number) => {
@@ -24,8 +14,8 @@ const StepsVertical: FC<StepsProps> = ({
 
     const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
-    const {status} = getStepColor(activeIndex, ii, error, steps.length);
-    const accessibilityID = getAccessibilityID?.(`ic_step_${ii}_${status}`);
+      const {status} = getStepColor(activeIndex, ii, error, steps.length)
+      const accessibilityID = getAccessibilityID?.(`ic_step_${ii}_${status}`)
 
     const {backgroundColor, borderColor} = stepStyle;
     const lineColor =
@@ -34,7 +24,7 @@ const StepsVertical: FC<StepsProps> = ({
         : theme.colors.background.default;
     return (
       <View
-        {...accessibilityID}
+          {...accessibilityID}
         key={`Step ${ii}`}
         style={{
           flexDirection: 'row',
@@ -51,8 +41,6 @@ const StepsVertical: FC<StepsProps> = ({
             error={error}
             backgroundColor={backgroundColor}
             borderColor={borderColor}
-            useNumber={useNumber}
-            index={ii}
           />
           {ii !== steps.length - 1 && (
             <View

package/package.json

@@ -1,17 +1,17 @@
 {
-  "name": "@momo-kits/step",
-  "version": "0.92.1-beta.4",
-  "private": false,
-  "main": "index.tsx",
-  "dependencies": {},
-  "peerDependencies": {
-    "@momo-kits/foundation": "latest",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "react-native": ">=0.55"
-  },
-  "devDependencies": {
-    "@momo-platform/versions": "4.1.11"
-  },
-  "license": "MoMo"
+    "name": "@momo-kits/step",
+    "version": "0.92.1-rc.10",
+    "private": false,
+    "main": "index.tsx",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "react-native": ">=0.55"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo"
 }

package/styles.ts

@@ -1,18 +1,18 @@
 import {StyleSheet} from 'react-native';
-import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   stepIcon: {
-    width: scaleSize(24),
-    height: scaleSize(24),
+    width: 24,
+    height: 24,
     borderWidth: 2,
-    borderRadius: scaleSize(Radius.L),
+    borderRadius: Radius.M,
   },
   stepIconSmall: {
-    width: scaleSize(16),
-    height: scaleSize(16),
+    width: 16,
+    height: 16,
     borderWidth: 2,
-    borderRadius: scaleSize(Radius.M),
+    borderRadius: Radius.S,
   },
   lineHorizontal: {
     height: 2,
@@ -45,12 +45,4 @@ export default StyleSheet.create({
   textCenter: {
     textAlign: 'center',
   },
-  largeText: {
-    fontSize: scaleSize(12),
-    lineHeight: scaleSize(16),
-  },
-  smallText: {
-    fontSize: scaleSize(8),
-    lineHeight: scaleSize(12),
-  },
 });

package/types.ts

@@ -28,8 +28,6 @@ export type StepsProps = {
    * starting from 0 for the first step.
    */
   activeIndex: number;
-
-  useNumber?: boolean;
 };
 
 /**
@@ -95,8 +93,4 @@ export type StepIconProps = {
    * Can be used to adjust the visual presentation or layout.
    */
   style?: ViewStyle;
-
-  useNumber?: boolean;
-
-  index: number;
 };