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

Merge pull request #2484 from matrix-org/travis/select-field

Browse source 
Support selects on Field
This commit is contained in:
Travis Ralston 2019-01-22 20:13:06 -07:00 committed by GitHub
commit b83227c035
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/elements/_Field.scss
View file

@ -21,7 +21,8 @@ limitations under the License.
margin: 1em 0; margin: 1em 0;
} }
.mx_Field input { .mx_Field input,
.mx_Field select {
font-weight: normal; font-weight: normal;
border-radius: 4px; border-radius: 4px;
transition: border-color 0.25s; transition: border-color 0.25s;
@ -29,7 +30,8 @@ limitations under the License.
padding: 8px 9px; padding: 8px 9px;
} }
.mx_Field input:focus { .mx_Field input:focus,
.mx_Field select:focus {
outline: 0; outline: 0;
border-color: $input-focused-border-color; border-color: $input-focused-border-color;
} }
@ -61,7 +63,8 @@ limitations under the License.
} }
.mx_Field input:focus + label, .mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label { .mx_Field input:not(:placeholder-shown) + label,
.mx_Field select:focus + label {
transition: transition:
font-size 0.25s ease-out 0s, font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s, color 0.25s ease-out 0s,
@ -72,6 +75,7 @@ limitations under the License.
background-color: $field-focused-label-bg-color; background-color: $field-focused-label-bg-color;
} }
.mx_Field input:focus + label { .mx_Field input:focus + label,
.mx_Field select:focus + label {
color: $input-focused-border-color; color: $input-focused-border-color;
} }

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

@ -27,24 +27,27 @@ export default class Field extends React.PureComponent {
label: PropTypes.string, label: PropTypes.string,
// The field's placeholder string. // The field's placeholder string.
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>.
} }
render() { render() {
const extraProps = Object.assign({}, this.props); const extraProps = Object.assign({}, this.props);
// Remove explicit props // Remove explicit properties that shouldn't be copied
delete extraProps.id; delete extraProps.element;
delete extraProps.type; delete extraProps.children;
delete extraProps.placeholder;
delete extraProps.label; // Set some defaults for the element
extraProps.type = extraProps.type || "text";
const element = this.props.element || "input";
const fieldInput = React.createElement(element, extraProps, this.props.children);
return <div className="mx_Field"> return <div className="mx_Field">
<input id={this.props.id} {fieldInput}
type={this.props.type || "text"}
placeholder={this.props.placeholder}
{...extraProps}
/>
<label htmlFor={this.props.id}>{this.props.label}</label> <label htmlFor={this.props.id}>{this.props.label}</label>
</div>; </div>;
} }