Fixed “createAnimatableComponent” HOC by adding missing “animation” prop.

Author: jdnichollsc

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.7] - 2020-04-25
+### Fixed
+- Fixed `createAnimatableComponent` HOC by adding missing `animation` prop.
+
 ## [1.1.6] - 2020-04-25
 ### Fixed
 - Fixed query selector for `animatable-cube` component, to avoid removing styles when `fromClassName` or `toClassName` props are used.
@@ -56,7 +60,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added GitHub page with Google Analytics to track some events.
 - Added README with instructions to integrate the Web component with any other framework (Angular, React, Vue, etc).
 
-[Unreleased]: https://github.com/proyecto26/animatable-component/compare/v1.1.6...HEAD
+[Unreleased]: https://github.com/proyecto26/animatable-component/compare/v1.1.7...HEAD
+[1.1.7]: https://github.com/proyecto26/animatable-component/compare/v1.1.6...v1.1.7
 [1.1.6]: https://github.com/proyecto26/animatable-component/compare/v1.1.5...v1.1.6
 [1.1.5]: https://github.com/proyecto26/animatable-component/compare/v1.1.4...v1.1.5
 [1.1.4]: https://github.com/proyecto26/animatable-component/compare/v1.1.3...v1.1.4

demo-pwa/src/components/app-home/app-home.tsx

@@ -3,7 +3,8 @@ import {
   EASING,
   ANIMATIONS,
   AnimationsType,
-  EasingType
+  EasingType,
+  createAnimatableComponent
 } from '@proyecto26/animatable-component';
 
 const animations = Object.keys(ANIMATIONS);
@@ -27,6 +28,10 @@ const fillModes: Array<FillMode> = [
   'none'
 ];
 
+const AnimatableImg = createAnimatableComponent(() => (
+  <div class='img'></div>
+))
+
 @Component({
   tag: 'app-home',
   styleUrl: 'app-home.css'
@@ -61,7 +66,7 @@ export class AppHome {
             <ion-card-title>Demo</ion-card-title>
           </ion-card-header>
           <ion-card-content class="ion-text-center">
-            <animatable-component
+            <AnimatableImg
               ref={el => this.animatableEl = el}
               autoPlay
               animation={this.animation}
@@ -75,8 +80,7 @@ export class AppHome {
               fromClassName={this.fromClassName}
               toClassName={this.toClassName}
             >
-              <div class='img'></div>
-            </animatable-component>
+            </AnimatableImg>
             <ion-buttons class="ion-justify-content-center ion-padding">
               <ion-fab-button
                 color='medium'

img/demo-pwa.png

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": false,
   "description": "Animate once, use Everywhere! 💫",
   "author": "Proyecto 26",

package-lock.json

@@ -43,7 +43,8 @@ Do you want to see this web component in action? Visit https://codepen.io/jdnich
 - WorkShop: https://slides.com/juandavidnicholls/waapi-webcomponents
 - Meet `<animatable />`, a tiny Web Component: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh
 
-![Animatable](https://github.com/proyecto26/animatable-component/blob/master/img/animatable.png?raw=true)
+![Animatable](https://github.com/proyecto26/animatable-component/blob/master/img/demo-pwa.png?raw=true)
+> Includes a PWA demo for debugging animations!
 
 ## Usage 🎉
 

package.json

@@ -19,6 +19,7 @@ export function createAnimatableComponent<Props> (
   return (props: ComponentProps): FunctionalComponent<ComponentProps> => {
     const {
       ref,
+      animation,
       keyFrames,
       keyFramesData,
       options,
@@ -35,18 +36,19 @@ export function createAnimatableComponent<Props> (
       iterationStart,
       iterationComposite,
       autoPlay,
+      fromClassName,
+      toClassName,
       currentTime,
       startTime,
       playbackRate,
       onStart,
-      onCancel,
       onFinish,
-      fromClassName,
-      toClassName,
+      onCancel,
       ...rest
     } = props
     return <animatable-component
       ref={ref}
+      animation={animation}
       keyFrames={keyFrames}
       keyFramesData={keyFramesData}
       options={options}
@@ -63,14 +65,14 @@ export function createAnimatableComponent<Props> (
       iterationStart={iterationStart}
       iterationComposite={iterationComposite}
       autoPlay={autoPlay}
+      fromClassName={fromClassName}
+      toClassName={toClassName}
       currentTime={currentTime}
       startTime={startTime}
       playbackRate={playbackRate}
       onStart={onStart}
-      onCancel={onCancel}
       onFinish={onFinish}
-      fromClassName={fromClassName}
-      toClassName={toClassName}
+      onCancel={onCancel}
     >
       <WrappedComponent {...rest} />
     </animatable-component>