77 lines
1.7 KiB
JavaScript
77 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import _ from 'underscore'
|
|
|
|
const FormFieldSelect = React.createClass({
|
|
render() {
|
|
if (this.props.field.values === undefined) {
|
|
return false;
|
|
}
|
|
|
|
let filter = false;
|
|
let placeholder = false;
|
|
let sortBy = false;
|
|
|
|
if (this.props.field.placeholder !== undefined) {
|
|
placeholder = (
|
|
<option value="">{ this.props.field.placeholder }</option>
|
|
);
|
|
}
|
|
|
|
if (this.props.field['filter'] !== undefined) {
|
|
filter = this.props.field.filter;
|
|
}
|
|
|
|
if (_.isFunction(this.props.field.sortBy)) {
|
|
sortBy = this.props.field.sortBy;
|
|
}
|
|
|
|
let keys;
|
|
if (sortBy) {
|
|
// Extract keys from sorted [key, value] select value pairs, sorted by
|
|
// provided sorting order.
|
|
keys =
|
|
_.map(
|
|
_.sortBy(
|
|
_.pairs(this.props.field.values),
|
|
(item) => sortBy(item[0], item[1])
|
|
),
|
|
(item) => item[0]
|
|
);
|
|
} else {
|
|
keys = Object.keys(this.props.field.values)
|
|
}
|
|
|
|
const options = keys.map(
|
|
(value, index) => {
|
|
|
|
if (filter !== false && filter(this.props.item, value) === false) {
|
|
return;
|
|
}
|
|
|
|
return (
|
|
<option
|
|
key={ 'option-' + index }
|
|
value={ value }>
|
|
{ this.props.field.values[value] }
|
|
</option>
|
|
);
|
|
}
|
|
);
|
|
|
|
return (
|
|
<select
|
|
name={ this.props.field.name }
|
|
id={ 'field_'+this.props.field.name }
|
|
value={ this.props.item[this.props.field.name] }
|
|
onChange={ this.props.onValueChange }
|
|
{...this.props.field.validation}
|
|
>
|
|
{placeholder}
|
|
{options}
|
|
</select>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = FormFieldSelect;
|