JSFiddle - React, Tailwind, and code Playground

by odoe

HTML

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<div id="map"></div>

JavaScript

define('templateBuilder', [
        'dojo/_base/lang',
        'dojox/lang/functional',
        'esri/InfoTemplate'], function (lang, func, InfoTemplate) {

        function isValidKey(key) {
            return !(key.indexOf('shape') > -1 || key === 'layername' || key === 'objectid' || key === 'fid');
        }

        function fieldValue(f, attr) {
            if ( !! attr) {
                return attr[f];
            } else {
                return ['${', f, '}'].join('');
            }
        }

        function defaultRow(f, attr) {
            return ['<tr><td class="fieldName">', f, '</td><td>', fieldValue(f, attr), '</td></tr>'].join('');
        }

        function linkRow(f, urlPrefix, attr) {
            return ['<tr><td class="fieldName">', f, '</td><td><a href="', urlPrefix, fieldValue(f, attr), '">', fieldValue(f, attr), '</a></td></tr>'].join('');
        }

        function parseInfoContent(content, opt, attr) {
            return function (f) {
                var fLowerCase = f.toLowerCase();
                if (isValidKey(fLowerCase)) {
                    if (fLowerCase !== opt.urlField) {
                        content.push(defaultRow(f, attr));
                    } else {
                        content.push(linkRow(f, opt.urlPrefix, attr));
                    }
                }
            };
        }

        function contentSeed(feature, opt, useAttributes) {
            var content = [],
                attr = null;
            if (useAttributes) {
                attr = feature.attributes;
            }
            content.push('<table cellspacing="0" class="table table-striped table-condensed attr-info">');
            if (feature.layerName) {
                content.push('<tr><td class="fieldName">SOURCE: </td><td class="fieldName">' + feature.layerName + '</td></tr>');
            }
            // iterate over attributes to populate content
            func.forEach(func.keys(feature.attributes), parseInfoContent(content, opt,...