shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

json viewer: updated size display

Browse Source
This commit is contained in:
dswbx
2025-08-28 19:35:32 +02:00
parent dcf88cf587
commit 8f471a29b0
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/core/utils/numbers.ts
View File

@@ -14,10 +14,10 @@ export function ensureInt(value?: string | number | null | undefined): number {
export const formatNumber = { export const formatNumber = {
fileSize: (bytes: number, decimals = 2): string => { fileSize: (bytes: number, decimals = 2): string => {
if (bytes === 0) return "0 Bytes"; if (bytes === 0) return "0 B";
const k = 1024; const k = 1024;
const dm = decimals < 0 ? 0 : decimals; const dm = decimals < 0 ? 0 : decimals;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; const sizes = ["B", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k)); const i = Math.floor(Math.log(bytes) / Math.log(k));
return Number.parseFloat((bytes / k ** i).toFixed(dm)) + " " + sizes[i]; return Number.parseFloat((bytes / k ** i).toFixed(dm)) + " " + sizes[i];
}, },

6
app/src/ui/components/code/JsonViewer.tsx
View File

@@ -4,6 +4,7 @@ import { twMerge } from "tailwind-merge";
import { IconButton } from "../buttons/IconButton"; import { IconButton } from "../buttons/IconButton";
import ErrorBoundary from "ui/components/display/ErrorBoundary"; import ErrorBoundary from "ui/components/display/ErrorBoundary";
import { forwardRef, useImperativeHandle, useState } from "react"; import { forwardRef, useImperativeHandle, useState } from "react";
import { formatNumber } from "bknd/utils";
export type JsonViewerProps = { export type JsonViewerProps = {
json: object | null; json: object | null;
@@ -41,7 +42,8 @@ export const JsonViewer = ({
copyIconProps = {}, copyIconProps = {},
className, className,
}: JsonViewerProps) => { }: JsonViewerProps) => {
const size = showSize ? (json === null ? 0 : (JSON.stringify(json)?.length ?? 0)) : undefined; const size = showSize ? (json === null ? 0 : JSON.stringify(json).length) : undefined;
const formattedSize = formatNumber.fileSize(size ?? 0);
const showContext = size || title || showCopy; const showContext = size || title || showCopy;
function onCopy() { function onCopy() {
@@ -55,7 +57,7 @@ export const JsonViewer = ({
{(title || size !== undefined) && ( {(title || size !== undefined) && (
<div className="flex flex-row"> <div className="flex flex-row">
{title && <span>{title}</span>}{" "} {title && <span>{title}</span>}{" "}
{size !== undefined && <span>({size} Bytes)</span>} {size !== undefined && <span>({formattedSize})</span>}
</div> </div>
)} )}
{showCopy && ( {showCopy && (