@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
64 lines (63 loc) • 2.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AdaptableIconComponent } from '../AdaptableIconComponent';
const SHAPE_RADIUS = {
Pill: '999px',
Rounded: '4px',
Square: '0',
};
const DENSITY_CLASS = {
Compact: 'ab-Badge--compact',
Normal: 'ab-Badge--normal',
Comfortable: 'ab-Badge--comfortable',
};
const pillStyleToCss = (pill) => {
const result = {};
if (!pill)
return result;
if (pill.BackColor)
result.backgroundColor = pill.BackColor;
if (pill.ForeColor)
result.color = pill.ForeColor;
if (pill.FontWeight) {
result.fontWeight = pill.FontWeight.toLowerCase();
}
if (pill.FontStyle) {
result.fontStyle = pill.FontStyle.toLowerCase();
}
if (pill.TextDecoration && pill.TextDecoration !== 'None') {
switch (pill.TextDecoration) {
case 'Underline':
result.textDecoration = 'underline';
break;
case 'Overline':
result.textDecoration = 'overline';
break;
case 'LineThrough':
result.textDecoration = 'line-through';
break;
}
}
if (pill.BorderColor) {
result.borderColor = pill.BorderColor;
result.borderWidth = 1;
result.borderStyle = 'solid';
}
else {
result.borderWidth = 0;
result.borderStyle = 'none';
}
return result;
};
export const Badge = (props) => {
const { iconPosition = 'start', icon: iconProps, shape, density = 'Normal', iconGap } = props;
const preparedBadgePosition = iconPosition.toLowerCase();
const icon = iconProps && _jsx(AdaptableIconComponent, { icon: iconProps });
const baseStyle = pillStyleToCss(props.pillStyle);
const effectiveShape = shape ?? 'Rounded';
baseStyle.borderRadius = SHAPE_RADIUS[effectiveShape];
if (typeof iconGap === 'number') {
baseStyle.gap = `${iconGap}px`;
}
const className = ['ab-Badge', DENSITY_CLASS[density]].filter(Boolean).join(' ');
return (_jsxs("div", { className: className, style: baseStyle, children: [preparedBadgePosition === 'start' && icon, props.children, preparedBadgePosition === 'end' && icon] }));
};