mp-colorui/dist/h5/components/timeline/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../../lib/model";
import ClFlex from "../flex/index";
import { classNames, generateId } from "../../lib/index";
export default class ClTimeline extends Taro.Component {
  render() {
    const props = this.props;

    const times = props.times || [];
    const iconColorClassName = color => color ? TEXT_COLOR_LIST[color] : "";
    const iconClassName = icon => icon ? `cuIcon-${icon}` : "";
    const bgColorClassName = color => color ? BG_COLOR_LIST[color] : "";
    const onClick = index => {
      props.onClick && props.onClick(index);
    };
    const items = times.map((item, index) => item.node ? <View className="cu-time" key={generateId()} onClick={() => {
      onClick(index);
    }}>
        {item.node}
      </View> : <View className={`cu-item ${iconColorClassName(item.iconColor)} ${iconClassName(item.icon)}`} key={generateId()} onClick={() => {
      onClick(index);
    }}>
        <View className={`${bgColorClassName(item.bgColor)} content`}>
          <ClFlex justify="between" align="end">
            <View style={{ fontSize: Taro.pxTransform(36) }}>{item.title}</View>
            <View>{item.time}</View>
          </ClFlex>
          {item.content ? item.content.map((desc, index) => <View key={"key-" + index}>{desc}</View>) : ""}
        </View>
      </View>);
    return <View className={classNames("cu-timeline", props.className)} style={Object.assign({}, props.style)}>
      {items}
    </View>;
  }

}
ClTimeline.options = {
  addGlobalClass: true
};
ClTimeline.defaultProps = {
  times: [],
  onClick: () => {}
};