/* @flow */ import React, { forwardRef } from 'react' import classnames from 'classnames' import { Body, Caption, Card, Flex, Icon } from '../' import { globalProps } from '../utilities/globalProps.js' import { buildAriaProps, buildDataProps } from '../utilities/props' type TextInputProps = { aria?: object, className: string, data?: object, dark?: boolean, disabled?: boolean, error?: string, id?: string, inline?: boolean, name: string, label: string, onChange: (String) => void, placeholder: string, required?: boolean, type: string, value: string | number, children: Node, addOn?: { icon?: string, alignment?: "right" | "left", border?: boolean, }, } const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => { const { aria = {}, className, data = {}, dark = false, disabled, error, id, inline = false, name, label, onChange = () => {}, placeholder, required, type = 'text', value = '', children = null, addOn = { icon: null, alignment: 'right', border: true }, } = props const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const { alignment, border, icon } = addOn const addOnAlignment = alignment === 'left' ? 'left' : 'right' const borderToChange = addOnAlignment === 'left' ? 'right' : 'left' const borderToggle = border === false ? 'off' : 'on' const borderCss = `border_${borderToChange}_${borderToggle}` const shouldShowAddOn = icon !== null const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null const css = classnames([ 'pb_text_input_kit', inline ? 'inline' : null, error ? 'error' : null, globalProps(props), className, ]) const addOnIcon = ( ) const textInput = ( ) const addOnInput = ( {addOnIcon} {textInput} {textInput} {addOnIcon} ) return (

{children} {addOnInput} {textInput}

) } export default forwardRef(TextInput)