Pick 0.4.0 commits

README.md

@@ -1,3 +1,66 @@
-# flip-timer
+# react-flip-counter
 
-React flip counter. Docs in progress, checkout example https://jeka1985.github.io/
+> React countdown timer,  like an 80-s flip clocks
+May be useful for stuff like promos, sales, launch landings and so on.
+
+## Install
+```
+npm i --save react-flip-counter
+```
+
+## Webpack configuation
+
+As react-flip-counter contains JSX syntax and has CSS resources,
+it must be parsed with babel and CSS loader.
+
+You may have a list of such UI modules, so it might be useful
+create array with such types of modules names and use it as
+loader includes with main src folder
+
+```
+var uiModules = ['react-flip-counter'],
+    includes = uiModules.reduce((res, name) => {
+      res.push(path.resolve(root, 'node_modules/' + name));
+
+      return res;
+    }, [path.resolve(root, 'src/')]);
+```
+
+Then you need to update loaders configuration
+and use include instead exclude property
+
+```
+rules: [
+  {
+    test: /\.js$/,
+    include: includes,
+    use: {
+      loader: 'babel',
+      ...
+    }
+  },
+  {
+    test: /\.css$/,
+    include: includes,
+    use: {
+      loader: 'css',
+      ...
+    }
+  }
+  ...
+]
+```
+
+## Usage
+```
+  <Counter
+    onStop={() => alert('stopped')}
+    stop={new Date('Wed Nov 15 2017 15:57:38 GMT+0300 (MSK)')}/>
+```    
+
+## Props
+* `onStop`
+Function to be called on time over
+
+* `stop`
+Time when counter shod stop and show all zeros. expect Date

package.json

@@ -1,36 +1,16 @@
 {
-  "name": "box-kit",
-  "version": "1.0.0",
-  "description": "Webpack + React start kit",
-  "main": "index.js",
-  "scripts": {
-    "test": "test",
-    "build": "webpack --progress",
-    "dev": "webpack-dev-server"
-  },
+  "name": "react-flip-counter",
+  "version": "0.4.0",
+  "description": "React flip countdown timer",
+  "main": "src/Countdown/index.js",
   "author": "Eugene Yemelin",
   "license": "ISC",
-  "babel": {
-    "presets": [
-      "es2015",
-      "react"
-    ]
-  },
-  "devDependencies": {
-    "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.7",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "css-loader": "^0.26.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "node-sass": "^3.13.0",
-    "postcss-loader": "^1.1.1",
-    "sass-loader": "^4.0.2",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2"
-  },
   "dependencies": {
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.0"
+  },
+  "peerDependencies": {
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0"
   }
 }

src/components/Flipper/index.js → src/Countdown/Flipper/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import cn from 'classnames';
 import schema from './schema.js';
-import './style.scss';
+import st from './style.scss';
 
-class Flipper extends React.PureComponent {
+class Flipper extends React.Component {
 
   constructor(props) {
     super(props);
@@ -11,7 +12,7 @@ class Flipper extends React.PureComponent {
      * @type {object}
      * @property {object} toggle - flag for switching index of current digit index
      */
-    this.state = { toggle: false }
+    this.state = {};
   }
 
   /**
@@ -71,14 +72,18 @@ class Flipper extends React.PureComponent {
    * @return {ReactElement} markup
    */
   render() {
-    return <div className='cards'>
+    return <div className={cn(st.cards, this.props.className)}>
       {this.getRange(this.props.now).map((val, i) => {
         return <div
           key={`flip-card${i}`}
-          className={`card${val == this.props.now ? ' now' : ''}`}>
-            <div className='sides'>
-              {['front', 'back'].map(key => <div key={`side${key}`} className={`side ${key}`}>
-                <div className='side-num'>
+          className={cn(st.card, this.props.cardClassName, {
+            [st.now]: val == this.props.now
+          })}>
+            <div className={cn(st.sides, this.props.sidesWrapClassName)}>
+              {['front', 'back'].map(key => <div
+                key={`side${key}`}
+                className={cn(st.side, this.props.sideClassName, st[key])}>
+                <div className={cn(st['side-num'], this.props.numClassName)}>
                   {key == 'front' ? val : this.getCount(val, 'next')}
                 </div>
               </div>)}

src/Countdown/Flipper/schema.js

@@ -0,0 +1,17 @@
+import { bool, number } from 'prop-types';
+
+export default {
+  types: {
+    reverse: bool,
+    now: number,
+    min: number,
+    max: number
+  },
+
+  defaults: {
+    reverse: false,
+    now: 0,
+    min: 0,
+    max: 9
+  }
+};

src/components/Flipper/style.scss → src/Countdown/Flipper/style.scss

@@ -66,7 +66,7 @@
 .side-num {
   height: 200%;
   font-size: 100px;
-  line-height: 1.1;
+  line-height: 0.93; // my bad.. 
   vertical-align: middle;
   text-align: center;
   box-sizing: border-box;

src/components/Countdown/index.js → src/Countdown/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import Flipper from '../Flipper';
+import cn from 'classnames';
+import Flipper from './Flipper';
 import schema from './schema.js';
-import './style.scss';
+import st from './style.scss';
 
-class Countdown extends React.PureComponent {
+class Countdown extends React.Component {
 
   constructor(props) {
     super(props);
@@ -14,14 +15,29 @@ class Countdown extends React.PureComponent {
      */
     this.state = {
       diff: this.getDiffObject()
-    }
+    };
   }
 
   /**
    * Create second interval
    */
   componentDidMount() {
-    this.interval = window.setInterval(() => this.updateTime(), 1000);
+    if (!this.isTimeOver(this.state.diff)) {
+      this.interval = window.setInterval(() => {
+        this.setState({ diff: this.getDiffObject() });
+        this.isTimeOver() && this.stopCount();
+      }, 1000);
+    } else {
+      this.stopCount();
+    }
+  }
+
+  /**
+   * Clears interval and drop notification
+   */
+  stopCount() {
+    window.clearInterval(this.interval);
+    this.props.onStop && this.props.onStop();
   }
 
   /**
@@ -36,7 +52,7 @@ class Countdown extends React.PureComponent {
    * @return {Object} formatted value
    */
   getDiffObject() {
-    var ms = Math.abs(this.props.stop - (new Date()).getTime()),
+    var ms = Math.abs(this.props.stop.getTime() - (new Date()).getTime()),
         s = Math.floor(ms / 1000),
         m = Math.floor(s / 60),
         h = Math.floor(m / 60),
@@ -51,10 +67,11 @@ class Countdown extends React.PureComponent {
   }
 
   /**
-   * Update state with calcualted diff object
+   * Return flag stop date reached
+   * @return {Boolean}
    */
-  updateTime() {
-    this.setState({ diff: this.getDiffObject() });
+  isTimeOver() {
+    return (new Date()).getTime() > this.props.stop.getTime();
   }
 
   /**
@@ -76,21 +93,25 @@ class Countdown extends React.PureComponent {
       hours: [ [0,2], [0,4] ],
       minutes: [ [0,5], [0,9] ],
       seconds: [ [0,5], [0,9] ]
-    };
+    },
+    isOver = this.isTimeOver();
 
-    return <div className='countdown'>
+    return <div className={cn(st.countdown, this.props.className)}>
       {Object.keys(this.state.diff).map(key => <div
-          key={key}
-          className={`countdown-${key}`}>
-            {Array(2).fill(0).map((_, i) => <Flipper
-              key={`${key}${i}`}
-              reverse
-              now={+this.getFormattedVal(this.state.diff[key])[i]}
-              min={forks[key][i][0]}
-              max={forks[key][i][1]}
-            />)}
-        </div>
-      )}
+        key={key}
+        className={cn(st[`countdown-${key}`], this.props.slotClassName)}>
+        {Array(2).fill(0).map((_, i) => <Flipper
+          key={`${key}${i}`}
+          reverse
+          className={this.props.cardsClassName}
+          cardClassName={this.props.cardClassName}
+          sidesWrapClassName={this.props.sidesWrapClassName}
+          sideClassName={this.props.sideClassName}
+          numClassName={this.props.numClassName}
+          now={!isOver ? +this.getFormattedVal(this.state.diff[key])[i] : 0}
+          min={forks[key][i][0]}
+          max={forks[key][i][1]}/>)}
+      </div>)}
     </div>;
   }
 };

src/Countdown/schema.js

@@ -0,0 +1,14 @@
+import { instanceOf, func } from 'prop-types';
+
+export default {
+
+  types: {
+    stop: instanceOf(Date),
+    onStart: func,
+    onStop: func
+  },
+
+  defaults: {
+    stop: new Date("Mon Nov 30 2020 00:00:00 GMT+0300 (MSK)")
+  }
+};