@guardian/threads
Version:
30 lines • 2.04 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { cloneElement, Children, } from 'react';
import styles from './ProgressBar.module.css';
var addPercentToChildren = function (children, to, hue) {
return Children.map(children, function (childMaybeText) {
// We can't statically verify that the child *isn't* ReactText at this point
// so just do a case and manually check for the existance of the progress prop
var child = childMaybeText;
return child && child.props && child.props.progress
? cloneElement(child, __assign(__assign({}, child.props), { hue: hue, children: child.props.children &&
addPercentToChildren(child.props.children, to, hue), perc: (child.props && child.props.perc) ||
(child.props.progress / to) * 100 }))
: child;
});
};
var Tag = function (_a) {
var onClick = _a.onClick, children = _a.children, className = _a.className, style = _a.style, props = __rest(_a, ["onClick", "children", "className", "style"]);
return onClick ? (React.createElement("button", __assign({}, __assign({ onClick: onClick, className: className, style: style }, props)), children)) : (React.createElement("div", __assign({}, props), children));
};
var ProgressBarTier = function (_a) {
var perc = _a.perc, hue = _a.hue, children = _a.children, title = _a.title, appearance = _a.appearance, onClick = _a.onClick;
return appearance === 'fill' || perc > 0 ? (React.createElement(Tag, __assign({ className: styles.tier, style: { minWidth: perc + "%", backgroundColor: hue }, "data-appearance": appearance }, { onClick: onClick, title: title }),
React.createElement("span", { className: styles.progress }, children))) : null;
};
var ProgressBar = function (_a) {
var children = _a.children, to = _a.to, hue = _a.hue;
return (React.createElement("div", { className: styles.root }, addPercentToChildren(children, to, hue)));
};
export { ProgressBar, ProgressBarTier };
//# sourceMappingURL=ProgressBar.js.map