import * as React from 'react' ; import styled from 'styled-components' ; import { Button , ButtonSize , ButtonState } from '../button' ; import { PropertyInputStyles } from '../property-input' ; const StyledWrapper = styled . div `
	position: relative;
	width: 100%;
	display: flex;
` ; const StyledInput = styled . input `
	${ PropertyInputStyles };
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
` ; const StyledButton = styled ( Button ) `
	flex-shrink: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
` ; export interface InputButtonProps { className ? : string ; onBlur ? : React . FocusEventHandler < HTMLInputElement > ; onChange ? : React . ChangeEventHandler < HTMLInputElement > ; onSubmit ? : React . FormEventHandler < HTMLElement > ; placeholder ? : string ; disabled ? : boolean ; value ? : string ; state ? : ButtonState ; isValid : ( ) => boolean ; } export const InputButton = props => ( < StyledWrapper as = "form" onSubmit = { props . onSubmit } > < StyledInput onChange = { props . onChange } onBlur = { props . onBlur } type = "text" value = { props . value || '' } placeholder = { props . placeholder } disabled = { props . disabled } / > < StyledButton type = "submit" disabledAppearance = { props . isValid ? ! props . isValid ( ) : true } size = { ButtonSize . Medium } state = { props . state } > { props . children } < /StyledButton> < /StyledWrapper>);