filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-26 04:19:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(DataMeter): clamp percentage between 0 and 100%

Browse Source
This commit is contained in:
Aminejv 2021-09-15 19:27:36 +01:00 committed by Martina
parent 9b632cacc3
commit 49d5e02932
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/core/DataMeter.js
View File

@ -1,4 +1,5 @@
import * as React from "react";
import * as Utilities from "~/common/utilities";
import { css } from "@emotion/react";
import { motion } from "framer-motion";
@ -21,13 +22,13 @@ const STYLES_DATAMETER = (theme) => css`
`;
export default function DataMeter({ bytes = 1000, maximumBytes = 4000, css, ...props }) {
const percentage = bytes / maximumBytes;
const percentage = Utilities.clamp((bytes / maximumBytes) * 100, 0, 100);
return (
<div css={[STYLES_DATAMETER_WRAPPER, css]} {...props}>
<motion.div
initial={false}
css={STYLES_DATAMETER}
animate={{ x: `${percentage * 100}%` }}
animate={{ x: `${percentage}%` }}
transition={{ type: "spring", stiffness: 170, damping: 26 }}
/>
</div>