model-navigator-standalone/es/components/ModelNavigator/DataDictionary/Search/AutoComplete/AutoCompleteInput.js

Standalone MDF graph model visualizer

/* eslint-disable no-unused-vars */
import React, { useRef, useContext, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import './AutoCompleteInput.css';
import CloseIcon from '@mui/icons-material/Close';
import SearchIcon from '@mui/icons-material/Search';
import styles from './AutoCompleteInputStyle';
import { ModelContext } from '../../../Model/ModelContext';
import { prepareSearchData, searchKeyword } from '../DictionarySearcher/searchHelper.js';
import { changedVisAcCloseIcon, searchStarted, searchDataPrepared, searchCompleted, searchResultCleared, suggestionItemClicked, suggestionItemReset, suggestionsCleared, selectSearchData, selectClickedSuggestionItem, historyItemClicked, historyItemReset, selectAcCloseIconHidden, selectClickedHistoryItem } from '../../../../../features/search/searchSlice';
import { selectModelID } from '../../../../../features/graph/graphSlice';

// import acInputReducer from './AutoCompleteInputReducer';

function AutoCompleteInput(_ref) {
  let {
    classes,
    placeHolderText,
    inputTitle
  } = _ref;
  const dispatch = useDispatch();
  const closeIconHidden = useSelector(selectAcCloseIconHidden);
  const clickedSuggestionItem = useSelector(selectClickedSuggestionItem);
  const clickedHistoryItem = useSelector(selectClickedHistoryItem);
  const model = useContext(ModelContext);
  const modelID = useSelector(selectModelID);
  const searchData = useSelector(selectSearchData);
  let inputRef = useRef(null);
  const search = function search(str) {
    let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    dispatch(searchStarted(str));
    const {
      result,
      msg
    } = searchKeyword(searchData, "".concat(str).toLowerCase());
    dispatch(searchCompleted({
      result,
      errorMsg: msg,
      save
    }));
    return result && result.length > 0 ? result : null;
  };
  const suggest = str => {
    search(str, false);
  };

  // handler produces a submitted search
  const handleSubmitInput = inputText => {
    search(inputText);
  };

  // handler produces autocomplete
  const handleInputChange = inputText => {
    if (inputText.length > 1) {
      suggest(inputText);
    }
    dispatch(changedVisAcCloseIcon(!!inputText ? 'show' : 'hide'));
  };
  const handleChange = () => {
    handleInputChange(inputRef.current.value);
  };
  const handleClickedSuggItem = () => {
    if (inputRef.current) {
      inputRef.current.value = clickedSuggestionItem.fullString;
      handleSubmit();
      dispatch(suggestionsCleared());
    }
  };
  const handleClickedHistItem = () => {
    if (inputRef.current) {
      inputRef.current.value = clickedHistoryItem.keywordStr;
      handleSubmit();
      dispatch(historyItemReset());
    }
  };
  const handleClear = () => {
    inputRef.current.value = '';
    handleInputChange('');
    dispatch(searchResultCleared());
    dispatch(suggestionsCleared());
    dispatch(changedVisAcCloseIcon('hide'));
  };
  const handleSubmit = e => {
    e && e.preventDefault();
    handleSubmitInput(inputRef.current.value);
  };

  // update search data when new model appears

  useEffect(() => {
    let id = modelID;
    const searchData = prepareSearchData(model);
    dispatch(searchDataPrepared(searchData));
  }, [modelID]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.autoCompleteInput
  }, clickedSuggestionItem && handleClickedSuggItem(), clickedHistoryItem && handleClickedHistItem(), /*#__PURE__*/React.createElement("form", {
    className: classes.autoCompleteInputForm,
    onSubmit: handleSubmit
  }, /*#__PURE__*/React.createElement("input", {
    title: inputTitle,
    className: classes.autoCompleteInputBox,
    onChange: handleChange,
    placeholder: placeHolderText,
    ref: inputRef
  })), !closeIconHidden && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    onClick: handleClear,
    disableRipple: true,
    className: classes.closeBtn,
    "aria-label": "Clear search"
  }, /*#__PURE__*/React.createElement(CloseIcon, {
    className: classes.closeIcon
  })), /*#__PURE__*/React.createElement("i", {
    className: classes.verticalLine
  })), /*#__PURE__*/React.createElement(Button, {
    onClick: handleSubmit,
    disableRipple: true,
    className: classes.searchBtn,
    "aria-label": "Submit search"
  }, /*#__PURE__*/React.createElement(SearchIcon, {
    className: classes.searchIcon
  })));
}
export default withStyles(styles)(AutoCompleteInput);