mirror of
https://github.com/Zagrios/bs-manager.git
synced 2026-07-03 14:08:25 +02:00
Move file-size-text.tsx into mod-item
Since FileSizeText will only ever be used on ModItems
This commit is contained in:
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user