2015-10-11 20:07:09 +03:00
import React from 'react' ;
2015-10-09 20:48:30 +03:00
import Input from '../../components/input' ;
2015-11-08 01:38:26 +03:00
class InputTest extends React . Component {
state = {
2015-11-21 16:26:17 +03:00
normal : 'Tony Stark' ,
2015-11-08 01:38:26 +03:00
fixedLabel : '' ,
2016-01-20 01:14:17 +03:00
withIcon : '' ,
2016-03-10 07:23:35 +03:00
withCustomIcon : '' ,
withHintCustomIcon : '' ,
multilineHint : 'Long Description here'
2015-11-08 01:38:26 +03:00
} ;
2015-11-29 03:25:21 +03:00
handleChange = ( name , value ) => {
2015-12-07 19:27:48 +03:00
this . setState ( { ... this . state , [ name ] : value } ) ;
2015-11-08 01:38:26 +03:00
} ;
render ( ) {
return (
< section >
< h5 > Inputs < / h 5 >
< p > lorem ipsum ... < / p >
2015-11-18 11:19:58 +03:00
< Input
type = 'text'
value = { this . state . normal }
2016-03-13 03:05:19 +03:00
label = 'First Name' onChange = { this . handleChange . bind ( this , 'normal' ) }
2015-11-18 11:19:58 +03:00
maxLength = { 12 }
/ >
2015-11-08 01:38:26 +03:00
< 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' / >
2016-03-10 07:23:35 +03:00
< Input type = 'email' value = { this . state . multilineHint } label = 'Description' hint = 'Enter Description' multiline onChange = { this . handleChange . bind ( this , 'multilineHint' ) } / >
2015-11-08 01:38:26 +03:00
< Input type = 'text' label = 'Disabled field' disabled / >
2016-03-13 03:05:19 +03:00
< Input type = 'tel' value = { this . state . withIcon } required label = 'With icon' onChange = { this . handleChange . bind ( this , 'withIcon' ) } icon = 'phone' / >
2016-05-21 19:57:49 +03:00
< Input type = 'tel' value = { this . state . withCustomIcon } label = 'With custom icon' onChange = { this . handleChange . bind ( this , 'withCustomIcon' ) } icon = 'favorite' / >
< Input type = 'text' value = { this . state . withHintCustomIcon } label = 'With Hint Text Icon' hint = 'Hint Text' onChange = { this . handleChange . bind ( this , 'withHintCustomIcon' ) } icon = 'share' / >
2015-11-08 01:38:26 +03:00
< / s e c t i o n >
) ;
}
}
2015-10-09 20:48:30 +03:00
2015-10-20 08:40:51 +03:00
export default InputTest ;