OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #2740 from jryans/reorg-field-props 

Reorganise props handling in Field
pull/21833/head
J. Ryan Stinnett 2019-03-05 11:30:06 +00:00 committed by GitHub
parent a3d6d43f69 d4a148d56c
commit b6351f2607
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/views/elements/Field.js
View File

@ -21,15 +21,15 @@ export default class Field extends React.PureComponent {
static propTypes = { static propTypes = {
// The field's ID, which binds the input and label together. // The field's ID, which binds the input and label together.
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
// The field's <input> type. Defaults to "text". // The element to create. Defaults to "input".
// To define options for a select, use <Field><option ... /></Field>
element: PropTypes.oneOf(["input", "select", "textarea"]),
// The field's type (when used as an <input>). Defaults to "text".
type: PropTypes.string, type: PropTypes.string,
// The field's label string. // The field's label string.
label: PropTypes.string, label: PropTypes.string,
// The field's placeholder string. Defaults to the label. // The field's placeholder string. Defaults to the label.
placeholder: PropTypes.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>. // All other props pass through to the <input>.
}; };
@ -46,21 +46,18 @@ export default class Field extends React.PureComponent {
} }
render() { render() {
const extraProps = Object.assign({}, this.props); const { element, children, ...inputProps } = this.props;
// Remove explicit properties that shouldn't be copied const inputElement = element || "input";
delete extraProps.element;
delete extraProps.children;
// Set some defaults for the element // Set some defaults for the <input> element
extraProps.type = extraProps.type || "text"; inputProps.type = inputProps.type || "text";
extraProps.ref = "fieldInput"; inputProps.ref = "fieldInput";
extraProps.placeholder = extraProps.placeholder || extraProps.label; inputProps.placeholder = inputProps.placeholder || inputProps.label;
const element = this.props.element || "input"; const fieldInput = React.createElement(inputElement, inputProps, children);
const fieldInput = React.createElement(element, extraProps, this.props.children);
return <div className={`mx_Field mx_Field_${element}`}> return <div className={`mx_Field mx_Field_${inputElement}`}>
{fieldInput} {fieldInput}
<label htmlFor={this.props.id}>{this.props.label}</label> <label htmlFor={this.props.id}>{this.props.label}</label>
</div>; </div>;