<!DOCTYPE html>
<html>
<head>
<!-- patternfly css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.7.0/css/patternfly.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.7.0/css/patternfly-additions.min.css">
<!-- react js -->
<script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<!-- js dependencies for this example -->
<script src="https://www.patternfly.org/components/jquery/dist/jquery.min.js"></script>
<script src="https://www.patternfly.org/components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- custom elements -->
<link rel="import" href="https://rawgit.com/priley86/pf-footer/master/dist/pf-footer.html">
<script src="list-item-elements.js"></script>
</head>
<body>
<div id="example"></div>
<!-- credits <3 -->
<pf-footer></pf-footer>
<!-- load jsx component -->
<script src="script.js"></script>
</body>
</html>
class ListView extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(item) {
alert(item.name + ':' + item.value);
}
handleChange(e, item){
item.value = e.target.checked;
}
render() {
return (
<pf-list>
{this.props.items.map((item,i) =>
<pf-list-item key={item.key}>
<pf-list-checkbox>
<input type="checkbox" defaultChecked={item.value}
onChange={(e) => this.handleChange(e, item)} />
</pf-list-checkbox>
<pf-list-main-info>
<div className="list-view-pf-left">
<span className="fa fa-plane list-view-pf-icon-sm"></span>
</div>
<div className="list-view-pf-body">
<div className="list-view-pf-description">
<div className="list-group-item-heading">
{item.name}
</div>
<div className="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div className="list-view-pf-additional-info">
<div className="list-view-pf-additional-info-item">
<span className="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
<div className="list-view-pf-additional-info-item">
<span className="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
<div className="list-view-pf-additional-info-item">
<span className="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
<div className="list-view-pf-additional-info-item">
<span className="pficon pficon-image"></span>
<strong>8</strong> Images
</div>
</div>
</div>
</pf-list-main-info>
<pf-list-item-actions>
<button className="btn btn-default" onClick={() => this.handleClick(item)}>Action</button>
<div className="dropdown pull-right dropdown-kebab-pf">
<button className="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span className="fa fa-ellipsis-v"></span>
</button>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" className="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</pf-list-item-actions>
</pf-list-item>
)}
</pf-list>
)
}
}
var items = [];
for(var i=0; i<4; i++){
items.push({key: i, name: 'item' + i, value: false});
}
ReactDOM.render(
<ListView items={items}></ListView>,
document.getElementById('example')
);
class ListElement extends HTMLElement {
attachedCallback() {
this.classList.add('list-group','list-view-pf', 'list-view-pf-view');
}
}
document.registerElement('pf-list', ListElement);
class ListItemElement extends HTMLElement {
attachedCallback() {
this.classList.add('list-group-item');
}
}
document.registerElement('pf-list-item', ListItemElement);
class ListItemCheckboxElement extends HTMLElement {
attachedCallback() {
this.classList.add('list-view-pf-checkbox');
let checkbox = this.querySelector('input');
checkbox.addEventListener('change', (e) => {
e.target.checked ? this.parentElement.classList.add('active') :
this.parentElement.classList.remove('active')
});
}
}
document.registerElement('pf-list-checkbox', ListItemCheckboxElement);
class ListItemMainInfo extends HTMLElement {
attachedCallback() {
this.classList.add('list-view-pf-main-info');
}
}
document.registerElement('pf-list-main-info', ListItemMainInfo);
class ListItemActionsElement extends HTMLElement {
attachedCallback() {
this.classList.add('list-view-pf-actions');
}
}
document.registerElement('pf-list-item-actions', ListItemActionsElement);