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-29 14:24:04
 * @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() {
    this.searchTimeLines(this.props.url);
  }

  searchTimeLines(url) {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          timelineList: data.timelineList,
        });
      });
  }

  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>
    );
  }
}