@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
38 lines • 1.69 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import styles from './styles.css.js';
const splitOnFiltering = (str, highlightText) => {
// We match by creating a regex using user-provided strings, so we skip
// highlighting if the generated regex would be too memory intensive.
if (highlightText.length > 10000) {
return { noMatches: [str], matches: null };
}
// Filtering needs to be case insensitive
const filteringPattern = highlightText.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
const regexp = new RegExp(filteringPattern, 'gi');
const noMatches = str.split(regexp);
const matches = str.match(regexp);
return { noMatches, matches };
};
function Highlight({ str }) {
return str ? React.createElement("mark", { className: styles['filtering-match-highlight'] }, str) : null;
}
export default function HighlightMatch({ str, highlightText }) {
if (!str || !highlightText) {
return React.createElement("span", null, str);
}
if (str === highlightText) {
return React.createElement(Highlight, { str: str });
}
const { noMatches, matches } = splitOnFiltering(str, highlightText);
const highlighted = [];
noMatches.forEach((noMatch, idx) => {
highlighted.push(React.createElement("span", { key: `noMatch-${idx}` }, noMatch));
if (matches && idx < matches.length) {
highlighted.push(React.createElement(Highlight, { key: `match-${idx}`, str: matches[idx] }));
}
});
return React.createElement("span", null, highlighted);
}
//# sourceMappingURL=highlight-match.js.map