New property 'icon'
parent
e3f1c25c8a
commit
d516ff23a7
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import style from './style.scss';
|
import style from './style.scss';
|
||||||
|
import FontIcon from '../font_icon';
|
||||||
|
|
||||||
export default React.createClass({
|
export default React.createClass({
|
||||||
mixins: [PureRenderMixin],
|
mixins: [PureRenderMixin],
|
||||||
|
@ -12,6 +13,7 @@ export default React.createClass({
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
error: React.PropTypes.string,
|
error: React.PropTypes.string,
|
||||||
floating: React.PropTypes.bool,
|
floating: React.PropTypes.bool,
|
||||||
|
icon: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
multiline: React.PropTypes.bool,
|
multiline: React.PropTypes.bool,
|
||||||
onBlur: React.PropTypes.func,
|
onBlur: React.PropTypes.func,
|
||||||
|
@ -73,16 +75,19 @@ export default React.createClass({
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let className = style.root;
|
let className = style.root;
|
||||||
let labelClassName = style.label;
|
|
||||||
if (this.props.error) className += ` ${style.errored}`;
|
if (this.props.error) className += ` ${style.errored}`;
|
||||||
if (this.props.disabled) className += ` ${style.disabled}`;
|
if (this.props.disabled) className += ` ${style.disabled}`;
|
||||||
if (this.props.className) className += ` ${this.props.className}`;
|
if (this.props.className) className += ` ${this.props.className}`;
|
||||||
if (this.props.type === 'hidden') className += ` ${style.hidden}`;
|
if (this.props.type === 'hidden') className += ` ${style.hidden}`;
|
||||||
|
if (this.props.icon) className += ` ${style.with_icon}`;
|
||||||
|
|
||||||
|
let labelClassName = style.label;
|
||||||
if (!this.props.floating) labelClassName += ` ${style.fixed}`;
|
if (!this.props.floating) labelClassName += ` ${style.fixed}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='input' className={className}>
|
<div data-react-toolbox='input' className={className}>
|
||||||
{ this.renderInput() }
|
{ this.renderInput() }
|
||||||
|
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
|
||||||
<span className={style.bar}></span>
|
<span className={style.bar}></span>
|
||||||
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
|
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
|
||||||
{ this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
|
{ this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
|
||||||
|
|
|
@ -17,6 +17,7 @@ var Input = require('react-toolbox/components/input');
|
||||||
| **error** | String | | Sets the error string.|
|
| **error** | String | | Sets the error string.|
|
||||||
| **label** | String | | The text string to use for the floating label element.|
|
| **label** | String | | The text string to use for the floating label element.|
|
||||||
| **multiline** | Boolean | false | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
|
| **multiline** | Boolean | false | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
|
||||||
|
| **icon** | String | | Icon String key.|
|
||||||
| **onBlur** | Function | | Callback function that is fired when components is blured.|
|
| **onBlur** | Function | | Callback function that is fired when components is blured.|
|
||||||
| **onChange** | Function | | Callback function that is fired when the components's value changes.|
|
| **onChange** | Function | | Callback function that is fired when the components's value changes.|
|
||||||
| **onFocus** | Function | | Callback function that is fired when components is focused.|
|
| **onFocus** | Function | | Callback function that is fired when components is focused.|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
@import "../mixins";
|
@import "../mixins";
|
||||||
|
|
||||||
$input-padding: 2 * $unit;
|
$input-padding: 2 * $unit;
|
||||||
$input-field-height: 1.6 * $unit;
|
$input-field-height: 1.6 * $unit;
|
||||||
$input-field-padding: .8 * $unit;
|
$input-field-padding: .8 * $unit;
|
||||||
|
@ -14,10 +13,29 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
|
||||||
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
||||||
$input-text-disabled-text-color: $input-text-label-color !default;
|
$input-text-disabled-text-color: $input-text-label-color !default;
|
||||||
$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
||||||
|
$input-icon-font-size: 2.4 * $unit;
|
||||||
|
$input-icon-size: 2 * $input-icon-font-size;
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: $input-padding 0;
|
padding: $input-padding 0;
|
||||||
|
&.with_icon {
|
||||||
|
margin-left: $input-icon-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: $offset ;
|
||||||
|
left: -$input-icon-size;
|
||||||
|
display: block;
|
||||||
|
width: $input-icon-size;
|
||||||
|
height: $input-icon-size;
|
||||||
|
font-size: $input-icon-font-size !important;
|
||||||
|
line-height: $input-icon-size !important;
|
||||||
|
color: $input-text-label-color;
|
||||||
|
text-align: center;
|
||||||
|
transition: color $animation-duration $animation-curve-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
|
@ -30,24 +48,23 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
~ .bar:before, ~ .bar:after {
|
~ .bar:before, ~ .bar:after {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .label:not(.fixed) {
|
~ .label:not(.fixed) {
|
||||||
color: $input-text-highlight-color;
|
color: $input-text-highlight-color;
|
||||||
}
|
}
|
||||||
|
~ .icon {
|
||||||
|
color: $input-text-highlight-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus, &.filled {
|
&:focus, &.filled {
|
||||||
~ .label:not(.fixed) {
|
~ .label:not(.fixed) {
|
||||||
top: $input-focus-label-top;
|
top: $input-focus-label-top;
|
||||||
font-size: $input-label-font-size;
|
font-size: $input-label-font-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.filled ~ .label.fixed {
|
&.filled ~ .label.fixed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -55,7 +72,7 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $input-padding + $input-field-padding;
|
top: $input-padding + (1.5 * $input-field-padding);
|
||||||
left: 0;
|
left: 0;
|
||||||
font-size: $input-field-font-size;
|
font-size: $input-field-font-size;
|
||||||
line-height: $input-field-font-size;
|
line-height: $input-field-font-size;
|
||||||
|
@ -70,7 +87,6 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
@include material-animation-default();
|
@include material-animation-default();
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -81,11 +97,9 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
||||||
background-color: $input-text-highlight-color;
|
background-color: $input-text-highlight-color;
|
||||||
transition-property: width, background-color;
|
transition-property: width, background-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
right: 50%;
|
right: 50%;
|
||||||
}
|
}
|
||||||
|
@ -104,15 +118,12 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
|
||||||
|
|
||||||
.errored {
|
.errored {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
|
||||||
> .input {
|
> .input {
|
||||||
border-bottom-color: $input-text-error-color;
|
border-bottom-color: $input-text-error-color;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
~ .label:not(.fixed) {
|
~ .label:not(.fixed) {
|
||||||
color: $input-text-error-color;
|
color: $input-text-error-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .bar:before, ~ .bar:after {
|
~ .bar:before, ~ .bar:after {
|
||||||
background-color: $input-text-error-color;
|
background-color: $input-text-error-color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,10 +9,12 @@ export default React.createClass({
|
||||||
<section>
|
<section>
|
||||||
<h5>Inputs</h5>
|
<h5>Inputs</h5>
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
<Input type="text" label="Firstname" icon="bookmark" />
|
<Input type='text' label='Firstname' />
|
||||||
<Input type="email" label="Label fixed" icon="bookmark" floating={false} />
|
<Input type='email' label='Label fixed' floating={false} />
|
||||||
<Input type="text" label="Phone Number" icon="bookmark" />
|
<Input type='text' label='Phone Number' />
|
||||||
<Input type="text" label="Disabled field" disabled />
|
<Input type='text' label='Disabled field' disabled />
|
||||||
|
<Input type='tel' label='With icon' icon='phone' />
|
||||||
|
<Input type='email' label='With icon' icon='email' />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue