import React from 'react' ; import { usePropsResolution } from '../../../hooks' ; import type { ITextFieldProps } from './types' ; import { Stack } from '../../primitives/Stack' ; import { Input } from '../../primitives/Input' ; import Text from '../../primitives/Text' ; import { extractInObject , stylingProps } from '../../../theme/tools/utils' ; import Select from '../../primitives/Select' ; import TextArea from '../../primitives/TextArea' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const TextField = ( mainProps , ref ? ) => { const { children , helperText , errorMessage , InputLeftElement , InputRightElement , dropdownIcon , ... props } = mainProps ; const { divider , _errorMessageProps , _helperTextProps , component , ... resolvedProps } = usePropsResolution ( 'TextField' , props ) ; const [ layoutProps , componentProps ] = extractInObject ( resolvedProps , [ 'space' , 'reversed' , ... stylingProps . margin , ... stylingProps . layout , ... stylingProps . flexbox , ... stylingProps . position , ] ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } const activeComponent = ( ) => { switch ( component ) { case 'select' : return ( < Select { ... componentProps } dropdownIcon = { dropdownIcon } > { children } < /Select>); case 'textarea' : return < TextArea { ... componentProps } ref = { ref } / > ; default : return ( < Input InputLeftElement = { InputLeftElement } InputRightElement = { InputRightElement } { ... componentProps } ref = { ref } / > ) ; } } ; return ( < Stack divider = { divider } { ... layoutProps } > { activeComponent ( ) } { componentProps . isInvalid && ( < Text { ... _errorMessageProps } > { errorMessage } < /Text>)} { ! componentProps . isInvalid && ( < Text { ... _helperTextProps } > { helperText } < /Text>)} < /Stack>); } ; export default React . memo ( React . forwardRef ( TextField ) ) ;