@momo-kits/step 0.0.64-beta → 0.0.65-alpha.8

package/Step.horizontal.js

@@ -0,0 +1,252 @@
+import { Colors, IconSource, Image, Spacing, Text } from '@momo-kits/core-v2';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const HorizontalStep = (props) => {
+    const {
+        steps = {},
+        currentStep,
+        type,
+        activeCircleColor,
+        inactiveCircleColor,
+        checkedCircleColor,
+        activeBorderColor,
+        inactiveBorderColor,
+        activeLineColor,
+        inactiveLineColor,
+        style,
+        size = 'default',
+        checkIcon,
+        errorIcon,
+    } = props;
+
+    let CIRCLE_SIZE = 24;
+    let CIRCLE_TEXT_SIZE = 12;
+    let ICON_SIZE = 16;
+    let TITLE_SIZE = { size: 14, lineHeight: 20 };
+    let SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+    let CONTENT_SIZE = { size: 12, lineHeight: 16 };
+    const ICON_URL = checkIcon || IconSource.ic_check_24;
+    const ERROR_ICON_URL = errorIcon || IconSource.ic_close_x_24;
+    if (size === 'small') {
+        CIRCLE_SIZE = 16;
+        CIRCLE_TEXT_SIZE = 8;
+        ICON_SIZE = 12;
+        TITLE_SIZE = { size: 12, lineHeight: 16 };
+        SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+        CONTENT_SIZE = { size: 10, lineHeight: 14 };
+    }
+
+    const renderCircle = (error, index) => {
+        let circleColor = inactiveCircleColor;
+        let borderColor = inactiveBorderColor;
+
+        if (index < currentStep) circleColor = checkedCircleColor;
+        else if (index === currentStep) circleColor = activeCircleColor;
+
+        if (index <= currentStep) borderColor = activeBorderColor;
+
+        if (error) {
+            circleColor = Colors.red_03;
+            borderColor = Colors.red_08;
+        }
+        return (
+            <View
+                style={[
+                    styles.circle,
+                    {
+                        width: CIRCLE_SIZE,
+                        height: CIRCLE_SIZE,
+                        borderRadius: CIRCLE_SIZE / 2,
+                        borderColor: borderColor,
+                        backgroundColor: circleColor,
+                    },
+                ]}>
+                {renderCircleContent(error, index)}
+            </View>
+        );
+    };
+
+    const renderCircleContent = (error, index) => {
+        const icon = error ? ERROR_ICON_URL : ICON_URL;
+        if (type === 'check') {
+            return (
+                <Image
+                    source={icon}
+                    style={[
+                        styles.icon,
+                        { width: ICON_SIZE, height: ICON_SIZE },
+                    ]}
+                />
+            );
+        } else if (type === 'combine') {
+            return index < currentStep ? (
+                <Image
+                    source={icon}
+                    style={[
+                        styles.icon,
+                        { width: ICON_SIZE, height: ICON_SIZE },
+                    ]}
+                />
+            ) : (
+                <Text
+                    style={[
+                        styles.circleText,
+                        {
+                            fontSize: CIRCLE_TEXT_SIZE,
+                            lineHeight: CIRCLE_TEXT_SIZE + 2,
+                        },
+                    ]}>
+                    {index + 1}
+                </Text>
+            );
+        }
+        return (
+            <Text
+                style={[
+                    styles.circleText,
+                    {
+                        fontSize: CIRCLE_TEXT_SIZE,
+                        lineHeight: CIRCLE_TEXT_SIZE + 2,
+                    },
+                ]}>
+                {index + 1}
+            </Text>
+        );
+    };
+
+    const renderLine = (index) => {
+        let lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
+
+        if (index === -1 || index === steps.length - 1)
+            lineColor = 'transparent';
+
+        return <View style={[styles.line, { backgroundColor: lineColor }]} />;
+    };
+
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content, error } = item;
+        const weight = index === currentStep ? '600' : '400';
+        const disabledColor = Colors.black_09;
+        const errorColor = Colors.error;
+        return (
+            <View key={index.toString()} style={styles.stepPart}>
+                <Text
+                    style={[
+                        styles.subTitle,
+                        {
+                            fontSize: SUBTITLE_SIZE.size,
+                            lineHeight: SUBTITLE_SIZE.lineHeight,
+                            color:
+                                index < currentStep && !error
+                                    ? disabledColor
+                                    : Colors.black_12,
+                        },
+                    ]}>
+                    {subTitle}
+                </Text>
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }}>
+                    {renderLine(index - 1)}
+                    {renderCircle(error, index)}
+                    {renderLine(index)}
+                </View>
+                <Text
+                    style={[
+                        styles.title,
+                        {
+                            lineHeight: TITLE_SIZE.lineHeight,
+                            fontSize: TITLE_SIZE.size,
+                            fontWeight: weight,
+                            color: error
+                                ? errorColor
+                                : index < currentStep
+                                ? disabledColor
+                                : null,
+                        },
+                    ]}>
+                    {title}
+                </Text>
+                <Text
+                    style={[
+                        styles.contentText,
+                        {
+                            fontSize: CONTENT_SIZE.size,
+                            lineHeight: CONTENT_SIZE.lineHeight,
+                            color:
+                                index < currentStep && !error
+                                    ? disabledColor
+                                    : Colors.black_12,
+                        },
+                    ]}>
+                    {content}
+                </Text>
+            </View>
+        );
+    };
+
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                {steps.map((item, index) => {
+                    return renderStepPart(item, index);
+                })}
+            </View>
+        </View>
+    );
+};
+
+export default HorizontalStep;
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', width: '100%' },
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: Spacing.XS,
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: { marginVertical: Spacing.XS },
+    contentText: {
+        color: Colors.black_12,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    title: {
+        marginBottom: Spacing.XS,
+    },
+    subTitle: {
+        color: Colors.black_12,
+    },
+    line: {
+        height: 2,
+        borderRadius: 1,
+        flex: 1,
+    },
+    icon: {
+        tintColor: Colors.white,
+    },
+    circleText: {
+        color: Colors.white,
+        fontWeight: '600',
+    },
+    stepPart: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        flex: 1,
+    },
+});

package/Step.horizontal.web.js

@@ -0,0 +1,207 @@
+import React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+import PropTypes from 'prop-types';
+import Colors from '../../core/colors';
+import Text from '../../core/components/typography';
+import Spacing from '../../core/spacing';
+import { Icons as IconSource } from '../../core/icons';
+
+const CIRCLE_SIZE = 24;
+const CIRCLE_TEXT_SIZE = 12;
+const ICON_SIZE = 16;
+const ICON_URL = IconSource.ic_check_24;
+const TITLE_SIZE = { size: 12, lineHeight: 16 };
+const SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+const CONTENT_SIZE = { size: 12, lineHeight: 16 };
+
+function HorizontalStep(props) {
+    HorizontalStep.displayName = 'HorizontalStep';
+    const {
+        steps = {},
+        currentStep,
+        type,
+        activeCircleColor,
+        inactiveCircleColor,
+        checkedCircleColor,
+        activeBorderColor,
+        inactiveBorderColor,
+        activeLineColor,
+        inactiveLineColor,
+        style,
+    } = props;
+    const { titles = [], subTitles = [], contents = [] } = steps;
+
+    const renderCircle = (index) => {
+        let circleColor = inactiveCircleColor;
+        let borderColor = inactiveBorderColor;
+
+        if (index < currentStep) circleColor = checkedCircleColor;
+        else if (index === currentStep) circleColor = activeCircleColor;
+
+        if (index <= currentStep) borderColor = activeBorderColor;
+
+        return (
+            <View
+                style={[
+                    styles.circle,
+                    {
+                        borderColor: borderColor,
+                        backgroundColor: circleColor,
+                    },
+                ]}>
+                {renderCircleContent(index)}
+            </View>
+        );
+    };
+
+    const renderCircleContent = (index) => {
+        if (type === 'check') {
+            return <Image source={ICON_URL} style={styles.icon} />;
+        } else if (type === 'combine') {
+            return index < currentStep ? (
+                <Image source={ICON_URL} style={styles.icon} />
+            ) : (
+                <Text style={styles.circleText}>{index + 1}</Text>
+            );
+        }
+        return <Text style={styles.circleText}>{index + 1}</Text>;
+    };
+
+    const renderLine = (index) => {
+        let lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
+
+        if (index === -1 || index === steps.length - 1)
+            lineColor = 'transparent';
+
+        return (
+            <View style={[styles.line, { backgroundColor: lineColor }]}></View>
+        );
+    };
+
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content } = item;
+        const weight = index === currentStep ? '600' : '400';
+        return (
+            <View key={index.toString()} style={styles.stepPart}>
+                <Text style={styles.subTitle}>{subTitle}</Text>
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }}>
+                    {renderLine(index - 1)}
+                    {renderCircle(index)}
+                    {renderLine(index)}
+                </View>
+                <Text style={[styles.title, { fontWeight: weight }]}>
+                    {title}
+                </Text>
+                <Text style={styles.contentText}>{content}</Text>
+            </View>
+        );
+    };
+
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                {steps.map((item, index) => {
+                    return renderStepPart(item, index);
+                })}
+            </View>
+        </View>
+    );
+}
+
+export default HorizontalStep;
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', width: '100%' },
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: Spacing.XS,
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: { marginVertical: Spacing.XS },
+    contentText: {
+        fontSize: CONTENT_SIZE.size,
+        lineHeight: CONTENT_SIZE.lineHeight,
+        color: Colors.black_12,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    title: {
+        lineHeight: TITLE_SIZE.lineHeight,
+        fontSize: TITLE_SIZE.size,
+        marginBottom: Spacing.XS,
+    },
+    subTitle: {
+        fontSize: SUBTITLE_SIZE.size,
+        lineHeight: SUBTITLE_SIZE.lineHeight,
+        color: Colors.black_12,
+    },
+    line: {
+        height: 2,
+        borderRadius: 1,
+        flex: 1,
+    },
+    icon: {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        tintColor: Colors.white,
+    },
+    circleText: {
+        fontSize: CIRCLE_TEXT_SIZE,
+        color: Colors.white,
+        fontWeight: '600',
+    },
+    stepPart: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        flex: 1,
+    },
+});
+
+HorizontalStep.propTypes = {
+    steps: PropTypes.arrayOf({
+        title: PropTypes.string.isRequired,
+        subTitle: PropTypes.string,
+        content: PropTypes.string,
+    }),
+    currentStep: PropTypes.number,
+    type: PropTypes.oneOf(['check', 'combine', 'text']),
+    activeCircleColor: PropTypes.string,
+    inactiveCircleColor: PropTypes.string,
+    checkedCircleColor: PropTypes.string,
+    activeBorderColor: PropTypes.string,
+    inactiveBorderColor: PropTypes.string,
+    activeLineColor: PropTypes.string,
+    inactiveLineColor: PropTypes.string,
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+};
+
+HorizontalStep.defaultProps = {
+    step: [{ title: '', subTitle: '', content: '' }],
+    currentStep: 0,
+    type: 'check',
+    activeCircleColor: Colors.pink_05_b,
+    inactiveCircleColor: Colors.black_06,
+    checkedCircleColor: '#f382c0',
+    activeBorderColor: Colors.pink_09,
+    inactiveBorderColor: Colors.black_04,
+    activeLineColor: '#fbd5ea',
+    inactiveLineColor: Colors.black_04,
+};