Your IP : 216.73.216.171
/**
* External dependencies
*/
import React from 'react';
import classNames from 'classnames';
/**
* Select component.
*/
export default class Select extends React.Component {
/**
* Share UI actions need to be performed manually for elements.
* They should be done in this method.
*/
componentDidMount() {
this.$el = jQuery( this.el );
this.$el.SUIselect2( { minimumResultsForSearch: -1 } );
this.$el.on( 'change', this.props.onChange );
}
/**
* Render component.
*
* @return {JSX.Element} Select component.
*/
render() {
const selectOptions = this.props.items.map( ( item, id ) => {
return (
<option value={ item[ 0 ] } key={ id }>
{ item[ 1 ] }
</option>
);
} );
const width = 'undefined' === typeof this.props.classes ? '250' : null;
return (
<div
className={ classNames( 'sui-form-field', {
'sui-input-md': '250' === width,
} ) }
>
<label
htmlFor={ this.props.selectId }
id={ this.props.selectId + '-label' }
className="sui-label"
>
{ this.props.label }
</label>
<select
onChange={ this.props.onChange }
value={ this.props.selected }
className={ classNames( 'sui-select', this.props.classes ) }
data-width={ width }
name={ this.props.selectId }
id={ this.props.selectId }
multiple={ this.props.multiple }
data-placeholder={ this.props.placeholder ?? '' }
aria-labelledby={ this.props.selectId + '-label' }
aria-describedby={
this.props.description
? this.props.selectId + '-description'
: ''
}
ref={ ( el ) => ( this.el = el ) }
>
{ this.props.placeholder && <option /> }
{ selectOptions }
</select>
{ this.props.description && (
<span
id={ this.props.selectId + '-description' }
className="sui-description"
>
{ this.props.description }
</span>
) }
</div>
);
}
}
/**
* Default props.
*
* @param {string} selectId Select ID. Will be also used as class and htmlFor in the label.
* @param {string} label Label text.
* @param {Array} items List of items for the select.
* @param {string|Array} selected Selected item.
*
* @type {{selectId: string, multiple: boolean, label: string, items: *[], selected: string}}
*/
Select.defaultProps = {
selectId: '',
label: '',
items: [],
selected: '',
multiple: false,
};