@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
49 lines • 2.18 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import { ComponentContainer, LinearProgressContainer, LinearProgress as MuiLinearProgress, Label } from './LinearProgressStyles';
import { isNil } from 'ramda';
/**
* Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
*/
const LinearProgress = ({ color = 'grey', variant, value, valueBuffer, showLabel, labelProps, global, ...rest }) => {
const hasLabel = useMemo(() => !global && showLabel && !isNil(value), [global, showLabel, value]);
return (React.createElement(ComponentContainer, { global: global },
React.createElement(LinearProgressContainer, { hasLabel: hasLabel },
React.createElement(MuiLinearProgress, { value: value, valueBuffer: valueBuffer, variant: variant, color: color, ...rest })),
hasLabel && (React.createElement(Box, { sx: { minWidth: 35 } },
React.createElement(Label, { color: "textSecondary", variant: "body2", ...labelProps }, `${Math.round(value)}%`)))));
};
LinearProgress.propTypes = {
/**
* @default 'grey'
* Color of the component.
*/
color: PropTypes.oneOf(['primary', 'secondary', 'warning', 'error', 'success', 'info', 'rose', 'grey']),
/**
* If true it shows the progress indicator value (%).
*/
showLabel: PropTypes.bool,
/**
* If true, the bar is shown at the top of the page, spanning the entire width
*/
global: PropTypes.bool,
/**
* Props applied to the label.
*/
labelProps: PropTypes.object,
/**
* Variant to use. Use indeterminate or query when there is no progress value.
*/
variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query']),
/**
* Value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.
*/
value: PropTypes.number,
/**
* Value for the buffer variant. Value between 0 and 100.
*/
valueBuffer: PropTypes.number
};
export default LinearProgress;
//# sourceMappingURL=LinearProgress.js.map