import React, { forwardRef } from 'react' import classnames from 'classnames' import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps' import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props' import Flex from '../pb_flex/_flex' import Card from '../pb_card/_card' import Caption from '../pb_caption/_caption' import Body from '../pb_body/_body' import Icon from '../pb_icon/_icon' type TextInputProps = { aria?: { [key: string]: string }, className?: string, data?: { [key: string]: string }, dark?: boolean, disabled?: boolean, error?: string, htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string, inline?: boolean, name: string, label: string, onChange: (e: React.FormEvent) => void, placeholder: string, required?: boolean, type: string, value: string | number, children: Node, addOn?: { icon?: string, alignment?: "right" | "left", border?: boolean, }, } & GlobalProps const TextInput = (props: TextInputProps, ref: React.LegacyRef) => { const { addOn = { icon: null, alignment: 'right', border: true }, aria = {}, className, dark = false, data = {}, disabled, error, htmlOptions = {}, id, inline = false, name, label, onChange = () => { void 0 }, placeholder, required, type = 'text', value = '', children = null, } = props const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const htmlProps = buildHtmlProps(htmlOptions) 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' : "" const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : "" const css = classnames([ 'pb_text_input_kit', inline ? 'inline' : "", error ? 'error' : "", globalProps(props), className, ]) const addOnIcon = ( ) const textInput = ( ) const addOnInput = ( {addOnAlignment == 'left' && <> {addOnIcon} {textInput} } {addOnAlignment != 'left' && <> {textInput} {addOnIcon} } ) const render = (() => { if(children) return children if (shouldShowAddOn) return addOnInput return textInput })() return (
{label && }
{render} {error && }
) } export default forwardRef(TextInput)