@etsoo/materialui 1.2.10 → 1.2.11

package/lib/PercentCircularProgress.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CircularProgressProps, TypographyProps } from "@mui/material";
+export type PercentCircularProgressProps = CircularProgressProps & {
+    value: number;
+    valueUnit?: string;
+    textProps?: TypographyProps<"div">;
+};
+export declare function PercentCircularProgress(props: PercentCircularProgressProps): JSX.Element;

package/lib/PercentCircularProgress.js

@@ -0,0 +1,20 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+import React from "react";
+export function PercentCircularProgress(props) {
+    // Destruct
+    const { textProps, valueUnit = "%", ...rest } = props;
+    // Component
+    return (React.createElement(Box, { sx: { position: "relative", display: "inline-flex" } },
+        React.createElement(CircularProgress, { variant: "determinate", ...rest }),
+        React.createElement(Box, { sx: {
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: "absolute",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            } },
+            React.createElement(Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps }, `${Math.round(props.value)}${valueUnit}`))));
+}

package/lib/PercentLinearProgress.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LinearProgressProps, TypographyProps } from "@mui/material";
+export type PercentLinearProgressProps = LinearProgressProps & {
+    value: number;
+    valueUnit?: string;
+    textProps?: TypographyProps;
+};
+export declare function PercentLinearProgress(props: PercentLinearProgressProps): JSX.Element;

package/lib/PercentLinearProgress.js

@@ -0,0 +1,12 @@
+import { Box, LinearProgress, Typography } from "@mui/material";
+import React from "react";
+export function PercentLinearProgress(props) {
+    // Destruct
+    const { textProps, valueUnit = "%", ...rest } = props;
+    // Component
+    return (React.createElement(Box, { sx: { display: "flex", alignItems: "center" } },
+        React.createElement(Box, { sx: { width: "100%", mr: 1 } },
+            React.createElement(LinearProgress, { variant: "determinate", ...rest })),
+        React.createElement(Box, { sx: { minWidth: 35 } },
+            React.createElement(Typography, { variant: "caption", color: "text.secondary", ...textProps }, `${Math.round(props.value)}${valueUnit}`))));
+}

package/lib/index.d.ts

@@ -69,6 +69,8 @@ export * from "./MUGlobal";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./PercentCircularProgress";
+export * from "./PercentLinearProgress";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/lib/index.js

@@ -69,6 +69,8 @@ export * from "./MUGlobal";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./PercentCircularProgress";
+export * from "./PercentLinearProgress";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/PercentCircularProgress.tsx

@@ -0,0 +1,45 @@
+import {
+  Box,
+  CircularProgress,
+  CircularProgressProps,
+  Typography,
+  TypographyProps
+} from "@mui/material";
+import React from "react";
+
+export type PercentCircularProgressProps = CircularProgressProps & {
+  value: number;
+  valueUnit?: string;
+  textProps?: TypographyProps<"div">;
+};
+
+export function PercentCircularProgress(props: PercentCircularProgressProps) {
+  // Destruct
+  const { textProps, valueUnit = "%", ...rest } = props;
+
+  // Component
+  return (
+    <Box sx={{ position: "relative", display: "inline-flex" }}>
+      <CircularProgress variant="determinate" {...rest} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="text.secondary"
+          {...textProps}
+        >{`${Math.round(props.value)}${valueUnit}`}</Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/PercentLinearProgress.tsx

@@ -0,0 +1,35 @@
+import {
+  Box,
+  LinearProgress,
+  LinearProgressProps,
+  Typography,
+  TypographyProps
+} from "@mui/material";
+import React from "react";
+
+export type PercentLinearProgressProps = LinearProgressProps & {
+  value: number;
+  valueUnit?: string;
+  textProps?: TypographyProps;
+};
+
+export function PercentLinearProgress(props: PercentLinearProgressProps) {
+  // Destruct
+  const { textProps, valueUnit = "%", ...rest } = props;
+
+  // Component
+  return (
+    <Box sx={{ display: "flex", alignItems: "center" }}>
+      <Box sx={{ width: "100%", mr: 1 }}>
+        <LinearProgress variant="determinate" {...rest} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          {...textProps}
+        >{`${Math.round(props.value)}${valueUnit}`}</Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/index.ts

@@ -72,6 +72,8 @@ export * from "./MUGlobal";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./PercentCircularProgress";
+export * from "./PercentLinearProgress";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";