From f1e2badcfce140e329272b9c4448c9ca6b1c50fc Mon Sep 17 00:00:00 2001 From: hontas Date: Fri, 29 Apr 2016 01:24:44 +0200 Subject: [PATCH 1/2] new build --- build/lib/Autocomplete.js | 82 ++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 28 deletions(-) diff --git a/build/lib/Autocomplete.js b/build/lib/Autocomplete.js index 819a5524..a0f7bd33 100644 --- a/build/lib/Autocomplete.js +++ b/build/lib/Autocomplete.js @@ -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() {}, @@ -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; } }, @@ -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 @@ -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 @@ -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); }); } }, @@ -168,19 +194,19 @@ 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); }); } @@ -188,7 +214,7 @@ var Autocomplete = React.createClass({ }, maybeAutoCompleteText: function maybeAutoCompleteText() { - var _this3 = this; + var _this4 = this; if (this.props.value === '') return; var highlightedIndex = this.state.highlightedIndex; @@ -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(); } @@ -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); }); }, @@ -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 }); @@ -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 @@ -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' }, @@ -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, From 6c507de3d3c4acea0f852bfbfd1ffb1717e69a38 Mon Sep 17 00:00:00 2001 From: hontas Date: Fri, 29 Apr 2016 01:24:44 +0200 Subject: [PATCH 2/2] new build in order for wrapperStyles and wrapperProps to work as expected --- build/lib/Autocomplete.js | 82 ++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 28 deletions(-) diff --git a/build/lib/Autocomplete.js b/build/lib/Autocomplete.js index 819a5524..a0f7bd33 100644 --- a/build/lib/Autocomplete.js +++ b/build/lib/Autocomplete.js @@ -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() {}, @@ -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; } }, @@ -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 @@ -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 @@ -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); }); } }, @@ -168,19 +194,19 @@ 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); }); } @@ -188,7 +214,7 @@ var Autocomplete = React.createClass({ }, maybeAutoCompleteText: function maybeAutoCompleteText() { - var _this3 = this; + var _this4 = this; if (this.props.value === '') return; var highlightedIndex = this.state.highlightedIndex; @@ -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(); } @@ -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); }); }, @@ -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 }); @@ -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 @@ -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' }, @@ -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,