Commit 91e1cb21 authored by Mattias J Duffy's avatar Mattias J Duffy

structure for the searchbar without filtering and appropriate suggestions

parent 871d906d
......@@ -2,7 +2,7 @@
"env": {
"browser": true,
"commonjs": true,
"es6": false,
"es6": true,
"node": true
},
"parserOptions": {
......
......@@ -3,12 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"classnames": "^2.2.5",
"history": "^4.6.3",
"immutability-helper": "^2.3.0",
"material-ui": "next",
"material-ui-icons": "^1.0.0-alpha.19",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
......
export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SIDEBAR = 'SET_SIDEBAR';
\ No newline at end of file
export const SET_SIDEBAR = 'SET_SIDEBAR';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
\ No newline at end of file
import { TOGGLE_DRAWER,SET_SIDEBAR } from './action-types';
import { TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from './action-types';
export const toggleDrawer = () => ({
type:TOGGLE_DRAWER,
......@@ -7,4 +7,10 @@ export const toggleDrawer = () => ({
export const setSidebar = (facility) => ({
type:SET_SIDEBAR,
facility,
})
\ No newline at end of file
})
export const setSearchTerm = (term) => ({
type:SET_SEARCH_TERM,
term,
})
......@@ -20,6 +20,7 @@ const styleSheet = {
height: '100%',
display: 'flex',
flexWrap: 'wrap',
overflowY:'scroll',
}
}
......
......@@ -5,9 +5,48 @@ import {connect} from 'react-redux';
import {toggleDrawer} from '../actions/ui';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities} from '../actions/api'
import {getFacilities, setFacilities} from '../actions/api';
import Button from 'material-ui/Button';
import CardContainer from '../components/CardContainer'
import CardContainer from '../components/CardContainer';
import SearchBar from './SearchBar';
const suggestions = [
{ label: 'Afghanistan' },
{ label: 'Aland Islands' },
{ label: 'Albania' },
{ label: 'Algeria' },
{ label: 'American Samoa' },
{ label: 'Andorra' },
{ label: 'Angola' },
{ label: 'Anguilla' },
{ label: 'Antarctica' },
{ label: 'Antigua and Barbuda' },
{ label: 'Argentina' },
{ label: 'Armenia' },
{ label: 'Aruba' },
{ label: 'Australia' },
{ label: 'Austria' },
{ label: 'Azerbaijan' },
{ label: 'Bahamas' },
{ label: 'Bahrain' },
{ label: 'Bangladesh' },
{ label: 'Barbados' },
{ label: 'Belarus' },
{ label: 'Belgium' },
{ label: 'Belize' },
{ label: 'Benin' },
{ label: 'Bermuda' },
{ label: 'Bhutan' },
{ label: 'Bolivia, Plurinational State of' },
{ label: 'Bonaire, Sint Eustatius and Saba' },
{ label: 'Bosnia and Herzegovina' },
{ label: 'Botswana' },
{ label: 'Bouvet Island' },
{ label: 'Brazil' },
{ label: 'British Indian Ocean Territory' },
{ label: 'Brunei Darussalam' },
];
class Layout extends React.Component {
constructor(props){
super(props);
......@@ -31,6 +70,7 @@ class Layout extends React.Component {
{/* <Button raised onClick={getFacilities} className={classes.button}>
Default
</Button> */}
<SearchBar suggestions={suggestions}/>
<CardContainer facilities={this.props.facilities}/>
</div>
<Sidebar facility={sidebarFacility}/>
......@@ -55,7 +95,7 @@ const styleSheet = {
boxSizing:'border-box',
flex:'1 1 100%',
height:'100%',
margin:16,
padding:16,
},
}
......
import React from 'react';
import PropTypes from 'prop-types';
import Autosuggest from 'react-autosuggest';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import { MenuItem } from 'material-ui/Menu';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import { withStyles } from 'material-ui/styles';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { setSearchTerm} from '../actions/ui';
import Search from 'material-ui-icons/Search'
import Input from 'material-ui/Input';
// import Select from 'material-ui/Select';
const createSuggestions = () => {
}
function renderInput(inputProps) {
const { classes, home, value, ref, ...other } = inputProps;
return (
<TextField
autoFocus={home}
className={classes.textField}
value={value}
inputRef={ref}
InputProps={{
classes: {
input: classes.input,
},
disableUnderline:true,
...other,
}}
/>
);
}
function renderSuggestion(suggestion, { query, isHighlighted }) {
const matches = match(suggestion.label, query);
const parts = parse(suggestion.label, matches);
return (
<MenuItem selected={isHighlighted} component="div">
<div>
{parts.map((part, index) => {
return part.highlight ? (
<span key={index} style={{ fontWeight: 300 }}>
{part.text}
</span>
) : (
<strong key={index} style={{ fontWeight: 500 }}>
{part.text}
</strong>
);
})}
</div>
</MenuItem>
);
}
function renderSuggestionsContainer(options) {
const { containerProps, children } = options;
return (
<Paper {...containerProps} square>
{children}
</Paper>
);
}
function getSuggestionValue(suggestion) {
return suggestion.label;
}
function getSuggestions(value,suggestions) {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
let count = 0;
return inputLength === 0
? []
: suggestions.filter(suggestion => {
const keep =
count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue;
if (keep) {
count += 1;
}
return keep;
});
}
const styles = theme => ({
container: {
flexGrow: 1,
position: 'relative',
// height: 40,
},
suggestionsContainerOpen: {
position: 'absolute',
zIndex:1000,
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit * 3,
left: 0,
right: 0,
},
suggestion: {
display: 'block',
},
suggestionsList: {
margin: 0,
padding: 0,
listStyleType: 'none',
},
textField: {
width: '100%',
height:48,
},
input:{
height:40,
marginLeft:8,
},
paperBackground:{
height:54,
width:600,
display:'flex',
margin:'0px auto 16px auto',
},
rightSearchContainer:{
height:'100%',
display:'flex',
alignItems:'center',
marginLeft:8,
marginRight:8,
},
searchIcon:{
display:'block',
opacity:.54,
}
});
class IntegrationAutosuggest extends React.Component {
state = {
value: '',
// suggestions: [],
};
handleSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: getSuggestions(value,this.props.suggestions),
});
};
handleSuggestionsClearRequested = () => {
this.setState({
suggestions: [],
});
};
handleChange = (event, { newValue }) => {
this.setState({
value: newValue,
});
this.props.setSearchTerm(newValue)
};
render() {
const { classes,setSearchTerm,suggestions } = this.props;
return (
<Paper className={classes.paperBackground}>
<Autosuggest
theme={{
container: classes.container,
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
}}
renderInputComponent={renderInput}
suggestions={getSuggestions(this.state.value,suggestions)}
onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
renderSuggestionsContainer={renderSuggestionsContainer}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={{
autoFocus: true,
classes,
placeholder: 'names, locations, etc',
value: this.state.value,
onChange: this.handleChange,
}}
/>
<div className={classes.rightSearchContainer}>
{/* <Select
native
value={this.state.age}
onChange={this.handleChange('age')}
input={<Input id="age-native-simple" />}
>
<option value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</Select> */}
<Search className={classes.searchIcon}/>
</div>
</Paper>
);
}
}
IntegrationAutosuggest.propTypes = {
classes: PropTypes.object.isRequired,
};
export default compose(connect(null,{setSearchTerm}),withStyles(styles))(IntegrationAutosuggest);
\ No newline at end of file
......@@ -19,6 +19,11 @@ import green from 'material-ui/colors/green';
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()
const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
if(extension){
const enhance = compose(
applyMiddleware(ReduxThunk,routerMiddleware(history))
,extension)
}
const enhance = compose(
applyMiddleware(ReduxThunk,routerMiddleware(history))
,extension)
......
import {TOGGLE_DRAWER,SET_SIDEBAR } from '../actions/action-types'
import {TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from '../actions/action-types'
function isOpen(state=false,action){
switch (action.type) {
......@@ -8,9 +8,11 @@ function isOpen(state=false,action){
return state
}
}
const drawer = (state={},action) => ({
isOpen:isOpen(state.isOpen,action)
})
const sidebar = (state={},action) => {
switch(action.type){
case SET_SIDEBAR:
......@@ -19,8 +21,29 @@ const sidebar = (state={},action) => {
return {}
}
}
const searchbarState = {
term:'',
filteredList:[],
}
const filterList = (state) =>{
}
const search = (state=searchbarState,facilities=[],action) =>{
switch(action.type){
case SET_SEARCH_TERM:
return Object.assign({},state,{
term:action.term,
});
default:
return state;
}
}
const ui = (state={},action) =>({
drawer:drawer(state.drawer,action),
sidebar:sidebar(state.sidbar,action),
search: search(state.search,state.facilities,action),
})
export default ui;
......@@ -300,6 +300,12 @@ autoprefixer@^6.3.1:
postcss "^5.2.16"
postcss-value-parser "^3.2.3"
autosuggest-highlight@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/autosuggest-highlight/-/autosuggest-highlight-3.1.0.tgz#d5df5115b4840af49f2370a8fb88e5ce9b461ef9"
dependencies:
diacritic "0.0.2"
aws-sign2@~0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
......@@ -1880,6 +1886,10 @@ detect-port-alt@1.1.3:
address "^1.0.1"
debug "^2.6.0"
diacritic@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/diacritic/-/diacritic-0.0.2.tgz#fc2a887b5a5bc0a0a854fb614c7c2f209061ee04"
diff@^3.2.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75"
......@@ -4448,6 +4458,10 @@ object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
object-assign@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
object-hash@^1.1.4:
version "1.1.8"
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.8.tgz#28a659cf987d96a4dabe7860289f3b5326c4a03c"
......@@ -5172,6 +5186,22 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-autosuggest@^9.3.2:
version "9.3.2"
resolved "https://registry.yarnpkg.com/react-autosuggest/-/react-autosuggest-9.3.2.tgz#dd8c0fbe9c25aa94afe296180353647f6ecc10a7"
dependencies:
prop-types "^15.5.10"
react-autowhatever "^10.1.0"
shallow-equal "^1.0.0"
react-autowhatever@^10.1.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/react-autowhatever/-/react-autowhatever-10.1.0.tgz#41f6d69382437d3447a0a3c8913bb8ca2feaabc1"
dependencies:
prop-types "^15.5.8"
react-themeable "^1.1.0"
section-iterator "^2.0.0"
react-dev-utils@^3.0.2, react-dev-utils@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.1.1.tgz#09ae7209a81384248db56547e718e65bd3b20eb5"
......@@ -5337,6 +5367,12 @@ react-scrollbar-size@^2.0.0:
prop-types "^15.5.10"
react-event-listener "^0.4.5"
react-themeable@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"
dependencies:
object-assign "^3.0.0"
react-transition-group@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.0.tgz#793bf8cb15bfe91b3101b24bce1c1d2891659575"
......@@ -5736,6 +5772,10 @@ scroll@^2.0.0:
dependencies:
rafl "~1.2.1"
section-iterator@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
......@@ -5825,6 +5865,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
dependencies:
inherits "^2.0.1"
shallow-equal@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.0.0.tgz#508d1838b3de590ab8757b011b25e430900945f7"
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
......@@ -5931,11 +5975,11 @@ source-map-support@^0.4.15:
dependencies:
source-map "^0.5.6"
source-map@0.5.6, source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.3:
source-map@0.5.6, source-map@^0.5.0, source-map@^0.5.3:
version "0.5.6"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.7, source-map@~0.5.1:
source-map@0.5.x, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment