import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group'; import { css } from '@patternfly/react-styles'; import { TextInputGroupContext } from './TextInputGroup'; import { TextInputGroupIcon } from './TextInputGroupIcon'; import { statusIcons, ValidatedOptions } from '../../helpers'; export interface TextInputGroupMainProps extends Omit, 'onChange'> { /** Content rendered inside the text input group main div */ children?: React.ReactNode; /** Additional classes applied to the text input group main container */ className?: string; /** Icon to be shown on the left side of the text input group main container */ icon?: React.ReactNode; /** Type that the input accepts. */ type?: | 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url'; /** Suggestion that will show up like a placeholder even with text in the input */ hint?: string; /** Callback for when there is a change in the input field*/ onChange?: (event: React.FormEvent, value: string) => void; /** Callback for when the input field is focused*/ onFocus?: (event?: any) => void; /** Callback for when focus is lost on the input field*/ onBlur?: (event?: any) => void; /** Accessibility label for the input */ 'aria-label'?: string; /** Value for the input */ value?: string | number; /** Placeholder value for the input */ placeholder?: string; /** @hide A reference object to attach to the input box */ innerRef?: React.RefObject; /** Name for the input */ name?: string; /** The id of the active element. Required if role has a value of "combobox", and focus * should remain on the input. */ 'aria-activedescendant'?: string; /** Determines the accessible role of the input. */ role?: string; /** Flag for whether an associated element controlled by the input is visible. Required if * role has a value of "combobox". */ isExpanded?: boolean; /** The id of the element(s) controlled by the input. Required if role has a value of "combobox". */ 'aria-controls'?: string; /** The id of the input element */ inputId?: string; } const TextInputGroupMainBase: React.FunctionComponent = ({ children, className, icon, type = 'text', hint, onChange = (): any => undefined, onFocus, onBlur, 'aria-label': ariaLabel = 'Type to filter', value: inputValue, placeholder: inputPlaceHolder, innerRef, name, 'aria-activedescendant': ariaActivedescendant, role, isExpanded, 'aria-controls': ariaControls, inputId, ...props }: TextInputGroupMainProps) => { const { isDisabled, validated } = React.useContext(TextInputGroupContext); const ref = React.useRef(null); const textInputGroupInputInputRef = innerRef || ref; const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated]; const handleChange = (event: React.FormEvent) => { onChange(event, event.currentTarget.value); }; return (
{children} {hint && ( )} {icon && {icon}}