forked from external-repos/squoosh
d93169cc5a
* Basic grid setup * Fixing thumb on two-up * Adding margin so you can still access the two-up * Allow multi-panel to keep one open only * Edge cases for one-open * Abstracting results so it can be used as a heading. * Ordering of items in mobile view. Changing scrolling element. * Adding labels to collapsed view * Adding height animation to multi-panel * Fixing animation bugs * Expand/collapse icon * Allow two-up and pinch-zoom to work beneath controls * Range bubble now behaves properly on mobile * No longer need this. * Prevent options overflow at larger widths
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { h, Component } from 'preact';
|
|
import * as prettyBytes from 'pretty-bytes';
|
|
import * as style from './style.scss';
|
|
|
|
interface Props {
|
|
blob: Blob;
|
|
compareTo?: Blob;
|
|
}
|
|
|
|
interface State {}
|
|
|
|
export default class FileSize extends Component<Props, State> {
|
|
render({ blob, compareTo }: Props) {
|
|
let comparison: JSX.Element | undefined;
|
|
|
|
if (compareTo) {
|
|
const delta = blob.size / compareTo.size;
|
|
if (delta > 1) {
|
|
const percent = Math.round((delta - 1) * 100) + '%';
|
|
comparison = (
|
|
<span class={`${style.sizeDelta} ${style.sizeIncrease}`}>
|
|
{percent === '0%' ? 'slightly' : percent} bigger
|
|
</span>
|
|
);
|
|
} else if (delta < 1) {
|
|
const percent = Math.round((1 - delta) * 100) + '%';
|
|
comparison = (
|
|
<span class={`${style.sizeDelta} ${style.sizeDecrease}`}>
|
|
{percent === '0%' ? 'slightly' : percent} smaller
|
|
</span>
|
|
);
|
|
} else {
|
|
comparison = (
|
|
<span class={style.sizeDelta}>no change</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
return <span>{prettyBytes(blob.size)} {comparison}</span>;
|
|
}
|
|
}
|