-
Notifications
You must be signed in to change notification settings - Fork 181
/
select__filter.tsx
81 lines (69 loc) · 2.14 KB
/
select__filter.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React, {Component, ComponentType, RefCallback} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Input, {InputAttrs} from '../input/input';
import sniffr from '../global/sniffer';
import {ActiveItemContext} from '../list/list';
import {I18nContext} from '../i18n/i18n-context';
import styles from './select-popup.css';
function noop() {}
type SelectFilterProps = InputAttrs & {
inputRef: RefCallback<HTMLInputElement | HTMLTextAreaElement>
listId?: string | undefined
}
export default class SelectFilter extends Component<SelectFilterProps> {
static defaultProps = {
inputRef: noop
};
componentWillUnmount() {
this.blur();
}
focus() {
const {input} = this;
if (input && input !== document.activeElement) {
sniffr.browser.name === 'firefox' ? input.select() : input.focus();
}
}
blur() {
if (this.input && this.input === document.activeElement) {
this.input.blur();
}
}
input?: HTMLInputElement | HTMLTextAreaElement | null;
inputRef = (el: HTMLInputElement | HTMLTextAreaElement | null) => {
this.input = el;
this.props.inputRef(el);
};
render() {
const {className, listId, ...restProps} = this.props;
const classes = classNames(styles.filter, className);
return (
<ActiveItemContext.ValueContext.Consumer>
{activeItemId => (
<I18nContext.Consumer>
{({translate}) => (
<Input
{...restProps}
placeholder={restProps.placeholder ?? translate('filterItems')}
aria-owns={listId}
aria-activedescendant={activeItemId}
autoComplete="off"
autoFocus
borderless
inputRef={this.inputRef}
className={classes}
/>
)}
</I18nContext.Consumer>
)}
</ActiveItemContext.ValueContext.Consumer>
);
}
}
(SelectFilter as ComponentType<unknown>).propTypes = {
placeholder: PropTypes.string,
className: PropTypes.string,
inputRef: PropTypes.func,
listId: PropTypes.string,
activeItemId: PropTypes.string
};