Merge branch 'feature/animate-hoc' into develop

Merge branch 'feature/animate-hoc' into develop

Author: dielduarte

.storybook/config.js

@@ -1,6 +1,7 @@
 import { configure } from '@kadira/storybook';
 
 function loadStories() {
+  require('../stories/Animate');
   require('../stories/Attention');
   require('../stories/Bounce');
   require('../stories/Especials');

README.md

@@ -63,7 +63,51 @@ Example:
 	 - prop for represent display css property
 	 - default `block`
 
-## Examples
+## Animate - HOC
+
+For convenience you can use Animate HOC to use animations stacked, you could pass a unique component to `Animation` prop or an array of animations, example:
+
+```
+  import Animate, {
+    Flash,
+    Bounce
+  } from 'animate-css-styled-components';
+
+  <Animate 
+    Animation={[Flash, Bounce]} 
+    duration="0.8s" 
+    delay="0.2s">
+    <Card>
+      card content...
+    </Card>
+  </Animate>
+```
+In this example that you could see [here](https://dielduarte.github.io/animate-css-styled-components/?selectedKind=Animate%20%28HOC%29&selectedStory=Multiple%20Animations&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel), the Bounce Animation will run after when Flash animation is finished, respecting the duration time + delay time, duration and delay are same for all animations, but you could pass diferents values to each animation prop, look:
+
+```
+  import Animate, {
+    Flash,
+    Bounce,
+    FadeOut,
+    FadeIn
+  } from 'animate-css-styled-components';
+
+  <Animate 
+    Animation={[Flash, Bounce, FadeOut, FadeIn]}
+    duration={["0.8s", "3s", "2s", "0.4s"]}
+    delay={["0.2s", "0.1s", "0.5s", "1s"]}>
+    <Card>
+      card content...
+    </Card>
+  </Animate>
+
+```
+
+See this example [here](https://dielduarte.github.io/animate-css-styled-components/?selectedKind=Animate%20%28HOC%29&selectedStory=Multiple%20Animations%20with%20diferent%20times%20and%20delays&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)
+
+Don't forget, you coul pass any [animations props](https://github.com/dielduarte/animate-css-styled-components#props) as single string if the value are same for all animations stacked or an array of values.
+
+## Examples - Storybook
 
 See all examples [here](https://dielduarte.github.io/animate-css-styled-components/)
 
@@ -100,6 +144,3 @@ Example:
 
 now your animation is a styled-component and you can use this like any other styled-component,
 passing the all BaseAnimation [props](https://github.com/dielduarte/animate-css-styled-components#props).
-
-# WIP
- - `animate` component, wrapper for all animations with a only component.

package.json

@@ -5,6 +5,7 @@
   "main": "./lib/index.js",
   "scripts": {
     "build": "babel src -d ./lib",
+    "build-watch": "babel src -d ./lib -w",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepublish": "babel src -d ./lib",

src/Animate/StackAnimates.js

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react';
+import * as Utils from './Utils';
+
+class StackAnimates extends PureComponent {
+  constructor(props) {
+    super(props);  
+    this.state = Utils.buildState(props);
+  }
+
+  get getNextIndex() {
+    return this.state.index +1;
+  }
+
+  get getNextStartTime() {
+    const time = Utils.convertToMs(parseFloat(Utils.removeUnit(this.state.duration)));
+    const delay = Utils.convertToMs(parseFloat(Utils.removeUnit(this.state.delay)));
+    return time + delay;
+  }
+  
+  get HaveMoreAnimations() {
+    return this.getNextIndex < this.props.Animation.length;
+  }
+
+  renderNextAnimate() {
+    if (this.HaveMoreAnimations) {
+      setTimeout(() => {
+        this.setState(
+          Utils.buildState(this.props, this.getNextIndex),
+          () => this.renderNextAnimate()
+        );
+      }, this.getNextStartTime);
+    }
+  }
+
+  render() {
+    const { Animation } = this.state;
+
+    return (
+      <Animation {...this.state}>
+        {this.props.children}
+      </Animation>
+    );
+  }
+
+  componentDidMount() {
+    this.renderNextAnimate();
+  }
+}
+
+export default StackAnimates;

src/Animate/Utils.js

@@ -0,0 +1,20 @@
+export const isArray = (obj) => Array.isArray(obj);
+
+export const buildState = (props, index = 0) => {
+  let state = {};
+  Object.entries(props).forEach((prop) => {  
+    const key =  prop[0];
+    const value = prop[1];
+
+    if(key !== 'children') {
+      state[key] = isArray(value) ? value[index] : value;
+    }
+  });
+
+  state['index'] = index;
+  return state;
+};
+
+export const removeUnit = (time) => time.replace('s', '');
+
+export const convertToMs = (time) => time * 1000;

src/Animate/index.js

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+
+import * as Utils from './Utils';
+import StackAnimates from './StackAnimates';
+
+class Animate extends PureComponent {
+  render() {
+    const { Animation } = this.props;
+
+    if (Utils.isArray(Animation)) {
+      return <StackAnimates {...this.props} />;
+    } 
+    
+    return (
+      <Animation {...this.props}>
+        {this.props.children}
+      </Animation>
+    );
+  }
+}
+
+export default Animate;

src/index.js

@@ -89,6 +89,8 @@ import ZoomOutLeft from './Zoom/OutLeft';
 import ZoomOutRight from './Zoom/OutRight';
 import ZoomOutUp from './Zoom/OutUp';
 
+import Animate from './Animate';
+
 export {
   Bounce,
   Flash,
@@ -168,3 +170,5 @@ export {
   ZoomOutUp,
   BaseAnimation
 };
+
+export default Animate;

stories/Animate.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import FullView from '../Example/FullView';
+import Card from '../Example/Card';
+import Animate, {
+    Flash,
+    Bounce,
+    FadeOut,
+    FadeIn
+} from 'animate-css-styled-components';
+
+
+storiesOf('Animate (HOC)', module)
+    .add('Multiple Animations', () => (
+        <FullView center>
+            <Animate Animation={[Flash, Bounce, FadeOut, FadeIn]} duration="0.8s" delay="0.2s">
+                <Card rounded width="100px" height="100px">
+                    card content...
+                </Card>
+            </Animate>
+        </FullView>
+    ))
+    .add('Multiple Animations with diferent times and delays', () => (
+        <FullView center>
+            <Animate Animation={[Flash, Bounce, FadeOut, FadeIn]} duration={["0.8s", "3s", "2s", "0.4s"]} delay={["0.2s", "0.1s", "0.5s", "1s"]}>
+                <Card rounded width="100px" height="100px">
+                    card content...
+                </Card>
+            </Animate>
+        </FullView>
+    ));