import * as React from "react" ; import styled from "styled-components" ; import { colors , fonts } from "../styleConstants" ; import { InvertedButton , buttonSizes } from "../Button" ; import { NumericInput , TextInput , InputProps } from "./Input" ; export interface InputContainerProps { buttonText ? : string ; icon ? : JSX . Element ; children ( isFocused , setFocused , setUnfocused , setInputRef ) : React . ReactNode ; onButtonClick ? ( ev ) : void ; } export interface InputWithButtonProps extends InputProps { buttonText : string ; icon ? : JSX . Element ; onButtonClick ( ev ) : void ; } export interface InputWithButtonState { isFocused : boolean ; } const StyledTextInputButton = styled . div < InputWithButtonState > `
  border: 1px solid;
  border-color: ${ props => ( props . isFocused ? colors . accent . CIVIL_BLUE : colors . accent . CIVIL_GRAY_3 ) };
  border-radius: 3px;
  font-size: 21px;
  padding: 26px 20px;
  position: relative;

  & > div {
    margin: 0;
  }

  & > div > input,
  & > div > input:focus {
    border: none;
    margin: 0;
    padding: 0;
  }
` ; const StyledIcon = styled . div `
  color: ${ colors . accent . CIVIL_GRAY_2 };
  font-family: ${ fonts . SANS_SERIF };
  font-size: 18px;
  line-height: 21px;
  position: absolute;
  right: 40px;
  top: calc(50% - 10px);
` ; const StyledButtonContainer = styled . div `
  position: absolute;
  right: 40px;
  top: calc(50% - 18px);
` ; class InputContainer extends React . Component < InputContainerProps , InputWithButtonState > { private inputElement : HTMLInputElement | undefined = undefined ; private buttonElement : HTMLButtonElement | undefined = undefined ; constructor ( props ) { super ( props ) ; this . state = { isFocused : false , } ; } public render ( ) { return ( < StyledTextInputButton { ... this . state } > { this . props . children ( this . state . isFocused , this . setFocused , this . setUnfocused , this . setInputRef ) } { this . props . buttonText && this . state . isFocused && ( < StyledButtonContainer > < InvertedButton size = { buttonSizes . SMALL } onClick = { this . handleButtonClick } inputRef = { this . setButtonRef } > { this . props . buttonText } < /InvertedButton> < /StyledButtonContainer>)} { ! this . state . isFocused && this . props . icon && < StyledIcon > { this . props . icon } < /StyledIcon>} < /StyledTextInputButton>); } private handleButtonClick = ( ev ) => { if ( this . props . onButtonClick ) { this . props . onButtonClick ( ev ) ; } if ( this . inputElement ) { this . inputElement . blur ( ) ; this . _setUnfocused ( ) ; } } ; private setFocusState = ( isFocused ) : void => { this . setState ( ( ) => ( { isFocused } ) ) ; } ; private setFocused = ( ) => this . setFocusState ( true ) ; private _setUnfocused = ( ) => this . setFocusState ( false ) ; private setUnfocused = ( ev ) => { if ( ev . relatedTarget === this . buttonElement ) { ev . preventDefault ( ) ; } else { this . _setUnfocused ( ) ; } } ; private setInputRef = ( el ) => ( this . inputElement = el ) ; private setButtonRef = ( el ) => ( this . buttonElement = el ) ; } export const TextInputWithButton = props => { const { onButtonClick , icon , buttonText , ... restProps } = props ; const inputProps = { ... restProps , noLabel : true } ; const containerProps = { onButtonClick , buttonText , icon } ; return ( < InputContainer { ... containerProps } > { ( isFocused , setFocused , setUnfocused , setInputRef ) => { return ( < > < TextInput { ... inputProps } onFocus = { setFocused } onBlur = { setUnfocused } inputRef = { setInputRef } / > < />); } } < /InputContainer>); } ; export const CurrencyInputWithButton = props => { const { onButtonClick , icon , buttonText , ... restProps } = props ; const inputProps = { ... restProps , noLabel : true } ; const containerProps = { onButtonClick , buttonText , icon } ; return ( < InputContainer { ... containerProps } > { ( isFocused , setFocused , setUnfocused , setInputRef ) => { return ( < > < NumericInput { ... inputProps } onFocus = { setFocused } onBlur = { setUnfocused } inputRef = { setInputRef } / > < />); } } < /InputContainer>); } ; export const CurrencyInputWithoutButton = props => { const { icon , ... restProps } = props ; const inputProps = { ... restProps , noLabel : true } ; const containerProps = { icon } ; return ( < InputContainer { ... containerProps } > { ( isFocused , setFocused , setUnfocused , setInputRef ) => { return ( < > < NumericInput { ... inputProps } onFocus = { setFocused } onBlur = { setUnfocused } inputRef = { setInputRef } / > < />); } } < /InputContainer>); } ;