@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
52 lines (51 loc) • 3.15 kB
JavaScript
import { __assign } from "tslib";
import styles from './styles.css.js';
import clsx from 'clsx';
import React from 'react';
import Icon from '../../../icon';
import HighlightMatch from './highlight-match';
export var Label = function (_a) {
var label = _a.label, prefix = _a.prefix, highlightText = _a.highlightText, triggerVariant = _a.triggerVariant;
return (React.createElement("span", { className: clsx(styles.label, triggerVariant && styles['trigger-variant']) },
prefix && (React.createElement("span", { className: clsx(styles['label-prefix'], triggerVariant && styles['trigger-variant']) },
prefix,
" ")),
React.createElement(HighlightMatch, { str: label, highlightText: highlightText })));
};
export var LabelTag = function (_a) {
var labelTag = _a.labelTag, highlightText = _a.highlightText, triggerVariant = _a.triggerVariant;
return labelTag ? (React.createElement("span", { className: clsx(styles['label-tag'], triggerVariant && styles['trigger-variant']) },
React.createElement(HighlightMatch, { str: labelTag, highlightText: highlightText }))) : null;
};
export var Description = function (_a) {
var description = _a.description, highlightText = _a.highlightText, triggerVariant = _a.triggerVariant;
return description ? (React.createElement("div", { className: clsx(styles.description, triggerVariant && styles['trigger-variant']), "aria-disabled": true },
React.createElement(HighlightMatch, { str: description, highlightText: highlightText }))) : null;
};
export var Tags = function (_a) {
var tags = _a.tags, highlightText = _a.highlightText, triggerVariant = _a.triggerVariant;
return tags ? (React.createElement("div", { className: clsx(styles.tags) }, tags.map(function (tag, idx) { return (React.createElement("span", { key: idx, className: clsx(styles.tag, triggerVariant && styles['trigger-variant']), "aria-disabled": true },
React.createElement(HighlightMatch, { str: tag, highlightText: highlightText }))); }))) : null;
};
export var FilteringTags = function (_a) {
var filteringTags = _a.filteringTags, highlightText = _a.highlightText, triggerVariant = _a.triggerVariant;
if (!highlightText || !filteringTags) {
return null;
}
var searchElement = highlightText.toLowerCase();
return (React.createElement("div", { className: clsx(styles.tags) }, filteringTags.map(function (filteringTag, key) {
var match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;
if (match) {
return (React.createElement("span", { className: clsx(styles.tag, triggerVariant && styles['trigger-variant']), key: key, "aria-disabled": true },
React.createElement(HighlightMatch, { str: filteringTag, highlightText: highlightText })));
}
return null;
})));
};
export var OptionIcon = function (props) {
if (!props.name && !props.url) {
return null;
}
return (React.createElement("span", { className: clsx(styles.icon, props.size === 'big' && [styles["icon-size-big"]]) },
React.createElement(Icon, __assign({}, props))));
};