Skip to content

Commit

Permalink
#162 for Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Oct 31, 2017
1 parent ee5c96e commit c269e95
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 24 deletions.
23 changes: 16 additions & 7 deletions src/components/dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export class Dropdown extends Component {
id: null,
value: null,
options: null,
optionLabel: null,
itemTemplate: null,
style: null,
className: null,
Expand Down Expand Up @@ -38,6 +39,7 @@ export class Dropdown extends Component {
id: PropTypes.string,
value: PropTypes.any,
options: PropTypes.array,
optionLabel: PropTypes.string,
itemTemplate: PropTypes.func,
style: PropTypes.object,
className: PropTypes.string,
Expand Down Expand Up @@ -233,7 +235,7 @@ export class Dropdown extends Component {
this.updateEditableLabel(event.option);
this.props.onChange({
originalEvent: event.originalEvent,
value: event.option.value
value: this.props.optionLabel ? event.option : event.option.value
});
}
}
Expand All @@ -242,7 +244,7 @@ export class Dropdown extends Component {
let index = -1;
if(this.props.options) {
for(let i = 0; i < this.props.options.length; i++) {
let optionValue = this.props.options[i].value;
let optionValue = this.props.optionLabel ? this.props.options[i] : this.props.options[i].value;
if((value === null && optionValue == null) || ObjectUtils.equals(value, optionValue, this.props.dataKey)) {
index = i;
break;
Expand Down Expand Up @@ -303,13 +305,15 @@ export class Dropdown extends Component {

updateEditableLabel(option): void {
if(this.editableInput) {
this.editableInput.value = (option ? option.label : this.props.value||'');
this.editableInput.value = (option ? this.getOptionLabel(option) : this.props.value||'');
}
}

filter(option) {
let filterValue = this.state.filter.trim().toLowerCase();
return option.label.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
let optionLabel = this.getOptionLabel(option);

return optionLabel.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
}

hasFilter() {
Expand All @@ -319,7 +323,7 @@ export class Dropdown extends Component {
renderHiddenSelect() {
if(this.props.autoWidth) {
let options = this.props.options && this.props.options.map((option, i) => {
return <option key={option.label} value={option.value}>{option.label}</option>;
return <option key={this.getOptionLabel(option)} value={option.value}>{this.getOptionLabel(option)}</option>;
});

return (<div className="ui-helper-hidden-accessible">
Expand Down Expand Up @@ -376,7 +380,8 @@ export class Dropdown extends Component {
}

items = items && items.map((option, index) => {
return <DropdownItem key={option.label} option={option} template={this.props.itemTemplate} selected={selectedOption === option}
let optionLabel = this.getOptionLabel(option);
return <DropdownItem key={optionLabel} label={optionLabel} option={option} template={this.props.itemTemplate} selected={selectedOption === option}
onClick={this.onOptionClick} />;
});

Expand All @@ -403,6 +408,10 @@ export class Dropdown extends Component {
}
}

getOptionLabel(option) {
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option.label;
}

componentDidMount() {
if(this.props.autoWidth) {
if(!this.props.style || (!this.props.style['width'] && !this.props.style['min-width'])) {
Expand Down Expand Up @@ -435,7 +444,7 @@ export class Dropdown extends Component {
render() {
let className = classNames('ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix', this.props.className, {'ui-state-disabled': this.props.disabled});
let selectedOption = this.findOption(this.props.value);
let label = selectedOption ? selectedOption.label : null;
let label = selectedOption ? this.getOptionLabel(selectedOption) : null;

let hiddenSelect = this.renderHiddenSelect();
let keyboardHelper = this.renderKeyboardHelper();
Expand Down
6 changes: 4 additions & 2 deletions src/components/dropdown/DropdownItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ export class DropdownItem extends Component {

static defaultProps = {
option: null,
label: null,
template: null,
selected: false,
onClick: null
};

static propTypes = {
option: PropTypes.object,
label: PropTypes.string,
template: PropTypes.func,
selected: PropTypes.bool,
onClick: PropTypes.func
Expand All @@ -36,9 +38,9 @@ export class DropdownItem extends Component {
render() {
let className = classNames('ui-dropdown-item ui-corner-all', {
'ui-state-highlight': this.props.selected,
'ui-dropdown-item-empty': (!this.props.option.label || this.props.option.label.length === 0)
'ui-dropdown-item-empty': (!this.props.label || this.props.label.length === 0)
});
let content = this.props.template ? this.props.template(this.props.option) : this.props.option.label;
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;

return (
<li className={className} onClick={this.onClick}>
Expand Down
40 changes: 25 additions & 15 deletions src/showcase/dropdown/DropdownDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ export class DropdownDemo extends Component {

constructor() {
super();
this.state = {city: null, car: null, car2: 'BMW'};
this.state = {
city: null,
car: null,
car2: 'BMW'
};

this.onCityChange = this.onCityChange.bind(this);
this.onCarChange = this.onCarChange.bind(this);
this.onCarChange2 = this.onCarChange2.bind(this);
Expand Down Expand Up @@ -44,11 +49,11 @@ export class DropdownDemo extends Component {

render() {
var cities = [
{label: 'New York', value: 'New York'},
{label: 'Rome', value: 'Rome'},
{label: 'London', value: 'London'},
{label: 'Istanbul', value: 'Istanbul'},
{label: 'Paris', value: 'Paris'},
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
];

var cars = [
Expand All @@ -74,8 +79,8 @@ export class DropdownDemo extends Component {

<div className="content-section implementation">
<h3>Basic</h3>
<Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}} placeholder="Select a City"/>
<div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city : 'No city selected'}</div>
<Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}} placeholder="Select a City" optionLabel="name"/>
<div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city.name : 'No city selected'}</div>

<h3>Editable</h3>
<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange}
Expand Down Expand Up @@ -432,7 +437,12 @@ export class DropdownDemo extends Component {
constructor() {
super();
this.state = {city: null, car: null, car2: 'BMW'};
this.state = {
city: null,
car: null,
car2: 'BMW'
};
this.onCityChange = this.onCityChange.bind(this);
this.onCarChange = this.onCarChange.bind(this);
this.onCarChange2 = this.onCarChange2.bind(this);
Expand Down Expand Up @@ -468,11 +478,11 @@ export class DropdownDemo extends Component {
render() {
var cities = [
{label: 'New York', value: 'New York'},
{label: 'Rome', value: 'Rome'},
{label: 'London', value: 'London'},
{label: 'Istanbul', value: 'Istanbul'},
{label: 'Paris', value: 'Paris'},
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
];
var cars = [
Expand All @@ -499,7 +509,7 @@ export class DropdownDemo extends Component {
<div className="content-section implementation">
<h3>Basic</h3>
<Dropdown value={this.state.city} options={cities} onChange={this.onCityChange} style={{width:'150px'}} placeholder="Select a City"/>
<div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city : 'No city selected'}</div>
<div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city.name : '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"/>
Expand Down

0 comments on commit c269e95

Please sign in to comment.