From 8acddde81e627999b5d5615a918923e2f874d195 Mon Sep 17 00:00:00 2001
From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com>
Date: Tue, 29 Nov 2022 12:15:09 +0000
Subject: [PATCH] Potential improvement, drop classNames dependency (#135)

- add classes to an array (some will be false if conditions aren't met)
- filter for truthy values
- join array elements with a space
---
 src/index.tsx | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 63f26a0..a9dbc44 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,4 @@
 import React, { CSSProperties, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
 
 // ------------------ Types
 
@@ -68,12 +67,14 @@ function getStaticStateClasses(
   animationStateClasses: AnimationStateClasses,
   height: Height
 ) {
-  return classNames({
-    [animationStateClasses.static]: true,
-    [animationStateClasses.staticHeightZero]: height === 0,
-    [animationStateClasses.staticHeightSpecific]: height > 0,
-    [animationStateClasses.staticHeightAuto]: height === 'auto',
-  });
+  return [
+    animationStateClasses.static,
+    height === 0 && animationStateClasses.staticHeightZero,
+    height > 0 && animationStateClasses.staticHeightSpecific,
+    height === 'auto' && animationStateClasses.staticHeightAuto,
+  ]
+    .filter((v) => v)
+    .join(' ');
 }
 
 // ------------------ Component
@@ -208,16 +209,18 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
       }
 
       // Animation classes
-      const newAnimationStateClassNames = classNames({
-        [stateClasses.current.animating]: true,
-        [stateClasses.current.animatingUp]:
-          prevHeight.current === 'auto' || height < prevHeight.current,
-        [stateClasses.current.animatingDown]:
-          height === 'auto' || height > prevHeight.current,
-        [stateClasses.current.animatingToHeightZero]: timeoutHeight === 0,
-        [stateClasses.current.animatingToHeightAuto]: timeoutHeight === 'auto',
-        [stateClasses.current.animatingToHeightSpecific]: timeoutHeight > 0,
-      });
+      const newAnimationStateClassNames = [
+        stateClasses.current.animating,
+        (prevHeight.current === 'auto' || height < prevHeight.current) &&
+          stateClasses.current.animatingUp,
+        (height === 'auto' || height > prevHeight.current) &&
+          stateClasses.current.animatingDown,
+        timeoutHeight === 0 && stateClasses.current.animatingToHeightZero,
+        timeoutHeight === 'auto' && stateClasses.current.animatingToHeightAuto,
+        timeoutHeight > 0 && stateClasses.current.animatingToHeightSpecific,
+      ]
+        .filter((v) => v)
+        .join(' ');
 
       // Animation classes to be put after animation is complete
       const timeoutAnimationStateClasses = getStaticStateClasses(