taro-material/h5/components/timeline/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import PropTypes from 'prop-types';
import Taro from "@tarojs/taro-h5";
import { View, Text } from '@tarojs/components';
import classNames from 'classnames';
import AtComponent from "../../common/component";

export default class AtTimeline extends AtComponent {
  render() {
    const {
      pending,
      items,
      customStyle
    } = this.props;

    const rootClassName = ['at-timeline'];
    if (pending) rootClassName.push('at-timeline--pending');

    const rootClassObject = {
      'at-timeline--pending': pending
    };

    const itemElems = items.map((item, index) => {
      const {
        title = '',
        color,
        icon,
        content = []
      } = item;

      const iconClass = classNames({
        'at-icon': true,
        [`at-icon-${icon}`]: icon
      });

      const itemRootClassName = ['at-timeline-item'];
      if (color) itemRootClassName.push(`at-timeline-item--${color}`);

      const dotClass = ['at-timeline-item__dot'];
      if (icon) dotClass.push('at-timeline-item__icon');

      return <View className={classNames(itemRootClassName)} key={index}>
          <View className="at-timeline-item__tail"></View>
          <View className={classNames(dotClass)}>
            {icon && <Text className={iconClass}></Text>}
          </View>
          <View className="at-timeline-item__content">
            <View className="at-timeline-item__content-item">{title}</View>
            {content.map((sub, subIndex) => <View className="at-timeline-item__content-item at-timeline-item__content--sub" key={subIndex}>
                  {sub}
                </View>)}
          </View>
        </View>;
    });
    return <View className={classNames(rootClassName, rootClassObject, this.props.className)} style={customStyle}>
        {itemElems}
      </View>;
  }
}

AtTimeline.defaultProps = {
  pending: false,
  items: [],
  customStyle: {}
};

AtTimeline.propTypes = {
  pending: PropTypes.bool,
  items: PropTypes.arrayOf(PropTypes.object),
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
};