Validate if the manager is initialized before to destroy the animations

Author: jdnichollsc

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.8] - 2020-05-07
+### Fixed
+- Validate if the manager is initialized before to destroy the animation.
+- Fixed comments of JSDoc.
+
 ## [1.1.7] - 2020-04-25
 ### Fixed
 - Fixed `createAnimatableComponent` HOC by adding missing `animation` prop.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "private": false,
   "description": "Animate once, use Everywhere! 💫",
   "author": "Proyecto 26",
@@ -27,14 +27,14 @@
     "lint": "eslint src/**/*{.ts,.tsx}"
   },
   "devDependencies": {
-    "@stencil/core": "^1.12.5",
+    "@stencil/core": "^1.12.7",
     "@stencil/eslint-plugin": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.19.0",
     "gh-pages": "^2.2.0",
-    "@stencil/react-output-target": "0.0.4"
+    "@stencil/react-output-target": "0.0.6"
   },
   "license": "MIT",
   "repository": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proyecto26/animatable-component-react",
   "sideEffects": false,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React specific wrapper for animatable-component",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "typescript": "^3.3.4000"
   },
   "dependencies": {
-    "@proyecto26/animatable-component": "^1.1.7"
+    "@proyecto26/animatable-component": "^1.1.8"
   },
   "peerDependencies": {
     "react": "^16.7.0",

react/package-lock.json

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import {
   attachEventProps,
@@ -16,16 +15,20 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
 export const createReactComponent = <PropType, ElementType>(tagName: string) => {
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<IonicReactInternalProps<ElementType>> {
+    
+    private ref: React.RefObject<HTMLElement>;
+    
     constructor(props: IonicReactInternalProps<ElementType>) {
       super(props);
+      this.ref = React.createRef<HTMLElement>();
     }
 
     componentDidMount() {
       this.componentDidUpdate(this.props);
     }
 
     componentDidUpdate(prevProps: IonicReactInternalProps<ElementType>) {
-      const node = ReactDom.findDOMNode(this) as HTMLElement;
+      const node = this.ref.current;
       attachEventProps(node, this.props, prevProps);
     }
 
@@ -39,7 +42,7 @@ export const createReactComponent = <PropType, ElementType>(tagName: string) =>
 
         if (isEventProp) {
           const eventName = name.substring(2).toLowerCase();
-          if (isCoveredByReact(eventName)) {
+          if (typeof document !== "undefined" && isCoveredByReact(eventName)) {
             (acc as any)[name] = (cProps as any)[name];
           }
         } else if (isDataProp || isAriaProp) {
@@ -50,7 +53,7 @@ export const createReactComponent = <PropType, ElementType>(tagName: string) =>
 
       const newProps: any = {
         ...propsToPass,
-        ref: forwardedRef,
+        ref: this.ref,
         style,
         className,
       };

react/package.json

@@ -104,7 +104,7 @@ const easingOutCubic = EASING_FUNCTIONS[EASING.EASE_OUT_CUBIC];
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.1.7/dist/animatable-component.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.1.8/dist/animatable-component.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules

react/src/react-component-lib/createComponent.tsx

@@ -34,7 +34,7 @@ export class AnimatableComponent implements IAnimatableComponent {
   /**
    * Animation manager for Animatable
    */
-  private manager: AnimationManager
+  private manager?: AnimationManager = null
 
   @Element() el!: HTMLElement
 
@@ -315,7 +315,9 @@ export class AnimatableComponent implements IAnimatableComponent {
    */
   @Method()
   async destroy(): Promise<void> {
-    this.manager.destroyAnimation();
+    if (this.manager !== null) {
+      this.manager.destroyAnimation();
+    }
   }
 
   /**

readme.md

@@ -44,7 +44,7 @@ export class Cube implements IAnimatableComponent {
   /**
    * Animation manager for Animatable
    */
-  private manager: AnimationManager
+  private manager?: AnimationManager = null
 
   @Element() el!: HTMLElement
 
@@ -325,7 +325,9 @@ export class Cube implements IAnimatableComponent {
    */
   @Method()
   async destroy(): Promise<void> {
-    this.manager.destroyAnimation();
+    if (this.manager !== null) {
+      this.manager.destroyAnimation();
+    }
   }
 
   /**

src/components/animatable-component/animatable-component.tsx

@@ -4,7 +4,8 @@ import { IAnimatable } from '../models/animatable';
 
 /**
  * Create a new animation.
- * @param param0 - The data of the new animation.
+ * @param element - The element to animate.
+ * @param context - Animatable context.
  */
 function createAnimation (
   element: HTMLElement,
@@ -47,7 +48,7 @@ export function clearPropsWithOptions (
 
 /**
  * Load the options of the animation.
- * @param param0 - The data of the new animation.
+ * @param context - The data of the animation.
  */
 export function getAnimationOptions (
   context: IAnimatable
@@ -81,6 +82,9 @@ export function getAnimationOptions (
   return animationOptions;
 }
 
+/**
+ * A manager to handle the animations of the Components.
+ */
 export class AnimationManager {
   private element: HTMLElement
   private state: IAnimatable