jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Fix review comments

codeClimate
Yotam Berkowitz 8 years ago
parent
06c264e5b6
commit
342091d180
1 changed files with 21 additions and 29 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +21
    -29
      examples/timeline/other/usingReact.html

+ 21
- 29
examples/timeline/other/usingReact.html View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>React Hello World</title>
<title>React Components in templates</title>
</head> </head>
<body> <body>
@ -17,8 +17,8 @@
to compile JSX into JavaScript. Also, check out: to compile JSX into JavaScript. Also, check out:
http://facebook.github.io/react/docs/tooling-integration.html http://facebook.github.io/react/docs/tooling-integration.html
--> -->
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
@ -30,7 +30,7 @@
--> -->
<script type="text/babel"> <script type="text/babel">
var timeline; var timeline;
// create groups // create groups
var numberOfGroups = 25; var numberOfGroups = 25;
var groups = new vis.DataSet() var groups = new vis.DataSet()
@ -66,8 +66,7 @@
render: function() { render: function() {
var { group } = this.props; var { group } = this.props;
return <div> return <div>
<label>{group.content}</label>
<button>do stuff</button>
<label>{group.content}</label>
</div> </div>
} }
}) })
@ -76,44 +75,37 @@
render: function() { render: function() {
var { item } = this.props; var { item } = this.props;
return <div> return <div>
<label>{item.content}</label>
<button>do stuff</button>
<label>{item.content}</label>
</div> </div>
} }
}) })
// specify options // specify options
var options = { var options = {
rtl: true,
stack: true,
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
template: function (item, element) {
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function (group, element) {
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
},
orientation: 'top'
orientation: 'top',
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
template: function (item, element) {
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function (group, element) {
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
}
} }
var VisTimeline = React.createClass({ var VisTimeline = React.createClass({
componentDidMount: function() { componentDidMount: function() {
initTimeline()
return initTimeline();
}, },
render: function() { render: function() {
return <div> return <div>
<h1>Vis timline with React</h1> <h1>Vis timline with React</h1>
<h2>Using react components for items ang group templates</h2>
<h2>Using react components for items and group templates</h2>
<div id="mytimeline"></div> <div id="mytimeline"></div>
</div> </div>

Write Preview
Loading…
Cancel
Save