model-navigator-standalone
Version:
Standalone MDF graph model visualizer
113 lines (111 loc) • 3.6 kB
JavaScript
import "core-js/modules/web.dom-collections.iterator.js";
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import withStyles from '@mui/styles/withStyles';
import styles from './AutoCompleteSuggestionStyle';
import { suggestionItemClicked, selectSuggestionList } from '../../../../../features/search/searchSlice';
/**
* Wrap suggestion item into HTML, take following as an e.g.:
* suggestionsItem={
* fullString: 'abcdea',
* matchedPieceIndices: [
* [0, 1],
* [5, 6]
* ];
* };
* Return HTML should be:
* <span className='auto-complete-suggestions__highlight'>
* a
* </span>
* <span>bcde</span>
* <span className='auto-complete-suggestions__highlight'>
* a
* </span>
*/
function PaintItemOld(_ref) {
let {
classes,
suggestionItem
} = _ref;
const {
fullString,
matchedPieceIndices
} = suggestionItem;
let cursor = 0;
let currentHighlighPieceIndex = 0;
const resultHTMLSnippits = [];
while (currentHighlighPieceIndex < matchedPieceIndices.length) {
const highlightStartPos = matchedPieceIndices[currentHighlighPieceIndex][0];
const highlightEndPos = matchedPieceIndices[currentHighlighPieceIndex][1];
if (cursor < highlightStartPos) {
resultHTMLSnippits.push( /*#__PURE__*/React.createElement("span", {
key: cursor
}, fullString.substring(cursor, highlightStartPos)));
}
resultHTMLSnippits.push( /*#__PURE__*/React.createElement("span", {
key: highlightStartPos,
className: classes.highlight
}, fullString.substring(highlightStartPos, highlightEndPos)));
cursor = highlightEndPos;
currentHighlighPieceIndex += 1;
}
if (cursor < fullString.length) {
resultHTMLSnippits.push( /*#__PURE__*/React.createElement("span", {
key: cursor
}, fullString.substring(cursor)));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, resultHTMLSnippits);
}
;
function PaintItem(_ref2) {
let {
classes,
suggestionItem
} = _ref2;
var left = 0;
const {
fullString,
matchedPieceIndices
} = suggestionItem;
const painted = matchedPieceIndices.map(elt => /*#__PURE__*/React.createElement(React.Fragment, null, fullString.substring(left, elt[0] - 1), /*#__PURE__*/React.createElement("span", {
className: classes.highlight
}, fullString.substring(...elt)), "left = elt[1]"));
return /*#__PURE__*/React.createElement(React.Fragment, null, painted);
}
;
function SuggestionItemDiv(_ref3) {
let {
classes,
suggestionItem,
i
} = _ref3;
const dispatch = useDispatch();
const handleClickItem = () => {
dispatch(suggestionItemClicked(suggestionItem));
};
return /*#__PURE__*/React.createElement("div", {
key: "".concat(i, "-").concat(suggestionItem.fullString),
className: classes.suggestionItem,
onClick: handleClickItem,
role: "button",
tabIndex: i //
}, /*#__PURE__*/React.createElement(PaintItemOld, {
suggestionItem: suggestionItem,
classes: classes
}));
}
function AutoCompleteSuggestions(_ref4) {
let {
classes
} = _ref4;
const suggestionList = useSelector(selectSuggestionList);
const divList = suggestionList.map((suggestionItem, i) => /*#__PURE__*/React.createElement(SuggestionItemDiv, {
classes: classes,
suggestionItem: suggestionItem,
key: "".concat(suggestionItem.fullString, "-$i")
}));
return /*#__PURE__*/React.createElement("div", {
className: classes.suggestionList
}, divList);
}
export default withStyles(styles)(AutoCompleteSuggestions);