This repository was archived by the owner on Sep 9, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathoneNoteSingleNotebookDropdown.tsx
More file actions
116 lines (97 loc) · 3.34 KB
/
oneNoteSingleNotebookDropdown.tsx
File metadata and controls
116 lines (97 loc) · 3.34 KB
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import * as React from 'react';
import { LocalizedComponent } from './localizedComponent';
import { OneNoteSingleNotebookPickerProps, OneNoteSingleNotebookPicker } from './oneNoteSingleNotebookPicker';
export interface OneNoteSingleNotebookDropdownState {
popupVisible: boolean;
}
export interface OneNoteSingleNotebookDropdownProps extends OneNoteSingleNotebookPickerProps {
dropdownLabel: string;
popupDirection: 'bottom' | 'top';
popupContentOverride?: JSX.Element;
}
export class OneNoteSingleNotebookDropdown extends React.Component<OneNoteSingleNotebookDropdownProps, OneNoteSingleNotebookDropdownState> {
private wrapperRef: Node;
constructor(props: OneNoteSingleNotebookDropdownProps) {
super(props);
this.state = {
popupVisible: false
};
this.setWrapperRef = this.setWrapperRef.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
onClick() {
this.setState({
popupVisible: !this.state.popupVisible
});
}
onPickerItemClicked() {
this.setState({
popupVisible: false
});
}
private setWrapperRef(node) {
this.wrapperRef = node as Node;
}
private handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.contains(event.target) && this.state.popupVisible) {
this.setState({
popupVisible: false
});
}
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
render() {
const newCallbacks = { ...this.props.globals.callbacks };
if (newCallbacks.onRecentSectionSelected) {
const decorated = newCallbacks.onRecentSectionSelected;
newCallbacks.onRecentSectionSelected = (section, breadcrumbs) => {
this.onPickerItemClicked();
decorated(section, breadcrumbs);
};
}
if (newCallbacks.onSectionSelected) {
const decorated = newCallbacks.onSectionSelected;
newCallbacks.onSectionSelected = (section, breadcrumbs) => {
this.onPickerItemClicked();
decorated(section, breadcrumbs);
};
}
if (newCallbacks.onPageSelected) {
const decorated = newCallbacks.onPageSelected;
newCallbacks.onPageSelected = (page, breadcrumbs) => {
this.onPickerItemClicked();
decorated(page, breadcrumbs);
};
}
const newProps = { ...this.props };
newProps.globals.callbacks = newCallbacks;
return (
<LocalizedComponent stringOverrides={this.props.globals.strings}>
<div className='picker-dropdown' ref={this.setWrapperRef}>
<div className='picker-dropdown-padding'>
<a className='picker-dropdown-toggle' onClick={this.onClick.bind(this)}>
<div className='dropdown-arrow-container'>
<svg version='1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' focusable="false">
<polygon id='XMLID_10_' points='3.5,7 4.4,6.1 8,9.7 11.7,6.1 12.6,7 8,11.5' />
</svg>
</div>
<div className='picker-dropdown-toggle-label' title={this.props.dropdownLabel}>
{this.props.dropdownLabel}
</div>
</a>
</div>
{this.state.popupVisible ?
<div className={'picker-popup ' + (this.props.popupDirection === 'top' ? 'popup-upwards' : '')}>
{this.props.popupContentOverride ? this.props.popupContentOverride : <OneNoteSingleNotebookPicker {...newProps} />}
</div> :
undefined}
</div>
</LocalizedComponent>
);
}
}