PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Default a Field's placeholder to the label

Browse source 
Fixes https://github.com/vector-im/riot-web/issues/8250

This keeps all fields in line with the design without them having to defining it twice. The option is kept in the first place as some fields might want to override the placeholder to be longer than the label or something.
This commit is contained in:
Travis Ralston 2019-01-24 19:36:23 -07:00
parent c5deeeaceb
commit d819095a76
1 changed files with 2 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/views/elements/Field.js
View file

@ -25,7 +25,7 @@ export default class Field extends React.PureComponent {
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. // 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". // The type of field to create. Defaults to "input". Should be "input" or "select".
// To define options for a select, use <Field><option ... /></Field> // To define options for a select, use <Field><option ... /></Field>
@ -55,6 +55,7 @@ export default class Field extends React.PureComponent {
// Set some defaults for the element // Set some defaults for the element
extraProps.type = extraProps.type || "text"; extraProps.type = extraProps.type || "text";
extraProps.ref = "fieldInput"; extraProps.ref = "fieldInput";
extraProps.placeholder = extraProps.placeholder || extraProps.label;
const element = this.props.element || "input"; const element = this.props.element || "input";
const fieldInput = React.createElement(element, extraProps, this.props.children); const fieldInput = React.createElement(element, extraProps, this.props.children);