Skip to content

Commit

Permalink
#1230 for Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Mar 6, 2020
1 parent 8506db7 commit 7546632
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 27 deletions.
1 change: 1 addition & 0 deletions src/components/selectbutton/SelectButton.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface SelectButtonProps {
value?: any;
options?: any[];
optionLabel?: string;
optionValue?: string;
tabIndex?: string;
multiple?: boolean;
disabled?: boolean;
Expand Down
28 changes: 15 additions & 13 deletions src/components/selectbutton/SelectButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export class SelectButton extends Component {
value: null,
options: null,
optionLabel: null,
optionValue: null,
tabIndex: null,
multiple: null,
disabled: null,
Expand All @@ -29,6 +30,7 @@ export class SelectButton extends Component {
value: PropTypes.any,
options: PropTypes.array,
optionLabel: PropTypes.string,
optionValue: PropTypes.string,
tabIndex: PropTypes.string,
multiple: PropTypes.bool,
disabled: PropTypes.bool,
Expand Down Expand Up @@ -86,22 +88,22 @@ export class SelectButton extends Component {
let optionValue = this.getOptionValue(event.option);
let newValue;

if(this.props.multiple) {
if (this.props.multiple) {
let currentValue = this.props.value ? [...this.props.value] : [];

if(selected)
if (selected)
newValue = currentValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.props.dataKey));
else
newValue = [...currentValue, optionValue];
}
else {
if(selected)
if (selected)
newValue = null;
else
newValue = optionValue;
}

if(this.props.onChange) {
if (this.props.onChange) {
this.props.onChange({
originalEvent: event.originalEvent,
value: newValue,
Expand All @@ -116,22 +118,22 @@ 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 || option;
}

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

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, optionValue, this.props.dataKey)) {
if (this.props.multiple) {
if (this.props.value && this.props.value.length) {
for (let val of this.props.value) {
if (ObjectUtils.equals(val, optionValue, this.props.dataKey)) {
selected = true;
break;
}
Expand All @@ -146,7 +148,7 @@ export class SelectButton extends Component {
}

renderItems() {
if(this.props.options && this.props.options.length) {
if (this.props.options && this.props.options.length) {
return this.props.options.map((option, index) => {
let optionLabel = this.getOptionLabel(option);

Expand Down
6 changes: 3 additions & 3 deletions src/showcase/dropdown/DropdownDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ import {Dropdown} from 'primereact/dropdown';
</CodeHighlight>

<h3>Getting Started</h3>
<p>Dropdown is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
<p>SelectButton is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. SelectItem API is designed to have more
control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice.</p>
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. In addition,
options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>

<p><b>Options as SelectItems</b></p>
<CodeHighlight className="language-javascript">
Expand Down
4 changes: 2 additions & 2 deletions src/showcase/listbox/ListBoxDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ import {ListBox} from 'primereact/listbox';
<h3>Getting Started</h3>
<p>Listbox is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. SelectItem API is designed to have more
control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice.</p>
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair.
In addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>

<p><b>Options as SelectItems</b></p>
<CodeHighlight className="language-javascript">
Expand Down
4 changes: 2 additions & 2 deletions src/showcase/multiselect/MultiSelectDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ import {MultiSelect} from 'primereact/multiselect';
<h3>Getting Started</h3>
<p>MultiSelect is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. SelectItem API is designed to have more
control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice.</p>
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. In addition,
options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>

<p><b>Options as SelectItems</b></p>
<CodeHighlight className="language-javascript">
Expand Down
26 changes: 19 additions & 7 deletions src/showcase/selectbutton/SelectButtonDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@ export class SelectButtonDemo extends Component {
<div className="content-section implementation">
<h3>Single</h3>
<SelectButton value={this.state.value1} options={options} onChange={(e) => this.setState({value1: e.value})} />
<p>Selected Value: {this.state.value1}</p>
<br />
<p>Selected Value: <span style={{fontWeight: 'bold'}}>{this.state.value1}</span></p>

<h3>Multiple</h3>
<SelectButton value={this.state.value2} multiple={true} options={options} onChange={(e) => this.setState({value2: e.value})} />
<p>Selected Values: {this.state.value2 && this.state.value2.map((val) => val + " ")}</p>
<br />
<p>Selected Values: <span style={{fontWeight: 'bold'}}>{this.state.value2 && this.state.value2.map((val) => val + " ")}</span></p>
</div>

<SelectButtonDoc></SelectButtonDoc>
Expand Down Expand Up @@ -70,10 +72,10 @@ import {SelectButton} from 'primereact/selectbutton';
</CodeHighlight>

<h3>Getting Started</h3>
<p>SelectButton is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
<p>Dropdown is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> property to specify the field name of the option. SelectItem API is designed to have more
control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice.</p>
whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. In addition,
options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>

<p><b>Options as SelectItems</b></p>
<CodeHighlight className="language-javascript">
Expand Down Expand Up @@ -113,9 +115,11 @@ const cities = [
<CodeHighlight className="language-jsx">
{`
<SelectButton optionLabel="name" value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})}></SelectButton>
<SelectButton optionLabel="name" optionValue="code" value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})}></SelectButton>
`}
</CodeHighlight>
<p>When <i>optionValue</i> is not defined, value of an option refers to the option object itself.</p>

<h3>Multiple</h3>
<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
Expand Down Expand Up @@ -162,6 +166,12 @@ const cities = [
<td>null</td>
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.</td>
</tr>
<tr>
<td>tabIndex</td>
<td>string</td>
Expand Down Expand Up @@ -283,11 +293,13 @@ export class SelectButtonDemo extends Component {
<div className="content-section implementation">
<h3>Single</h3>
<SelectButton value={this.state.value1} options={options} onChange={(e) => this.setState({value1: e.value})} />
<p>Selected Value: {this.state.value1}</p>
<br />
<p>Selected Value: <span style={{fontWeight: 'bold'}}>{this.state.value1}</span></p>
<h3>Multiple</h3>
<SelectButton value={this.state.value2} multiple={true} options={options} onChange={(e) => this.setState({value2: e.value})} />
<p>Selected Values: {this.state.value2 && this.state.value2.map((val) => val + " ")}</p>
<br />
<p>Selected Values: <span style={{fontWeight: 'bold'}}>{this.state.value2 && this.state.value2.map((val) => val + " ")}</span></p>
</div>
</div>
);
Expand Down

0 comments on commit 7546632

Please sign in to comment.