chore: add module icon & don't display group when searching

EVEShipFit · Sep 10, 2024 · 106faad · 106faad
1 parent dd12c81
commit 106faad
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/components/HardwareListing/HardwareListing.tsx b/src/components/HardwareListing/HardwareListing.tsx
@@ -56,7 +56,7 @@ const OnItemDragStart = (
   };
 };
 
-const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: boolean }) => {
+const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: number }) => {
   const fitManager = useFitManager();
 
   const PreviewStart = React.useCallback(
@@ -80,6 +80,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
             const slotType = item.slotType;
             return (
               <TreeLeaf
+                icon={`https://images.evetech.net/types/${item.typeId}/icon`}
                 key={item.typeId}
                 level={2}
                 content={item.name}
@@ -100,7 +101,12 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
               props.group.groups[a].name.localeCompare(props.group.groups[b].name),
           )
           .map((groupId) => {
-            return <ModuleGroup key={groupId} level={props.level + 1} group={props.group.groups[groupId]} />;
+            return <ModuleGroup
+              key={groupId}
+              level={props.hideGroup ? props.level : props.level + 1}
+              group={props.group.groups[groupId]}
+              hideGroup={props.hideGroup ? props.hideGroup - 1 : 0}
+            />;
           })}
       </>
     );
@@ -523,10 +529,10 @@ export const HardwareListing = () => {
         </div>
       </div>
       <div className={clsx(styles.listingContent, { [styles.collapsed]: selection !== "modules" })}>
-        <ModuleGroup key="modules" level={0} group={modules} hideGroup={true} />
+        <ModuleGroup key="modules" level={0} group={modules} hideGroup={search ? 2 : 1} />
       </div>
       <div className={clsx(styles.listingContent, { [styles.collapsed]: selection !== "charges" })}>
-        <ModuleGroup key="charges" level={0} group={charges} hideGroup={true} />
+        <ModuleGroup key="charges" level={0} group={charges} hideGroup={1} />
       </div>
     </div>
   );

diff --git a/src/components/TreeListing/TreeListing.tsx b/src/components/TreeListing/TreeListing.tsx
@@ -49,7 +49,7 @@ export const TreeHeader = (props: { icon?: string; text: string; action?: React.
 export const TreeLeaf = (props: {
   level: number;
   height?: number;
-  icon?: IconName;
+  icon?: IconName | `http://${string}` | `https://${string}`;
   iconTitle?: string;
   content: string;
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -81,7 +81,9 @@ export const TreeLeaf = (props: {
         >
           {props.icon !== undefined && (
             <span className={styles.leafIcon}>
-              <Icon name={props.icon} size={12} title={props.iconTitle} />
+              {props.icon.startsWith('http')
+                ? <img src={props.icon} height={12} width={12} alt="" />
+                : <Icon name={props.icon as IconName} size={12} title={props.iconTitle} />}
             </span>
           )}
           <span className={styles.headerText}>{props.content}</span>

diff --git a/src/settings.ts b/src/settings.ts
@@ -1,3 +1,3 @@
 import { ESF_DATA_VERSION } from "@eveshipfit/data";
 
-export const defaultDataUrl = `https://data.eveship.fit/v${ESF_DATA_VERSION}/`;
+export const defaultDataUrl = `https://data.eveship.fit/v${ESF_DATA_VERSION}/` as `http://${string}` | `https://${string}`;