Skip to content

Commit

Permalink
#162 for Listbox
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Oct 31, 2017
1 parent 814e461 commit bea2f00
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 18 deletions.
35 changes: 25 additions & 10 deletions src/components/listbox/ListBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export class ListBox extends Component {
id: null,
value: null,
options: null,
optionLabel: null,
itemTemplate: null,
style: null,
listStyle: null,
Expand All @@ -27,6 +28,7 @@ export class ListBox extends Component {
id: PropTypes.string,
value: PropTypes.any,
options: PropTypes.array,
optionLabel: PropTypes.string,
itemTemplate: PropTypes.func,
style: PropTypes.object,
listStyle: PropTypes.object,
Expand Down Expand Up @@ -85,12 +87,12 @@ export class ListBox extends Component {
}
}
else {
value = option.value;
value = this.getOptionValue(option);
valueChanged = true;
}
}
else {
value = selected ? null : option.value;
value = selected ? null : this.getOptionValue(option);
valueChanged = true;
}

Expand All @@ -112,21 +114,21 @@ export class ListBox extends Component {
if(metaKey)
value = this.removeOption(option);
else
value = [option.value];
value = [this.getOptionValue(option)];

valueChanged = true;
}
else {
value = (metaKey) ? this.props.value || [] : [];
value = [...value, option.value];
value = [...value, this.getOptionValue(option)];
valueChanged = true;
}
}
else {
if(selected)
value = this.removeOption(option);
else
value = [...this.props.value || [], option.value];
value = [...this.props.value || [], this.getOptionValue(option)];

valueChanged = true;
}
Expand All @@ -153,37 +155,48 @@ export class ListBox extends Component {
}

removeOption(option) {
return this.props.value.filter(val => !ObjectUtils.equals(val, option.value, this.props.key));
return this.props.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.props.key));
}

isSelected(option) {
let selected = false;
let optionValue = this.getOptionValue(option);

if(this.props.multiple) {
if(this.props.value) {
for(let val of this.props.value) {
if(ObjectUtils.equals(val, option.value, this.props.key)) {
if(ObjectUtils.equals(val, optionValue, this.props.key)) {
selected = true;
break;
}
}
}
}
else {
selected = ObjectUtils.equals(this.props.value, option.value, this.props.key);
selected = ObjectUtils.equals(this.props.value, optionValue, this.props.key);
}

return selected;
}

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() {
return this.state.filter && this.state.filter.trim().length > 0;
}

getOptionValue(option) {
return this.props.optionLabel ? option : option.value;
}

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

render() {
let className = classNames('ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all', this.props.className, {
Expand All @@ -200,7 +213,9 @@ export class ListBox extends Component {
}

items = items.map((option, index) => {
return <ListBoxItem key={option.label} option={option} template={this.props.itemTemplate} selected={this.isSelected(option)}
let optionLabel = this.getOptionLabel(option);

return <ListBoxItem key={optionLabel} label={optionLabel} option={option} template={this.props.itemTemplate} selected={this.isSelected(option)}
onClick={this.onOptionClick} onTouchEnd={(e) => this.onOptionTouchEnd(e, option, index)} />;
});
}
Expand Down
4 changes: 3 additions & 1 deletion src/components/listbox/ListBoxItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export class ListBoxItem extends Component {

static defaultProps = {
option: null,
label: null,
selected: false,
onClick: null,
onTouchEnd: null,
Expand All @@ -14,6 +15,7 @@ export class ListBoxItem extends Component {

static propTypes = {
option: PropTypes.any,
label: PropTypes.string,
selected: PropTypes.bool,
onClick: PropTypes.func,
onTouchEnd: PropTypes.func,
Expand Down Expand Up @@ -48,7 +50,7 @@ export class ListBoxItem extends Component {

render() {
let className = classNames('ui-listbox-item ui-corner-all', {'ui-state-highlight': this.props.selected});
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} onTouchEnd={this.onTouchEnd}>
Expand Down
14 changes: 7 additions & 7 deletions src/showcase/listbox/ListBoxDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ export class ListBoxDemo 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 @@ -58,10 +58,10 @@ export class ListBoxDemo extends Component {

<div className="content-section implementation">
<h3 className="first">Single</h3>
<ListBox value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} />
<ListBox value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} optionLabel="name"/>

<h3>Multiple</h3>
<ListBox value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} multiple={true} />
<ListBox value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} multiple={true} optionLabel="name"/>

<h3>Advanced</h3>
<ListBox value={this.state.car} filter={true} options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
Expand Down

0 comments on commit bea2f00

Please sign in to comment.