model-navigator-standalone
Version:
Standalone MDF graph model visualizer
52 lines (49 loc) • 1.99 kB
JavaScript
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.string.trim.js";
import React from 'react';
import clsx from 'clsx';
/**
*
* @param {*} param0
* set classes for matching nodes base on search query
*/
export const setMatchingNodeClasses = (_ref, node, classes, category) => {
let {
matchedNodeIDs = [],
matchedNodeIDsInNameAndDescription = [],
matchedNodeIDsInProperties = []
} = _ref;
const id = "".concat(node).trim().toLowerCase();
return clsx(classes.nodeTitleBtn, classes[category], {
[classes.matchedNodeIDs]: matchedNodeIDs.indexOf(id) !== -1,
[classes.matchedInNameAndDesc]: matchedNodeIDsInNameAndDescription.indexOf(id) !== -1,
[classes.matchedNodeIDsInProps]: matchedNodeIDsInProperties.indexOf(id) !== -1 && matchedNodeIDsInNameAndDescription.indexOf(id) === -1,
[classes.excludeNode]: matchedNodeIDs.indexOf(id) === -1
});
};
/**
* highlight the matching string based on search query result
*/
export const highlightMatchingTitle = function highlightMatchingTitle(node) {
let matchedNodeNameQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
let classes = arguments.length > 2 ? arguments[2] : undefined;
let id = "".concat(node).trim().toLowerCase();
/**check for exact match */
if (matchedNodeNameQuery.toLowerCase() === id) {
return /*#__PURE__*/React.createElement("b", {
className: classes.highLightNode
}, id);
}
//split text to highlight node title
const arr = id.replace(matchedNodeNameQuery, ",".concat(matchedNodeNameQuery, ",")).split(",");
const highlightTitle = arr.map(text => {
if (text.toLowerCase() === matchedNodeNameQuery.toLowerCase()) {
return /*#__PURE__*/React.createElement("b", {
className: classes.highLightNode
}, matchedNodeNameQuery);
}
return /*#__PURE__*/React.createElement("span", null, text);
});
return highlightTitle;
};