Implimenting React Search
This commit is contained in:
parent
21a26497d6
commit
7502b2d8f3
15
spikes/fuzzy-search/react-select/.babelrc
Normal file
15
spikes/fuzzy-search/react-select/.babelrc
Normal 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
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
39
spikes/fuzzy-search/react-select/package.json
Normal file
39
spikes/fuzzy-search/react-select/package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
7
spikes/fuzzy-search/react-select/readme.md
Normal file
7
spikes/fuzzy-search/react-select/readme.md
Normal 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
|
17
spikes/fuzzy-search/react-select/src/index.js
vendored
Normal file
17
spikes/fuzzy-search/react-select/src/index.js
vendored
Normal 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);
|
||||||
|
}
|
21
spikes/fuzzy-search/react-select/src/root.js
vendored
Normal file
21
spikes/fuzzy-search/react-select/src/root.js
vendored
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
48
spikes/fuzzy-search/react-select/src/search-single.js
vendored
Normal file
48
spikes/fuzzy-search/react-select/src/search-single.js
vendored
Normal 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
|
14
spikes/fuzzy-search/react-select/src/search.js
vendored
Normal file
14
spikes/fuzzy-search/react-select/src/search.js
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const SearchSingle = require('./search-single');
|
||||||
|
|
||||||
|
|
||||||
|
const Search = () => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SearchSingle />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Search
|
7
spikes/fuzzy-search/react-select/static/.gitignore
vendored
Normal file
7
spikes/fuzzy-search/react-select/static/.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
*
|
||||||
|
!.gitignore
|
||||||
|
!.gitkeep
|
||||||
|
!index.html
|
||||||
|
|
||||||
|
js/*
|
||||||
|
!js/.gitkeep
|
13
spikes/fuzzy-search/react-select/static/index.html
Normal file
13
spikes/fuzzy-search/react-select/static/index.html
Normal 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>
|
56
spikes/fuzzy-search/react-select/webpack/base.js
vendored
Normal file
56
spikes/fuzzy-search/react-select/webpack/base.js
vendored
Normal 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;
|
29
spikes/fuzzy-search/react-select/webpack/index.js
vendored
Normal file
29
spikes/fuzzy-search/react-select/webpack/index.js
vendored
Normal 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
|
||||||
|
});
|
3125
spikes/fuzzy-search/react-select/yarn.lock
Normal file
3125
spikes/fuzzy-search/react-select/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user