@momo-kits/step 0.0.43-beta.23 → 0.0.43-beta.26

package/Step.js

@@ -1,226 +1,20 @@
 import React, { Component } from 'react';
-import { View, StyleSheet } from 'react-native';
-
 import PropTypes from 'prop-types';
-import { Colors, Text, IconSource, Image } from '@momo-kits/core';
-import { ScrollView } from 'react-native-gesture-handler';
-
-const CIRCLE_SIZE = 24;
-
-const styles = StyleSheet.create({
-    circle: {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        borderRadius: CIRCLE_SIZE / 2,
-        borderWidth: 2,
-        padding: 4,
-    },
-    checkedCircle: {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        borderRadius: CIRCLE_SIZE / 2,
-        backgroundColor: '#ffadd2',
-        borderWidth: 2,
-        borderColor: Colors.pink_09,
-    },
-    titleDefault: {
-        color: Colors.black_12,
-        fontSize: 14,
-        fontWeight: 'normal',
-    },
-    titleActive: {
-        color: Colors.black_17,
-        fontSize: 14,
-        fontWeight: 'bold',
-    },
-    containerStyle: {
-        minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
-    },
-    description: {
-        fontSize: 12,
-        color: Colors.black_12,
-        paddingBottom: 16,
-        paddingTop: 4,
-        paddingLeft: 11,
-    },
-    date: {
-        fontSize: 10,
-        color: Colors.black_12,
-    },
-    number: {
-        fontSize: 12,
-        color: 'white',
-        textAlign: 'center',
-        lineHeight: 13,
-    },
-});
+import HorizontalStep from './Step.horizontal';
+import VerticalStep from './Step.vertical';
 
 export default class Step extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            width: 0,
-            height: 0,
-        };
     }
 
-    onLayout = (e) => {
-        this.setState({
-            width: e.nativeEvent.layout.width,
-            height: e.nativeEvent.layout.height,
-        });
-    };
-
-    circleStep = (index) => {
-        return (
-            <View style={[styles.circle]}>
-                <Text style={styles.number}>{index}</Text>
-            </View>
-        );
-    };
-
-    circleColumn = (value, index) => {
-        const {
-            currentStep,
-            titles,
-            lineStyle,
-            iconActive,
-            iconInActive,
-            lineColorActive,
-            lineColorInActive,
-            items,
-            currentStepColor,
-            date,
-        } = this.props;
-        const { height } = this.state;
-        let itemHeight = 0;
-        const icon =
-            currentStep >= index + 2
-                ? iconActive || IconSource.ic_check_24
-                : iconInActive || index + 1;
-        var circleColor =
-            currentStep >= index + 1 ? currentStepColor : Colors.black_06;
-        var circleBorderColor =
-            currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
-        const textFontStyle =
-            currentStep === index + 1
-                ? styles.titleActive
-                : styles.titleDefault;
-        const itemWidth = (height - CIRCLE_SIZE) / titles?.length;
-        const lineActive =
-            currentStep >= index + 2
-                ? lineColorActive
-                    ? Colors.pink_09
-                    : '#ffd6e7'
-                : lineColorInActive || Colors.black_04;
-        console.log(typeof items[index]);
-        return (
-            <View
-                onLayout={(event) => {
-                    const viewHeight = event.nativeEvent.layout.height;
-                    itemHeight = viewHeight;
-                    console.log({ itemHeight });
-                }}
-                key={index}
-                style={{ flexDirection: 'row' }}>
-                <View>
-                    {currentStep <= index + 1 ? (
-                        <View
-                            style={[
-                                styles.circle,
-                                {
-                                    backgroundColor: circleColor,
-                                    borderColor: circleBorderColor,
-                                },
-                            ]}>
-                            <Text style={styles.number}>{icon}</Text>
-                        </View>
-                    ) : (
-                        <View>
-                            <Image
-                                source={icon}
-                                style={[
-                                    styles.checkedCircle,
-                                    { tintColor: '#ffd6e7' },
-                                ]}
-                            />
-                        </View>
-                    )}
-                    {titles?.length - 1 !== index && (
-                        <View
-                            style={[
-                                styles.line,
-                                {
-                                    left: 11,
-                                    backgroundColor: lineActive,
-                                    width: 2,
-                                    minHeight: 10,
-                                    marginTop: 4,
-                                    marginBottom: 4,
-                                    flex: 1,
-                                },
-                                lineStyle,
-                            ]}
-                        />
-                    )}
-                </View>
-                <View
-                    style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
-                    <View
-                        style={{
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                        }}>
-                        <Text.Caption
-                            style={[{ marginLeft: 10 }, textFontStyle]}>
-                            {value}
-                        </Text.Caption>
-                        {currentStep >= index + 1 && (
-                            <Text style={styles.date}>{date}</Text>
-                        )}
-                    </View>
-                    <View>
-                        {typeof items[index] == 'string' ? (
-                            <Text style={[styles.description]}>
-                                {items[index]}
-                            </Text>
-                        ) : (
-                            <View style={[styles.description]}>
-                                {items[index]}
-                            </View>
-                        )}
-                    </View>
-                </View>
-            </View>
-        );
-    };
-
-    renderCircle = () => {
-        const { titles = [[]] } = this.props;
-        return titles.map(this.circleColumn);
-    };
-
     render() {
-        const { width, height } = this.state;
-        const { style, isVertical } = this.props;
-        return (
-            <ScrollView>
-                <View
-                    style={[styles.containerStyle, style]}
-                    onLayout={this.onLayout}>
-                    {isVertical ? (
-                        <View style={[styles.circleColumn, { height }]}>
-                            {this.renderCircle()}
-                        </View>
-                    ) : (
-                        <View style={[styles.circleRow, { width }]}>
-                            {this.renderCircle()}
-                        </View>
-                    )}
-                </View>
-            </ScrollView>
-        );
+        const { isVertical } = this.props;
+        let DefaultComponent = HorizontalStep;
+        if (isVertical) {
+            DefaultComponent = VerticalStep;
+        }
+        return <DefaultComponent {...this.props} />;
     }
 }
 
@@ -236,6 +30,7 @@ Step.propTypes = {
     lineColorInActive: PropTypes.string,
     borderColorActive: PropTypes.string,
     borderColorInActive: PropTypes.string,
+    titleFontSize: PropTypes.number,
 };
 
 Step.defaultProps = {

package/Step.vertical.js

@@ -0,0 +1,242 @@
+import { Colors, IconSource, Image, Text } from '@momo-kits/core';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+
+const CIRCLE_SIZE = 24;
+
+// this is layout of each item (flexdirection row)
+// this is left container (flex 0.2, )
+// this is value label
+// this is image
+// this is caption label
+// this is desc label
+// this is right container (flex 0.8)
+// this is line (width flex = 1 or width 100 percent)
+
+const styles = StyleSheet.create({
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        borderWidth: 2,
+        padding: 4,
+    },
+    checkedCircle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        backgroundColor: '#ffadd2',
+        borderWidth: 2,
+        borderColor: Colors.pink_09,
+    },
+    titleDefault: {
+        color: Colors.black_12,
+        fontSize: 14,
+        fontWeight: 'normal',
+    },
+    titleActive: {
+        color: Colors.black_17,
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+    containerStyle: {
+        minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
+    },
+    description: {
+        fontSize: 12,
+        color: Colors.black_12,
+        marginBottom: 16,
+        paddingTop: 4,
+        paddingLeft: 11,
+    },
+    date: {
+        fontSize: 10,
+        color: Colors.black_12,
+    },
+    number: {
+        fontSize: 12,
+        color: 'white',
+        textAlign: 'center',
+        lineHeight: 13,
+    },
+    lineVertical: {
+        marginLeft: 11,
+        width: 2,
+        minHeight: 10,
+        marginTop: 4,
+        marginBottom: 4,
+        flex: 1,
+    },
+    minHeight: {
+        minHeight: 12,
+        marginBottom: 4,
+    },
+});
+
+export default class VerticalStep extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            width: 0,
+            height: 0,
+        };
+    }
+
+    onLayout = (e) => {
+        this.setState({
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+        });
+    };
+
+    circleStep = (index) => {
+        return (
+            <View style={[styles.circle]}>
+                <Text style={styles.number}>{index}</Text>
+            </View>
+        );
+    };
+
+    circleColumn = (value, index) => {
+        const {
+            currentStep,
+            titles,
+            lineStyle,
+            iconActive,
+            iconInActive,
+            lineColorActive,
+            lineColorInActive,
+            items,
+            currentStepColor,
+            date,
+            isVertical,
+        } = this.props;
+        const icon =
+            currentStep >= index + 2
+                ? iconActive || IconSource.ic_check_24
+                : iconInActive || index + 1;
+        var circleColor =
+            currentStep >= index + 1 ? currentStepColor : Colors.black_06;
+        var circleBorderColor =
+            currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
+        const textFontStyle =
+            currentStep === index + 1
+                ? styles.titleActive
+                : styles.titleDefault;
+        const lineActive =
+            currentStep >= index + 2
+                ? lineColorActive
+                    ? Colors.pink_09
+                    : '#ffd6e7'
+                : lineColorInActive || Colors.black_04;
+        return (
+            <View key={index} style={{ flexDirection: 'row' }}>
+                <View>
+                    {currentStep <= index + 1 ? (
+                        <View>
+                            {/* image */}
+                            <View
+                                style={[
+                                    styles.circle,
+                                    {
+                                        backgroundColor: circleColor,
+                                        borderColor: circleBorderColor,
+                                    },
+                                ]}>
+                                <Text style={styles.number}>{icon}</Text>
+                            </View>
+                        </View>
+                    ) : (
+                        <View>
+                            <Image
+                                source={icon}
+                                style={[
+                                    styles.checkedCircle,
+                                    { tintColor: '#ffd6e7' },
+                                ]}
+                            />
+                        </View>
+                    )}
+                    {titles?.length - 1 !== index && (
+                        <View
+                            style={[
+                                styles.lineVertical,
+                                {
+                                    backgroundColor: lineActive,
+                                },
+                                lineStyle,
+                            ]}
+                        />
+                    )}
+                </View>
+                <View
+                    style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                        }}>
+                        <Text.Caption
+                            style={[{ marginLeft: 10 }, textFontStyle]}>
+                            {value}
+                        </Text.Caption>
+                        {currentStep >= index + 1 && (
+                            <Text style={styles.date}>{date}</Text>
+                        )}
+                    </View>
+                    <View>
+                        {typeof items[index] == 'string' ? (
+                            <Text style={[styles.description]}>
+                                {items[index]}
+                            </Text>
+                        ) : (
+                            <View style={[styles.description]}>
+                                {items[index]}
+                            </View>
+                        )}
+                    </View>
+                </View>
+            </View>
+        );
+    };
+
+    renderCircle = () => {
+        const { titles = [[]] } = this.props;
+        return titles.map(this.circleColumn);
+    };
+
+    render() {
+        return (
+            <ScrollView>
+                <View style={[styles.containerStyle]} onLayout={this.onLayout}>
+                    <View style={[styles.circleColumn]}>
+                        {this.renderCircle()}
+                    </View>
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+VerticalStep.propTypes = {
+    titles: PropTypes.array,
+    currentStep: PropTypes.number,
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    items: PropTypes.array,
+    isVertical: PropTypes.bool,
+    iconActive: PropTypes.any,
+    iconInActive: PropTypes.any,
+    lineColorActive: PropTypes.string,
+    lineColorInActive: PropTypes.string,
+    borderColorActive: PropTypes.string,
+    borderColorInActive: PropTypes.string,
+};
+
+VerticalStep.defaultProps = {
+    titles: [],
+    currentStep: 0,
+};