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-09-14 17:48: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, Drawer } from 'antd';
import styles from './index.less';
import leftTreeShow from './img/leftTree-show.png';
import leftHide from './img/leftTree-hide.png';

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

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

  setOpen = () => {
    this.setState({
      open: !this.state.open,
    });
  };

  render() {
    let showStyle = {};
    let positionStyle = {};
    if (this.state.open) {
      showStyle = {
        display: 'block',
      };
      positionStyle = {
        left: '219px',
        background: `url(${leftTreeShow}) no-repeat -2px 0`,
      };
    } else {
      showStyle = {
        display: 'none',
      };
      positionStyle = {
        left: '0',
        background: `url(${leftHide}) no-repeat -2px 0`,
      };
    }

    return (
      <>
        <div
          className={styles.leftRightLayoutBtn}
          style={positionStyle}
          onClick={this.setOpen}
        ></div>
        <div className={styles.lineWrapper} style={showStyle}>
          <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>
      </>
    );
  }
}