New property 'maxLength'
parent
98f2920bf4
commit
477b770edd
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
&.errored {
|
&.errored {
|
||||||
.suggestions {
|
.suggestions {
|
||||||
margin-top: - $input-error-height;
|
margin-top: - $input-underline-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ $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-error-height: 1.8 * $unit;
|
$input-underline-height: 2 * $unit;
|
||||||
$input-icon-font-size: 2.4 * $unit;
|
$input-icon-font-size: 2.4 * $unit;
|
||||||
$input-icon-size: 2 * $input-icon-font-size;
|
$input-icon-size: 2 * $input-icon-font-size;
|
||||||
$input-icon-offset: 1.6 * $unit;
|
$input-icon-offset: 1.6 * $unit;
|
||||||
|
|
|
@ -11,6 +11,7 @@ class Input extends React.Component {
|
||||||
floating: React.PropTypes.bool,
|
floating: React.PropTypes.bool,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
|
maxLength: React.PropTypes.number,
|
||||||
multiline: React.PropTypes.bool,
|
multiline: React.PropTypes.bool,
|
||||||
onBlur: React.PropTypes.func,
|
onBlur: React.PropTypes.func,
|
||||||
onChange: React.PropTypes.func,
|
onChange: React.PropTypes.func,
|
||||||
|
@ -40,6 +41,16 @@ class Input extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderUnderline () {
|
||||||
|
const error = this.props.error ? <span className={style.error}>{this.props.error}</span> : null;
|
||||||
|
let counter = null;
|
||||||
|
if (this.props.maxLength) {
|
||||||
|
const length = this.props.value ? this.props.value.length : 0;
|
||||||
|
if (length > 0) counter = <span className={style.counter}>{length} / {this.props.maxLength}</span>;
|
||||||
|
}
|
||||||
|
if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let className = style.root;
|
let className = style.root;
|
||||||
let labelClassName = style.label;
|
let labelClassName = style.label;
|
||||||
|
@ -56,7 +67,7 @@ class Input extends React.Component {
|
||||||
{ this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
|
{ 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.renderUnderline() }
|
||||||
{ this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
|
{ this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -38,6 +38,7 @@ class InputTest extends React.Component {
|
||||||
| `icon` | `String` | | Name of an icon to use as a label for the input.|
|
| `icon` | `String` | | Name of an icon to use as a label for the input.|
|
||||||
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
|
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
|
||||||
| `label` | `String` | | The text string to use for the floating label element.|
|
| `label` | `String` | | The text string to use for the floating label element.|
|
||||||
|
| `maxLength` | `number` | |Specifies the maximum number of characters allowed in the component.|
|
||||||
| `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.|
|
||||||
| `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.|
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
color: $input-text-highlight-color;
|
color: $input-text-highlight-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:focus, &.filled, &[type='date'], &[type='time']{
|
&:focus, &.filled, &[type='date'], &[type='time'] {
|
||||||
~ .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;
|
||||||
|
@ -90,11 +90,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.underline {
|
||||||
display: block;
|
display: flex;
|
||||||
|
margin-bottom: - $input-underline-height;
|
||||||
font-size: $input-label-font-size;
|
font-size: $input-label-font-size;
|
||||||
line-height: $input-error-height;
|
line-height: $input-underline-height;
|
||||||
color: $input-text-error-color;
|
color: $input-text-label-color;
|
||||||
|
.error, .counter {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled > .input {
|
.disabled > .input {
|
||||||
|
@ -115,6 +127,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> .underline {
|
||||||
|
color: $input-text-error-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import Input from '../../components/input';
|
||||||
|
|
||||||
class InputTest extends React.Component {
|
class InputTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
normal: '',
|
normal: 'hello world',
|
||||||
fixedLabel: '',
|
fixedLabel: '',
|
||||||
withIcon: ''
|
withIcon: ''
|
||||||
};
|
};
|
||||||
|
@ -19,7 +19,12 @@ class InputTest extends React.Component {
|
||||||
<section>
|
<section>
|
||||||
<h5>Inputs</h5>
|
<h5>Inputs</h5>
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
<Input type='text' value={this.state.normal} label='Firstname' onChange={this.handleChange.bind(this, 'normal')} />
|
<Input
|
||||||
|
type='text'
|
||||||
|
value={this.state.normal}
|
||||||
|
label='Firstname' onChange={this.handleChange.bind(this, 'normal')}
|
||||||
|
maxLength={12}
|
||||||
|
/>
|
||||||
<Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
|
<Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
|
||||||
<Input type='text' value='Read only' readOnly label='Phone Number' />
|
<Input type='text' value='Read only' readOnly label='Phone Number' />
|
||||||
<Input type='text' label='Disabled field' disabled />
|
<Input type='text' label='Disabled field' disabled />
|
||||||
|
|
Loading…
Reference in New Issue