OneNotePicker-JS/src/oneNoteSingleNotebookDropdown.tsx at master · OneNoteDev/OneNotePicker-JS · GitHub

This repository was archived by the owner on Sep 9, 2025. It is now read-only.

History

116 lines (97 loc) · 3.34 KB

Raw

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 (

</svg>

</div>

{this.props.dropdownLabel}

</div>

</a>

</div>

{this.state.popupVisible ?

{this.props.popupContentOverride ? this.props.popupContentOverride : <OneNoteSingleNotebookPicker {...newProps} />}

</div> :

undefined}

</div>

</LocalizedComponent>

);

}

OneNotePicker-JS/src/oneNoteSingleNotebookDropdown.tsx at master · OneNoteDev/OneNotePicker-JS · GitHub

Uh oh!

Expand file tree

Breadcrumbs

oneNoteSingleNotebookDropdown.tsx

Latest commit

History

Breadcrumbs

oneNoteSingleNotebookDropdown.tsx

File metadata and controls