From dc5ad0ca1f9b46f397ccabca23805399bf80900b Mon Sep 17 00:00:00 2001
From: Jack <30497388+FieryFlames@users.noreply.github.com>
Date: Sat, 4 Mar 2023 17:33:00 -0500
Subject: [PATCH] [UI > Summary] Add animation (#29)

---
 src/def.d.ts                  |  1 +
 src/ui/components/Summary.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/def.d.ts b/src/def.d.ts
index d7a5f87..3f4d11d 100644
--- a/src/def.d.ts
+++ b/src/def.d.ts
@@ -11,6 +11,7 @@ interface SummaryProps {
     label: string;
     icon?: string;
     noPadding?: boolean;
+    noAnimation?: boolean;
     children: JSX.Element | JSX.Element[];
 }
 
diff --git a/src/ui/components/Summary.tsx b/src/ui/components/Summary.tsx
index ef9347b..55c38a7 100644
--- a/src/ui/components/Summary.tsx
+++ b/src/ui/components/Summary.tsx
@@ -3,10 +3,9 @@ import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { ReactNative as RN } from "@metro/common";
 
-// TODO: Animated would be awesome
 // TODO: Destructuring Forms doesn't work here. Why?
 
-export default function Summary({ label, icon, noPadding = false, children }: SummaryProps) {
+export default function Summary({ label, icon, noPadding = false, noAnimation = false, children }: SummaryProps) {
     const [hidden, setHidden] = React.useState(true);
 
     return (
@@ -14,8 +13,11 @@ export default function Summary({ label, icon, noPadding = false, children }: Su
             <Forms.FormRow
                 label={label}
                 leading={icon && <Forms.FormRow.Icon source={getAssetIDByName(icon)} />}
-                trailing={<Forms.FormRow.Arrow style={{ transform: [{ rotate: `${hidden ? 180 : 90}deg` }] }} source={getAssetIDByName("down_arrow")} />}
-                onPress={() => setHidden(!hidden)}
+                trailing={<Forms.FormRow.Arrow style={{ transform: [{ rotate: `${hidden ? 180 : 90}deg` }] }} />}
+                onPress={() => {
+                    setHidden(!hidden);
+                    if (!noAnimation) RN.LayoutAnimation.configureNext(RN.LayoutAnimation.Presets.easeInEaseOut);
+                }}
             />
             {!hidden && <>
                 <Forms.FormDivider />