mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-07 05:33:27 +00:00
Quick sizing handling fix (#2577)
* quick fix and improvement * edge case * edge case
This commit is contained in:
parent
28f98fd550
commit
b9ccf3540b
|
@ -1,6 +1,6 @@
|
||||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { humanizeSize } from '@sd/client';
|
import { humanizeSize } from '@sd/client';
|
||||||
import { Card, CircularProgress, cva, tw } from '@sd/ui';
|
import { Card, CircularProgress, tw } from '@sd/ui';
|
||||||
import { Icon } from '~/components';
|
import { Icon } from '~/components';
|
||||||
import { useIsDark, useLocale } from '~/hooks';
|
import { useIsDark, useLocale } from '~/hooks';
|
||||||
|
|
||||||
|
@ -20,17 +20,16 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
|
||||||
|
|
||||||
const isDark = useIsDark();
|
const isDark = useIsDark();
|
||||||
|
|
||||||
// Returns the value in a simpler form and unit i.e 2.5 TB
|
//TODO: Improve this
|
||||||
const totalSpaceSingle = humanizeSize(stats.totalSpace);
|
const totalSpaceSingleValue = humanizeSize(stats.totalSpace);
|
||||||
|
|
||||||
const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => {
|
const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => {
|
||||||
|
|
||||||
// Returns the value in thousands format
|
|
||||||
const totalSpace = humanizeSize(stats.totalSpace, {
|
const totalSpace = humanizeSize(stats.totalSpace, {
|
||||||
return_thousands: true
|
no_thousands: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const freeSpace = stats.freeSpace == null ? totalSpace : humanizeSize(stats.freeSpace);
|
const freeSpace = stats.freeSpace == null ? totalSpace : humanizeSize(stats.freeSpace);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
totalSpace,
|
totalSpace,
|
||||||
freeSpace,
|
freeSpace,
|
||||||
|
@ -85,7 +84,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
|
||||||
{freeSpace.value !== totalSpace.value && (
|
{freeSpace.value !== totalSpace.value && (
|
||||||
<>
|
<>
|
||||||
{freeSpace.value} {t(`size_${freeSpace.unit.toLowerCase()}`)}{' '}
|
{freeSpace.value} {t(`size_${freeSpace.unit.toLowerCase()}`)}{' '}
|
||||||
{t('free_of')} {totalSpaceSingle.value}{' '}
|
{t('free_of')} {totalSpaceSingleValue.value}{' '}
|
||||||
{t(`size_${totalSpace.unit.toLowerCase()}`)}
|
{t(`size_${totalSpace.unit.toLowerCase()}`)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -86,7 +86,7 @@ export interface ByteSizeOpts {
|
||||||
precision?: number;
|
precision?: number;
|
||||||
base_unit?: 'decimal' | 'binary';
|
base_unit?: 'decimal' | 'binary';
|
||||||
use_plural?: boolean;
|
use_plural?: boolean;
|
||||||
return_thousands?: boolean;
|
no_thousands?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -99,7 +99,7 @@ export interface ByteSizeOpts {
|
||||||
* @param options.precision - Number of decimal places. Defaults to `1`.
|
* @param options.precision - Number of decimal places. Defaults to `1`.
|
||||||
* @param options.base_unit - The base unit to use. Defaults to `'decimal'`.
|
* @param options.base_unit - The base unit to use. Defaults to `'decimal'`.
|
||||||
* @param options.use_plural - Use plural unit names when necessary. Defaults to `true`.
|
* @param options.use_plural - Use plural unit names when necessary. Defaults to `true`.
|
||||||
* @param options.return_thousands - Return the value in thousands. Defaults to `false`.
|
* @param options.no_thousands - Do not convert TB to thousands. Defaults to `true`.
|
||||||
*/
|
*/
|
||||||
export const humanizeSize = (
|
export const humanizeSize = (
|
||||||
value: null | string | number | bigint | string[] | number[] | bigint[] | undefined,
|
value: null | string | number | bigint | string[] | number[] | bigint[] | undefined,
|
||||||
|
@ -109,7 +109,7 @@ export const humanizeSize = (
|
||||||
locales,
|
locales,
|
||||||
base_unit = 'decimal',
|
base_unit = 'decimal',
|
||||||
use_plural = true,
|
use_plural = true,
|
||||||
return_thousands = false
|
no_thousands = true
|
||||||
}: ByteSizeOpts = {}
|
}: ByteSizeOpts = {}
|
||||||
) => {
|
) => {
|
||||||
if (value == null) value = 0n;
|
if (value == null) value = 0n;
|
||||||
|
@ -138,11 +138,18 @@ export const humanizeSize = (
|
||||||
: Number((bytes * BigInt(precisionFactor)) / unit.from) / precisionFactor;
|
: Number((bytes * BigInt(precisionFactor)) / unit.from) / precisionFactor;
|
||||||
const plural = use_plural && value !== 1 ? 's' : '';
|
const plural = use_plural && value !== 1 ? 's' : '';
|
||||||
|
|
||||||
|
//TODO: Improve this
|
||||||
|
// Convert to thousands when short is TB to show correct progress value
|
||||||
|
//i.e 2.5 TB = 2500
|
||||||
|
if (unit.short === "TB" && !no_thousands) {
|
||||||
|
value = value * 1000;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
unit: is_bit ? BYTE_TO_BIT[unit.short as keyof typeof BYTE_TO_BIT] : unit.short,
|
unit: is_bit ? BYTE_TO_BIT[unit.short as keyof typeof BYTE_TO_BIT] : unit.short,
|
||||||
long: is_bit ? BYTE_TO_BIT[unit.long as keyof typeof BYTE_TO_BIT] : unit.long,
|
long: is_bit ? BYTE_TO_BIT[unit.long as keyof typeof BYTE_TO_BIT] : unit.long,
|
||||||
bytes,
|
bytes,
|
||||||
value: (isNegative ? -1 : 1) * (return_thousands ? value * 1000 : value),
|
value: (isNegative ? -1 : 1) * value,
|
||||||
toString() {
|
toString() {
|
||||||
return `${defaultFormat.format(this.value)} ${this.unit}${plural}`;
|
return `${defaultFormat.format(this.value)} ${this.unit}${plural}`;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue