Support selects on Field

Luckily, the styling is copy/paste capable.
This commit is contained in:
Travis Ralston 2019-01-22 19:25:09 -07:00
parent b25c2efec5
commit f0e8182ff3
2 changed files with 21 additions and 11 deletions

View file

@ -27,6 +27,9 @@ export default class Field extends React.PureComponent {
label: PropTypes.string,
// The field's placeholder string.
placeholder: PropTypes.string,
// The type of field to create. Defaults to "input". Should be "input" or "select".
// To define options for a select, use <Field><option ... /></Field>
element: PropTypes.string,
// All other props pass through to the <input>.
}
@ -38,13 +41,13 @@ export default class Field extends React.PureComponent {
delete extraProps.type;
delete extraProps.placeholder;
delete extraProps.label;
delete extraProps.element;
const element = this.props.element || "input";
const fieldInput = React.createElement(element, extraProps, this.props.children);
return <div className="mx_Field">
<input id={this.props.id}
type={this.props.type || "text"}
placeholder={this.props.placeholder}
{...extraProps}
/>
{fieldInput}
<label htmlFor={this.props.id}>{this.props.label}</label>
</div>;
}