org-chart-frant/src/components/timeline/index.jsx

/*
 * @Author: Chengliang 1546584672@qq.com
 * @Date: 2023-06-25 16:33:21
 * @LastEditors: Chengliang 1546584672@qq.com
 * @LastEditTime: 2023-06-25 18:15:45
 * @FilePath: /org-chart-frant/src/components/timeline/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { Timeline } from 'antd';
import styles from './index.less';

export default class TimeLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timelineList: [],
    };
  }

  handleLineClick(item) {
    debugger;
  }

  componentDidMount() {
    // fetch(this.props.url)
    //   .then((res) => res.json())
    //   .then((data) => {
    //     this.setState({
    //       timelineList: data.timelineList,
    //     });
    //   });
    const datas = [
      { key: '0', title: '当前版本', color: 'blue', time: '2022-01-09' },
      { key: '1', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '2', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '3', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '4', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '5', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '6', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '7', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '8', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '9', title: '测试', color: 'grey', time: '2022-01-09' },
      { key: '10', title: '测试', color: 'grey', time: '2022-01-09' },
    ];
    this.setState({
      timelineList: datas,
    });
  }

  render() {
    return (
      <div className={styles.lineWrapper}>
        <Timeline>
          {this.state.timelineList.map((item) => {
            return (
              <Timeline.Item
                onClick={this.handleLineClick.bind(this, item)}
                className={styles.timeline}
                color={item.color}
              >
                <div>{item.title}</div>{' '}
                <div className={styles.time}>{item.time}</div>
              </Timeline.Item>
            );
          })}
        </Timeline>
      </div>
    );
  }
}