Merge pull request #86 from NuCivic/gpbw_91_highlight_links

Gpbw 91 highlight links
NuCivic · Oct 19, 2017 · 2379b44 · 2379b44
2 parents 3896047 + c9a21b9
commit 2379b44
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/examples/settings.js b/examples/settings.js
@@ -227,9 +227,32 @@ export var settings = {
           }
         }
       ]
+    },
+    {
+      id: 'highlight-row',
+      className: 'row',
+      children: [
+        {
+          type: 'Highlight',
+          key: 'highlight1',
+          data: [
+            {
+              cols: [
+                {rows:[
+                  {label: 'label 1', val: 'Value 1'},
+                  {label: 'Full Link', val: 'This is a full link', url:'http://google.com', isLink:true}
+                ]},
+                {rows:[
+                  {label: 'label 2', val: 'Value 2'}
+                ]}
+              ]
+            }
+          ]
+        }
+      ]
     }
   ]
-}
+};
 
 
 let climateVars = {

diff --git a/src/components/Highlight.js b/src/components/Highlight.js
@@ -7,20 +7,55 @@ export default class Highlight extends BaseComponent {
   render() {
     let cols = this.props.data[0].cols || [];
 
+    const existy = (obj) => {
+      return obj != null;
+    };
+
     return (
       <Card {...this.state.cardVariables}>
         <div className="highlight">
           { cols.map( (col, i) => {
               return <div className={"highlight-col highlight-cols-" + cols.length} key={i}>
                 { col.rows.map( (row, j) => {
                   let output = [];
+                  // Create label & val keys by stripping spaces from their values and appending the map index.
+                  let labelKey = (row.label.replace(/\s/g,'-')).toLowerCase() + j;
+                  let valKey = (row.val.slice(0,8)).replace(/\s/g,'-').toLowerCase() + j;
+
                   if (row.isLink) {
-                    output.push(<span className="highlight-val">
-                               <a href={row.val}>{ row.label ? row.label : row.val}</a>
-                             </span>)
+                    let label = existy(row.label);
+                    let value = existy(row.val);
+                    let url = existy(row.url);
+
+                    switch (true) {
+                      case (label && value && url) :
+                        output.push(<span className="highlight-label" key={labelKey}>{ row.label }</span>);
+                        output.push(<span className="highlight-val" key={valKey}>
+                          <a href={ row.url }>{ row.val }</a>
+                        </span>);
+                        break;
+                      case (!label && value && url):
+                        output.push(<span className="highlight-val" key={valKey}>
+                          <a href={ row.url }>{ row.val }</a>
+                        </span>);
+                        break;
+                      case (label && !value && url):
+                        output.push(<span className="highlight-val" key={labelKey}>
+                          <a href={ row.url }>{ row.label }</a>
+                        </span>);
+                        break;
+                      case ((label || value) && !url):
+                        output.push(<span className="highlight-val" key={row.val ? valKey : labelKey}>
+                               <a href={row.val ? row.val : row.label}>{ row.label ? row.label : row.val}</a>
+                             </span>);
+                        break;
+                      default:
+                        console.log('invalid or empty row values.')
+                    }
+
                   } else {
-                    output.push(<span className="highlight-label">{ row.label }</span>)
-                    output.push(<span className="highlight-val">{ row.val }</span>)
+                    output.push(<span className="highlight-label" key={labelKey}>{ row.label }</span>);
+                    output.push(<span className="highlight-val" key={valKey}>{ row.val }</span>)
                   }
                   return (
                     <div className="highlight-row" key={j}>