From 43c7fef2cfc3dcebb8de0761060ebe28e32aa4b6 Mon Sep 17 00:00:00 2001 From: Juan David Nicholls Cardona Date: Thu, 7 May 2020 01:14:33 -0500 Subject: [PATCH] Validate if the manager is initialized before to destroy the animations --- CHANGELOG.md | 5 ++ package-lock.json | 46 +++++++++---------- package.json | 10 ++-- react/package-lock.json | 6 +-- react/package.json | 4 +- .../react-component-lib/createComponent.tsx | 11 +++-- readme.md | 2 +- .../animatable-component.tsx | 6 ++- .../animatable-cube/animatable-cube.tsx | 6 ++- src/utils/waapi.ts | 8 +++- 10 files changed, 60 insertions(+), 44 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 154aa03..b95323e 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index 21c172a..9c520f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@proyecto26/animatable-component", - "version": "1.1.7", + "version": "1.1.8", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -41,9 +41,9 @@ } }, "@stencil/core": { - "version": "1.12.5", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.12.5.tgz", - "integrity": "sha512-A1rmWY8bG0QjPh2QBV567ziwmxT5dtSdG3p0PDTgzyBpK2jOP7dufbgQL6lL3eC/xfpk4NWgesaV5c9FS9c6wg==", + "version": "1.12.7", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.12.7.tgz", + "integrity": "sha512-Ob+xncjuHebjSHqOGh9acXx0Jw2rSTzGP1XiYNKYQnoFtcvKpGqLhr2ibWqS1Z40aEwgI/OvYYldfWsp/C+0mw==", "dev": true, "requires": { "typescript": "3.8.3" @@ -60,9 +60,9 @@ } }, "@stencil/react-output-target": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.0.4.tgz", - "integrity": "sha512-Ty2nJ2igC1jVNVcEc04Ut19wb7ac+NMd8HVEHvdZbO3HZZ98yAIERN72Z5Up0jpFPZGLAJ+SMGTc2HP2hoUjnw==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.0.6.tgz", + "integrity": "sha512-Z0d1+RLmyxi/SuwYeIt+bKPyAl8hvz971GixmfNL1Kr9NRV45fEg6pyAjU3VzpEQkcsExE2HER2ShRqWI0ubRw==", "dev": true }, "@types/color-name": { @@ -84,45 +84,45 @@ "dev": true }, "@typescript-eslint/eslint-plugin": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.28.0.tgz", - "integrity": "sha512-w0Ugcq2iatloEabQP56BRWJowliXUP5Wv6f9fKzjJmDW81hOTBxRoJ4LoEOxRpz9gcY51Libytd2ba3yLmSOfg==", + "version": "2.31.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz", + "integrity": "sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==", "dev": true, "requires": { - "@typescript-eslint/experimental-utils": "2.28.0", + "@typescript-eslint/experimental-utils": "2.31.0", "functional-red-black-tree": "^1.0.1", "regexpp": "^3.0.0", "tsutils": "^3.17.1" } }, "@typescript-eslint/experimental-utils": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.28.0.tgz", - "integrity": "sha512-4SL9OWjvFbHumM/Zh/ZeEjUFxrYKtdCi7At4GyKTbQlrj1HcphIDXlje4Uu4cY+qzszR5NdVin4CCm6AXCjd6w==", + "version": "2.31.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz", + "integrity": "sha512-MI6IWkutLYQYTQgZ48IVnRXmLR/0Q6oAyJgiOror74arUMh7EWjJkADfirZhRsUMHeLJ85U2iySDwHTSnNi9vA==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/typescript-estree": "2.28.0", + "@typescript-eslint/typescript-estree": "2.31.0", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" } }, "@typescript-eslint/parser": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.28.0.tgz", - "integrity": "sha512-RqPybRDquui9d+K86lL7iPqH6Dfp9461oyqvlXMNtap+PyqYbkY5dB7LawQjDzot99fqzvS0ZLZdfe+1Bt3Jgw==", + "version": "2.31.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.31.0.tgz", + "integrity": "sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==", "dev": true, "requires": { "@types/eslint-visitor-keys": "^1.0.0", - "@typescript-eslint/experimental-utils": "2.28.0", - "@typescript-eslint/typescript-estree": "2.28.0", + "@typescript-eslint/experimental-utils": "2.31.0", + "@typescript-eslint/typescript-estree": "2.31.0", "eslint-visitor-keys": "^1.1.0" } }, "@typescript-eslint/typescript-estree": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.28.0.tgz", - "integrity": "sha512-HDr8MP9wfwkiuqzRVkuM3BeDrOC4cKbO5a6BymZBHUt5y/2pL0BXD6I/C/ceq2IZoHWhcASk+5/zo+dwgu9V8Q==", + "version": "2.31.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz", + "integrity": "sha512-vxW149bXFXXuBrAak0eKHOzbcu9cvi6iNcJDzEtOkRwGHxJG15chiAQAwhLOsk+86p9GTr/TziYvw+H9kMaIgA==", "dev": true, "requires": { "debug": "^4.1.1", diff --git a/package.json b/package.json index 0acb1bc..a8a8b64 100644 --- a/package.json +++ b/package.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": { diff --git a/react/package-lock.json b/react/package-lock.json index 2909b84..1d53cff 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -1098,9 +1098,9 @@ } }, "@proyecto26/animatable-component": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/@proyecto26/animatable-component/-/animatable-component-1.1.7.tgz", - "integrity": "sha512-hYRc+mj04D6yNvTjE9Jlhcjt4yRDHnIOf8O9VyQwpoWlYhl15eMON2vXaVjfSKKiaa2KEzcqNfsB+AY82o48gw==" + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@proyecto26/animatable-component/-/animatable-component-1.1.8.tgz", + "integrity": "sha512-JvnRXBKUvtADqligiNIHr8NG5zI4Y4MbBdrwlFxzXBzgHqRbyQiGIDBReDcO1XNgQFKRxyceJP3NGqrlz/DSuA==" }, "@sinonjs/commons": { "version": "1.7.2", diff --git a/react/package.json b/react/package.json index 8edfb96..9520dd6 100644 --- a/react/package.json +++ b/react/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", diff --git a/react/src/react-component-lib/createComponent.tsx b/react/src/react-component-lib/createComponent.tsx index e5637ce..cb48901 100644 --- a/react/src/react-component-lib/createComponent.tsx +++ b/react/src/react-component-lib/createComponent.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDom from 'react-dom'; import { attachEventProps, @@ -16,8 +15,12 @@ interface IonicReactInternalProps extends React.HTMLAttributes(tagName: string) => { const displayName = dashToPascalCase(tagName); const ReactComponent = class extends React.Component> { + + private ref: React.RefObject; + constructor(props: IonicReactInternalProps) { super(props); + this.ref = React.createRef(); } componentDidMount() { @@ -25,7 +28,7 @@ export const createReactComponent = (tagName: string) => } componentDidUpdate(prevProps: IonicReactInternalProps) { - const node = ReactDom.findDOMNode(this) as HTMLElement; + const node = this.ref.current; attachEventProps(node, this.props, prevProps); } @@ -39,7 +42,7 @@ export const createReactComponent = (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 = (tagName: string) => const newProps: any = { ...propsToPass, - ref: forwardedRef, + ref: this.ref, style, className, }; diff --git a/readme.md b/readme.md index 442ecf4..a92a9c7 100644 --- a/readme.md +++ b/readme.md @@ -104,7 +104,7 @@ const easingOutCubic = EASING_FUNCTIONS[EASING.EASE_OUT_CUBIC]; ### Script tag -- Put a script tag similar to this `` in the head of your index.html +- Put a script tag similar to this `` in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc ### Node Modules diff --git a/src/components/animatable-component/animatable-component.tsx b/src/components/animatable-component/animatable-component.tsx index ef5c271..4409598 100644 --- a/src/components/animatable-component/animatable-component.tsx +++ b/src/components/animatable-component/animatable-component.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 { - this.manager.destroyAnimation(); + if (this.manager !== null) { + this.manager.destroyAnimation(); + } } /** diff --git a/src/components/animatable-cube/animatable-cube.tsx b/src/components/animatable-cube/animatable-cube.tsx index 77968f0..b27513b 100644 --- a/src/components/animatable-cube/animatable-cube.tsx +++ b/src/components/animatable-cube/animatable-cube.tsx @@ -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 { - this.manager.destroyAnimation(); + if (this.manager !== null) { + this.manager.destroyAnimation(); + } } /** diff --git a/src/utils/waapi.ts b/src/utils/waapi.ts index 8bb9122..bd79588 100644 --- a/src/utils/waapi.ts +++ b/src/utils/waapi.ts @@ -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