rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
28 lines (27 loc) • 1.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressBar = void 0;
const react_native_1 = require("react-native");
const hooks_1 = require("../../hooks");
const theme_1 = require("../../theme");
const ProgressBar = ({ backgroundColor = '#FFF', borderColor, borderRadius = 0, height = 20, progressColor = '#00cc00', rounded, showPercent, textColor, value = 0, }) => {
const { progress } = (0, hooks_1.useProgressBar)(value);
return (<react_native_1.View style={{
...theme_1.progressBarStyles.container,
backgroundColor,
height,
borderRadius: rounded ? 50 : borderRadius,
borderColor,
borderWidth: !!borderColor ? 1 : 0,
}}>
<react_native_1.View style={[
theme_1.progressBarStyles.progressBar,
{ backgroundColor: progressColor },
{ width: `${progress * 100}%` },
]}/>
{showPercent && (<react_native_1.Text style={{ ...theme_1.progressBarStyles.progressText, color: textColor }}>
{Math.round(progress * 100)}%
</react_native_1.Text>)}
</react_native_1.View>);
};
exports.ProgressBar = ProgressBar;