Sha256: ae7554a2d540937b8c43fcfde5bc2637d191dfb741d2caefb8fee762b33ecc3b
Contents?: true
Size: 1.84 KB
Versions: 6
Compression:
Stored size: 1.84 KB
Contents
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { TextInput, Button } from '@patternfly/react-core';
import { TimesIcon } from '@patternfly/react-icons';
import useEventListener from '../../../utils/useEventListener';
import { commonInputPropTypes } from '../helpers/commonPropTypes';
import './TypeAheadInput.scss';
const TypeAheadInput = ({
onKeyPress, onInputFocus, passedProps, isDisabled, autoSearchEnabled, placeholder, isTextInput,
}) => {
const inputRef = useRef(null);
const {
onChange, value, clearSearch, ...downshiftProps
} = passedProps;
// What patternfly4 expects for args and what downshift creates as a function is different,
// downshift only expects the event handler
const onChangeWrapper = (_userValue, event) => onChange(event);
useEventListener('keydown', onKeyPress, inputRef.current);
return (
<>
<TextInput
isDisabled={isDisabled}
value={value}
{...downshiftProps}
ref={inputRef}
onFocus={onInputFocus}
aria-label="text input for search"
ouiaId="type-ahead-input"
onChange={onChangeWrapper}
type="text"
iconVariant={autoSearchEnabled && !isTextInput ? 'search' : undefined}
placeholder={placeholder}
/>
{
(value && !isTextInput) &&
<Button
variant={autoSearchEnabled ? 'plain' : 'control'}
className="search-clear"
onClick={clearSearch}
>
<TimesIcon />
</Button>}
</>);
};
TypeAheadInput.propTypes = {
isDisabled: PropTypes.bool,
autoSearchEnabled: PropTypes.bool.isRequired,
...commonInputPropTypes,
placeholder: PropTypes.string,
isTextInput: PropTypes.bool,
};
TypeAheadInput.defaultProps = {
isDisabled: undefined,
placeholder: '',
isTextInput: false,
};
export default TypeAheadInput;
Version data entries
6 entries across 6 versions & 1 rubygems