var React = require('react');
var FeatureComponent = require('./features/featureComponent.jsx');
var React = require('react');
var FeatureComponent = require('./features/featureComponent.jsx');
Each row in the types table on the left side.
var TypeRow = React.createClass({
getInitialState: function() {
we store the state(checked/unchecked) for every type so that when we reload, the state restores.
return {
isChecked: false
};
},
componentDidMount: function() {
var value = window.localStorage.getItem(this.props.type);
checked = false;
if (value == "true") {
checked = true;
this.props.watchTypeHandler(this.props.type);
}
this.setState({
isChecked: checked
});
this.props.typeInfo.typeCounter();
},
unwatch: function() {
var checked = false;
if (this.state.isChecked) {
this.props.unwatchTypeHandler(this.props.type);
} else {
checked = true;
this.props.watchTypeHandler(this.props.type);
}
every time its checked we update the local storage.
window.localStorage.setItem(this.props.type, checked);
this.setState({
isChecked: checked
});
},
render: function() {
return (
<li>
<div className="theme-element checkbox">
<input
id={this.props.type}
type="checkbox"
key={this.props.type}
checked={this.state.isChecked}
onChange={this.unwatch}
readOnly={false}/>
<label htmlFor={this.props.type}>{this.props.type}</label>
</div>
</li>
);
}
});
This is for the table holding the types on the left tab.
var TypeTable = React.createClass({
render: function() {
var types = this.props.Types;
rowObj = [];
appname = APPNAME;
for (var type in types) {
rowObj.push(<TypeRow
key={type}
type={types[type]}
unwatchTypeHandler={this.props.unwatchTypeHandler}
watchTypeHandler={this.props.watchTypeHandler}
typeInfo={this.props.typeInfo} />);
}
if (types.length < 1) {
return (
<div className='left-tab'>
<div className="highlight-tip left-tip">
<strong>No data to view!</strong> Insert data by following this
tutorial <a href="http://docs.appbase.io/scalr/rest/intro.html" target="_blank">here</a>.
</div>
</div>
);
}
return (
<div className='left-tab'>
<div className="row typesList">
<h4 className='types-header pull-left col-xs-12'>
<span className="pull-left">Types</span>
</h4>
<ul className='fa-ul types-list clearfix'>
{rowObj}
</ul>
</div>
</div>
);
}
});
module.exports = TypeTable;