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 };
@@ -17,8 +18,8 @@ class CountWidget extends Component {
   }
 
   // TODO: Move to component of its own
-  @bind 
-  countUp(fromValue, toValue) { 
+  @bind
+  countUp(fromValue, toValue) {
     const format = this.formatValue.bind(this);
     const startValue = isFinite(fromValue) ? fromValue : 0;
     const numberEl = this.numberEl;
@@ -34,7 +35,7 @@ class CountWidget extends Component {
         window.requestAnimationFrame(tick);
       }
     }
-    
+
     window.requestAnimationFrame(tick);
   }
 
@@ -46,7 +47,7 @@ class CountWidget extends Component {
       switch(this.props.format) {
         case "percentage":
           formattedValue = numbers.formatPercentage(value)
-        break;  
+        break;
 
         default:
         case "number":
@@ -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;}
@@ -24,7 +25,7 @@ function getNow() {
 
 // today, yesterday, this week, last 7 days, last 30 days
 const availablePeriods = {
-  'today': { 
+  'today': {
     label: 'Today',
     start: function() {
       const now = getNow();
@@ -35,7 +36,7 @@ const availablePeriods = {
       return new Date(now.getFullYear(), now.getMonth(), now.getDate());
     },
  },
-  'last-7-days': { 
+  'last-7-days': {
     label: 'Last 7 days',
     start: function() {
       const now = getNow();
@@ -46,7 +47,7 @@ const availablePeriods = {
       return new Date(now.getFullYear(), now.getMonth(), now.getDate());
     },
  },
-  'last-30-days': { 
+  'last-30-days': {
     label: 'Last 30 days',
     start: function() {
       const now = getNow();
@@ -57,7 +58,7 @@ const availablePeriods = {
       return new Date(now.getFullYear(), now.getMonth(), now.getDate());
     },
  },
-  'this-year': { 
+  'this-year': {
     label: 'This year',
     start: function() {
       const now = getNow();
@@ -117,7 +118,7 @@ class DatePicker extends Component {
       period: period || '',
       startDate: startDate,
       endDate: endDate,
-      before: before, 
+      before: before,
       after: after,
     });
 
@@ -127,7 +128,7 @@ class DatePicker extends Component {
         this.props.onChange(this.state);
         this.timeout = null;
 
-        window.localStorage.setItem('period', this.state.period) 
+        window.localStorage.setItem('period', this.state.period)
         window.history.replaceState(this.state, null, `#!${this.state.period}`)
       }, 2)
     }
@@ -149,12 +150,12 @@ class DatePicker extends Component {
     return date.getFullYear() + '-' + padZero(date.getMonth() + 1) + '-' + padZero(date.getDate());
   }
 
-  @bind 
+  @bind
   setStartDate(date) {
     this.setDateRange(date, this.state.endDate, '')
   }
 
-  @bind 
+  @bind
   setEndDate(date) {
     this.setDateRange(this.state.startDate, date, '')
   }
@@ -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 (
@@ -198,7 +202,7 @@ class DatePicker extends Component {
         {links}
         <li class="custom">
           <Pikadayer value={this.dateValue(state.startDate)} onSelect={this.setStartDate} />
-          <span style="margin: 0 8px"> to </span> 
+          <span style="margin: 0 8px"> to </span>
           <Pikadayer value={this.dateValue(state.endDate)} onSelect={this.setEndDate}  />
         </li>
       </ul>

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;
 
@@ -31,7 +32,7 @@ class Table extends Component {
   @bind
   fetchRecords(before, after) {
     this.setState({ loading: true });
-  
+
     Client.request(`${this.props.endpoint}?before=${before}&after=${after}&limit=${this.state.limit}`)
       .then((d) => {
          // request finished; check if timestamp range is still the one user wants to see
@@ -39,7 +40,7 @@ class Table extends Component {
           return;
         }
 
-        this.setState({ 
+        this.setState({
           loading: false,
           records: d,
         });
@@ -48,7 +49,7 @@ class Table extends Component {
      // fetch totals too
      Client.request(`${this.props.endpoint}/pageviews?before=${before}&after=${after}`)
       .then((d) => {
-        this.setState({ 
+        this.setState({
           total: d
         });
       });
@@ -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,19 +75,19 @@ 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>           
+        <div class="cell">{numbers.formatPretty(p.Visitors)||"-"}</div>
       </div>
     )}) : <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",