Merge pull request #144 from Gaya/classnames

Use classnames lib for dynamic CSS classes. Thanks @Gaya!

assets/src/js/components/CountWidget.js

@@ -3,6 +3,7 @@
 import { h, Component } from 'preact';
 import * as numbers from '../lib/numbers.js';
 import { bind } from 'decko';
+import classNames from 'classnames';
 
 const duration = 600;
 const easeOutQuint = function (t) { return 1+(--t)*t*t*t*t };
@@ -64,7 +65,7 @@ class CountWidget extends Component {
 
   render(props, state) {
     return (
-       <div class={"totals-detail " + ( props.loading ? "loading" : '')}>
+       <div class={classNames("totals-detail", { loading: props.loading })}>
         <div class="total-heading">{props.title}</div>
         <div class="total-numbers" ref={(e) => { this.numberEl = e; }}>{this.formatValue(props.value)}</div>
       </div>

assets/src/js/components/DatePicker.js

@@ -3,6 +3,7 @@
 import { h, Component } from 'preact';
 import { bind } from 'decko';
 import Pikadayer from './Pikadayer.js';
+import classNames from 'classnames';
 
 const defaultPeriod = 'last-7-days';
 const padZero = function(n){return n<10? '0'+n:''+n;}
@@ -189,8 +190,11 @@ class DatePicker extends Component {
   render(props, state) {
     const links = Object.keys(availablePeriods).map((id) => {
       let p = availablePeriods[id];
-      let className = ( id == state.period ) ? 'active' : '';
-      return <li class={className} ><a href="#" data-value={id} onClick={this.setPeriod}>{p.label}</a></li>
+      return (
+        <li class={classNames({ active: id == state.period })}>
+          <a href="#" data-value={id} onClick={this.setPeriod}>{p.label}</a>
+        </li>
+      );
     });
 
     return (

assets/src/js/components/Table.js

@@ -4,6 +4,7 @@ import { h, Component } from 'preact';
 import * as numbers from '../lib/numbers.js';
 import Client from '../lib/client.js';
 import { bind } from 'decko';
+import classNames from 'classnames';
 
 const dayInSeconds = 60 * 60 * 24;
 
@@ -59,9 +60,9 @@ class Table extends Component {
     const tableRows = state.records !== null && state.records.length > 0 ? state.records.map((p, i) => {
 
       let href = (p.Hostname + p.Pathname) || p.URL;
-      let classes = "table-row"; 
+      let widthClass = "";
       if(state.total > 0) {
-        classes += " w" + Math.min(98, Math.round(p.Pageviews / state.total * 100 * 2.5));
+        widthClass = "w" + Math.min(98, Math.round(p.Pageviews / state.total * 100 * 2.5));
       }
 
       let label = p.Pathname
@@ -74,7 +75,7 @@ class Table extends Component {
       }
 
       return(
-      <div class={classes}>
+      <div class={classNames("table-row", widthClass)}>
         <div class="cell main-col"><a href={href}>{label}</a></div>
         <div class="cell">{numbers.formatPretty(p.Pageviews)}</div>
         <div class="cell">{numbers.formatPretty(p.Visitors)||"-"}</div>
@@ -82,11 +83,11 @@ class Table extends Component {
     )}) : <div class="table-row"><div class="cell main-col">Nothing here, yet.</div></div>;
 
     return (
-      <div class={(state.loading ? "loading" : '')}>
+      <div class={classNames({ loading: state.loading })}>
         <div class="table-row header">
           {props.headers.map((header, i) => {
-            return (<div class={i === 0 ? 'main-col cell' : 'cell'}>{header}</div>) 
-            })}        
+            return <div class={classNames("cell", { "main-col": i === 0 })}>{header}</div>
+          })}
         </div>
         <div>
           {tableRows}

package-lock.json

@@ -1649,6 +1649,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "vinyl-source-stream": "^2.0.0"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "d3": "^5.4.0",
     "d3-tip": "^0.9.1",
     "d3-transition": "^1.1.1",