elephant-com/Flow.js

the general component for elephant washing shoes

import React from 'react';
import { View, Text } from 'react-native';
import { Icon } from 'antd-mobile';

const ns = {
  box: {
    borderLeftColor: '#00abea',
    marginLeft: 11,
    paddingLeft: 15,
    paddingBottom: 5,
  },
  icon: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: 24,
    height: 24,
    backgroundColor: '#fff',
    borderRadius: 12,
  },
};

/* eslint-disable react/no-array-index-key */
const Flow = ({ data, style = {} }) =>
  <View style={style}>
    {
      data.map(({ icon = <Icon type={'\ue60a'} size={24} color="#00abea" />, child }, i) =>
        <View key={i}>
          <View style={[ns.box, { borderLeftWidth: (i === data.length - 1 ? 0 : 2) }]}>
            {
              typeof child === 'string' ? <Text>{child}</Text> : child
            }
          </View>
          <View style={ns.icon}>
            {
              typeof (icon) === 'string' ? <Icon type={icon} size={24} color="#00abea" /> : icon
            }
          </View>
        </View>,
      )
    }
  </View>;

export default Flow;