Git Product home page Git Product logo

Comments (11)

Sazarov avatar Sazarov commented on August 22, 2024

After some more testing it seems the problem is from the npm package. NPM package behavior differs from github repo behavior. I copied the files from this repo into my project and imported the components from there which seems to fix the issue.

from react-gantt.

clayrisser avatar clayrisser commented on August 22, 2024

Yeah, I think this is the same issue as #11

Make sure you are at least on version 2.1.3

from react-gantt.

Sazarov avatar Sazarov commented on August 22, 2024

Tried with 2.1.3 but it didn't help, I'm getting the same issue. Deleted node_modules, package-lock, cleared browser cache but the problem persists. Using NPM v5.6.0 if that makes any difference

from react-gantt.

clayrisser avatar clayrisser commented on August 22, 2024

Ok, I'll see what I can do to fix it.

Can you send me a section of your relevant code?

Thanks for filling the issue.

from react-gantt.

Sazarov avatar Sazarov commented on August 22, 2024

I'm using demo/script.js from this repo modified in the following way:

/* eslint-disable */
import React, { Component } from "react";
import moment from "moment";
import { render } from "react-dom";
// import ReactGantt, { GanttRow } from "../src";
import ReactGantt, { GanttRow } from "react-gantt";
import util from "util";
import {Switch, Route, Redirect} from 'react-router'
import {BrowserRouter as Router,Link} from 'react-router-dom'
class Parent extends Component {
  render() {
    return (
      <Router>
      <Switch>
        <Route path="/chart" component={Demo}/>
        <Route path="/empty" component={Empty}/>
        <Route path="*" render={() => (<Redirect to="/chart"/>)}/>
      </Switch>
      </Router>
    )
  }
}
class Empty extends Component {
  render() {
    return (
      <div>
        Empty page
        <br/>
        <Link to="/empty">Empty</Link>
        <Link to="/chart">Chart</Link>
      </div>
    )
  }
}
class Demo extends Component {
  componentWillUnmount() {
    console.log("Demo unmounting")
  }
  render() {
    return (
      <div>
        <ReactGantt
          templates={{
            myTasks: {
              title: "My Tasks",
              steps: [
                {
                  name: "Task Phase One",
                  color: "#0099FF"
                },
                {
                  name: "Task Phase Two",
                  color: "#FF9900"
                }
              ]
            }
          }}
          leftBound={moment()
          .set({ hour: 0, date: 30, month: 5, year: 2016 })
          .toDate()}
          rightBound={moment()
          .set({ hour: 0, date: 29, month: 8, year: 2016 })
          .toDate()}
          dateFormat="YYYY-MM-DD"
          debug={false}
        >
          <GanttRow
            title="Task 1"
            templateName="myTasks"
            steps={[
              moment()
              .set({ hour: 0, date: 1, month: 6, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 4, month: 8, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 17, month: 8, year: 2016 })
              .toDate()
            ]}
          />
          <GanttRow
            title="Task 2"
            templateName="myTasks"
            steps={[
              moment()
              .set({ hour: 0, date: 27, month: 2, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 9, month: 7, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 22, month: 7, year: 2016 })
              .toDate()
            ]}
          />
          <GanttRow
            title="Task 3"
            templateName="myTasks"
            steps={[
              moment()
              .set({ hour: 0, date: 12, month: 6, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 2, month: 7, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 2, month: 8, year: 2016 })
              .toDate(),
              moment()
              .set({ hour: 0, date: 24, month: 9, year: 2016 })
              .toDate()
            ]}
          />
        </ReactGantt>
        <Link to="/empty">Empty</Link>
        <Link to="/chart">Chart</Link>
      </div>
    );
  }
}
// eslint-disable-next-line no-undef
render(<Parent/>, document.getElementById("demo"));

I'm basically replacing the locally imported ReactGantt, { GanttRow } components with the ones from the npm package.

package.json looks like this:

    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "react-gantt": "2.1.4"

Thanks for looking into this

from react-gantt.

clayrisser avatar clayrisser commented on August 22, 2024

I don't understand how you are getting an error, because I check if this.resizeEventListener exists before running removeEventListener(). Perhaps my code wasn't included in the newest npm module. I seem to remember you saying the code in this repo differs from the npm module. I'll go ahead a publish a new release.

https://github.com/codejamninja/react-gantt/blob/master/src/index.js#L92-L96

  componentWillUnmount() {
    if (this.resizeEventListener) {
      this.resizeEventListener.removeEventListener();
    }
  }

from react-gantt.

clayrisser avatar clayrisser commented on August 22, 2024

I added a prepublish script to enforce the newest build before publishing to npm. This should prevent npm getting the wrong build.

from react-gantt.

clayrisser avatar clayrisser commented on August 22, 2024

Ok, this should have been fixed by commit 6685c68

Update to 2.1.6

Let me know if it works

from react-gantt.

Sazarov avatar Sazarov commented on August 22, 2024

Awesome! Yes, it appears to be fixed with 2.1.6 thanks for the quick work

from react-gantt.

Sazarov avatar Sazarov commented on August 22, 2024

There seems to be a new error though:

Warning: Failed prop type: Invalid prop `titleStyle` of type `object` supplied to `GanttPopup`, expected `string`.
    in GanttPopup (created by GanttRow)
    in GanttRow (created by Demo)
    in tbody (created by ReactGantt)
    in table (created by ReactGantt)
    in div (created by ReactGantt)
    in ReactGantt (created by Demo)
    in div (created by Demo)
    in Demo (created by Route)
    in Route (created by Parent)
    in Switch (created by Parent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Parent)
    in Parent

Sounds like props validation is failing, I'm guessing titleStyle needs to be PropTypes.object or PropTypes.shape({...})

from react-gantt.

clayrisser avatar clayrisser commented on August 22, 2024

Great, can you file that as a new issue?

from react-gantt.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.