import React from 'react' ; import { FieldOption , FormValues , LoginFormFK } from '../LoginFormFK' ; import { storiesOf } from '@storybook/react' ; import { StyleProp , TextStyle , ViewStyle } from 'react-native' ; import { object , text } from '@storybook/addon-knobs' ; const onSubmit = ( values ) => { alert ( `${ text ( 'title' , 'Values submitted:' ) } ${ values . emailAddress } ${ values . password }` ) ; } ; const renderLoginForm = ( ) => { return ( ( ) => ( < LoginFormFK onSubmit = { onSubmit } / > ) ) ; } ; const renderCustomLoginForm = ( ) => { const fieldOptions = { emailAddress : { placeholder : text ( 'title' , 'Username' ) } , password : { placeholder : text ( 'title' , 'Password' ) } } ; const fieldStyle = { height : 50 } ; const labelStyle = { marginBottom : 20 , fontWeight : 'bold' } ; const buttonStyle = { backgroundColor : 'navy' } ; return ( ( ) => ( < LoginFormFK onSubmit = { onSubmit } fieldsOptions = { fieldOptions } fieldStyle = { object ( 'style' , fieldStyle ) } labelStyle = { object ( 'style' , labelStyle ) } submitButtonStyle = { object ( 'style' , buttonStyle ) } submitText = { text ( 'title' , 'Login' ) } / > ) ) ; } ; storiesOf ( 'LoginFormFK' , module ) . add ( 'basic usage' , renderLoginForm ( ) ) . add ( 'custom styling' , renderCustomLoginForm ( ) ) ;