@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
43 lines • 2.48 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Badge = Badge;
const react_1 = __importDefault(require("react"));
const constants_1 = require("../../configuration/constants");
const Tag_1 = __importDefault(require("../Tag/Tag"));
/**
* Display a badge element to add more context to another element.
* It can display icons, text and numbers.
*/
function Badge(_a) {
var { children, className = "", position = "inline", size = "medium", maxLength, intent, tagProps } = _a, spanProps = __rest(_a, ["children", "className", "position", "size", "maxLength", "intent", "tagProps"]);
let badgeContent = children;
// shorten number values
// for maxLength=3 display 99+ instead of 1023.
if (typeof children === "number" && maxLength && maxLength > 1 && children >= Math.pow(10, maxLength - 1)) {
badgeContent = `${Math.pow(10, maxLength - 1) - 1}+`;
}
if (typeof children === "object") {
badgeContent = "";
}
return (react_1.default.createElement("span", Object.assign({ className: `${constants_1.CLASSPREFIX}-badge ${constants_1.CLASSPREFIX}-badge--${position}` +
(typeof children === "object" ? ` ${constants_1.CLASSPREFIX}-badge--icon` : "") }, spanProps),
react_1.default.createElement(Tag_1.default, Object.assign({ className: `${constants_1.CLASSPREFIX}-badge__tag`, round: true, small: size === "small", large: size === "large", emphasis: !intent ? "stronger" : undefined, intent: intent, minimal: intent ? false : true, icon: typeof children === "object" ? children : undefined, style: typeof children === "string" && maxLength && maxLength > 1
? { maxWidth: `calc((${maxLength - 1}em + ${maxLength - 1}ch)/2)` }
: {} }, tagProps), badgeContent)));
}
exports.default = Badge;
//# sourceMappingURL=Badge.js.map