Comments (11)
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.
Yeah, I think this is the same issue as #11
Make sure you are at least on version 2.1.3
from react-gantt.
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.
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.
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.
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.
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.
Ok, this should have been fixed by commit 6685c68
Update to 2.1.6
Let me know if it works
from react-gantt.
Awesome! Yes, it appears to be fixed with 2.1.6
thanks for the quick work
from react-gantt.
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.
Great, can you file that as a new issue?
from react-gantt.
Related Issues (20)
- Failed to compile HOT 6
- bug HOT 3
- Props validation failing HOT 2
- Showing the table on resize only HOT 6
- Display hour and minutes along with date HOT 2
- Show monthly view HOT 8
- GanttTimeline GanttBar GanttPopup HOT 4
- change header date format HOT 1
- Is there support for a horizontal slider/cursor? HOT 1
- Can react-gantt support a slider/cursor? HOT 1
- error HOT 2
- Moment is not defined HOT 1
- this gannt are still supported?
- can't render the gannt chart
- when i install react-gantt something was wrong,but my global react version is 15.4.2 HOT 1
- Not work with react@16. HOT 6
- Document props HOT 1
- React-native not supported HOT 1
- React-native run-adroid not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-gantt.