Commit 8fc29f48 authored by Florent Chehab's avatar Florent Chehab

Began work on search

parent bf38d5f3
Pipeline #26881 passed with stages
in 2 minutes and 31 seconds
......@@ -33,6 +33,7 @@ import {
import PageMap from './pages/PageMap';
import PageHome from './pages/PageHome';
import PageSearch from './pages/PageSearch';
const drawerWidth = 240;
......@@ -114,7 +115,7 @@ class App extends MyComponent {
};
myRender() {
const { classes } = this.props;
return (
......@@ -158,7 +159,7 @@ class App extends MyComponent {
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/search" component={PageSearch} />
</main>
</div>
......
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Search from '../search/Search';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
myPaper: {
padding: 16
}
});
class PageMap extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.myPaper}>
<Grid container spacing={24}>
<Grid item xs={11}>
<Typography variant="display1" gutterBottom>
Recherche
</Typography>
</Grid>
{/* <Grid item xs={1}>
<UnivMapReloadButton />
</Grid> */}
</Grid>
<Search />
</Paper>
);
}
}
PageMap.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PageMap);
import React from 'react';
import PropTypes from 'prop-types';
import deburr from 'lodash/deburr';
import keycode from 'keycode';
import Downshift from 'downshift';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip';
import _ from 'underscore'
const suggestions = [
{ label: 'Afghanistan', id: 1 },
{ label: 'Aland Islands', id: 2 },
{ label: 'Albania', id: 3 },
{ label: 'Algeria', id: 4 },
];
function renderInput(inputProps) {
const { InputProps, classes, ref, ...other } = inputProps;
return (
<TextField
InputProps={{
inputRef: ref,
classes: {
root: classes.inputRoot,
},
...InputProps,
}}
{...other}
/>
);
}
function renderSuggestion({ suggestion, index, itemProps, highlightedIndex, selectedItem }) {
const isHighlighted = highlightedIndex === index;
const isSelected = (selectedItem || '').indexOf(suggestion) > -1;
return (
<MenuItem
{...itemProps}
key={suggestion.label}
selected={isHighlighted}
component="div"
style={{
fontWeight: isSelected ? 500 : 400,
}}
>
{suggestion.label}
</MenuItem>
);
}
renderSuggestion.propTypes = {
highlightedIndex: PropTypes.number,
index: PropTypes.number,
itemProps: PropTypes.object,
selectedItem: PropTypes.string,
suggestion: PropTypes.shape({ label: PropTypes.string, id: PropTypes.number }).isRequired,
};
class DownshiftMultiple extends React.Component {
state = {
inputValue: '',
selectedItem: [],
};
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.state.selectedItem != prevState.selectedItem) {
this.props.onChange(this.state.selectedItem);
}
}
getSuggestions(value) {
const inputValue = deburr(value.trim()).toLowerCase();
const inputLength = inputValue.length;
let count = 0;
if (inputLength === 0) {
return []
} else {
let out = _.difference(suggestions, this.state.selectedItem).filter(suggestion => {
const keep =
count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
if (keep) {
count += 1;
}
return keep;
});
return out;
}
}
handleKeyDown = event => {
const { inputValue, selectedItem } = this.state;
if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') {
this.setState({
selectedItem: selectedItem.slice(0, selectedItem.length - 1),
});
}
};
handleInputChange = event => {
this.setState({ inputValue: event.target.value });
};
handleChange = item => {
let { selectedItem } = this.state;
if (selectedItem.indexOf(item) === -1) {
for (let ind in suggestions) {
let el = suggestions[ind]
if (el.id == item) {
selectedItem = [...selectedItem, el];
break;
}
}
}
this.setState({
inputValue: '',
selectedItem,
});
};
handleDelete = item => () => {
this.setState(state => {
const selectedItem = [...state.selectedItem];
selectedItem.splice(selectedItem.indexOf(item), 1);
return { selectedItem };
});
};
render() {
const { classes } = this.props;
const { inputValue, selectedItem } = this.state;
return (
<Downshift
id="downshift-multiple"
inputValue={inputValue}
onChange={this.handleChange}
selectedItem={selectedItem}
>
{({
getInputProps,
getItemProps,
isOpen,
inputValue: inputValue2,
selectedItem: selectedItem2,
highlightedIndex,
}) => (
<div className={classes.container}>
{renderInput({
fullWidth: true,
classes,
InputProps: getInputProps({
startAdornment: selectedItem.map(item => (
<Chip
key={item.id}
tabIndex={-1}
label={item.label}
className={classes.chip}
onDelete={this.handleDelete(item.id)}
/>
)),
onChange: this.handleInputChange,
onKeyDown: this.handleKeyDown,
placeholder: 'Select multiple countries',
}),
label: 'Label',
})}
{isOpen ? (
<Paper className={classes.paper} square>
{this.getSuggestions(inputValue2).map((suggestion, index) =>
renderSuggestion({
suggestion,
index,
itemProps: getItemProps({ item: suggestion.id }),
highlightedIndex,
selectedItem: selectedItem2,
}),
)}
</Paper>
) : null}
</div>
)}
</Downshift>
);
}
}
DownshiftMultiple.propTypes = {
classes: PropTypes.object.isRequired,
};
const styles = theme => ({
root: {
flexGrow: 1,
height: 250,
},
container: {
flexGrow: 1,
position: 'relative',
},
paper: {
position: 'absolute',
zIndex: 1,
marginTop: theme.spacing.unit,
left: 0,
right: 0,
},
chip: {
margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
},
inputRoot: {
flexWrap: 'wrap',
},
divider: {
height: theme.spacing.unit * 2,
},
});
function IntegrationDownshift(props) {
const { classes } = props;
return (
<div className={classes.root}>
<div className={classes.divider} />
<DownshiftMultiple classes={classes} onChange={(selection) => console.log(selection)} />
<div className={classes.divider} />
</div>
);
}
IntegrationDownshift.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(IntegrationDownshift);
......@@ -33,12 +33,15 @@ export const mainListItems = (
</ListItem>
</NavLink>
<ListItem button>
<ListItemIcon>
<SearchIcon />
</ListItemIcon>
<ListItemText primary="Recherche" />
</ListItem>
<NavLink to={'/app/search/'}>
<ListItem button>
<ListItemIcon>
<SearchIcon />
</ListItemIcon>
<ListItemText primary="Recherche" />
</ListItem>
</NavLink>
<ListItem button>
<ListItemIcon>
......
......@@ -2004,6 +2004,11 @@
"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
"dev": true
},
"compute-scroll-into-view": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.8.tgz",
"integrity": "sha512-iAUjocygqXSGQb3zUHvAHwcf3BiMihlnphNSKCAqS6v9wNHlFe7260zNqoFjS/YBKJjbbvrXwY6/Wdg5mJ91Lw=="
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
......@@ -2471,6 +2476,15 @@
"integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
"dev": true
},
"downshift": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/downshift/-/downshift-2.2.0.tgz",
"integrity": "sha512-OaNHL6fXK2f872y2/OlaykDjV+GgYilh/LTFo8ezktkfRreyumiQ5gZgVjGxq/XrzYI8eBxRnOJApsHyW1RN5w==",
"requires": {
"compute-scroll-into-view": "^1.0.2",
"prop-types": "^15.6.0"
}
},
"duplexify": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz",
......@@ -3152,8 +3166,7 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
......@@ -3280,8 +3293,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -3293,7 +3305,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -3419,8 +3430,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -3553,7 +3563,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6538,6 +6547,11 @@
}
}
},
"underscore": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz",
"integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg=="
},
"union-value": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
......
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