(chore!): animation classes defined

Author: divshekhar

src/components/animatedModal/AnimatedModal.enums.ts

@@ -5,8 +5,14 @@ import React, { useRef } from 'react';
 import {
   AnimatedModal,
   AnimatedModalObject,
-  ModalAnimation,
-  AnimatedModalFrame
+  AnimatedModalFrame,
+  Unfold,
+  Reveal,
+  Uncover,
+  Flash,
+  Sketch,
+  Slide,
+  BlowUp
 } from '../../components';
 
 export default {
@@ -20,37 +26,37 @@ const AnimatedModalTemplate: Story = () => {
 
   return (
     <>
-      <AnimatedModal ref={ref} animation={ModalAnimation.Unfold} />
+      <AnimatedModal ref={ref} animation={new Unfold()} />
       <AnimatedModalFrame>
         <button onClick={() => ref.current?.OpenModal()}>Open Unfold Modal</button>
         <br />
         <br />
-        <button onClick={() => ref.current?.OpenModal(ModalAnimation.Reveal)}>
+        <button onClick={() => ref.current?.OpenModal(Reveal.animationName)}>
           Open Reveal Modal
         </button>
         <br />
         <br />
-        <button onClick={() => ref.current?.OpenModal(ModalAnimation.Uncover)}>
+        <button onClick={() => ref.current?.OpenModal(Uncover.animationName)}>
           Open Uncover Modal
         </button>
         <br />
         <br />
-        <button onClick={() => ref.current?.OpenModal(ModalAnimation.Flash)}>
+        <button onClick={() => ref.current?.OpenModal(Flash.animationName)}>
           Open Flash Modal
         </button>
         <br />
         <br />
-        <button onClick={() => ref.current?.OpenModal(ModalAnimation.Sketch)}>
+        <button onClick={() => ref.current?.OpenModal(Sketch.animationName)}>
           Open Sketch Modal
         </button>
         <br />
         <br />
-        <button onClick={() => ref.current?.OpenModal(ModalAnimation.Slide)}>
+        <button onClick={() => ref.current?.OpenModal(Slide.animationName)}>
           Open Slide Modal
         </button>
         <br />
         <br />
-        <button onClick={() => ref.current?.OpenModal(ModalAnimation.BlowUp)}>
+        <button onClick={() => ref.current?.OpenModal(BlowUp.animationName)}>
           Open BlowUp Modal
         </button>
         <br />

src/components/animatedModal/AnimatedModal.stories.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'rea
 
 import './AnimatedModal.styles.scss';
 
-import { ModalAnimation } from './AnimatedModal.enums';
+import { ModalAnimation, Sketch, Unfold } from './animations';
 
 /**
  * Animated Modal's props.
@@ -13,34 +13,70 @@ import { ModalAnimation } from './AnimatedModal.enums';
  * @property {boolean} [closeOnBackgroundClick] Close modal on background click?
  */
 interface IAnimatedModalProps {
-  isOpen?: boolean;
+  /**
+   * Open Modal on startup.
+   * @param {boolean} [startOpen] Open Modal on startup?
+   * @default false
+   */
+  startOpen?: boolean;
+
+  /**
+   * Modal animation.
+   * @param {ModalAnimation} animation Modal animation
+   * @default new Unfold()
+   */
   animation: ModalAnimation;
+
+  /**
+   * Modal's children.
+   * @param {React.ReactNode} [children] Modal's children
+   */
   children?: React.ReactNode;
+
+  /**
+   * Close modal on background click.
+   * @param {boolean} [closeOnBackgroundClick] Close modal on background click?
+   * @default true
+   */
   closeOnBackgroundClick?: boolean;
 }
 
 /**
  * Animated Modal's object.
  * @type AnimatedModalObject
- * @property {() => void} OpenModal Open modal
- * @property {() => void} CloseModal Close modal
- * @property {() => boolean} IsModalOpen Is modal open?
+ * @member {() => void} OpenModal Open modal
+ * @member {() => void} CloseModal Close modal
+ * @member {() => boolean} IsModalOpen Is modal open?
  */
 export type AnimatedModalObject = {
+  /**
+   * Open modal.
+   * @param {string} [animation] Modal animation
+   * @returns {void} void
+   */
   // eslint-disable-next-line no-unused-vars
-  OpenModal: (modalAnimation?: ModalAnimation) => void;
+  OpenModal: (animation?: string) => void;
+
+  /**
+   * Close modal with open modal animation.
+   * @returns {void} void
+   */
   CloseModal: () => void;
+
+  /**
+   * Check if modal is open.
+   * @returns {boolean} is modal open?
+   */
   IsModalOpen: () => boolean;
 };
 
 /**
  * Animated Modal.
- *
  * @param {IAnimatedModalProps} props Animated modal's props
  * @param {React.Ref<AnimatedModalObject>} ref Animated modal's ref
  * @returns AnimatedModal.
  */
-const AnimatedModal = forwardRef(
+export const AnimatedModal = forwardRef(
   (props: IAnimatedModalProps, ref: React.Ref<AnimatedModalObject>) => {
     // State
     const [modalClass, setModalClass] = useState('');
@@ -60,12 +96,12 @@ const AnimatedModal = forwardRef(
 
     /**
      * Open modal.
-     * @param {ModalAnimation} modalAnimation Modal animation
+     * @param {string} animation Modal animation
      * @returns {void}
      */
-    function openModal(modalAnimation?: ModalAnimation): void {
-      if (modalAnimation) setModalClass(modalAnimation);
-      else setModalClass(props.animation);
+    function openModal(animation?: string): void {
+      if (animation) setModalClass(animation);
+      else setModalClass(props.animation.getAnimationName());
 
       document.body.classList.add('modal-active');
     }
@@ -115,11 +151,11 @@ const AnimatedModal = forwardRef(
     }
 
     useEffect(() => {
-      if (props.isOpen) {
-        setModalClass(props.animation);
+      if (props.startOpen) {
+        setModalClass(props.animation.getAnimationName());
         document.body.classList.add('modal-active');
       }
-    }, [props.isOpen]);
+    }, [props.startOpen]);
 
     /**
      * Default modal.
@@ -139,20 +175,28 @@ const AnimatedModal = forwardRef(
       );
     }
 
+    function sketchSVG(): React.ReactElement {
+      return (
+        <svg
+          id="modal-sketch-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          preserveAspectRatio="none">
+          <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
+        </svg>
+      );
+    }
+
+    console.log(modalClass);
+
     return (
       <div id="animated-modal-container" className={modalClass}>
         <div
           id="animated-modal-background"
           onClick={props.closeOnBackgroundClick ? onBackgroundClick : undefined}>
           <div id="animated-modal">
-            <svg
-              id="modal-sketch-svg"
-              xmlns="http://www.w3.org/2000/svg"
-              width="100%"
-              height="100%"
-              preserveAspectRatio="none">
-              <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
-            </svg>
+            {modalClass.includes(Sketch.animationName) ? sketchSVG() : undefined}
             <div id="modal-content">{props.children ? props.children : defaultModal()}</div>
           </div>
         </div>
@@ -166,9 +210,7 @@ AnimatedModal.displayName = 'AnimatedModal';
 
 // Set default props
 AnimatedModal.defaultProps = {
-  isOpen: false,
-  animation: ModalAnimation.Unfold,
+  startOpen: false,
+  animation: new Unfold(),
   closeOnBackgroundClick: true
 };
-
-export default AnimatedModal;

src/components/animatedModal/AnimatedModal.tsx

@@ -4,8 +4,6 @@ interface IAnimatedModalProps {
   children?: React.ReactNode;
 }
 
-const AnimatedModalFrame: FC<IAnimatedModalProps> = (props) => {
+export const AnimatedModalFrame: FC<IAnimatedModalProps> = (props) => {
   return <div id="animated-modal-frame">{props.children}</div>;
 };
-
-export default AnimatedModalFrame;

src/components/animatedModal/AnimatedModalFrame.tsx

@@ -0,0 +1,20 @@
+import { ModalAnimation } from './ModalAnimation';
+
+/**
+ * BlowUp animation
+ * @class BlowUp
+ * @constructor
+ * @param {
+ * animationName: string
+ * }
+ * @extends ModalAnimation
+ * @example
+ * new BlowUp();
+ */
+export class BlowUp extends ModalAnimation {
+  static animationName = 'blowUp';
+
+  constructor() {
+    super(BlowUp.animationName);
+  }
+}

src/components/animatedModal/animations/BlowUp.ts

@@ -0,0 +1,20 @@
+import { ModalAnimation } from './ModalAnimation';
+
+/**
+ * Flash animation
+ * @class Flash
+ * @constructor
+ * @param {
+ * animationName: string
+ * }
+ * @extends ModalAnimation
+ * @example
+ * new Flash();
+ */
+export class Flash extends ModalAnimation {
+  static animationName = 'flash';
+
+  constructor() {
+    super(Flash.animationName);
+  }
+}

src/components/animatedModal/animations/Flash.ts

@@ -0,0 +1,20 @@
+/**
+ * ModalAnimation
+ * @abstract
+ * @class ModalAnimation
+ * @constructor with animationName
+ * @method getAnimationName
+ */
+export abstract class ModalAnimation {
+  // Name of the animation
+  private animationName: string;
+
+  // Constructor
+  constructor(animationName: string) {
+    this.animationName = animationName;
+  }
+
+  getAnimationName(): string {
+    return this.animationName;
+  }
+}

src/components/animatedModal/animations/ModalAnimation.ts

@@ -0,0 +1,20 @@
+import { ModalAnimation } from './ModalAnimation';
+
+/**
+ * Reveal animation
+ * @class Reveal
+ * @constructor
+ * @param {
+ * animationName: string
+ * }
+ * @extends ModalAnimation
+ * @example
+ * new Reveal();
+ */
+export class Reveal extends ModalAnimation {
+  static animationName = 'reveal';
+
+  constructor() {
+    super(Reveal.animationName);
+  }
+}

src/components/animatedModal/animations/Reveal.ts

@@ -0,0 +1,20 @@
+import { ModalAnimation } from './ModalAnimation';
+
+/**
+ * Sketch animation
+ * @class Sketch
+ * @constructor
+ * @param {
+ * animationName: string
+ * }
+ * @extends ModalAnimation
+ * @example
+ * new Sketch();
+ */
+export class Sketch extends ModalAnimation {
+  static animationName = 'sketch';
+
+  constructor() {
+    super(Sketch.animationName);
+  }
+}

src/components/animatedModal/animations/Sketch.ts

@@ -0,0 +1,20 @@
+import { ModalAnimation } from './ModalAnimation';
+
+/**
+ * Slide animation
+ * @class Slide
+ * @constructor
+ * @param {
+ * animationName: string
+ * }
+ * @extends ModalAnimation
+ * @example
+ * new Slide();
+ */
+export class Slide extends ModalAnimation {
+  static animationName = 'slide';
+
+  constructor() {
+    super(Slide.animationName);
+  }
+}

src/components/animatedModal/animations/Slide.ts

@@ -0,0 +1,20 @@
+import { ModalAnimation } from './ModalAnimation';
+
+/**
+ * Uncover animation
+ * @class Uncover
+ * @constructor
+ * @param {
+ * animationName: string
+ * }
+ * @extends ModalAnimation
+ * @example
+ * new Uncover();
+ */
+export class Uncover extends ModalAnimation {
+  static animationName = 'uncover';
+
+  constructor() {
+    super(Uncover.animationName);
+  }
+}