@momo-kits/progress-info 0.103.1

package/ProgressInfoHorizontal.tsx

@@ -0,0 +1,128 @@
+import React, {FC} from 'react';
+import {FlexAlignType, View} from 'react-native';
+import {ProgressInfoItem, ProgressInfoProps} from './types';
+import {Colors, Spacing, Text} from '@momo-kits/foundation';
+import styles from './styles';
+import ProgressInfoIcon from './ProgressInfoIcon';
+
+type TextAlign = 'left' | 'right' | 'center';
+
+const ProgressInfoHorizontal: FC<ProgressInfoProps> = ({
+  steps,
+  size,
+  useNumber = false,
+  showDescription = true,
+  showTitle = true,
+  align,
+  customIcon,
+}) => {
+  const renderProgressItem = (i: ProgressInfoItem, ii: number) => {
+    const {title, description} = steps[ii];
+
+    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,
+          marginRight: haveMarginRight ? Spacing.XS : 0,
+        }}>
+        {renderStepIcon(i, ii, align)}
+        {!!title && showTitle && (
+          <Text
+            style={[styles.title, {textAlign}]}
+            typography={'header_xs_semibold'}>
+            {title}
+          </Text>
+        )}
+        {!!description && showDescription && (
+          <Text
+            style={{textAlign}}
+            color={Colors.black_12}
+            typography={'description_default_regular'}>
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+  const renderStepIcon = (
+    i: ProgressInfoItem,
+    ii: number,
+    align: string = 'center'
+  ) => {
+    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,
+              styles.radiusRight,
+              {
+                backgroundColor: Colors.pink_08,
+              },
+            ]}
+          />
+        )}
+        <ProgressInfoIcon
+          size={size}
+          index={ii}
+          backgroundColor={Colors.pink_08}
+          borderColor={Colors.pink_08}
+          style={{
+            marginVertical: Spacing.XS,
+          }}
+          useNumber={useNumber}
+          customIcon={customIcon}
+        />
+        {!lineRightHide && (
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusLeft,
+              {
+                backgroundColor: Colors.pink_08,
+              },
+            ]}
+          />
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View style={{flexDirection: 'row'}}>
+      {steps.map((i, ii) => {
+        return renderProgressItem(i, ii);
+      })}
+    </View>
+  );
+};
+
+export default ProgressInfoHorizontal;

package/ProgressInfoIcon.tsx

@@ -0,0 +1,65 @@
+import {Colors, Icon, Text} from '@momo-kits/foundation';
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import styles from './styles';
+import {ProgressInfoItemIcon} from './types';
+
+const ProgressInfoIcon: FC<ProgressInfoItemIcon> = ({
+  size = 'large',
+  backgroundColor,
+  borderColor,
+  style,
+  useNumber,
+  customIcon,
+  index,
+}) => {
+  let iconStyle = styles.stepIcon;
+  let checkIconSize = 16;
+  let contentIconSize = 8;
+
+  if (size === 'small') {
+    iconStyle = styles.stepIconSmall;
+    checkIconSize = 12;
+    contentIconSize = 6;
+  }
+
+  const renderIcon = () => {
+    // useNumber is true, render number
+    if (useNumber) {
+      return (
+        <Text
+          style={{position: 'absolute'}}
+          typography={'header_xs_semibold'}
+          color={Colors.pink_MoMo_Branding}>
+          {index + 1}
+        </Text>
+      );
+    }
+
+    // customIcon is true, render customIcon
+    if (customIcon) {
+      return (
+        <Icon
+          size={checkIconSize}
+          color={Colors.pink_MoMo_Branding}
+          source={customIcon}
+        />
+      );
+    }
+    // render default Icon
+    return (
+      <View
+        style={[styles.currIcon, {width: contentIconSize, aspectRatio: 1}]}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
+      {renderIcon()}
+    </View>
+  );
+};
+
+export default ProgressInfoIcon;

package/ProgressInfoVertical.tsx

@@ -0,0 +1,85 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ProgressInfoItem, ProgressInfoProps} from './types';
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
+import ProgressInfoIcon from './ProgressInfoIcon';
+import styles from './styles';
+
+const ProgressInfoVertical: FC<ProgressInfoProps> = ({
+  steps,
+  size,
+  useNumber = false,
+  showDescription = true,
+  showTitle = true,
+  customIcon,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const renderStepItem = (i: ProgressInfoItem, ii: number) => {
+    const {description, title} = steps[ii];
+
+    const lineColor = theme.colors.primary + '33';
+
+    return (
+      <View
+        key={`Step ${ii}`}
+        style={{
+          flexDirection: 'row',
+        }}>
+        <View
+          style={{
+            alignItems: 'center',
+            marginRight: Spacing.M,
+            minHeight: 48,
+          }}>
+          <ProgressInfoIcon
+            size={size}
+            backgroundColor={Colors.pink_08}
+            borderColor={Colors.pink_08}
+            useNumber={useNumber}
+            customIcon={customIcon}
+            index={ii}
+          />
+          {ii !== steps.length - 1 && (
+            <View style={[styles.lineVertical, {backgroundColor: lineColor}]} />
+          )}
+        </View>
+        <View style={{flex: 1}}>
+          <View
+            style={[
+              {
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              },
+            ]}>
+            {showTitle && (
+              <Text
+                numberOfLines={2}
+                style={{marginRight: Spacing.S, flex: 1}}
+                typography={'header_xs_semibold'}>
+                {title}
+              </Text>
+            )}
+          </View>
+          {showDescription && (
+            <Text
+              color={Colors.black_12}
+              typography={'description_default_regular'}>
+              {description}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={{width: '100%'}}>
+      {steps.map((i, ii) => {
+        return renderStepItem(i, ii);
+      })}
+    </View>
+  );
+};
+
+export default ProgressInfoVertical;

package/index.tsx

@@ -0,0 +1,22 @@
+import React, {FC} from 'react';
+import {ProgressInfoItem, ProgressInfoProps} from './types';
+import ProgressInfoHorizontal from './ProgressInfoHorizontal';
+import ProgressInfoVertical from './ProgressInfoVertical';
+
+const ProgressInfo: FC<ProgressInfoProps> = ({
+  horizontal = false,
+  ...props
+}) => {
+  return (
+    <>
+      {horizontal ? (
+        <ProgressInfoHorizontal {...props} />
+      ) : (
+        <ProgressInfoVertical {...props} />
+      )}
+    </>
+  );
+};
+
+export {ProgressInfo};
+export type {ProgressInfoProps, ProgressInfoItem};

package/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@momo-kits/progress-info",
+    "version": "0.103.1",
+    "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/publish.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+# Prepare dist files
+rm -rf dist
+mkdir dist
+rsync -r --exclude=/dist ./* dist
+cd dist
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/progress-info@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
+cd ..
+rm -rf dist

package/styles.ts

@@ -0,0 +1,60 @@
+import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {StyleSheet} from 'react-native';
+export default StyleSheet.create({
+  stepIcon: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: Radius.L,
+  },
+  stepIconSmall: {
+    width: scaleSize(16),
+    height: scaleSize(16),
+    borderWidth: 2,
+    borderRadius: scaleSize(Radius.M),
+  },
+  lineHorizontal: {
+    height: 2,
+    flex: 1,
+  },
+  lineVertical: {
+    width: 2,
+    minHeight: 20,
+    flex: 1,
+  },
+  radiusLeft: {
+    borderTopLeftRadius: Radius.S,
+    borderBottomLeftRadius: Radius.S,
+  },
+  radiusRight: {
+    borderTopRightRadius: Radius.S,
+    borderBottomRightRadius: Radius.S,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowStep: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  largeText: {
+    fontSize: scaleSize(12),
+    lineHeight: scaleSize(16),
+  },
+  smallText: {
+    fontSize: scaleSize(8),
+    lineHeight: scaleSize(12),
+  },
+  currIcon: {
+    backgroundColor: Colors.pink_MoMo_Branding,
+    borderRadius: Radius.L,
+    aspectRatio: 1,
+  },
+});

package/types.ts

@@ -0,0 +1,60 @@
+import {ViewStyle} from 'react-native';
+
+export type ProgressInfoItem = {
+  /**
+   * The title of the step, briefly describing the purpose or task of this stage.
+   */
+  title: string;
+
+  /**
+   * Optional. More detailed text about this particular step.
+   * It can provide users with guidance on what to expect or what's required.
+   */
+  description?: string;
+};
+
+/**
+ * Properties for the StepIcon component, which displays an icon
+ * representing a step within the Steps component.
+ */
+export type ProgressInfoItemIcon = {
+  /**
+   * Optional. Specifies the size of the step icon. If not provided, a default size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. The background color of the step icon.
+   * If not provided, a default background color is used.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. The border color of the step icon.
+   * If not provided, a default border color is used.
+   */
+  borderColor?: string;
+
+  /**
+   * Optional. Custom styles to apply to the StepIcon component.
+   * Can be used to adjust the visual presentation or layout.
+   */
+  style?: ViewStyle;
+
+  index: number;
+
+  useNumber?: boolean;
+
+  customIcon?: string;
+};
+
+export type ProgressInfoProps = {
+  steps: ProgressInfoItem[];
+  horizontal?: boolean;
+  size?: 'small' | 'large';
+  useNumber?: boolean;
+  align?: 'left' | 'right' | 'center' | 'stretch' | undefined;
+  showDescription?: boolean;
+  showTitle?: boolean;
+  customIcon?: string;
+};