LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add a "text-number" form field type, and add styles for 2 others

Browse source
This commit is contained in:
Alex Liebowitz 2017-03-01 15:31:05 -05:00
parent 3750acded1
commit a9563b80df
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
js/component/form.js
View file

@ -22,9 +22,12 @@ var FormField = React.createClass({
} }
}, },
componentWillMount: function() { componentWillMount: function() {
if (['text', 'radio', 'checkbox', 'file'].indexOf(this.props.type) != -1) { if (['text', 'radio', 'checkbox', 'file'].includes(this.props.type)) {
this._element = 'input'; this._element = 'input';
this._type = this.props.type; this._type = this.props.type;
} else if (this.props.type == 'text-number') {
this._element = 'input';
this._type = 'text';
} else { } else {
// Non <input> field, e.g. <select>, <textarea> // Non <input> field, e.g. <select>, <textarea>
this._element = this.props.type; this._element = this.props.type;
@ -56,8 +59,7 @@ var FormField = React.createClass({
getValue: function() { getValue: function() {
if (this.props.type == 'checkbox') { if (this.props.type == 'checkbox') {
return this.refs.field.checked; return this.refs.field.checked;
} } else if (this.props.type == 'file') {
else if (this.props.type == 'file') {
return this.refs.field.files[0].path; return this.refs.field.files[0].path;
} else { } else {
return this.refs.field.value; return this.refs.field.value;
@ -68,7 +70,7 @@ var FormField = React.createClass({
}, },
render: function() { render: function() {
// Pass all unhandled props to the field element // Pass all unhandled props to the field element
var otherProps = Object.assign({}, this.props); const otherProps = Object.assign({}, this.props);
delete otherProps.type; delete otherProps.type;
delete otherProps.hidden; delete otherProps.hidden;
@ -76,6 +78,7 @@ var FormField = React.createClass({
!this.props.hidden !this.props.hidden
? <div className="form-field-container"> ? <div className="form-field-container">
<this._element type={this._type} className="form-field" name={this.props.name} ref="field" placeholder={this.props.placeholder} <this._element type={this._type} className="form-field" name={this.props.name} ref="field" placeholder={this.props.placeholder}
className={'form-field--' + this.props.type + ' ' + (this.props.className || '')}
{...otherProps}> {...otherProps}>
{this.props.children} {this.props.children}
</this._element> </this._element>

8
scss/_gui.scss
View file

@ -255,6 +255,14 @@ input[type="text"], input[type="search"]
display: inline-block; display: inline-block;
} }
.form-field--text {
width: 330px;
}
.form-field--text-number {
width: 50px;
}
.form-field-advice-container { .form-field-advice-container {
position: relative; position: relative;
} }