filter modal per section

hhd-dev · Jan 8, 2024 · 901f616 · 901f616
1 parent 88417ab
commit 901f616
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/src/components/HhdComponent.tsx b/src/components/HhdComponent.tsx
@@ -80,7 +80,7 @@ const HhdComponent: FC<HhdComponentType> = ({
       <>
         <CardBody style={{ display: "flex", flexDirection: "column" }}>
           <Heading as="h1" fontSize="xl" marginBottom="1rem">
-            {title} <HintsModal />
+            {title} <HintsModal pluginName={`${childName}`} />
           </Heading>
           <Stack spacing="3">
             {renderChild &&

diff --git a/src/components/HhdState.tsx b/src/components/HhdState.tsx
@@ -36,6 +36,7 @@ const HhdState = () => {
                   key={`${statePath}${topIdx}${idx}`}
                   {...plugin}
                   state={state}
+                  childName={pluginName}
                   renderChild={renderChild}
                   statePath={statePath}
                   updateState={setState}

diff --git a/src/components/HintsAccordion.tsx b/src/components/HintsAccordion.tsx
@@ -12,13 +12,17 @@ import { FC } from "react";
 
 type PropType = {
   settings: { [key: string]: any };
+  settingName: string;
 };
 
-const SettingsAccordion: FC<PropType> = ({ settings }) => {
+const SettingsAccordion: FC<PropType> = ({ settings, settingName }) => {
   return (
-    <Accordion allowToggle allowMultiple>
-      {Object.keys(settings).map((topLevelStr, idx) => {
-        const { title, hint, children } = settings[topLevelStr];
+    <Accordion defaultIndex={[0]} allowToggle allowMultiple>
+      {Object.keys(settings).map((pluginName, idx) => {
+        if (pluginName !== settingName) {
+          return null;
+        }
+        const { title, hint, children } = settings[pluginName];
         return (
           <AccordionItem key={idx}>
             <h2>
@@ -73,14 +77,20 @@ function renderChild(child: any, key: number) {
   );
 }
 
-const HintsAccordionContainer = () => {
+type ContainerProps = {
+  pluginName: string;
+};
+
+const HintsAccordionContainer: FC<ContainerProps> = ({ pluginName }) => {
   const settings = useSelector(selectHhdSettings);
 
   return (
     <>
       {Object.values(settings).map((s, idx) => {
-        //@ts-ignore
-        return <SettingsAccordion settings={s} key={idx} />;
+        return (
+          //@ts-ignore
+          <SettingsAccordion settings={s} settingName={pluginName} key={idx} />
+        );
       })}
     </>
   );

diff --git a/src/components/HintsModal.tsx b/src/components/HintsModal.tsx
@@ -9,10 +9,14 @@ import {
   ModalFooter,
 } from "@chakra-ui/react";
 import { InfoIcon } from "@chakra-ui/icons";
-import { useState } from "react";
+import { FC, useState } from "react";
 import HintsAccordion from "./HintsAccordion";
 
-function HintsModal() {
+type Props = {
+  pluginName: string;
+};
+
+const HintsModal: FC<Props> = ({ pluginName }) => {
   const [open, setIsOpen] = useState(false);
 
   const onOpen = () => setIsOpen(true);
@@ -30,7 +34,7 @@ function HintsModal() {
           <ModalHeader>More Information</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <HintsAccordion />
+            <HintsAccordion pluginName={pluginName} />
           </ModalBody>
 
           <ModalFooter>
@@ -42,6 +46,6 @@ function HintsModal() {
       </Modal>
     </>
   );
-}
+};
 
 export default HintsModal;