Sha256: 6d7b6d415d00bd6d23f95defcbafdc97cbd4ed7b83391b6e53cdee0b846beebb
Contents?: true
Size: 1.71 KB
Versions: 9
Compression:
Stored size: 1.71 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,
}) => {
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"
onChange={onChangeWrapper}
type="search"
iconVariant={autoSearchEnabled && 'search'}
placeholder={placeholder}
/>
{
value && (
<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,
};
TypeAheadInput.defaultProps = {
isDisabled: undefined,
placeholder: '',
};
export default TypeAheadInput;
Version data entries
9 entries across 9 versions & 1 rubygems