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 : '' ,
2016-10-13 03:15:33 +03:00
multilineHint : 'Long Description here' ,
2017-01-26 20:05:32 +03:00
multilineRows : 'A\n\B\nC\nD\nE\nF' ,
2015-11-08 01:38:26 +03:00
} ;
2017-05-22 19:28:16 +03:00
handleChange = ( value , ev ) => {
this . setState ( { [ ev . target . name ] : value } ) ;
2015-11-08 01:38:26 +03:00
} ;
2017-01-26 20:05:32 +03:00
render ( ) {
2015-11-08 01:38:26 +03:00
return (
< section >
< h5 > Inputs < / h 5 >
< p > lorem ipsum ... < / p >
2015-11-18 11:19:58 +03:00
< Input
2017-01-26 20:05:32 +03:00
type = "text"
2017-05-22 19:28:16 +03:00
name = "normal"
2015-11-18 11:19:58 +03:00
value = { this . state . normal }
2017-05-22 19:28:16 +03:00
label = "First Name" onChange = { this . handleChange }
2015-11-18 11:19:58 +03:00
maxLength = { 12 }
/ >
2017-05-22 19:28:16 +03:00
< Input type = "email" name = "fixedLabel" value = { this . state . fixedLabel } label = "Label fixed" floating = { false } onChange = { this . handleChange } / >
2017-01-26 20:05:32 +03:00
< Input type = "text" value = "Read only" readOnly label = "Phone Number" / >
2017-08-09 14:01:03 +03:00
< Input type = "email" name = "multilineHint" value = { this . state . multilineHint } label = "Description" hint = "Enter Description" multiline onChange = { this . handleChange } / >
2017-05-22 19:28:16 +03:00
< Input type = "text" name = "multilineRows" value = { this . state . multilineRows } label = "Row Limited Description" hint = "Enter Description" multiline rows = { 4 } onChange = { this . handleChange } / >
2017-01-26 20:05:32 +03:00
< Input type = "text" label = "Disabled field" disabled / >
2017-05-22 19:28:16 +03:00
< Input type = "tel" name = "withIcon" value = { this . state . withIcon } required label = "With icon" onChange = { this . handleChange } icon = "phone" / >
< Input type = "tel" name = "withCustomIcon" value = { this . state . withCustomIcon } label = "With custom icon" onChange = { this . handleChange } icon = "favorite" / >
< Input type = "text" name = "withHintCustomIcon" value = { this . state . withHintCustomIcon } label = "With Hint Text Icon" hint = "Hint Text" onChange = { this . handleChange } 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 ;