terriajs/lib/ReactViews/StandardUserInterface/processCustomElements.js

Geospatial data visualization platform.

import React from 'react';
import {Nav, Menu, ExperimentalMenu} from './customizable/Groups';

const GROUP_ELEMENT_TO_KEY_MAPPING = {
    'menu': Menu,
    'nav': Nav,
    'experimentalMenu': ExperimentalMenu
};

const groupElementKeys = Object.keys(GROUP_ELEMENT_TO_KEY_MAPPING);

/**
 * Processes custom elements that are specified as the children of StandardUserInterface.
 *
 * @param isSmallScreen Whether to display components for large or small screens - this will be passed to child components
 *      as a "smallScreen" prop if it's defined in the child component's propTypes. This is mainly used with the
 *      {@link ResponsiveSwitch} HOC.
 * @param customUI {Array<Element>} An array of elements - these should be grouping elements like <Nav> and <Menu> that in turn
 *      have other elements specified as children.
 * @returns {Object<Array<Element>>} An index of arrays of custom elements against where they should go - e.g. an array
 *      for "menu", an array for "nav" etc.
 */
export default function processCustomElements(isSmallScreen, customUI) {
    const groupElements = React.Children.toArray(customUI);

    return groupElements.reduce((soFar, groupElement) => {
        const key = findKeyForGroupElement(groupElement);
        soFar[key] = soFar[key].concat(getGroupChildren(isSmallScreen, groupElement));

        return soFar;
    }, buildEmptyAccumulator());
}

/** Builds an empty accumulator object - each location for custom elements will have an empty array in the return object */
function buildEmptyAccumulator() {
    return groupElementKeys.reduce((acc, key) => {
        acc[key] = [];
        return acc;
    }, {});
}

/** Finds the associated key string for the grouping element provided - e.g. a <Nav> element will resolve to 'nav' */
function findKeyForGroupElement(groupElement) {
    return groupElementKeys.filter(key => groupElement.type === GROUP_ELEMENT_TO_KEY_MAPPING[key])[0];
}

/**
 * Gets the children out of a grouping element and sanitises them - e.g. plain strings are converted to <span>s and
 * elements that need to know about whether we're in small screen configuration are provided with that prop.
 *
 * @param isSmallScreen {boolean} Is the screen small?
 * @param groupElement {Element} a grouping element to get children from.
 * @returns {Array<Element>} a collection of processed children.
 */
function getGroupChildren(isSmallScreen, groupElement) {
    return React.Children.map(groupElement.props.children, child => {
        if (typeof child === 'string') {
            return (<span>{child}</span>);
        } else if (child && child.type.propTypes && child.type.propTypes.smallScreen) {
            return React.cloneElement(child, {
                smallScreen: isSmallScreen
            });
        } else {
            return child;
        }
    });
}