Skip to content

Commit 0e4c63b

Browse files
klequisklequis
committed
initial
0 parents commit 0e4c63b

16 files changed

+10523
-0
lines changed

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎README.md‎

Lines changed: 2486 additions & 0 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "downshift",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@material-ui/core": "^3.0.2",
7+
"downshift": "^2.2.2",
8+
"keycode": "^2.2.0",
9+
"lodash": "^4.17.10",
10+
"prop-types": "^15.6.2",
11+
"react": "^16.5.0",
12+
"react-dom": "^16.5.0",
13+
"react-scripts": "1.1.5"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test --env=jsdom",
19+
"eject": "react-scripts eject"
20+
}
21+
}

‎public/favicon.ico‎

3.78 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
<!--
30+
This HTML file is a template.
31+
If you open it directly in the browser, you will see an empty page.
32+
33+
You can add webfonts, meta tags, or analytics to this file.
34+
The build step will place the bundled scripts into the <body> tag.
35+
36+
To begin the development, run `npm start` or `yarn start`.
37+
To create a production bundle, use `npm run build` or `yarn build`.
38+
-->
39+
</body>
40+
</html>

‎public/manifest.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎src/App.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import DownshiftPopper from './DownshiftPopper'
3+
import DownshiftSimple from './DownshiftSimple'
4+
import DownshiftMultiple from './DownshiftMultiple'
5+
6+
const App = () => {
7+
return (
8+
<div>
9+
<DownshiftPopper />
10+
<DownshiftMultiple />
11+
<DownshiftSimple />
12+
<p>some text to show</p>
13+
</div>
14+
)
15+
}
16+
17+
18+
19+
20+
21+
22+
23+
// function IntegrationDownshift(props) {
24+
// const { classes } = props
25+
26+
// return (
27+
// <div className={classes.root}>
28+
29+
// <div className={classes.divider} />
30+
// <DownshiftMultiple classes={classes} />
31+
// <div className={classes.divider} />
32+
33+
// </div>
34+
// )
35+
// }
36+
37+
// IntegrationDownshift.propTypes = {
38+
// classes: PropTypes.object.isRequired,
39+
// }
40+
41+
export default App

‎src/DownshiftMultiple.jsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import keycode from 'keycode'
4+
import Downshift from 'downshift'
5+
import Paper from '@material-ui/core/Paper'
6+
import Chip from '@material-ui/core/Chip'
7+
import { renderInput, renderSuggestion, getSuggestions } from './helpers'
8+
import { styles } from './styles'
9+
import { withStyles } from '@material-ui/core';
10+
11+
class DownshiftMultiple extends React.Component {
12+
state = {
13+
inputValue: '',
14+
selectedItem: [],
15+
}
16+
17+
handleKeyDown = event => {
18+
const { inputValue, selectedItem } = this.state
19+
if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') {
20+
this.setState({
21+
selectedItem: selectedItem.slice(0, selectedItem.length - 1),
22+
})
23+
}
24+
}
25+
26+
handleInputChange = event => {
27+
this.setState({ inputValue: event.target.value })
28+
}
29+
30+
handleChange = item => {
31+
let { selectedItem } = this.state
32+
33+
if (selectedItem.indexOf(item) === -1) {
34+
selectedItem = [...selectedItem, item]
35+
}
36+
37+
this.setState({
38+
inputValue: '',
39+
selectedItem,
40+
})
41+
}
42+
43+
handleDelete = item => () => {
44+
this.setState(state => {
45+
const selectedItem = [...state.selectedItem]
46+
selectedItem.splice(selectedItem.indexOf(item), 1)
47+
return { selectedItem }
48+
})
49+
}
50+
51+
render() {
52+
const { classes } = this.props
53+
const { inputValue, selectedItem } = this.state
54+
55+
return (
56+
<div className={classes.root}>
57+
<Downshift
58+
id="downshift-multiple"
59+
inputValue={inputValue}
60+
onChange={this.handleChange}
61+
selectedItem={selectedItem}
62+
>
63+
{({
64+
getInputProps,
65+
getItemProps,
66+
isOpen,
67+
inputValue: inputValue2,
68+
selectedItem: selectedItem2,
69+
highlightedIndex,
70+
}) => (
71+
<div className={classes.container}>
72+
{renderInput({
73+
fullWidth: true,
74+
classes,
75+
InputProps: getInputProps({
76+
startAdornment: selectedItem.map(item => (
77+
<Chip
78+
key={item}
79+
tabIndex={-1}
80+
label={item}
81+
className={classes.chip}
82+
onDelete={this.handleDelete(item)}
83+
/>
84+
)),
85+
onChange: this.handleInputChange,
86+
onKeyDown: this.handleKeyDown,
87+
placeholder: 'Select multiple countries',
88+
}),
89+
label: 'Label',
90+
})}
91+
{isOpen ? (
92+
<Paper className={classes.paper} square>
93+
{getSuggestions(inputValue2).map((suggestion, index) =>
94+
renderSuggestion({
95+
suggestion,
96+
index,
97+
itemProps: getItemProps({ item: suggestion.label }),
98+
highlightedIndex,
99+
selectedItem: selectedItem2,
100+
}),
101+
)}
102+
</Paper>
103+
) : null}
104+
</div>
105+
)}
106+
</Downshift>
107+
</div>
108+
)
109+
}
110+
}
111+
112+
DownshiftMultiple.propTypes = {
113+
classes: PropTypes.object.isRequired,
114+
}
115+
116+
export default withStyles(styles)(DownshiftMultiple)

‎src/DownshiftPopper.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react'
2+
import Downshift from 'downshift'
3+
import { withStyles } from '@material-ui/core/styles'
4+
import Popper from '@material-ui/core/Popper'
5+
import Paper from '@material-ui/core/Paper'
6+
import { renderInput, renderSuggestion, getSuggestions } from './helpers'
7+
import { styles } from './styles'
8+
9+
let popperNode
10+
11+
const DownshiftPopper = ({ classes }) => {
12+
return (
13+
<div className={classes.root}>
14+
<Downshift id="downshift-popper">
15+
{({
16+
getInputProps,
17+
getItemProps,
18+
getMenuProps,
19+
highlightedIndex,
20+
inputValue,
21+
isOpen,
22+
selectedItem,
23+
}) => (
24+
<div className={classes.container}>
25+
{renderInput({
26+
fullWidth: true,
27+
classes,
28+
InputProps: getInputProps({
29+
placeholder: 'With Popper',
30+
}),
31+
ref: node => {
32+
popperNode = node
33+
},
34+
})}
35+
<div {...getMenuProps()}>
36+
<Popper disablePortal open={isOpen} anchorEl={popperNode}>
37+
<Paper square style={{ width: popperNode ? popperNode.clientWidth : null }}>
38+
{getSuggestions(inputValue).map((suggestion, index) =>
39+
renderSuggestion({
40+
suggestion,
41+
index,
42+
itemProps: getItemProps({ item: suggestion.label }),
43+
highlightedIndex,
44+
selectedItem,
45+
}),
46+
)}
47+
</Paper>
48+
</Popper>
49+
</div>
50+
</div>
51+
)}
52+
</Downshift>
53+
</div>
54+
)
55+
}
56+
57+
export default withStyles(styles)(DownshiftPopper)

‎src/DownshiftSimple.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import Downshift from 'downshift';
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Paper from '@material-ui/core/Paper';
5+
import { renderInput, renderSuggestion, getSuggestions } from './helpers'
6+
import { styles } from './styles'
7+
8+
const DownshiftSimple = ({ classes }) => {
9+
return (
10+
<div className={classes.root}>
11+
<Downshift id="downshift-simple">
12+
{({
13+
getInputProps,
14+
getItemProps,
15+
getMenuProps,
16+
highlightedIndex,
17+
inputValue,
18+
isOpen,
19+
selectedItem,
20+
}) => (
21+
<div className={classes.container}>
22+
{renderInput({
23+
fullWidth: true,
24+
classes,
25+
InputProps: getInputProps({
26+
placeholder: 'Search a country (start with a)',
27+
}),
28+
})}
29+
<div {...getMenuProps()}>
30+
{isOpen ? (
31+
<Paper className={classes.paper} square>
32+
{getSuggestions(inputValue).map((suggestion, index) =>
33+
renderSuggestion({
34+
suggestion,
35+
index,
36+
itemProps: getItemProps({ item: suggestion.label }),
37+
highlightedIndex,
38+
selectedItem,
39+
}),
40+
)}
41+
</Paper>
42+
) : null}
43+
</div>
44+
</div>
45+
)}
46+
</Downshift>
47+
</div>
48+
)
49+
}
50+
51+
export default withStyles(styles)(DownshiftSimple)

0 commit comments

Comments
 (0)