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