Skip to content

Commit

Permalink
Fixed #210
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Dec 4, 2017
1 parent 336ed9f commit 5af65bd
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 44 deletions.
59 changes: 15 additions & 44 deletions src/components/autocomplete/AutoComplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { InputText } from '../inputtext/InputText';
import { Button } from '../button/Button';
import DomHandler from '../utils/DomHandler';
import ObjectUtils from '../utils/ObjectUtils';
import {AutoCompletePanel} from './AutoCompletePanel';
import classNames from 'classnames';

export class AutoComplete extends Component {
Expand Down Expand Up @@ -101,6 +102,7 @@ export class AutoComplete extends Component {
this.onMultiContainerClick = this.onMultiContainerClick.bind(this);
this.onMultiInputFocus = this.onMultiInputFocus.bind(this);
this.onMultiInputBlur = this.onMultiInputBlur.bind(this);
this.selectItem = this.selectItem.bind(this);
}

shouldComponentUpdate() {
Expand Down Expand Up @@ -205,10 +207,10 @@ export class AutoComplete extends Component {
if(this.focus) {
this.alignPanel();

if(!this.panel.offsetParent) {
this.panel.style.zIndex = DomHandler.getZindex();
this.panel.style.display = "block";
DomHandler.fadeIn(this.panel, 200);
if (this.panel && this.panel.element && !this.panel.element.offsetParent) {
this.panel.element.style.zIndex = DomHandler.getZindex();
this.panel.element.style.display = "block";
DomHandler.fadeIn(this.panel.element, 200);
this.bindDocumentClickListener();
}
}
Expand All @@ -218,13 +220,13 @@ export class AutoComplete extends Component {
let target = this.props.multiple ? this.multiContainer : this.inputEl;

if(this.props.appendTo)
DomHandler.absolutePosition(this.panel, target);
DomHandler.absolutePosition(this.panel.element, target);
else
DomHandler.relativePosition(this.panel, target);
DomHandler.relativePosition(this.panel.element, target);
}

hidePanel() {
this.panel.style.display = 'none';
this.panel.element.style.display = 'none';
this.unbindDocumentClickListener();
}

Expand Down Expand Up @@ -263,7 +265,7 @@ export class AutoComplete extends Component {

onInputKeyDown(event) {
if(this.isPanelVisible()) {
let highlightItem = DomHandler.findSingle(this.panel, 'li.ui-state-highlight');
let highlightItem = DomHandler.findSingle(this.panel.element, 'li.ui-state-highlight');

switch(event.which) {
//down
Expand All @@ -273,11 +275,11 @@ export class AutoComplete extends Component {
if(nextElement) {
DomHandler.addClass(nextElement, 'ui-state-highlight');
DomHandler.removeClass(highlightItem, 'ui-state-highlight');
DomHandler.scrollInView(this.panel, nextElement);
DomHandler.scrollInView(this.panel.element, nextElement);
}
}
else {
DomHandler.addClass(this.panel.firstChild.firstChild, 'ui-state-highlight');
DomHandler.addClass(this.panel.element.firstChild.firstChild, 'ui-state-highlight');
}

event.preventDefault();
Expand Down Expand Up @@ -417,15 +419,6 @@ export class AutoComplete extends Component {
return index;
}

componentDidMount() {
if(this.props.appendTo) {
if(this.props.appendTo === 'body')
document.body.appendChild(this.panel);
else
DomHandler.appendChild(this.panel, this.props.appendTo);
}
}

componentDidUpdate() {
if(this.searching) {
if (this.props.suggestions && this.props.suggestions.length)
Expand Down Expand Up @@ -525,28 +518,6 @@ export class AutoComplete extends Component {
);
}

renderPanel() {
let items;

if(this.props.suggestions) {
items = this.props.suggestions.map((suggestion, index) => {
let itemContent = this.props.itemTemplate ? this.props.itemTemplate(suggestion) : this.props.field ? ObjectUtils.resolveFieldData(suggestion, this.props.field): suggestion;

return (
<li key={index + '_item'} className="ui-autocomplete-list-item ui-corner-all" onClick={(e) => this.selectItem(e, suggestion)}>{itemContent}</li>
);
});
}

return (
<div ref={(el) => this.panel = el} className="ui-autocomplete-panel ui-widget-content ui-corner-all ui-shadow" style={{maxHeight: this.props.scrollHeight}}>
<ul className="ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
{items}
</ul>
</div>
);
}

bindDocumentClickListener() {
if(!this.documentClickListener) {
this.documentClickListener = (event) => {
Expand Down Expand Up @@ -574,12 +545,11 @@ export class AutoComplete extends Component {
}

isPanelVisible() {
return this.panel.offsetParent != null;
return this.panel.element.offsetParent != null;
}

render() {
let input, dropdown;
let panel = this.renderPanel();
let className = classNames('ui-autocomplete ui-widget', this.props.className, {
'ui-autocomplete-dd': this.props.dropdown,
'ui-autocomplete-multiple': this.props.multiple
Expand All @@ -600,7 +570,8 @@ export class AutoComplete extends Component {
{input}
{loader}
{dropdown}
{panel}
<AutoCompletePanel ref={(el) => this.panel = el} suggestions={this.props.suggestions} field={this.props.field}
appendTo={this.props.appendTo} itemTemplate={this.props.itemTemplate} onItemClick={this.selectItem}/>
</span>
);
}
Expand Down
58 changes: 58 additions & 0 deletions src/components/autocomplete/AutoCompletePanel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import ObjectUtils from '../utils/ObjectUtils';

export class AutoCompletePanel extends Component {

static defaultProps = {
suggestions: null,
field: null,
appendTo: null,
itemTemplate: null,
onItemClick: null,
scrollHeight: '200px'
}

static propTypes = {
suggestions: PropTypes.array,
field: PropTypes.string,
appendTo: PropTypes.any,
itemTemplate: PropTypes.func,
onItemClick: PropTypes.func,
scrollHeight: PropTypes.string
};

renderElement() {
let items;

if (this.props.suggestions) {
items = this.props.suggestions.map((suggestion, index) => {
let itemContent = this.props.itemTemplate ? this.props.itemTemplate(suggestion) : this.props.field ? ObjectUtils.resolveFieldData(suggestion, this.props.field) : suggestion;

return (
<li key={index + '_item'} className="ui-autocomplete-list-item ui-corner-all" onClick={(e) => this.props.onItemClick(e, suggestion)}>{itemContent}</li>
);
});
}

return (
<div ref={(el) => this.element = el} className="ui-autocomplete-panel ui-widget-content ui-corner-all ui-shadow" style={{ maxHeight: this.props.scrollHeight }}>
<ul className="ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
{items}
</ul>
</div>
);
}

render() {
let element = this.renderElement();

if (this.props.appendTo) {
return ReactDOM.createPortal(element, this.props.appendTo);
}
else {
return element;
}
}
}

0 comments on commit 5af65bd

Please sign in to comment.