From cfa4b92c0c2e3ac42276521d1b84944e794d39d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20van=20Mil?= <rvanmil@me.com>
Date: Sun, 7 May 2017 22:40:01 +0200
Subject: [PATCH] master: add reverse prop to Wave component (#9)

---
 src/Wave/index.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Wave/index.js b/src/Wave/index.js
index 2f7d57f..6e60a57 100644
--- a/src/Wave/index.js
+++ b/src/Wave/index.js
@@ -7,7 +7,7 @@ import { animate, animationName, defaults, preside } from '../util'
 
 const defaultSize = 22
 
-const Wave = ({ color, columns, columnWidth, gutterWidth, scaleYEnd, scaleYStart, size, ...props }, { betterReactSpinkit = {} }) => {
+const Wave = ({ color, columns, columnWidth, gutterWidth, reverse, scaleYEnd, scaleYStart, size, ...props }, { betterReactSpinkit = {} }) => {
   const name = animationName('wave')
   const finalSize = preside(size, betterReactSpinkit.size, defaultSize)
   const outer = {
@@ -22,6 +22,7 @@ const Wave = ({ color, columns, columnWidth, gutterWidth, scaleYEnd, scaleYStart
     height: '100%',
     width: columnWidth
   }
+  const cols = (reverse) ? range(columns).reverse() : range(columns)
   return (
     <Base
       css={`
@@ -47,7 +48,7 @@ const Wave = ({ color, columns, columnWidth, gutterWidth, scaleYEnd, scaleYStart
       {...props}
     >
       <div style={outer}>
-        {range(columns).map((index) =>
+        {cols.map((index) =>
           <div
             key={index}
             style={{
@@ -79,6 +80,10 @@ Wave.propTypes = {
    * The pixel value between columns.
    */
   gutterWidth: PropTypes.number,
+  /**
+   * Reverse the animation.
+   */
+  reverse: PropTypes.bool,
   /**
    * Ending column height.
    */
@@ -97,6 +102,7 @@ Wave.defaultProps = {
   columns: 5,
   columnWidth: '20%',
   gutterWidth: 1,
+  reverse: false,
   scaleYEnd: 1,
   scaleYStart: 0.4,
   size: defaultSize