From 7502b2d8f3fa8e03e42223cfcba4c3b233aebfd6 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Thu, 5 Jan 2017 16:26:17 +0000 Subject: [PATCH] Implimenting React Search --- spikes/fuzzy-search/react-select/.babelrc | 15 + spikes/fuzzy-search/react-select/package.json | 39 + spikes/fuzzy-search/react-select/readme.md | 7 + spikes/fuzzy-search/react-select/src/index.js | 17 + spikes/fuzzy-search/react-select/src/root.js | 21 + .../react-select/src/search-single.js | 48 + .../fuzzy-search/react-select/src/search.js | 14 + .../react-select/static/.gitignore | 7 + .../react-select/static/index.html | 13 + .../fuzzy-search/react-select/webpack/base.js | 56 + .../react-select/webpack/index.js | 29 + spikes/fuzzy-search/react-select/yarn.lock | 3125 +++++++++++++++++ 12 files changed, 3391 insertions(+) create mode 100644 spikes/fuzzy-search/react-select/.babelrc create mode 100644 spikes/fuzzy-search/react-select/package.json create mode 100644 spikes/fuzzy-search/react-select/readme.md create mode 100644 spikes/fuzzy-search/react-select/src/index.js create mode 100644 spikes/fuzzy-search/react-select/src/root.js create mode 100644 spikes/fuzzy-search/react-select/src/search-single.js create mode 100644 spikes/fuzzy-search/react-select/src/search.js create mode 100644 spikes/fuzzy-search/react-select/static/.gitignore create mode 100644 spikes/fuzzy-search/react-select/static/index.html create mode 100644 spikes/fuzzy-search/react-select/webpack/base.js create mode 100644 spikes/fuzzy-search/react-select/webpack/index.js create mode 100644 spikes/fuzzy-search/react-select/yarn.lock diff --git a/spikes/fuzzy-search/react-select/.babelrc b/spikes/fuzzy-search/react-select/.babelrc new file mode 100644 index 00000000..88341a1d --- /dev/null +++ b/spikes/fuzzy-search/react-select/.babelrc @@ -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 + }] + ] +} diff --git a/spikes/fuzzy-search/react-select/package.json b/spikes/fuzzy-search/react-select/package.json new file mode 100644 index 00000000..88c4c845 --- /dev/null +++ b/spikes/fuzzy-search/react-select/package.json @@ -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" + } +} diff --git a/spikes/fuzzy-search/react-select/readme.md b/spikes/fuzzy-search/react-select/readme.md new file mode 100644 index 00000000..f19e1c62 --- /dev/null +++ b/spikes/fuzzy-search/react-select/readme.md @@ -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 \ No newline at end of file diff --git a/spikes/fuzzy-search/react-select/src/index.js b/spikes/fuzzy-search/react-select/src/index.js new file mode 100644 index 00000000..af547af9 --- /dev/null +++ b/spikes/fuzzy-search/react-select/src/index.js @@ -0,0 +1,17 @@ +const ReactDOM = require('react-dom'); +const React = require('react'); + +const render = () => { + const Root = require('./root'); + + ReactDOM.render( + , + document.getElementById('root') + ); +}; + +render(); + +if (module.hot) { + module.hot.accept('./root', render); +} diff --git a/spikes/fuzzy-search/react-select/src/root.js b/spikes/fuzzy-search/react-select/src/root.js new file mode 100644 index 00000000..db47983b --- /dev/null +++ b/spikes/fuzzy-search/react-select/src/root.js @@ -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 ( + + + + ); +}; diff --git a/spikes/fuzzy-search/react-select/src/search-single.js b/spikes/fuzzy-search/react-select/src/search-single.js new file mode 100644 index 00000000..874e38d6 --- /dev/null +++ b/spikes/fuzzy-search/react-select/src/search-single.js @@ -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 ( +
+

Single Search

+