#162 for SelectButton

primefaces · Oct 31, 2017 · 1ee2c06 · 1ee2c06
1 parent bea2f00
commit 1ee2c06
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/src/components/selectbutton/SelectButton.js b/src/components/selectbutton/SelectButton.js
@@ -44,7 +44,7 @@ export class SelectButton extends Component {
         }
 
         let selected = this.isSelected(event.option);
-        let optionValue = event.option.value;
+        let optionValue = this.getOptionValue(event.option);
         let newValue;
 
         if(this.props.multiple) {
@@ -69,22 +69,31 @@ export class SelectButton extends Component {
             });
         }
     }
+
+    getOptionValue(option) {
+        return this.props.optionLabel ? option : option.value;
+    }
+
+    getOptionLabel(option) {
+        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option.label;
+    }
 
     isSelected(option) {
         let selected = false;
+        let optionValue = this.getOptionValue(option);
 
         if(this.props.multiple) {
             if(this.props.value && this.props.value.length) {
                 for(let val of this.props.value) {
-                    if(ObjectUtils.equals(val, option.value, this.props.dataKey)) {
+                    if(ObjectUtils.equals(val, optionValue, this.props.dataKey)) {
                         selected = true;
                         break;
                     }
                 }
             }
         }
         else {
-            selected = ObjectUtils.equals(this.props.value, option.value, this.props.dataKey);
+            selected = ObjectUtils.equals(this.props.value, optionValue, this.props.dataKey);
         }
 
         return selected;
@@ -93,7 +102,9 @@ export class SelectButton extends Component {
     renderItems() {
         if(this.props.options && this.props.options.length) {
             return this.props.options.map((option, index) => {
-                return <SelectButtonItem key={option.label} option={option} onClick={this.onOptionClick}
+                let optionLabel = this.getOptionLabel(option);
+
+                return <SelectButtonItem key={optionLabel} label={optionLabel} option={option} onClick={this.onOptionClick}
                             selected={this.isSelected(option)} tabIndex={this.props.tabIndex} disabled={this.props.disabled} />;
             });
         }

diff --git a/src/components/selectbutton/SelectButtonItem.js b/src/components/selectbutton/SelectButtonItem.js
@@ -7,13 +7,15 @@ export class SelectButtonItem extends Component {
 
     static defaultProps = {
         option: null,
+        label: null,
         selected: null,
         tabIndex: null,
         onClick: null
     };
 
     static propTypes = {
         option: PropTypes.object,
+        label: PropTypes.string,
         selected: PropTypes.bool,
         tabIndex: PropTypes.number,
         onClick: PropTypes.func
@@ -52,10 +54,10 @@ export class SelectButtonItem extends Component {
 
         return (
             <div ref={(el) => this.el = el} className={className} onClick={this.onClick}>
-                <span className="ui-button-text ui-c">{this.props.option.label}</span>
+                <span className="ui-button-text ui-c">{this.props.label}</span>
                 <div className="ui-helper-hidden-accessible">
                     <input type="checkbox" checked={this.props.selected} onFocus={this.onFocus} onBlur={this.onBlur} 
-                        tabIndex={this.props.tabIndex} disabled={this.props.disabled} value={this.props.option.label}/>
+                        tabIndex={this.props.tabIndex} disabled={this.props.disabled} value={this.props.label}/>
                 </div>
             </div>
         );

diff --git a/src/showcase/listbox/ListBoxDemo.js b/src/showcase/listbox/ListBoxDemo.js
@@ -353,11 +353,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 = [
@@ -375,10 +375,10 @@ export class ListBoxDemo extends Component {
         return (
             <div>
                 <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({cities: e.value})} itemTemplate={this.carTemplate}