React - MultiHover

MultiHover.js

/* @flow */

import { Set } from 'immutable';

/*
 * Hover state manager for multiple elements.
 *
 * Usage:
 *
 * onHoverChange callback is called whenever the mouse enter the group
 * of elements, and whenever it leaves them.
 *
 * Inject mouse events handlers on all the elements, provided by the method `handlers`.
 */
class MultiHover {
    hoverSet: Set<string> = new Set();
    onHoverChange: *;

    constructor(onHoverChange: (hovered: boolean) => void) {
        this.onHoverChange = onHoverChange;
    }

    onChange(newHoverSet: *) {
        const oldHoverSet = this.hoverSet;
        this.hoverSet = newHoverSet;

        const hoveredChange = oldHoverSet.isEmpty() !== newHoverSet.isEmpty();

        if (hoveredChange) {
            const hovered = !newHoverSet.isEmpty();
            this.onHoverChange(hovered);
        }
    }

    /*
     * Returns the mouse event handlers to follow the hover state of a
     * React component
     */
    handlers(key: string) {
        return {
            onMouseEnter: () => {
                this.onChange(this.hoverSet.add(key));
            },

            onMouseLeave: () => {
                this.onChange(this.hoverSet.delete(key));
            }
        };
    }
}

export default MultiHover;