Implimenting React Search

This commit is contained in:
Alex Windett 2017-01-05 16:26:17 +00:00
parent 21a26497d6
commit 7502b2d8f3
12 changed files with 3391 additions and 0 deletions

View File

@ -0,0 +1,15 @@
{
"sourceMaps": "both",
"presets": [
"react",
"es2015"
],
"plugins": [
"react-hot-loader/babel",
"add-module-exports",
"syntax-async-functions",
["transform-object-rest-spread", {
"useBuiltIns": true
}]
]
}

View File

@ -0,0 +1,39 @@
{
"name": "react-infinite-spike",
"private": true,
"license": "private",
"scripts": {
"start": "webpack-dev-server --config webpack/index.js"
},
"dependencies": {
"axios": "^0.15.3",
"build-array": "^1.0.0",
"delay": "^1.3.1",
"lodash.debounce": "^4.0.8",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-hot-loader": "^3.0.0-beta.6",
"react-infinite": "^0.10.0",
"react-redux": "^4.4.6",
"react-select": "^1.0.0-rc.2",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.1.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.7",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-syntax-async-functions": "^6.13.0",
"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",
"style-loader": "^0.13.1",
"webpack": "^2.1.0-beta.27",
"webpack-dev-server": "^1.16.2"
}
}

View File

@ -0,0 +1,7 @@
# react-select
- http://jedwatson.github.io/react-select/
- Has a seperate stylesheet that needs to be included
- Allows for async option

View File

@ -0,0 +1,17 @@
const ReactDOM = require('react-dom');
const React = require('react');
const render = () => {
const Root = require('./root');
ReactDOM.render(
<Root />,
document.getElementById('root')
);
};
render();
if (module.hot) {
module.hot.accept('./root', render);
}

View File

@ -0,0 +1,21 @@
const ReactRedux = require('react-redux');
const ReactHotLoader = require('react-hot-loader');
const React = require('react');
const Search = require('./search');
const {
AppContainer
} = ReactHotLoader;
const {
Provider
} = ReactRedux;
module.exports = ({
store
}) => {
return (
<AppContainer>
<Search />
</AppContainer>
);
};

View File

@ -0,0 +1,48 @@
const React = require('react');
const Select = require('react-select');
const SearchSingle = React.createClass({
getInitialState: function() {
return {
selectValue: ''
}
},
updateValue: function(newValue) {
console.log('State changed to ' + newValue);
this.setState({
selectValue: newValue
});
},
render: function () {
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
{ value: 'four', label: 'Four' },
{ value: 'five', label: 'Five' },
{ value: 'six', label: 'Six' },
];
return (
<div>
<h1> Single Search </h1>
<Select
ref="stateSelect"
autofocus
options={options}
name="selected-state"
value={this.state.selectValue}
onChange={this.updateValue}
multi={true}
/>
</div>
)
}
})
module.exports = SearchSingle

View File

@ -0,0 +1,14 @@
const React = require('react');
const SearchSingle = require('./search-single');
const Search = () => {
return (
<div>
<SearchSingle />
</div>
)
}
module.exports = Search

View File

@ -0,0 +1,7 @@
*
!.gitignore
!.gitkeep
!index.html
js/*
!js/.gitkeep

View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang='en-US'>
<head>
<title>React Select</title>
</head>
<body>
<div id='root'></div>
<script src='main.js'></script>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
</body>
</html>

View File

@ -0,0 +1,56 @@
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const plugins = {
'no-errors-plugin': new webpack.NoErrorsPlugin(),
};
exports.config = {
context: path.join(__dirname, '../'),
output: {
path: path.join(__dirname, '../static'),
publicPath: '/',
filename: '[name].js'
},
plugins: [
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: true
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: {}
}
})
],
module: {
loaders: [{
test: /js?$/,
exclude: /node_modules/,
include: [
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('')
})
}]
}
};
exports.plugins = plugins;

View File

@ -0,0 +1,29 @@
const base = require('./base.js');
const webpack = require('webpack');
const path = require('path');
const devServer = {
contentBase: [
path.join(__dirname, '../static/')
],
hot: true,
compress: true,
lazy: false,
historyApiFallback: {
index: './index.html'
}
};
module.exports = Object.assign(base.config, {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
plugins: base.config.plugins.concat([
new webpack.HotModuleReplacementPlugin()
]),
devtool: 'source-map',
devServer
});

File diff suppressed because it is too large Load Diff