Move file-size-text.tsx into mod-item

Since FileSizeText will only ever be used on ModItems
This commit is contained in:
Unifox
2025-02-07 23:14:50 -07:00
parent 187174aa5e
commit 3a2c92614c
2 changed files with 37 additions and 39 deletions
@@ -1,38 +0,0 @@
import Tippy from "@tippyjs/react";
import { CSSProperties } from "react";
type Props = {
fileSize?: number;
wantInfoStyle: CSSProperties;
}
export function FileSizeText({ fileSize, wantInfoStyle }: Props) {
const verifyFileSize = fileSize !== undefined;
const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB
const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB
const getFormattedSize = () : string => {
if (!verifyFileSize)
return `-`;
if (fileSize < 1024 * 1024)
return `${(fileSize/1024).toFixed(2)}KB`;
return `${(fileSize/1024/1024).toFixed(2)}MB`;
};
return (
<Tippy
content={(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
placement="left"
theme={`${(isLargeMod ? `red` : (isMediumMod ? `yellow` : "") || "")}`}
className={`${isLargeMod || isMediumMod ? `` : `opacity-0`}`}
delay={[50, 0]} >
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${(isLargeMod ? "text-red-400" : (isMediumMod ? "text-yellow-400" : "") || "")}`} style={wantInfoStyle}>
{getFormattedSize()}
</span>
</Tippy>
);
}
@@ -7,7 +7,7 @@ import useDoubleClick from "use-double-click";
import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
import striptags from "striptags";
import { safeGt } from "shared/helpers/semver.helpers";
import { FileSizeText } from "renderer/components/shared/file-size-text";
import Tippy from "@tippyjs/react";
type Props = {
className?: string;
@@ -22,6 +22,42 @@ type Props = {
onUninstall?: () => void;
};
type FileSizeProps = {
fileSize?: number;
wantInfoStyle: CSSProperties;
};
function FileSizeText({ fileSize, wantInfoStyle }: FileSizeProps) {
const verifyFileSize = fileSize !== undefined;
const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB
const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB
const getFormattedSize = () : string => {
if (!verifyFileSize)
return `-`;
if (fileSize < 1024 * 1024)
return `${(fileSize/1024).toFixed(2)}KB`;
return `${(fileSize/1024/1024).toFixed(2)}MB`;
};
return (
<Tippy
content={(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
placement="left"
theme={`${(isLargeMod ? `red` : (isMediumMod ? `yellow` : "") || "")}`}
className={`${isLargeMod || isMediumMod ? `` : `opacity-0`}`}
delay={[50, 0]} >
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${(isLargeMod ? "text-red-400" : (isMediumMod ? "text-yellow-400" : "") || "")}`} style={wantInfoStyle}>
{getFormattedSize()}
</span>
</Tippy>
);
}
export function ModItem({ className, mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo, disabled, onUninstall }: Props) {
const themeColor = useThemeColor("second-color");