vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Updated to show hint on input if lable is empty

old
Roman Rott 2016-10-09 14:37:43 +03:00
parent e90a188a37
commit 1fa9a0a58d
No known key found for this signature in database
GPG Key ID: F6909DFE38B6B4D3
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/Input.js
View File

@ -184,7 +184,7 @@ const factory = (FontIcon) => {
{required ? <span className={theme.required}> * </span> : null}
</label>
: null}
{hint ? <span className={theme.hint}>{hint}</span> : null}
{hint ? <span hidden={labelText} className={theme.hint}>{hint}</span> : null}
{error ? <span className={theme.error}>{error}</span> : null}
{maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
{children}

6
components/input/theme.scss
View File

@ -46,6 +46,7 @@
color: $input-text-required-color;
}
~ .hint {
display: block;
opacity: $input-hint-opacity;
}
~ .icon {
@ -57,6 +58,9 @@
top: $input-focus-label-top;
font-size: $input-label-font-size;
}
&.filled ~ .hint {
opacity: 0;
}
}
&.filled ~ .label.fixed, &.filled ~ .hint {
display: none;
@ -87,7 +91,7 @@
line-height: $input-field-font-size;
color: $input-text-label-color;
pointer-events: none;
opacity: 0;
opacity: $input-hint-opacity;
transition-timing-function: $animation-curve-default;
transition-duration: $animation-duration;
transition-property: opacity;

3
docs/app/components/layout/main/modules/examples/input_example_1.txt
View File

@ -1,5 +1,5 @@
class InputTest extends React.Component {
state = { name: '', phone: '', multiline: '', email: '', hint: '' };
state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
handleChange = (name, value) => {
this.setState({...this.state, [name]: value});
@ -9,6 +9,7 @@ class InputTest extends React.Component {
return (
<section>
<Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
<Input type='text' hint='With Hint, no label' name='name' value={this.state.label} onChange={this.handleChange.bind(this, 'label')} maxLength={16} />
<Input type='text' label='Disabled field' disabled />
<Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
<Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />