add channels button

igorlira · Sep 8, 2024 · 9b8092c · 9b8092c
1 parent 1915786
commit 9b8092c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 30 deletions.
diff --git a/src/components/ExpandableButton/index.tsx b/src/components/ExpandableButton/index.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames"
+import { PropsWithChildren, useEffect, useState } from "react"
+
+import styles from './styles.module.css'
+
+type ExpandableButtonProps = PropsWithChildren<{
+  className?: string
+  label: string
+  onStateChange?: (expanded: boolean) => void
+}>
+export default function ExpandableButton({ children, className, label, onStateChange }: ExpandableButtonProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  useEffect(() => onStateChange?.(isExpanded), [onStateChange, isExpanded]);
+  return <div className={classNames(className, styles.container)}>
+    <button onClick={() => setIsExpanded(!isExpanded)} className={styles.toggleButton}>[{isExpanded ? '-' : '+'}] {label}</button>
+    {isExpanded && children}
+  </div>
+}
diff --git a/src/components/ExpandableButton/styles.module.css b/src/components/ExpandableButton/styles.module.css
@@ -0,0 +1,6 @@
+.toggleButton {
+  padding: 8px;
+  text-align: start;
+  background-color: #bbb;
+  cursor: pointer;
+}
diff --git a/src/views/CastInspector/index.tsx b/src/views/CastInspector/index.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
 import CastList from '../../components/CastList';
 import { CastSnapshot, ICastMemberIdentifier } from '../../vm';
 import styles from './styles.module.css';
 import classNames from 'classnames';
+import ExpandableButton from '../../components/ExpandableButton';
 
 interface CastInspectorProps {
   castNames: string[],
@@ -13,15 +13,13 @@ interface CastInspectorProps {
 }
 
 export default function CastInspector({ castNames, castSnapshots, selectedMemberId, onSelectMember, className }: CastInspectorProps) {
-  const [isExpanded, setIsExpanded] = useState(false)
-  return <div className={classNames(className, styles.container)}>
-    <button onClick={() => setIsExpanded(!isExpanded)} className={styles.toggleButton}>[{isExpanded ? '-' : '+'}] Casts</button>
-    {isExpanded && <CastList 
+  return <ExpandableButton className={classNames(className, styles.container)} label='Casts'>
+    <CastList 
       castNames={castNames} 
       castSnapshots={castSnapshots} 
       selectedMemberId={selectedMemberId} 
       onSelectMember={onSelectMember}
       className={styles.castList}
-    />}
-  </div>
+    />
+  </ExpandableButton>
 }
diff --git a/src/views/ScoreInspector/index.tsx b/src/views/ScoreInspector/index.tsx
@@ -7,6 +7,7 @@ import { player_set_debug_selected_channel, subscribe_to_channel_names, unsubscr
 import { channelSelected, scoreBehaviorSelected } from "../../store/uiSlice";
 import { useEffect, useState } from "react";
 import { getScoreFrameBehaviorRef } from "../../utils/score";
+import ExpandableButton from "../../components/ExpandableButton";
 
 export default function ScoreInspector() {
   const score = useAppSelector((state) => selectScoreSnapshot(state.vm));
@@ -16,14 +17,14 @@ export default function ScoreInspector() {
   const channelSnapshots = useAppSelector((state) => state.vm.channelSnapshots);
   const selectedChannel = selectedObject?.type === "sprite" && selectedObject.spriteNumber;
   const dispatch = useAppDispatch();
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isShowingChannels, setIsShowingChannels] = useState(false);
 
   useEffect(() => {
-    if (isExpanded) {
+    if (isShowingChannels) {
       subscribe_to_channel_names();
     }
     return () => unsubscribe_from_channel_names();
-  }, [isExpanded]);
+  }, [isShowingChannels]);
 
   const onSelectChannel = (channel: number) => {
     player_set_debug_selected_channel(channel);
@@ -56,7 +57,7 @@ export default function ScoreInspector() {
             return <button key={frame} className={cellClasses} onClick={() => onSelectBehavior(frame)}></button>;
           })}
         </div>
-        <div className={styles.frameHeader} onClick={() => setIsExpanded(value => !value)}>
+        <div className={styles.frameHeader}>
           {range(1, framesToRender + 1).map((frame) => {
             const cellClasses = classNames(
               styles.frameHeaderCell,
@@ -70,25 +71,27 @@ export default function ScoreInspector() {
           })}
         </div>
       </div>
-      {isExpanded && <div className={styles.channelList}>
-        {Array.from({ length: score?.channelCount || 0 }, (_, i) => i + 1).map(
-          (channel) => {
-            let sprite = channelSnapshots[channel];
-            return (
-              <button
-                key={channel}
-                className={classNames([
-                  styles.channelRow,
-                  selectedChannel === channel && styles.selected,
-                ])}
-                onClick={() => onSelectChannel(channel)}
-              >
-                ({channel}) {sprite?.displayName}
-              </button>
-            );
-          }
-        )}
-      </div>}
+      <ExpandableButton label="Channels" className={styles.channelsButton} onStateChange={setIsShowingChannels}>
+        <div className={styles.channelList}>
+          {Array.from({ length: score?.channelCount || 0 }, (_, i) => i + 1).map(
+            (channel) => {
+              let sprite = channelSnapshots[channel];
+              return (
+                <button
+                  key={channel}
+                  className={classNames([
+                    styles.channelRow,
+                    selectedChannel === channel && styles.selected,
+                  ])}
+                  onClick={() => onSelectChannel(channel)}
+                >
+                  ({channel}) {sprite?.displayName}
+                </button>
+              );
+            }
+          )}
+        </div>
+      </ExpandableButton>
     </div>
   );
 }
diff --git a/src/views/ScoreInspector/styles.module.css b/src/views/ScoreInspector/styles.module.css
@@ -6,6 +6,13 @@
   width: 100%;
 }
 
+.channelsButton {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .scoreScrollContainer {
   overflow-x: scroll;
   overflow-y: hidden;