mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40: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-plugin-transform-object-rest-spread": "^6.19.0",
|
||||||
"babel-preset-es2015": "^6.18.0",
|
"babel-preset-es2015": "^6.18.0",
|
||||||
"babel-preset-react": "^6.16.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": "^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 buildArray = require('build-array');
|
||||||
const delay = require('delay');
|
const delay = require('delay');
|
||||||
|
const faker = require('faker');
|
||||||
|
|
||||||
const actions = {
|
const actions = {
|
||||||
'FETCH_FULFILLED': (state, action) => {
|
'FETCH_FULFILLED': (state, action) => {
|
||||||
@ -53,7 +54,10 @@ const fetch = () => (dispatch, getState) => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
id,
|
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.fetch = fetch;
|
||||||
module.exports.filter = filter;
|
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 = ({
|
const List = ({
|
||||||
items = [],
|
items = [],
|
||||||
filtered,
|
filtered,
|
||||||
@ -37,9 +58,18 @@ const List = ({
|
|||||||
filter
|
filter
|
||||||
}) => {
|
}) => {
|
||||||
const _items = (filtered || items).map((item) => {
|
const _items = (filtered || items).map((item) => {
|
||||||
|
const fill = Math.random() > 0.5 ? 'red' : 'green';
|
||||||
|
const status = Math.random() > 0.5 ? 'Unhealthy' : 'Healthy';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={item.id}>
|
<div style={styles.item} key={item.id}>
|
||||||
{item.title}
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@ -57,7 +87,7 @@ const List = ({
|
|||||||
<div>
|
<div>
|
||||||
<input onChange={onChange} />
|
<input onChange={onChange} />
|
||||||
<Infinite
|
<Infinite
|
||||||
containerHeight={200}
|
containerHeight={400}
|
||||||
elementHeight={20}
|
elementHeight={20}
|
||||||
infiniteLoadBeginEdgeOffset={200}
|
infiniteLoadBeginEdgeOffset={200}
|
||||||
onInfiniteLoad={fetch}
|
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 webpack = require('webpack');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
|
||||||
const plugins = {
|
const plugins = {
|
||||||
'no-errors-plugin': new webpack.NoErrorsPlugin(),
|
'no-errors-plugin': new webpack.NoErrorsPlugin(),
|
||||||
@ -13,7 +14,16 @@ exports.config = {
|
|||||||
filename: '[name].js'
|
filename: '[name].js'
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.NoErrorsPlugin()
|
new webpack.NoErrorsPlugin(),
|
||||||
|
new ExtractTextPlugin({
|
||||||
|
filename: 'css/[name].css',
|
||||||
|
allChunks: true
|
||||||
|
}),
|
||||||
|
new webpack.LoaderOptionsPlugin({
|
||||||
|
options: {
|
||||||
|
postcss: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
],
|
],
|
||||||
module: {
|
module: {
|
||||||
loaders: [{
|
loaders: [{
|
||||||
@ -23,6 +33,22 @@ exports.config = {
|
|||||||
path.join(__dirname, '../src')
|
path.join(__dirname, '../src')
|
||||||
],
|
],
|
||||||
loader: 'babel-loader'
|
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