Skip to content

Commit

Permalink
Merge pull request #50 from Merve7/#42
Browse files Browse the repository at this point in the history 
Fixed #42
  • Loading branch information
@Merve7
Merve7 authored Jul 13, 2017
2 parents f279f92 + ae60beb commit ee5d371
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 1 deletion.
31 changes: 30 additions & 1 deletion src/components/dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export class Dropdown extends Component {
filter:false,
filterBy:null,
filterPlaceholder:null,
editable:false,
placeholder:null
};

Expand All @@ -33,6 +34,7 @@ export class Dropdown extends Component {
filter:PropTypes.bool,
filterBy: PropTypes.string,
filterPlaceholder: PropTypes.string,
editable:PropTypes.bool,
placeholder: PropTypes.string
};

Expand All @@ -44,6 +46,8 @@ export class Dropdown extends Component {
this.onInputBlur=this.onInputBlur.bind(this);
this.onInputFocus=this.onInputFocus.bind(this);
this.onKeydown=this.onKeydown.bind(this);
this.onEditableInputClick=this.onEditableInputClick.bind(this);
this.onEditableInputFocus=this.onEditableInputFocus.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -286,6 +290,23 @@ export class Dropdown extends Component {
this.documentClickListener = null;
}
}
onEditableInputFocus(event) {
this.setState({focus:true});
this.hide();
}

onEditableInputClick(event) {
this.optionClick = false;
event.stopPropagation();
}

onEditable(event){
this.editValue=event.target.value;
this.props.onChange({
originalEvent: event,
value: this.editValue
});
}

render() {
var styleClass = classNames('ui-dropdown ui-widget ui-state-default ui-corner-all', this.props.className, {
Expand All @@ -297,6 +318,7 @@ export class Dropdown extends Component {
var label = selectedOption ? selectedOption.label : (this.props.options ? this.props.options[0].label : null);
var listItems, optionElements;
var filterInput,filter;
var editable;

if(this.props.options) {

Expand Down Expand Up @@ -327,6 +349,12 @@ export class Dropdown extends Component {
filter=<div className="ui-dropdown-filter-container" onChange={(event) => this.onFilter(event)}
onClick={this.onFilterInputClick} >{filterInput}<span className="fa fa-search" ></span></div>
}
if(this.props.editable){
editable=<input type="text" className="ui-dropdown-label ui-inputtext ui-corner-all" value={selectedOption ? selectedOption.label:this.editValue?this.editValue:""}
ref={(el) => {this.editableInput = el;}} onChange={(event) => this.onEditable(event)}
onClick={this.onEditableInputClick} placeholder={this.props.placeholder}
onFocus={this.onEditableInputFocus} onBlur={this.onInputBlur} />
}

return (
<div className={styleClass} onClick={this.onClick} ref={(el) => {this.container = el;}} style={this.props.style}>
Expand All @@ -337,7 +365,8 @@ export class Dropdown extends Component {
<input readOnly ref={(el) => {this.input = el;}} type="text" onFocus={this.onInputFocus}
onKeyDown={this.onKeydown} onBlur={this.onInputBlur}/>
</div>
<label className="ui-dropdown-label ui-inputtext ui-corner-all">{label}</label>
{editable}
{!this.props.editable && <label className="ui-dropdown-label ui-inputtext ui-corner-all">{label}</label>}
<div className="ui-dropdown-trigger ui-state-default ui-corner-right">
<span className="fa fa-fw fa-caret-down ui-c"></span>
</div>
Expand Down
20 changes: 20 additions & 0 deletions src/showcase/dropdown/DropdownDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,18 @@ export class DropdownDemo extends Component {
super();
this.state = {};
this.onCityChange = this.onCityChange.bind(this);
this.onCarChange = this.onCarChange.bind(this);
this.onCarChange2 = this.onCarChange2.bind(this);
}

onCityChange(e) {
this.setState({city: e.value});
}

onCarChange(e) {
this.setState({car: e.value});
}

onCarChange2(e) {
this.setState({car2: e.value});
}
Expand Down Expand Up @@ -73,6 +78,11 @@ export class DropdownDemo extends Component {
<Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}}/>
<div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city : 'No city selected'}</div>

<h3>Editable</h3>
<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange}
style={{width:'150px'}} editable={true} placeholder="Select a Brand"/>
<div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>

<h3>Advanced</h3>
<Dropdown value={this.state.car2} options={cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate} style={{width:'150px'}}
filter={true} filterPlaceholder="Select Car" filterBy="label,value"/>
Expand Down Expand Up @@ -283,6 +293,12 @@ render() {
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>editable</td>
<td>boolean</td>
<td>false</td>
<td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
Expand Down Expand Up @@ -451,6 +467,10 @@ export class DropdownDemo extends Component {
<Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}}/>
<div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city : 'No city selected'}</div>
<h3>Editable</h3>
<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange} style={{width:'150px'}} editable={true} placeholder="Select a Brand"/>
<div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>
<h3>Advanced</h3>
<Dropdown value={this.state.car2} options={cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate} style={{width:'150px'}} filter={true} filterPlaceholder="Select Car" filterBy="label,value"/>
<div style={{marginTop: '.5em'}}>{this.state.car2 ? 'Selected Car: ' + this.state.car2 : 'No car selected'}</div>
Expand Down

0 comments on commit ee5d371

Please sign in to comment.