import React, { useState } from "react";

import {
  Timeline,
  Activebar,
  getTimeline,
  UnitType,
  ConfigContext,
} from "web-react-gantt";

function App() {
  const [scale, setCount] = useState(30);
  const data = getTimeline(36);
  const unit = 15;
  const type = "hour";
  const pice = UnitType[type] / unit;
  const width = data.length * scale * pice;

  return (
    <div className="App">
      <div className="flex">
        <div className="left">
          <button onClick={() => setCount(scale + 5)}>+</button>

          <button onClick={() => setCount(scale - 5)}>-</button>
        </div>
        <div className="right">
          <ConfigContext.Provider value={{ unit, type, scale, width }}>
            <Timeline data={data} />
            <Activebar name={"活动中"} start={9} end={16} />
            <Activebar name={"活动2"} start={3} end={8} />
          </ConfigContext.Provider>
        </div>
      </div>
    </div>
  );
}

export default App;