@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
22 lines (21 loc) • 1.9 kB
JavaScript
import { __assign, __rest } from "tslib";
import clsx from 'clsx';
import React, { useRef } from 'react';
import InternalInput from '../input/internal';
import { useTelemetry } from '../internal/hooks/use-telemetry';
import { getBaseProps } from '../internal/base-component';
import useForwardFocus from '../internal/hooks/forward-focus';
import { fireNonCancelableEvent } from '../internal/events';
import styles from './styles.css.js';
var TextFilter = React.forwardRef(function (_a, ref) {
var filteringText = _a.filteringText, filteringAriaLabel = _a.filteringAriaLabel, filteringPlaceholder = _a.filteringPlaceholder, disabled = _a.disabled, countText = _a.countText, onChange = _a.onChange, onDelayedChange = _a.onDelayedChange, rest = __rest(_a, ["filteringText", "filteringAriaLabel", "filteringPlaceholder", "disabled", "countText", "onChange", "onDelayedChange"]);
useTelemetry('TextFilter');
var inputRef = useRef(null);
var baseProps = getBaseProps(rest);
useForwardFocus(ref, inputRef);
var showResults = filteringText && countText && !disabled;
return (React.createElement("span", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root) }),
React.createElement(InternalInput, { ref: inputRef, className: styles.input, type: "search", ariaLabel: filteringAriaLabel, placeholder: filteringPlaceholder, value: filteringText, disabled: disabled, autoComplete: false, onChange: function (event) { return fireNonCancelableEvent(onChange, { filteringText: event.detail.value }); }, onDelayedInput: function (event) { return fireNonCancelableEvent(onDelayedChange, { filteringText: event.detail.value }); } }),
React.createElement("span", { "aria-live": "polite", "aria-atomic": "true", className: clsx(styles.results, showResults && styles['results-visible']) }, showResults ? countText : '')));
});
export default TextFilter;