chore: add tsconfig and ts, format and fix demo so it works with curr…

…ent webpack
recharts · Sep 6, 2024 · 28736be · 28736be
1 parent 10b06c2
commit 28736be
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 177 deletions.
diff --git a/demo/Gossip/app.js b/demo/Gossip/app.js
@@ -2,45 +2,52 @@ import Animate from 'react-smooth';
 import React, { Component } from 'react';
 import ReactDom from 'react-dom';
 
-const getSTEPS = onAnimationEnd => [{
-  duration: 1000,
-  style: {
-    opacity: 0,
+const getSTEPS = onAnimationEnd => [
+  {
+    duration: 1000,
+    style: {
+      opacity: 0,
+    },
   },
-}, {
-  duration: 1000,
-  style: {
-    opacity: 1,
-    transformOrigin: '110px 110px',
-    transform: 'rotate(0deg) translate(0px, 0px)',
+  {
+    duration: 1000,
+    style: {
+      opacity: 1,
+      transformOrigin: '110px 110px',
+      transform: 'rotate(0deg) translate(0px, 0px)',
+    },
+    easing: 'ease-in',
   },
-  easing: 'ease-in',
-}, {
-  duration: 1000,
-  style: {
-    transform: 'rotate(500deg) translate(0px, 0px)',
+  {
+    duration: 1000,
+    style: {
+      transform: 'rotate(500deg) translate(0px, 0px)',
+    },
+    easing: 'ease-in-out',
   },
-  easing: 'ease-in-out',
-}, {
-  duration: 2000,
-  style: {
-    transformOrigin: '610px 610px',
-    transform: 'rotate(1440deg) translate(500px, 500px)',
+  {
+    duration: 2000,
+    style: {
+      transformOrigin: '610px 610px',
+      transform: 'rotate(1440deg) translate(500px, 500px)',
+    },
   },
-}, {
-  duration: 50,
-  style: {
-    transformOrigin: 'center center',
-    transform: 'translate(500px, 500px) scale(1)',
+  {
+    duration: 50,
+    style: {
+      transformOrigin: 'center center',
+      transform: 'translate(500px, 500px) scale(1)',
+    },
+    onAnimationEnd,
   },
-  onAnimationEnd,
-}, {
-  duration: 1000,
-  style: {
-    transformOrigin: 'center center',
-    transform: 'translate(500px, 500px) scale(1.6)',
+  {
+    duration: 1000,
+    style: {
+      transformOrigin: 'center center',
+      transform: 'translate(500px, 500px) scale(1.6)',
+    },
   },
-}];
+];
 
 const createPoint = (x, y) => {
   const currX = x;
@@ -59,6 +66,7 @@ const getArcPath = (radius, rotation, isLarge, isSweep, dx, dy) => {
 };
 
 class Gossip extends Component {
+  // eslint-disable-next-line react/static-property-placement
   static displayName = 'Gossip';
 
   constructor(props, ctx) {
@@ -75,6 +83,7 @@ class Gossip extends Component {
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   renderPath() {
     const cx = 110;
     const cy = 110;
@@ -91,6 +100,7 @@ class Gossip extends Component {
     return <path d={[move, A, A2, A3].join('\n')} />;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   renderSmallCircles() {
     const cx = 110;
     const cy = 110;
@@ -104,22 +114,25 @@ class Gossip extends Component {
         r: tr,
         fill: i ? 'white' : 'black',
         key: i,
-      })
+      }),
     );
 
     return <g className="small-circles">{circles}</g>;
   }
 
   renderText() {
+    const { canBegin } = this.state;
     return (
       <Animate
-        canBegin={this.state.canBegin}
+        canBegin={canBegin}
         duration={1000}
         from={{ opacity: 0, transform: 'scale(1)' }}
         to={{ opacity: 1, transform: 'scale(1.5)' }}
       >
         <g style={{ transformOrigin: 'center center' }}>
-          <text x="500" y="300">May you no bug this year</text>
+          <text x="500" y="300">
+            May you no bug this year
+          </text>
         </g>
       </Animate>
     );
@@ -128,7 +141,7 @@ class Gossip extends Component {
   render() {
     return (
       <svg width="1000" height="1000">
-        <Animate steps={this.STEPS} >
+        <Animate steps={this.STEPS}>
           <g className="gossip">
             <circle cx="110" cy="110" r="100" style={{ stroke: 'black', fill: 'white' }} />
             {this.renderPath()}

diff --git a/demo/Gossip/index.html b/demo/Gossip/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Gossip</title>
-</head>
-<body>
-  <a href="../">back</a>
-  <div id="app"></div>
-  <script src="./build.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gossip</title>
+  </head>
+  <body>
+    <a href="../">back</a>
+    <div id="app"></div>
+    <script src="./build.js"></script>
+  </body>
 </html>
diff --git a/demo/GroupAnimation/app.js b/demo/GroupAnimation/app.js
@@ -3,15 +3,23 @@ import ReactDom from 'react-dom';
 import { AnimateGroup } from 'react-smooth';
 
 class GroupAnimation extends Component {
-  state = {
-    list: [{
-      text: 'first...',
-    }, {
-      text: 'second...',
-    }, {
-      text: 'third...',
-    }],
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      list: [
+        {
+          text: 'first...',
+        },
+        {
+          text: 'second...',
+        },
+        {
+          text: 'third...',
+        },
+      ],
+    };
+  }
 
   handleDel(index) {
     const { list } = this.state;
@@ -51,8 +59,8 @@ class GroupAnimation extends Component {
             }}
           >
             {item.text}
-            <a
-              href="javascript:void(0);"
+            <button
+              type="button"
               className="btn del"
               style={{
                 float: 'right',
@@ -61,35 +69,35 @@ class GroupAnimation extends Component {
               onClick={requestDel}
             >
               del
-            </a>
+            </button>
           </div>
         </div>
       );
     });
 
-    const leaveSteps = [{
-      duration: 0,
-      style: {
-        transform: 'translateX(0)',
+    const leaveSteps = [
+      {
+        duration: 0,
+        style: {
+          transform: 'translateX(0)',
+        },
       },
-    }, {
-      duration: 1000,
-      style: {
-        transform: 'translateX(302px)',
-        height: 50,
+      {
+        duration: 1000,
+        style: {
+          transform: 'translateX(302px)',
+          height: 50,
+        },
       },
-    }, {
-      duration: 1000,
-      style: {
-        height: 0,
+      {
+        duration: 1000,
+        style: {
+          height: 0,
+        },
       },
-    }];
+    ];
 
-    return (
-      <AnimateGroup leave={{ steps: leaveSteps }}>
-        { items }
-      </AnimateGroup>
-    );
+    return <AnimateGroup leave={{ steps: leaveSteps }}>{items}</AnimateGroup>;
   }
 
   render() {

diff --git a/demo/GroupAnimation/index.html b/demo/GroupAnimation/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Group Animation</title>
-</head>
-<body>
-  <a href="../">back</a>
-  <div id="app"></div>
-  <script src="./build.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Group Animation</title>
+  </head>
+  <body>
+    <a href="../">back</a>
+    <div id="app"></div>
+    <script src="./build.js"></script>
+  </body>
 </html>