feat: convert infographic animation to typescript

src/components/HowItWorks/InfographicAnimation/constant.js → src/components/HowItWorks/InfographicAnimation/constant.ts

@@ -1,25 +1,25 @@
-const taxonomy_0 = '/assets/taxonomy/layer_0.svg';
-const taxonomy_0_1 = '/assets/taxonomy/layer_0_1.svg';
-const taxonomy_1 = '/assets/taxonomy/layer_1.svg';
-const taxonomy_1_1 = '/assets/taxonomy/layer_1_1.svg';
-const taxonomy_2 = '/assets/taxonomy/layer_2.svg';
-const taxonomy_2_0 = '/assets/taxonomy/layer_2_0.svg';
-const taxonomy_3 = '/assets/taxonomy/layer_3.svg';
-const taxonomy_3_0 = '/assets/taxonomy/layer_3_0.svg';
+import taxonomy_0 from './assets/taxonomy/layer_0.svg';
+import taxonomy_0_1 from './assets/taxonomy/layer_0_1.svg';
+import taxonomy_1 from './assets/taxonomy/layer_1.svg';
+import taxonomy_1_1 from './assets/taxonomy/layer_1_1.svg';
+import taxonomy_2 from './assets/taxonomy/layer_2.svg';
+import taxonomy_2_0 from './assets/taxonomy/layer_2_0.svg';
+import taxonomy_3 from './assets/taxonomy/layer_3.svg';
+import taxonomy_3_0 from './assets/taxonomy/layer_3_0.svg';
 
-const detectGap_0 = '/assets/detect-gap/layer_0.svg';
-const detectGap_1 = '/assets/detect-gap/layer_1.svg';
-const detectGap_2 = '/assets/detect-gap/layer_2.svg';
-const detectGap_4 = '/assets/detect-gap/layer_4.svg';
-const detectGap_5 = '/assets/detect-gap/layer_5.svg';
-const detectGap_6 = '/assets/detect-gap/layer_6.svg';
+import detectGap_0 from './assets/detect-gap/layer_0.svg';
+import detectGap_1 from './assets/detect-gap/layer_1.svg';
+import detectGap_2 from './assets/detect-gap/layer_2.svg';
+import detectGap_4 from './assets/detect-gap/layer_4.svg';
+import detectGap_5 from './assets/detect-gap/layer_5.svg';
+import detectGap_6 from './assets/detect-gap/layer_6.svg';
 
-const blockRed = '/assets/fine-tune/block_red.svg';
-const blockViolet = '/assets/fine-tune/block_v.svg';
+import blockRed from './assets/fine-tune/block_red.svg';
+import blockViolet from './assets/fine-tune/block_v.svg';
 
-const modelStack_0 = '/assets/model-stack/layer_0.svg';
-const modelStack_1 = '/assets/model-stack/layer_1.svg';
-const modelStack_2 = '/assets/model-stack/layer_2.svg';
+import modelStack_0 from './assets/model-stack/layer_0.svg';
+import modelStack_1 from './assets/model-stack/layer_1.svg';
+import modelStack_2 from './assets/model-stack/layer_2.svg';
 
 export const infographicList = {
   taxonomy: {

src/components/HowItWorks/InfographicAnimation/index.js → src/components/HowItWorks/InfographicAnimation/index.tsx

@@ -1,32 +1,39 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import { FC, Fragment, useEffect, useState } from 'react';
 import { infographicList } from './constant';
 
 import styles from './InfographicAnimation.module.scss';
 
+type Layer = any; // eslint-disable-line
+
 const getPos = (
   //get position of the layer
-  dir,
-  layer,
-  originalSize,
+  dir: string,
+  layer: Layer,
+  originalSize: number[],
   val = undefined,
 ) => {
   const idx = dir === 'top' ? 1 : 0;
   const pos = typeof val === 'number' ? val : layer.pos?.[idx] || 0;
   return pos === 0 ? '0' : `${(pos / originalSize[idx]) * 100}%`;
 };
 
-const LayerImg = ({ layer, size, originalSize, isAnimOn }) => {
+const LayerImg: FC<{
+  layer: Layer; // eslint-disable-line
+  size: number;
+  originalSize: number[];
+  isAnimOn: boolean;
+}> = ({ layer, size, originalSize, isAnimOn }) => {
   const [targetStyle, setTargetStyle] = useState({});
-  const [animList, setAnimList] = useState(null);
-  const layerImg = layer.img;
+  const [animList, setAnimList] = useState<any[] | null>(null); // eslint-disable-line
+  const Img = layer.img;
 
-  const resetAnimation = (left, top, width) => {
+  const resetAnimation = (left: string, top: string, width: string) => {
     setTargetStyle({ left: left, top: top, width: width });
     animList?.map(d => clearTimeout(d));
     setAnimList(null);
   };
 
-  const setAnimation = (left, top, width) => {
+  const setAnimation = (left: string, top: string, width: string) => {
     if (layer.animation) {
       setTargetStyle({
         ...layer.animation[0], //base style to create transition
@@ -85,19 +92,28 @@ const LayerImg = ({ layer, size, originalSize, isAnimOn }) => {
   }, [animList]);
 
   return (
-    <img
+    <Img
       alt=""
       className={`${styles.animLayer} ${
         isAnimOn && layer.class ? layer.class : ''
       }`}
-      src={layerImg}
       style={targetStyle}
     />
   );
 };
 
-const InfographicAnimation = ({ size, kind, isOn = true }) => {
-  const [animList, setAnimList] = useState(null);
+export type InfographicAnimationProps = {
+  size: number;
+  kind: keyof typeof infographicList;
+  isOn?: boolean;
+};
+
+const InfographicAnimation: FC<InfographicAnimationProps> = ({
+  size,
+  kind,
+  isOn = true,
+}) => {
+  const [animList, setAnimList] = useState<any>(null); // eslint-disable-line
   const [isAnimOn, setIsAnimOn] = useState(false);
   const [animWidth, setAnimWidth] = useState(size);
 
@@ -119,7 +135,7 @@ const InfographicAnimation = ({ size, kind, isOn = true }) => {
         setAnimWidth(size);
       }
 
-      setAnimList(() => ({ ...infographicList[kind] }));
+      setAnimList(() => ({ ...infographicList[kind] }) as any); // eslint-disable-line
       resetAnim();
     }
   }, [kind, size]);
@@ -146,7 +162,7 @@ const InfographicAnimation = ({ size, kind, isOn = true }) => {
           className={styles.animation}
           style={{ width: `${animWidth}px`, aspectRatio: animList.ratio }}
         >
-          {animList.layers.map((d, i) => (
+          {animList.layers.map((d: Layer, i: number) => (
             <Fragment key={`anim_${kind}_${i}`}>
               <LayerImg
                 layer={d}

src/components/HowItWorks/Slideshow.tsx

@@ -15,7 +15,9 @@ import {
   useState,
 } from 'react';
 import DebugAnimationContext from './utils/DebugAnimationContext';
-import InfographicAnimation from './InfographicAnimation';
+import InfographicAnimation, {
+  InfographicAnimationProps,
+} from './InfographicAnimation';
 import classNames from 'classnames';
 
 import styles from './Slideshow.module.scss';
@@ -173,7 +175,9 @@ const Slideshow: FC<SlideshowProps> = () => {
                   <div className={styles.animWrapper}>
                     <InfographicAnimation
                       size={d.animationSize}
-                      kind={d.animationName}
+                      kind={
+                        d.animationName as InfographicAnimationProps['kind']
+                      }
                       isOn={currentSlide === i}
                     />
                   </div>

tsconfig.json

@@ -19,7 +19,6 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "src/components/HowItWorks/InfographicAnimation/constant.js",
-    "src/components/HowItWorks/InfographicAnimation/index.js"],
+  ],
   "exclude": ["node_modules"]
 }