Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

new build in order for wrapperStyles and wrapperProps to work as expected #97

Closed
wants to merge 3 commits into from
Closed

new build in order for wrapperStyles and wrapperProps to work as expected #97

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1e2bad
new build
hontas Apr 28, 2016
6c507de
new build in order for wrapperStyles and wrapperProps to work as expe…
hontas Apr 28, 2016
8df4db1
Merge branch 'master' of https://github.com/hontas/react-autocomplete
hontas Apr 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 54 additions & 28 deletions build/lib/Autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,18 @@ var Autocomplete = React.createClass({
renderItem: React.PropTypes.func.isRequired,
menuStyle: React.PropTypes.object,
inputProps: React.PropTypes.object,
labelText: React.PropTypes.string
labelText: React.PropTypes.string,
wrapperProps: React.PropTypes.object,
wrapperStyle: React.PropTypes.object
},

getDefaultProps: function getDefaultProps() {
return {
value: '',
wrapperProps: {},
wrapperStyle: {
display: 'inline-block'
},
inputProps: {},
labelText: '',
onChange: function onChange() {},
Expand Down Expand Up @@ -86,11 +92,31 @@ var Autocomplete = React.createClass({
},

handleKeyDown: function handleKeyDown(event) {
var _this = this;

if (this.keyDownHandlers[event.key]) this.keyDownHandlers[event.key].call(this, event);else {
this.setState({
highlightedIndex: null,
isOpen: true
});
var _ret = (function () {
var _event$target = event.target;
var selectionStart = _event$target.selectionStart;
var value = _event$target.value;

if (value === _this.state.value)
// Nothing changed, no need to do anything. This also prevents
// our workaround below from nuking user-made selections
return {
v: undefined
};
_this.setState({
highlightedIndex: null,
isOpen: true
}, function () {
// Restore caret position before autocompletion process
// to work around a setSelectionRange bug in IE (#80)
_this.refs.input.selectionStart = selectionStart;
});
})();

if (typeof _ret === 'object') return _ret.v;
}
},

Expand Down Expand Up @@ -132,7 +158,7 @@ var Autocomplete = React.createClass({
},

Enter: function Enter(event) {
var _this = this;
var _this2 = this;

if (this.state.isOpen === false) {
// menu is closed so there is no selection to accept -> do nothing
Expand All @@ -142,7 +168,7 @@ var Autocomplete = React.createClass({
this.setState({
isOpen: false
}, function () {
_this.refs.input.select();
_this2.refs.input.select();
});
} else {
// text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
Expand All @@ -153,8 +179,8 @@ var Autocomplete = React.createClass({
highlightedIndex: null
}, function () {
//this.refs.input.focus() // TODO: file issue
_this.refs.input.setSelectionRange(value.length, value.length);
_this.props.onSelect(value, item);
_this2.refs.input.setSelectionRange(value.length, value.length);
_this2.props.onSelect(value, item);
});
}
},
Expand All @@ -168,27 +194,27 @@ var Autocomplete = React.createClass({
},

getFilteredItems: function getFilteredItems() {
var _this2 = this;
var _this3 = this;

var items = this.props.items;

if (this.props.shouldItemRender) {
items = items.filter(function (item) {
return _this2.props.shouldItemRender(item, _this2.props.value);
return _this3.props.shouldItemRender(item, _this3.props.value);
});
}

if (this.props.sortItems) {
items.sort(function (a, b) {
return _this2.props.sortItems(a, b, _this2.props.value);
return _this3.props.sortItems(a, b, _this3.props.value);
});
}

return items;
},

maybeAutoCompleteText: function maybeAutoCompleteText() {
var _this3 = this;
var _this4 = this;

if (this.props.value === '') return;
var highlightedIndex = this.state.highlightedIndex;
Expand All @@ -202,7 +228,7 @@ var Autocomplete = React.createClass({
var node = this.refs.input;
var setSelection = function setSelection() {
node.value = itemValue;
node.setSelectionRange(_this3.props.value.length, itemValue.length);
node.setSelectionRange(_this4.props.value.length, itemValue.length);
};
if (highlightedIndex === null) this.setState({ highlightedIndex: 0 }, setSelection);else setSelection();
}
Expand All @@ -227,16 +253,16 @@ var Autocomplete = React.createClass({
},

selectItemFromMouse: function selectItemFromMouse(item) {
var _this4 = this;
var _this5 = this;

var value = this.props.getItemValue(item);
this.setState({
isOpen: false,
highlightedIndex: null
}, function () {
_this4.props.onSelect(value, item);
_this4.refs.input.focus();
_this4.setIgnoreBlur(false);
_this5.props.onSelect(value, item);
_this5.refs.input.focus();
_this5.setIgnoreBlur(false);
});
},

Expand All @@ -245,19 +271,19 @@ var Autocomplete = React.createClass({
},

renderMenu: function renderMenu() {
var _this5 = this;
var _this6 = this;

var items = this.getFilteredItems().map(function (item, index) {
var element = _this5.props.renderItem(item, _this5.state.highlightedIndex === index, { cursor: 'default' });
var element = _this6.props.renderItem(item, _this6.state.highlightedIndex === index, { cursor: 'default' });
return React.cloneElement(element, {
onMouseDown: function onMouseDown() {
return _this5.setIgnoreBlur(true);
return _this6.setIgnoreBlur(true);
},
onMouseEnter: function onMouseEnter() {
return _this5.highlightItemFromMouse(index);
return _this6.highlightItemFromMouse(index);
},
onClick: function onClick() {
return _this5.selectItemFromMouse(item);
return _this6.selectItemFromMouse(item);
},
ref: 'item-' + index
});
Expand Down Expand Up @@ -289,7 +315,7 @@ var Autocomplete = React.createClass({
},

render: function render() {
var _this6 = this;
var _this7 = this;

if (this.props.debug) {
// you don't like it, you love it
Expand All @@ -300,7 +326,7 @@ var Autocomplete = React.createClass({
}
return React.createElement(
'div',
{ style: { display: 'inline-block' } },
_extends({ style: _extends({}, this.props.wrapperStyle) }, this.props.wrapperProps),
React.createElement(
'label',
{ htmlFor: this.id, ref: 'label' },
Expand All @@ -313,13 +339,13 @@ var Autocomplete = React.createClass({
onFocus: this.handleInputFocus,
onBlur: this.handleInputBlur,
onChange: function (event) {
return _this6.handleChange(event);
return _this7.handleChange(event);
},
onKeyDown: function (event) {
return _this6.handleKeyDown(event);
return _this7.handleKeyDown(event);
},
onKeyUp: function (event) {
return _this6.handleKeyUp(event);
return _this7.handleKeyUp(event);
},
onClick: this.handleInputClick,
value: this.props.value,
Expand Down