@momo-kits/step 0.169.8 → 0.169.10

package/StepsHorizontal.tsx

@@ -58,7 +58,7 @@ const StepsHorizontal: FC<StepsProps> = ({
       }
     }
 
-    const onTimesLayout = (e: LayoutChangeEvent) => {
+    const handleTimesLayout = (e: LayoutChangeEvent) => {
       const { height } = e.nativeEvent.layout;
       if (height !== timeHeight && height > timeHeight) setTimeHeight(height);
     };
@@ -91,7 +91,7 @@ const StepsHorizontal: FC<StepsProps> = ({
         >
           {!!time && (
             <Text
-              onLayout={onTimesLayout}
+              onLayout={handleTimesLayout}
               style={{ textAlign }}
               color={
                 disabled ? theme.colors.text.disable : typoStyle.time.color

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.169.8",
+    "version": "0.169.10",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/utils.ts

@@ -2,6 +2,9 @@ import { ApplicationContext, Colors, Typography } from '@momo-kits/foundation';
 import { Step } from '@momo-kits/step';
 import { useContext } from 'react';
 
+/** Hex alpha (20%) appended to the primary color for a passed connector line. */
+const COMPLETED_LINE_ALPHA = '33';
+
 type StepStatus = 'incomplete' | 'current' | 'completed' | 'error' | 'disable';
 type StepTypo = {
   typography: Typography;
@@ -31,6 +34,7 @@ const checkSizeAndStepType = (
   );
 };
 
+/** Title typography: semibold for current/error steps, smaller when compact. */
 const getTypoTitle = (
   status: StepStatus,
   size?: 'small' | 'large',
@@ -110,21 +114,21 @@ export const GetStepColor = (
   disabled?: boolean,
 ) => {
   const { theme } = useContext(ApplicationContext);
-  const DEFAULT_LINE_COLOR = theme.colors.border.default;
-  const COMPLETED_LINE_COLOR = theme.colors.primary + '33';
+  const defaultLineColor = theme.colors.border.default;
+  const completedLineColor = theme.colors.primary + COMPLETED_LINE_ALPHA;
 
   let backgroundColor = Colors.black_06;
   let borderColor = theme.colors.border.default;
-  let lineColorLeft = DEFAULT_LINE_COLOR;
-  let lineColorRight = DEFAULT_LINE_COLOR;
+  let lineColorLeft = defaultLineColor;
+  let lineColorRight = defaultLineColor;
   const status = getStatus(activeIndex, currentIndex, error, disabled);
 
   if (activeIndex > currentIndex) {
-    lineColorLeft = COMPLETED_LINE_COLOR;
-    lineColorRight = COMPLETED_LINE_COLOR;
+    lineColorLeft = completedLineColor;
+    lineColorRight = completedLineColor;
   }
   if (activeIndex === currentIndex) {
-    lineColorLeft = COMPLETED_LINE_COLOR;
+    lineColorLeft = completedLineColor;
   }
 
   if (currentIndex === 0) {