revert back

Author: divshekhar

src/components/animatedModal/AnimatedModal.enums.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-vars */
+export enum ModalAnimation {
+  Reveal = 'reveal',
+  Unfold = 'unfold',
+  Uncover = 'uncover',
+  BlowUp = 'blowUp',
+  Flash = 'flash',
+  Sketch = 'sketch',
+  Slide = 'slide'
+}

src/components/animatedModal/AnimatedModal.stories.tsx

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

src/components/animatedModal/AnimatedModal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'rea
 
 import './AnimatedModal.styles.scss';
 
-import { ModalAnimation, Sketch, Unfold } from './animations';
+import { ModalAnimation } from './AnimatedModal.enums';
 
 /**
  * Animated Modal's props.
@@ -13,70 +13,34 @@ import { ModalAnimation, Sketch, Unfold } from './animations';
  * @property {boolean} [closeOnBackgroundClick] Close modal on background click?
  */
 interface IAnimatedModalProps {
-  /**
-   * 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()
-   */
+  isOpen?: boolean;
   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
- * @member {() => void} OpenModal Open modal
- * @member {() => void} CloseModal Close modal
- * @member {() => boolean} IsModalOpen Is modal open?
+ * @property {() => void} OpenModal Open modal
+ * @property {() => void} CloseModal Close modal
+ * @property {() => 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: (animation?: string) => void;
-
-  /**
-   * Close modal with open modal animation.
-   * @returns {void} void
-   */
+  OpenModal: (modalAnimation?: ModalAnimation) => 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.
  */
-export const AnimatedModal = forwardRef(
+const AnimatedModal = forwardRef(
   (props: IAnimatedModalProps, ref: React.Ref<AnimatedModalObject>) => {
     // State
     const [modalClass, setModalClass] = useState('');
@@ -96,12 +60,12 @@ export const AnimatedModal = forwardRef(
 
     /**
      * Open modal.
-     * @param {string} animation Modal animation
+     * @param {ModalAnimation} modalAnimation Modal animation
      * @returns {void}
      */
-    function openModal(animation?: string): void {
-      if (animation) setModalClass(animation);
-      else setModalClass(props.animation.getAnimationName());
+    function openModal(modalAnimation?: ModalAnimation): void {
+      if (modalAnimation) setModalClass(modalAnimation);
+      else setModalClass(props.animation);
 
       document.body.classList.add('modal-active');
     }
@@ -151,11 +115,11 @@ export const AnimatedModal = forwardRef(
     }
 
     useEffect(() => {
-      if (props.startOpen) {
-        setModalClass(props.animation.getAnimationName());
+      if (props.isOpen) {
+        setModalClass(props.animation);
         document.body.classList.add('modal-active');
       }
-    }, [props.startOpen]);
+    }, [props.isOpen]);
 
     /**
      * Default modal.
@@ -175,28 +139,20 @@ export 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">
-            {modalClass.includes(Sketch.animationName) ? sketchSVG() : undefined}
+            <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>
             <div id="modal-content">{props.children ? props.children : defaultModal()}</div>
           </div>
         </div>
@@ -210,7 +166,9 @@ AnimatedModal.displayName = 'AnimatedModal';
 
 // Set default props
 AnimatedModal.defaultProps = {
-  startOpen: false,
-  animation: new Unfold(),
+  isOpen: false,
+  animation: ModalAnimation.Unfold,
   closeOnBackgroundClick: true
 };
+
+export default AnimatedModal;

src/components/animatedModal/AnimatedModalFrame.tsx

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