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-28 16:02:39
 * @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(data) {
    let newList = this.state.timelineList.map((item) => {
      item.color = 'grey';
      if (item.key == data.key) {
        item.color = 'blue';
      }
      return item;
    });
    this.setState({
      timelineList: newList,
    });
    this.props.onClick(data);
  }

  componentDidMount() {
    // fetch(this.props.url)
    //   .then((res) => res.json())
    //   .then((data) => {
    //     this.setState({
    //       timelineList: data.timelineList,
    //     });
    //   });
    const datas = [
      { key: 0, id: 0, title: '当前版本', color: 'blue', time: '' },
      { key: 1, id: 1, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 2, id: 2, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 3, id: 3, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 4, id: 4, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 5, id: 5, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 6, id: 6, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 7, id: 7, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 8, id: 8, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 9, id: 9, title: '测试', color: 'grey', time: '2022-01-09' },
      { key: 10, id: 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
                key={item.key}
                onClick={this.handleLineClick.bind(this, item)}
                className={styles.timeline}
                color={item.color}
                style={{ color: item.color == 'blue' ? '#1890ff' : 'dimgray' }}
              >
                <div>{item.title}</div>
                <div className={styles.time}>{item.time}</div>
              </Timeline.Item>
            );
          })}
        </Timeline>
      </div>
    );
  }
}