progress-bar-react-ui
Version:
A React Component that show processing of actions as progressbar.
83 lines (82 loc) • 3.84 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const ProgressBarReact = (props) => {
var _a;
const [width, setWidth] = (0, react_1.useState)(props.width || 300);
const [progress, setProgress] = (0, react_1.useState)((_a = props.progress) !== null && _a !== void 0 ? _a : 50);
const [color, setColor] = (0, react_1.useState)(props.color || 'blue');
const [backgroundColor, setBackgroundColor] = (0, react_1.useState)(props.backgroundColor || 'white');
const [className, setClassName] = (0, react_1.useState)(props.className || '');
(0, react_1.useEffect)(() => {
var _a;
setProgress((_a = props.progress) !== null && _a !== void 0 ? _a : 50);
}, [props.progress]);
(0, react_1.useEffect)(() => {
setWidth(props.width || 300);
}, [props.width]);
(0, react_1.useEffect)(() => {
setColor(props.color || 'blue');
}, [props.color]);
(0, react_1.useEffect)(() => {
setBackgroundColor(props.backgroundColor || 'white');
}, [props.backgroundColor]);
(0, react_1.useEffect)(() => {
setClassName(props.className || '');
}, [props.className]);
return (react_1.default.createElement("div", { className: 'progress-bar-react-ui ' + className, style: Object.assign({ width: `${width}px`, border: 'solid 1px black', padding: '2px 0px', borderRadius: '20px', overflow: 'hidden', fontWeight: 'bold', fontFamily: 'arial', fontSize: '20px', position: 'relative', height: '24px', lineHeight: '20px', boxSizing: 'border-box', background: `${backgroundColor}`, color: 'black' }, props.style) },
react_1.default.createElement("div", { style: {
background: `${color}`,
position: 'absolute',
left: '0px',
top: '0px',
height: '100%',
width: `${progress}%`,
overflow: 'hidden',
padding: 'inherit',
zIndex: 2,
} },
react_1.default.createElement("span", { style: {
display: 'block',
width: '80px',
position: 'absolute',
left: `${width / 2 - 40}px`,
color: 'white',
zIndex: 1,
} },
progress,
"%")),
react_1.default.createElement("span", { style: {
display: 'block',
width: '80px',
position: 'absolute',
left: `${width / 2 - 40}px`,
zIndex: 1,
} },
progress,
"%")));
};
exports.default = ProgressBarReact;