Created required behaviour for input
parent
752f2cb7fd
commit
cc32e5a1bd
|
@ -46,7 +46,8 @@ class Input extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { children, disabled, error, floating, icon,
|
const { children, disabled, error, floating, icon,
|
||||||
label: labelText, maxLength, multiline, type, value, ...others} = this.props;
|
label: labelText, maxLength, multiline, required,
|
||||||
|
type, value, ...others} = this.props;
|
||||||
const length = maxLength && value ? value.length : 0;
|
const length = maxLength && value ? value.length : 0;
|
||||||
const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
|
const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
|
||||||
|
|
||||||
|
@ -76,7 +77,11 @@ class Input extends React.Component {
|
||||||
{InputElement}
|
{InputElement}
|
||||||
{icon ? <FontIcon className={style.icon} value={icon} /> : null}
|
{icon ? <FontIcon className={style.icon} value={icon} /> : null}
|
||||||
<span className={style.bar}></span>
|
<span className={style.bar}></span>
|
||||||
{labelText ? <label className={labelClassName}>{labelText}</label> : null}
|
{labelText ?
|
||||||
|
<label className={labelClassName}>
|
||||||
|
{labelText}
|
||||||
|
{required ? <span className={style.required}> * </span> : null}
|
||||||
|
</label> : null}
|
||||||
{error ? <span className={style.error}>{error}</span> : null}
|
{error ? <span className={style.error}>{error}</span> : null}
|
||||||
{maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
|
{maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -10,7 +10,8 @@ $input-text-bottom-border-color: rgba($color-black, 0.12) !default;
|
||||||
$input-text-highlight-color: $color-primary !default;
|
$input-text-highlight-color: $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: rgb(222, 50, 38) !default;
|
$input-text-error-color: rgb(222, 230, 38) !default;
|
||||||
|
$input-text-required-color: rgb(222, 50, 38) !default;
|
||||||
$input-underline-height: 2 * $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;
|
||||||
|
|
|
@ -40,6 +40,9 @@
|
||||||
~ .label:not(.fixed) {
|
~ .label:not(.fixed) {
|
||||||
color: $input-text-highlight-color;
|
color: $input-text-highlight-color;
|
||||||
}
|
}
|
||||||
|
~ .label > .required {
|
||||||
|
color: $input-text-required-color;
|
||||||
|
}
|
||||||
~ .icon {
|
~ .icon {
|
||||||
color: $input-text-highlight-color;
|
color: $input-text-highlight-color;
|
||||||
}
|
}
|
||||||
|
@ -125,6 +128,9 @@
|
||||||
> .counter, > .label {
|
> .counter, > .label {
|
||||||
color: $input-text-error-color;
|
color: $input-text-error-color;
|
||||||
}
|
}
|
||||||
|
> .label > .required {
|
||||||
|
color: $input-text-required-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
|
|
|
@ -21,13 +21,13 @@ class InputTest extends React.Component {
|
||||||
<Input
|
<Input
|
||||||
type='text'
|
type='text'
|
||||||
value={this.state.normal}
|
value={this.state.normal}
|
||||||
label='Firstname' onChange={this.handleChange.bind(this, 'normal')}
|
label='First Name' onChange={this.handleChange.bind(this, 'normal')}
|
||||||
maxLength={12}
|
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 />
|
||||||
<Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
|
<Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
|
||||||
<Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
|
<Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue