Class Dropdown

apps/web/src/components/views/elements/Dropdown.tsx:118–421

 * javascript.
 */
export default class Dropdown extends React.Component<DropdownProps, IState> {
    private readonly buttonRef = createRef<HTMLDivElement>();
    private dropdownRootElement: HTMLDivElement | null = null;
    private ignoreEvent: MouseEvent | null = null;
    private childrenByKey: Record<string, ReactNode> = {};

    public constructor(props: DropdownProps) {
        super(props);

        this.reindexChildren(this.props.children);

        const firstChild = props.children[0];

        this.state = {
            // True if the menu is dropped-down
            expanded: false,
            // The key of the highlighted option
            // (the option that would become selected if you pressed enter)
            highlightedOption: firstChild.key,
            // the current search query
            searchQuery: "",
        };
    }

    public componentDidMount(): void {
        // Listen for all clicks on the document so we can close the
        // menu when the user clicks somewhere else
        document.addEventListener("click", this.onDocumentClick, false);
    }

    public componentDidUpdate(prevProps: Readonly<DropdownProps>): void {
        if (objectHasDiff(this.props, prevProps) && this.props.children?.length) {
            this.reindexChildren(this.props.children);
            const firstChild = this.props.children[0];
            this.setState({
                highlightedOption: firstChild.key,
            });
        }
    }

    public componentWillUnmount(): void {
        document.removeEventListener("click", this.onDocumentClick, false);
    }

    private reindexChildren(children: ReactElement[]): void {
        this.childrenByKey = {};
        React.Children.forEach(children, (child) => {
            this.childrenByKey[(child as DropdownProps["children"][number]).key] = child;
        });
    }

    private onDocumentClick = (ev: MouseEvent): void => {
        // Close the dropdown if the user clicks anywhere that isn't
        // within our root element
        if (ev !== this.ignoreEvent) {
            this.setState({
                expanded: false,
            });