From 106faad582e6ed7a4ec098ad77ba67bb53051d50 Mon Sep 17 00:00:00 2001 From: undefined <i@undefined.moe> Date: Tue, 10 Sep 2024 22:01:29 +0800 Subject: [PATCH] chore: add module icon & don't display group when searching --- src/components/HardwareListing/HardwareListing.tsx | 14 ++++++++++---- src/components/TreeListing/TreeListing.tsx | 6 ++++-- src/settings.ts | 2 +- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/HardwareListing/HardwareListing.tsx b/src/components/HardwareListing/HardwareListing.tsx index 91bd109..14c7e09 100644 --- 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 index 556c9d5..328db0d 100644 --- 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 index 251cebd..04a1b7e 100644 --- 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}`;