@redocly/theme
Version:
Shared UI components lib
220 lines (209 loc) • 8.47 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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.ContentWrapper = void 0;
exports.Tag = Tag;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
function Tag(_a) {
var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform, variant = 'filled', selectable } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform", "variant", "selectable"]);
const truncateText = (text, maxLen) => {
if (text.length <= maxLen)
return text;
return text.slice(0, maxLen) + '...';
};
const extractTextFromElement = (element) => {
if (typeof element === 'string') {
return element;
}
if (typeof element === 'number') {
return element.toString();
}
if (react_1.default.isValidElement(element)) {
const props = element.props;
if (typeof props.children === 'string') {
return props.children;
}
}
return '';
};
const truncateJSXElement = (element, maxLen) => {
if (typeof element === 'string') {
return truncateText(element, maxLen);
}
if (typeof element === 'number') {
const numStr = element.toString();
return numStr.length > maxLen ? truncateText(numStr, maxLen) : element;
}
if (react_1.default.isValidElement(element)) {
const textContent = extractTextFromElement(element);
if (textContent.length <= maxLen) {
return element;
}
const props = element.props;
if (typeof props.children === 'string') {
return react_1.default.cloneElement(element, Object.assign(Object.assign({}, props), { children: truncateText(props.children, maxLen) }));
}
}
return element;
};
const renderChildren = () => {
if (!maxLength) {
return children;
}
if (typeof children === 'string') {
return truncateText(children, maxLength);
}
if (react_1.default.isValidElement(children)) {
return truncateJSXElement(children, maxLength);
}
return children;
};
return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform, variant: variant, selectable: selectable }, otherProps),
withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
onClose === null || onClose === void 0 ? void 0 : onClose(event);
} },
react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
active && react_1.default.createElement(ActiveIcon, null)));
}
exports.ContentWrapper = styled_components_1.default.div `
display: inline-flex;
align-items: center;
justify-content: center;
text-wrap: nowrap;
padding: var(--tag-content-padding);
gap: var(--tag-content-gap);
`;
const CloseButton = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
margin: calc(-1 * var(--tag-border-width));
padding: var(--tag-border-width);
&:hover {
background: var(--tag-close-button-bg-color-hover);
}
&:focus-visible {
background: var(--tag-close-button-bg-color-focus);
}
`;
const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size, variant }) => ({
className: [
className,
'tag-default',
color && `tag-${color}`,
size && `tag-size-${size}`,
`tag-variant-${variant || 'filled'}`,
]
.filter(Boolean)
.join(' '),
})) `
display: inline-flex;
align-items: center;
justify-content: center;
text-wrap: nowrap;
position: relative;
padding: var(--tag-padding);
${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
margin: var(--tag-margin);
&:last-child {
margin-right: 0;
}
gap: var(--tag-gap);
font-size: var(--tag-font-size);
font-family: var(--tag-font-family);
font-weight: var(--tag-font-weight);
line-height: var(--tag-line-height);
box-shadow: var(--tag-box-shadow);
${({ textTransform }) => `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
color: var(--tag-color);
background-color: var(--tag-bg-color);
${({ borderless }) => borderless
? ''
: `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
border-radius: var(--tag-border-radius);
svg {
width: var(--tag-icon-width);
height: var(--tag-icon-height);
}
${({ selectable }) => selectable &&
(0, styled_components_1.css) `
&:hover {
background-color: var(--tag-bg-color-hover);
border-color: var(--tag-border-color-hover);
}
&:focus-visible {
outline: 1px solid var(--tag-border-color-focused);
outline-offset: 2px;
border-radius: var(--tag-border-radius-focused);
}
`};
`;
const StatusDot = styled_components_1.default.div `
display: inline-block;
width: var(--tag-badge-size);
height: var(--tag-badge-size);
border: var(--tag-badge-border-width) solid var(--tag-badge-border-color);
border-radius: 50%;
background-color: ${({ color }) => color};
`;
const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
width: 12px;
height: 12px;
position: absolute;
right: -4px;
top: -4px;
`;
//# sourceMappingURL=Tag.js.map