UNPKG

wix-style-react

Version:
74 lines (73 loc) 2.34 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.default = void 0; var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _ProgressBarSt = require("./ProgressBar.st.css"); var _Heading = _interopRequireDefault(require("../../Heading")); var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Selector/ProgressBar/ProgressBar.js"; class ProgressBar extends _react.default.PureComponent { render() { var { dataHook, progress } = this.props; return /*#__PURE__*/_react.default.createElement("div", { "data-hook": dataHook, className: _ProgressBarSt.classes.root, __self: this, __source: { fileName: _jsxFileName, lineNumber: 10, columnNumber: 7 } }, /*#__PURE__*/_react.default.createElement(_Heading.default, { size: "extraTiny", __self: this, __source: { fileName: _jsxFileName, lineNumber: 11, columnNumber: 9 } }, "".concat(progress, "%")), /*#__PURE__*/_react.default.createElement("span", { className: _ProgressBarSt.classes.bar, __self: this, __source: { fileName: _jsxFileName, lineNumber: 12, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement("span", { className: _ProgressBarSt.classes.value, style: { width: progress + '%' }, __self: this, __source: { fileName: _jsxFileName, lineNumber: 13, columnNumber: 11 } }), /*#__PURE__*/_react.default.createElement("span", { className: _ProgressBarSt.classes.leftover, style: { width: 100 - progress + '%' }, __self: this, __source: { fileName: _jsxFileName, lineNumber: 14, columnNumber: 11 } }))); } } ProgressBar.propTypes = { /** Applied as data-hook HTML attribute that can be used in the tests */ dataHook: _propTypes.default.string, /** Percentage of the progress, value should be between 0 to 100 */ progress: _propTypes.default.number.isRequired }; var _default = exports.default = ProgressBar; //# sourceMappingURL=ProgressBar.js.map