Skip to content

Commit

Permalink
Added React Popper
Browse files Browse the repository at this point in the history
  • Loading branch information
Ansgar Schulte committed Jul 10, 2018
1 parent 812f1da commit 9e1f589
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 33 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"dom-scroll-into-view": "^1.2.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
"react-dom": "^16.2.0",
"react-popper": "^1.0.0"
},
"devDependencies": {
"@types/jest": "^21.1.10",
Expand Down
76 changes: 45 additions & 31 deletions src/Typeahead.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {PureComponent} from 'react';
import * as PropTypes from 'prop-types';
import scrollIntoView from 'dom-scroll-into-view';
import {Manager, Popper, Reference} from 'react-popper';

const DEFAULT_VALUE = undefined;
const DEFAULT_LABEL = '';
Expand Down Expand Up @@ -409,13 +410,13 @@ export default class Typeahead extends PureComponent {
renderOption = (option, absoluteIndex) => {
return (
<div ref={element => this.elementRefs[`option_${absoluteIndex}`] = element}
key={`typeahead__option__${option.value}`}
className="typeahead__option"
data-index={absoluteIndex}
data-value={option.value}
data-highlighted={absoluteIndex === this._relativeToAbsoluteIndex(this.state.highlightedIndex)}
data-group={option.group}
onMouseDown={this._createHandleMouseDown(option.value, absoluteIndex)}>
key={`typeahead__option__${option.value}`}
className="typeahead__option"
data-index={absoluteIndex}
data-value={option.value}
data-highlighted={absoluteIndex === this._relativeToAbsoluteIndex(this.state.highlightedIndex)}
data-group={option.group}
onMouseDown={this._createHandleMouseDown(option.value, absoluteIndex)}>
{option.label}
{absoluteIndex === UNKNOWN_VALUE_HIGHLIGHTED ? this.renderNewOptionMarker() : null}
</div>
Expand Down Expand Up @@ -445,13 +446,20 @@ export default class Typeahead extends PureComponent {
renderMenu() {
if (this.state.isOpen) {
return (
<div ref={element => this.elementRefs['menu'] = element} className="typeahead__options">
{this.renderNoOptionsMessage()}
{this.renderUnknownValueOption()}
{this.props.groups === undefined ? this._getFilteredOptions().map(
option => this.renderOption(option, this._getAbsoluteIndex(option))) :
this.renderGroups()}
</div>
<Popper>
{({ref, style, placement, arrowProps}) => (
<div ref={ref} style={style} data-placement={placement} className="typeahead__options">
<div ref={element => this.elementRefs['menu'] = element}>
{this.renderNoOptionsMessage()}
{this.renderUnknownValueOption()}
{this.props.groups === undefined ? this._getFilteredOptions().map(
option => this.renderOption(option, this._getAbsoluteIndex(option))) :
this.renderGroups()}
<div ref={arrowProps.ref} style={arrowProps.style}/>
</div>
</div>
)}
</Popper>
);
}
}
Expand All @@ -474,23 +482,29 @@ export default class Typeahead extends PureComponent {
const tabIndexProp = this.props.tabIndex ? {tabIndex: this.props.tabIndex} : {};
const className = this.props.className;
return (
<div className={className}>
<input
{...idProp}
{...tabIndexProp}
disabled={this.props.isDisabled}
name={this.props.fieldName}
onFocus={this._handleFocus}
onBlur={this._handleBlur}
onChange={this._handleChange}
onKeyDown={this._handleKeyDown}
onMouseDown={this._handleMouseDown}
placeholder={this.props.placeholder}
value={this._getLabel()}
/>
{this.renderClearButton()}
{this.renderMenu()}
</div>
<Manager tag={false}>
<div className={className}>
<Reference>
{({ref}) => (
<input ref={ref}
{...idProp}
{...tabIndexProp}
disabled={this.props.isDisabled}
name={this.props.fieldName}
onFocus={this._handleFocus}
onBlur={this._handleBlur}
onChange={this._handleChange}
onKeyDown={this._handleKeyDown}
onMouseDown={this._handleMouseDown}
placeholder={this.props.placeholder}
value={this._getLabel()}
/>
)}
</Reference>
{this.renderClearButton()}
{this.renderMenu()}
</div>
</Manager>
);
}
}
61 changes: 60 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -955,7 +955,7 @@ babel-register@^6.26.0:
mkdirp "^0.5.1"
source-map-support "^0.4.15"

babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
Expand Down Expand Up @@ -1315,6 +1315,13 @@ coveralls@^3.0.0:
minimist "^1.2.0"
request "^2.79.0"

create-react-context@^0.2.1:
version "0.2.2"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"

cross-spawn@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
Expand Down Expand Up @@ -1839,6 +1846,18 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8.0:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"

fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
Expand Down Expand Up @@ -2105,6 +2124,10 @@ growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"

gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"

handlebars@^4.0.3:
version "4.0.11"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
Expand Down Expand Up @@ -3604,6 +3627,10 @@ pn@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"

popper.js@^1.14.1:
version "1.14.3"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"

prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
Expand Down Expand Up @@ -3645,6 +3672,13 @@ prop-types@^15.6.0:
loose-envify "^1.3.1"
object-assign "^4.1.1"

prop-types@^15.6.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
loose-envify "^1.3.1"
object-assign "^4.1.1"

pseudomap@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
Expand Down Expand Up @@ -3711,6 +3745,17 @@ react-dom@^16.2.0:
object-assign "^4.1.1"
prop-types "^15.6.0"

react-popper@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.0.0.tgz#b99452144e8fe4acc77fa3d959a8c79e07a65084"
dependencies:
babel-runtime "6.x.x"
create-react-context "^0.2.1"
popper.js "^1.14.1"
prop-types "^15.6.1"
typed-styles "^0.0.5"
warning "^3.0.0"

react-reconciler@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
Expand Down Expand Up @@ -4425,10 +4470,18 @@ type-check@~0.3.2:
dependencies:
prelude-ls "~1.1.2"

typed-styles@^0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.5.tgz#a60df245d482a9b1adf9c06c078d0f06085ed1cf"

typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"

ua-parser-js@^0.7.18:
version "0.7.18"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"

ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
Expand Down Expand Up @@ -4506,6 +4559,12 @@ walker@~1.0.5:
dependencies:
makeerror "1.0.x"

warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"

watch@~0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
Expand Down

0 comments on commit 9e1f589

Please sign in to comment.