mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Adding in fake data to infinite scroll list
This commit is contained in:
parent
f6b03fd5f6
commit
e3c645061e
@ -28,7 +28,14 @@
|
||||
"babel-plugin-transform-object-rest-spread": "^6.19.0",
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"extract-text-webpack-plugin": "^2.0.0-beta.4",
|
||||
"faker": "^3.1.0",
|
||||
"webpack": "^2.1.0-beta.27",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
"webpack-dev-server": "^1.16.2",
|
||||
"css-loader": "^0.25.0",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"postcss-loader": "^1.0.0",
|
||||
"postcss-modules-values": "^1.2.2",
|
||||
"style-loader": "^0.13.1"
|
||||
}
|
||||
}
|
||||
|
7
spikes/list/react-infinite/src/actions.js
vendored
7
spikes/list/react-infinite/src/actions.js
vendored
@ -1,5 +1,6 @@
|
||||
const buildArray = require('build-array');
|
||||
const delay = require('delay');
|
||||
const faker = require('faker');
|
||||
|
||||
const actions = {
|
||||
'FETCH_FULFILLED': (state, action) => {
|
||||
@ -53,7 +54,10 @@ const fetch = () => (dispatch, getState) => {
|
||||
|
||||
return {
|
||||
id,
|
||||
title: `test ${id}`
|
||||
title: `test ${id}`,
|
||||
description: faker.lorem.sentence(),
|
||||
image: faker.image.imageUrl(),
|
||||
date: faker.date.recent()
|
||||
};
|
||||
});
|
||||
})
|
||||
@ -85,4 +89,3 @@ module.exports = (state, action) => {
|
||||
|
||||
module.exports.fetch = fetch;
|
||||
module.exports.filter = filter;
|
||||
|
||||
|
36
spikes/list/react-infinite/src/list.js
vendored
36
spikes/list/react-infinite/src/list.js
vendored
@ -28,6 +28,27 @@ const mapDispatchToProps = (dispatch, ownProps) => {
|
||||
}
|
||||
};
|
||||
|
||||
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,
|
||||
@ -37,9 +58,18 @@ const List = ({
|
||||
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 key={item.id}>
|
||||
{item.title}
|
||||
<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>
|
||||
);
|
||||
});
|
||||
@ -57,7 +87,7 @@ const List = ({
|
||||
<div>
|
||||
<input onChange={onChange} />
|
||||
<Infinite
|
||||
containerHeight={200}
|
||||
containerHeight={400}
|
||||
elementHeight={20}
|
||||
infiniteLoadBeginEdgeOffset={200}
|
||||
onInfiniteLoad={fetch}
|
||||
|
28
spikes/list/react-infinite/webpack/base.js
vendored
28
spikes/list/react-infinite/webpack/base.js
vendored
@ -1,5 +1,6 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
const plugins = {
|
||||
'no-errors-plugin': new webpack.NoErrorsPlugin(),
|
||||
@ -13,7 +14,16 @@ exports.config = {
|
||||
filename: '[name].js'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin()
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'css/[name].css',
|
||||
allChunks: true
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
options: {
|
||||
postcss: {}
|
||||
}
|
||||
})
|
||||
],
|
||||
module: {
|
||||
loaders: [{
|
||||
@ -23,6 +33,22 @@ exports.config = {
|
||||
path.join(__dirname, '../src')
|
||||
],
|
||||
loader: 'babel-loader'
|
||||
}, {
|
||||
test: /\.css?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, '../src'),
|
||||
path.join(__dirname, '../docs')
|
||||
],
|
||||
loader: ExtractTextPlugin.extract({
|
||||
fallbackLoader: 'style-loader',
|
||||
loader: [
|
||||
'css-loader?',
|
||||
'modules&importLoaders=1&',
|
||||
'localIdentName=[name]__[local]___[hash:base64:5]!',
|
||||
'postcss-loader'
|
||||
].join('')
|
||||
})
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user