ze-react-component-library/es/ZESearchBar/index.js

ZeroETP React Component Library

import "antd/es/auto-complete/style";
import _AutoComplete from "antd/es/auto-complete";
import "antd/es/input/style";
import _Input from "antd/es/input";
import React, { useEffect, useState, useRef } from "react";
import { useRequest } from "@umijs/hooks";
import { RecordLoading } from "./VoiceRecorder";
import { requestSuggest } from "../request";
import "./index.less";
import MobileInputBar from "./MobileInputBar";
import useLocale from "../hooks/useLocale";
import AutoKeywords, { useInputCursor } from "./AutoKeywords";
var Search = _Input.Search;
export var useSuggestions = function useSuggestions() {
  var _a = useState([]),
      suggestions = _a[0],
      setSuggestions = _a[1];

  var _b = useRequest(requestSuggest, {
    manual: true,
    debounceInterval: 100,
    onSuccess: function onSuccess(result) {
      if (Array.isArray(result)) {
        setSuggestions(result);
      }
    }
  }),
      getSuggestions = _b.run,
      cancelGetSuggestions = _b.cancel,
      isGettingSuggestions = _b.loading;

  return {
    suggestions: suggestions,
    setSuggestions: setSuggestions,
    getSuggestions: getSuggestions,
    cancelGetSuggestions: cancelGetSuggestions,
    isGettingSuggestions: isGettingSuggestions
  };
};

var ZESearchBar = function ZESearchBar(_a) {
  var onSearch = _a.onSearch,
      initialValue = _a.initialValue,
      isMobile = _a.isMobile,
      _b = _a.className,
      className = _b === void 0 ? "" : _b,
      questionToEdit = _a.questionToEdit,
      style = _a.style,
      _c = _a.hide,
      hide = _c === void 0 ? false : _c,
      loading = _a.loading;
  var t = useLocale().t;

  var _d = useState(false),
      isRecording = _d[0],
      setIsRecording = _d[1];

  var _e = useState(initialValue || ""),
      askString = _e[0],
      setAskString = _e[1];

  var _f = useInputCursor({
    text: askString
  }),
      cursorText = _f.cursorText,
      onCursorChange = _f.onCursorChange,
      inputRef = _f.inputRef,
      getNewWord = _f.getNewWord;

  var _g = useSuggestions(),
      suggestions = _g.suggestions,
      setSuggestions = _g.setSuggestions,
      getSuggestions = _g.getSuggestions,
      cancelGetSuggestions = _g.cancelGetSuggestions,
      isGettingSuggestions = _g.isGettingSuggestions;

  var popDivRef = useRef(null);

  var ask = function ask(v) {
    onSearch === null || onSearch === void 0 ? void 0 : onSearch(v);
  };

  useEffect(function () {
    if ((initialValue === null || initialValue === void 0 ? void 0 : initialValue.trim().length) > 0) {
      setAskString(initialValue);
      ask(initialValue);
    }
  }, [initialValue]);
  useEffect(function () {
    if (questionToEdit) {
      setAskString(questionToEdit);
    }
  }, [questionToEdit]);

  var onInputChange = function onInputChange(text) {
    if (text.trim().length === 0) {
      try {
        var saved = localStorage.getItem("histories");

        if (saved) {
          var histories = JSON.parse(saved);

          if (!Array.isArray(histories)) {
            localStorage.removeItem("histories");
          } else {
            setSuggestions(histories);
          }
        }
      } catch (e) {
        // eslint-disable-next-line no-console
        console.error(e);
      }
    } else {
      getSuggestions(text);
      setSuggestions([]);
      setAskString(text);
    }
  };

  var onFocus = function onFocus() {
    onInputChange(askString);
  };

  var showDropdown = (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) > 0 || cursorText;

  var renderDropdownContent = function renderDropdownContent(menu) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) > 0 ? menu : null, cursorText && /*#__PURE__*/React.createElement(AutoKeywords, {
      question: cursorText,
      onClick: function onClick(w) {
        onInputChange(getNewWord(w));
      }
    }));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "ze-search-bar " + (isMobile ? "ze-search-bar-mobile" : "") + " " + className,
    style: style
  }, !isMobile && !hide && /*#__PURE__*/React.createElement(_AutoComplete, {
    clearIcon: true,
    backfill: true,
    value: askString,
    disabled: loading,
    onFocus: onFocus,
    getPopupContainer: function getPopupContainer() {
      return popDivRef.current;
    },
    options: suggestions.length > 0 ? suggestions.map(function (s) {
      return {
        label: s,
        value: s
      };
    }) : // placeholder，用来触发popup展示，因为默认options为空时不会触发popup
    [{
      label: "@@@@",
      value: "@@@@"
    }],
    dropdownRender: renderDropdownContent,
    style: {
      width: "100%"
    },
    onSearch: onInputChange,
    onChange: function onChange(text) {
      // 选择option和输入都会触发。
      setSuggestions([]);
      setAskString(text);
    }
  }, /*#__PURE__*/React.createElement(Search, {
    ref: inputRef,
    allowClear: true,
    placeholder: t("nlq.searchbar.placeholder"),
    enterButton: t("nlq.searchbar.button"),
    className: "ze-search-bar-input",
    size: "large",
    onSearch: function onSearch(value) {
      if (value.trim().length > 0) {
        ask(value);
        setSuggestions([]);
        if (isGettingSuggestions) cancelGetSuggestions(); // History

        try {
          var savedHist = localStorage.getItem("histories");
          var histories = [];

          if (savedHist) {
            histories = JSON.parse(savedHist);
          }

          histories = histories.filter(function (h) {
            return h !== value;
          });
          histories.splice(0, 0, value);
          histories = histories.slice(0, 10);
          localStorage.setItem("histories", JSON.stringify(histories));
        } catch (e) {
          // eslint-disable-next-line no-console
          console.error(e);
        }
      }
    },
    onKeyUp: onCursorChange,
    onMouseUp: onCursorChange
  })), /*#__PURE__*/React.createElement("div", {
    className: "ze-search-bar-pop-wrapper " + (showDropdown ? "ze-search-bar-pop-wrapper-open" : ""),
    ref: popDivRef
  }), isMobile && !hide && /*#__PURE__*/React.createElement("div", {
    className: "ze-search-bar-mobile-input-bar-wrapper"
  }, /*#__PURE__*/React.createElement(MobileInputBar, {
    loading: loading,
    onTouchStart: function onTouchStart() {
      return setIsRecording(true);
    },
    onTouchEnd: function onTouchEnd() {
      return setIsRecording(false);
    },
    onSubmit: function onSubmit(text) {
      if ((text === null || text === void 0 ? void 0 : text.length) > 0) {
        setAskString(text);
        ask(text);
      }
    },
    questionToEdit: questionToEdit
  })), isRecording && /*#__PURE__*/React.createElement("div", {
    className: "ze-search-bar-mobile-recording-mask"
  }, /*#__PURE__*/React.createElement(RecordLoading, {
    color: "white"
  }, "\u677E\u5F00\u7ED3\u675F")));
};

export default ZESearchBar;