joyent-portal/spikes/list/react-infinite/src/list.js
2016-11-21 17:29:47 +00:00

108 lines
2.2 KiB
JavaScript

const debounce = require('lodash.debounce');
const ReactRedux = require('react-redux');
const Infinite = require('react-infinite');
const actions = require('./actions');
const React = require('react');
const {
connect
} = ReactRedux;
const {
fetch,
filter
} = actions;
const mapStateToProps = (state) => {
return state;
};
const mapDispatchToProps = (dispatch, ownProps) => {
return {
fetch: () => {
return dispatch(fetch());
},
filter: (payload) => {
return dispatch(filter(payload));
}
}
};
const styles = {
item: {
borderRadius: '4px',
backgroundColor: '#ffffff',
boxShadow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
border: 'solid 1px #d8d8d8',
marginBottom: '20px',
padding: '20px',
clear: 'both'
},
itemImage: {
width: '25%',
float: 'left',
width: '150px',
height: '150px'
},
itemText: {
float: 'right',
paddingLeft: '20px'
}
}
const List = ({
items = [],
filtered,
input = '',
fetching = false,
fetch,
filter
}) => {
const _items = (filtered || items).map((item) => {
const fill = Math.random() > 0.5 ? 'red' : 'green';
const status = Math.random() > 0.5 ? 'Unhealthy' : 'Healthy';
return (
<div style={styles.item} key={item.id}>
<img style={styles.itemImage} src={item.image} alt={item.title} />
<h3 style={styles.itemText}>{item.title}</h3>
<h4 style={styles.itemText}>{status}</h4>
<p style={styles.itemText}>{item.description}</p>
<svg>
<circle cx={50} cy={50} r={10} fill={fill} />
</svg>
</div>
);
});
const _loading = (
<div>
Loading...
</div>
);
const _filter = debounce(filter, 100);
const onChange = (ev) => _filter(ev.target.value);
return (
<div>
<input onChange={onChange} />
<Infinite
containerHeight={400}
preloadBatchSize={1600}
elementHeight={20}
infiniteLoadBeginEdgeOffset={200}
onInfiniteLoad={fetch}
isInfiniteLoading={fetching}
loadingSpinnerDelegate={_loading}
>
{_items}
</Infinite>
</div>
);
};
module.exports = connect(
mapStateToProps,
mapDispatchToProps,
)(List);