import { ComponentMeta , ComponentStory } from '@storybook/react-native' ; import React , { useState } from 'react' ; import { Button as NativeButton , StyleSheet , TextInput , View } from 'react-native' ; import { InputButton } from '../src' ; import { CenteredView , InnerStory } from './components' ; const meta = { title : 'Button/InputButton' , component : InputButton , argTypes : { onFocus : { action : 'pressed the input button' } , onPress : { action : 'focused the input button' } } , args : { value : 'My InputButton' } } ; export default meta ; export const Basic = ( args ) => { return ( < CenteredView > < InputButton { ... args } / > < /CenteredView>); } ; export const Compare = ( { value : initialValue , ... args } ) => { const [ value , setValue ] = useState < string > ( initialValue || '' ) ; return ( < CenteredView > < InnerStory legend = "basic" > < InputButton value = { value } { ... args } /> < TextInput onChangeText = { setValue } value = { value } / > < /InnerStory> < InnerStory legend = "with style" > < InputButton style = { inputStyle } value = { value } { ... args } /> < TextInput style = { inputStyle } onChangeText = { setValue } value = { value } / > < /InnerStory> < InnerStory legend = "with placeholder" > < InputButton style = { inputStyle } placeholder = { value } { ... args } /> < TextInput style = { inputStyle } placeholder = { value } / > < /InnerStory> < InnerStory legend = "non editable" > < InputButton style = { inputStyle } value = { value } editable = { false } { ... args } /> < TextInput style = { inputStyle } onChangeText = { setValue } value = { value } editable = { false } / > < /InnerStory> < /CenteredView>); } ; const inputStyle = { height : 60 , width : 120 , margin : 12 , fontSize : 18 , backgroundColor : 'white' , borderColor : 'gray' , color : 'darkred' , borderWidth : 1 } ;