-
Notifications
You must be signed in to change notification settings - Fork 181
/
row-with-focus-sensor.tsx
56 lines (45 loc) · 1.51 KB
/
row-with-focus-sensor.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
import React, {PureComponent, ComponentType} from 'react';
import focusSensorHOC, {FocusSensorProps} from '../global/focus-sensor-hoc';
import Row, {RowProps} from './row';
import {SelectionItem} from './selection';
const getContainer = <T extends SelectionItem>() =>
focusSensorHOC<HTMLDivElement, RowProps<T>, typeof Row>(Row);
export interface RowWithFocusSensorCallbacksProps<T extends SelectionItem> extends Omit<
FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>,
'onFocus'
> {
onFocus?: (item: T) => void
onSelect?: (item: T, selected: boolean) => void
onCollapse?: (item: T) => void
onExpand?: (item: T) => void
}
export default class RowWithFocusSensorCallbacks<T extends SelectionItem>
extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
// https://stackoverflow.com/a/53882322/6304152
RowWithFocusSensor = getContainer<T>();
onFocus = () => {
this.props.onFocus?.(this.props.item);
};
onSelect = (item: T, selected: boolean) => {
this.props.onSelect?.(item, selected);
};
onCollapse = () => {
this.props.onCollapse?.(this.props.item);
};
onExpand = () => {
this.props.onExpand?.(this.props.item);
};
render() {
return (
<this.RowWithFocusSensor
{...this.props}
onFocus={this.onFocus}
onSelect={this.onSelect}
onCollapse={this.onCollapse}
onExpand={this.onExpand}
/>
);
}
}
(RowWithFocusSensorCallbacks as ComponentType<unknown>).propTypes =
(Row as ComponentType<unknown>).propTypes;