customizable-react-badges
Version:
Customizable and Reusable React Badge component for your all kinds of Projects and WebSites.
331 lines (306 loc) • 9.43 kB
JavaScript
import React from 'react';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function colourNameToHex(colour) {
var colours = {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgreen: '#006400',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
gray: '#808080',
green: '#008000',
greenyellow: '#adff2f',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
'indianred ': '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgrey: '#d3d3d3',
lightgreen: '#90ee90',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370d8',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#d87093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
rebeccapurple: '#663399',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32'
};
if (typeof colours[colour.toLowerCase()] !== 'undefined') return colours[colour.toLowerCase()];
return false;
}
function pickTextColorBasedOnBgColorAdvanced(backgroundColor, lightColor, darkColor) {
if (backgroundColor === void 0) {
backgroundColor = '#ffffff';
}
if (lightColor === void 0) {
lightColor = '#ffffff';
}
if (darkColor === void 0) {
darkColor = '#000000';
}
var hexPattern = /^#[0-9a-f]{3,6}$/i;
var rgbPattern = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
var cssVarPattern = /var\(--[a-z A-Z 0-9 -_]+\)/;
var isHex = hexPattern.test(backgroundColor);
var isRGB = rgbPattern.test(backgroundColor);
var isCssVar = cssVarPattern.test(backgroundColor);
var bgColor;
if (isCssVar) {
var style = getComputedStyle(document.body);
var varName = backgroundColor.trim().split('(')[1].split(')')[0];
bgColor = style.getPropertyValue(varName);
} else {
bgColor = backgroundColor;
}
var r, g, b;
if (isHex) {
var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
r = parseInt(color.substring(0, 2), 16);
g = parseInt(color.substring(2, 4), 16);
b = parseInt(color.substring(4, 6), 16);
} else if (isRGB) {
var myArr = bgColor.trim().split(',');
r = parseInt(myArr[0].split('(')[1].trim());
g = parseInt(myArr[1].trim()[0]);
b = parseInt(myArr[2].trim()[0]);
} else {
var nameToHex = colourNameToHex(bgColor).toString();
var color2 = nameToHex.charAt(0) === '#' ? nameToHex.substring(1, 7) : nameToHex;
r = parseInt(color2.substring(0, 2), 16);
g = parseInt(color2.substring(2, 4), 16);
b = parseInt(color2.substring(4, 6), 16);
}
var uicolors = [r / 255, g / 255, b / 255];
var c = uicolors.map(function (col) {
if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
var finalColor = L > 0.179 ? darkColor : lightColor;
return finalColor;
}
var getStyles = function getStyles(props) {
var badgeStyles = {
top: props.verticalAlignment === 'top' ? -3 : 'auto',
bottom: props.verticalAlignment === 'bottom' ? 0 : 'auto',
left: props.horizontalAlignment === 'left' ? -3 : 'auto',
right: props.horizontalAlignment === 'right' ? -3 : 'auto',
backgroundColor: props.bgColor,
color: props.contentColor ? props.contentColor : pickTextColorBasedOnBgColorAdvanced(props.bgColor, '#ffffff', '#000000')
};
return badgeStyles;
};
var containerStyles = {
display: 'inline-flex',
position: 'relative',
flexShrink: 0,
verticalAlign: 'middle'
};
var rawBadgeStyles = {
height: '20px',
display: 'flex',
padding: '0 6px',
zIndex: 1,
position: 'absolute',
flexWrap: 'wrap',
fontSize: '0.75rem',
minWidth: '20px',
boxSizing: 'border-box',
transition: 'transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
alignItems: 'center',
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontWeight: 500,
lineHeight: 1,
alignContent: 'center',
borderRadius: '10px',
flexDirection: 'row',
justifyContent: 'center'
};
var Badge = function Badge(_ref) {
var children = _ref.children,
content = _ref.content,
_ref$bgColor = _ref.bgColor,
bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
contentColor = _ref.contentColor,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 99 : _ref$max,
style = _ref.style,
className = _ref.className,
_ref$verticalAlignmen = _ref.verticalAlignment,
verticalAlignment = _ref$verticalAlignmen === void 0 ? 'top' : _ref$verticalAlignmen,
_ref$horizontalAlignm = _ref.horizontalAlignment,
horizontalAlignment = _ref$horizontalAlignm === void 0 ? 'right' : _ref$horizontalAlignm,
_ref$hideZero = _ref.hideZero,
hideZero = _ref$hideZero === void 0 ? false : _ref$hideZero,
props = _objectWithoutPropertiesLoose(_ref, ["children", "content", "bgColor", "contentColor", "max", "style", "className", "verticalAlignment", "horizontalAlignment", "hideZero"]);
var isNumber = typeof content === 'number' ? true : false;
var modifiedContent = content;
if (isNumber && max) {
modifiedContent = content > max ? max + "+" : content;
}
var badgeStyles = getStyles({
content: content,
bgColor: bgColor,
contentColor: contentColor,
horizontalAlignment: horizontalAlignment,
max: max,
hideZero: hideZero,
verticalAlignment: verticalAlignment
});
var hide = hideZero && modifiedContent === 0;
return React.createElement("div", {
className: "container",
style: containerStyles
}, React.createElement("div", null, children), !hide && React.createElement("span", Object.assign({
className: className + " badge",
style: _extends({}, rawBadgeStyles, badgeStyles, style)
}, props), modifiedContent));
};
export { Badge };
//# sourceMappingURL=index.modern.js.map