ze-react-component-library/lib/ZESearchBar/MobileInputBar/index.js

ZeroETP React Component Library

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/button/style");

var _button = _interopRequireDefault(require("antd/lib/button"));

require("antd/lib/input/style");

var _input = _interopRequireDefault(require("antd/lib/input"));

require("antd/lib/auto-complete/style");

var _autoComplete = _interopRequireDefault(require("antd/lib/auto-complete"));

require("antd/lib/message/style");

var _message2 = _interopRequireDefault(require("antd/lib/message"));

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("@umijs/hooks");

var _zeroetpApiSdk = require("zeroetp-api-sdk");

var _ZEHistory = _interopRequireDefault(require("../../ZEHistory"));

var _weixinJsSdk = _interopRequireDefault(require("weixin-js-sdk"));

require("./index.less");

var _keyboardIcon = _interopRequireDefault(require("./assets/keyboardIcon.png"));

var _voiceIcon = _interopRequireDefault(require("./assets/voiceIcon.png"));

var _util = require("../util");

var _index2 = require("../index");

var _request = require("../../request");

var _useLocale = _interopRequireDefault(require("../../hooks/useLocale"));

var _AutoKeywords = _interopRequireWildcard(require("../AutoKeywords"));

var _useRecorder = _interopRequireDefault(require("../../hooks/useRecorder"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

var InputBar = function InputBar(_a) {
  var srcPlaceholder = _a.placeholder,
      loading = _a.loading,
      onSubmit = _a.onSubmit,
      onTouchStart = _a.onTouchStart,
      onTouchEnd = _a.onTouchEnd,
      questionToEdit = _a.questionToEdit;
  var t = (0, _useLocale.default)().t;
  var recorder = (0, _useRecorder.default)();

  var _b = (0, _hooks.useLocalStorageState)("histories", []),
      history = _b[0],
      setHistory = _b[1];

  var popRef = (0, _react.useRef)();

  var _c = (0, _react.useState)(),
      value = _c[0],
      setValue = _c[1];

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

  var _e = (0, _react.useState)(0),
      posStart = _e[0],
      setPosStart = _e[1];

  var recordingButton = (0, _react.useRef)(null);

  var _f = (0, _react.useState)("text"),
      mode = _f[0],
      setMode = _f[1]; // textByVoice指的是先voice后，变成修改模式。然后提交完后要再变为voice模式


  var _g = (0, _index2.useSuggestions)(),
      suggestions = _g.suggestions,
      setSuggestions = _g.setSuggestions,
      getSuggestions = _g.getSuggestions;

  var _h = (0, _react.useState)(false),
      open = _h[0],
      setOpen = _h[1];

  var _j = (0, _AutoKeywords.useInputCursor)({
    text: value
  }),
      cursorText = _j.cursorText,
      onCursorChange = _j.onCursorChange,
      getNewWord = _j.getNewWord,
      inputRef = _j.inputRef;

  var saveValueToHistory = function saveValueToHistory() {
    if (value) {
      // 存储最新10条
      var arr = __spreadArray([], history).filter(function (h) {
        return h !== value;
      });

      if (history.length >= 10) {
        arr.shift();
      }

      setHistory(__spreadArray(__spreadArray([], arr), [value]));
    }
  };

  (0, _react.useEffect)(function () {
    window.oncontextmenu = function (e) {
      //取消默认的浏览器自带右键 很重要！！
      // TODO：测试下会不会复制文字不行了
      e.preventDefault();
    };

    if (recordingButton === null || recordingButton === void 0 ? void 0 : recordingButton.current) {
      (recordingButton === null || recordingButton === void 0 ? void 0 : recordingButton.current).addEventListener("contextmenu", function (e) {
        e.preventDefault();
      });
    }

    setTimeout(function () {
      tryRecord(); // 先试一下，主要用于第一次的时候出现一个提示
    }, 500);
  }, []);
  (0, _react.useEffect)(function () {
    if ((value === null || value === void 0 ? void 0 : value.trim().length) > 0 && mode === "voice") {
      submit();
    }
  }, [value, mode]);
  (0, _react.useEffect)(function () {
    if (questionToEdit) {
      setMode("text");
      setValue(questionToEdit);
    }
  }, [questionToEdit]);

  var setVoiceText = function setVoiceText(s) {
    var newS = s;

    if (newS) {
      newS = newS.replace(/(病痛啥|并通商)/g, "丙通沙");
      newS = newS.replace(/(夏凡宁|夏凡尼)/g, "夏帆宁");
      newS = newS.replace(/(或是为|卧室伟)/g, "沃士韦");
      newS = newS.replace(/(威力的|韦立德)/g, "韦立得");
      newS = newS.replace(/(捷夫康)/g, "捷扶康");
      newS = newS.replace(/(B所为|B拖尾)/g, "必妥维");
      newS = newS.replace(/(大可灰|大可会)/g, "达可挥");
      newS = newS.replace(/(抒发太)/g, "舒发泰");
    }

    setValue(newS);
  };

  var tryRecord = function tryRecord() {
    try {
      if ((0, _util.isWeixin)()) {
        _weixinJsSdk.default.startRecord({
          success: function success() {
            setTimeout(function () {
              _weixinJsSdk.default.stopRecord();
            }, 500);
          },
          cancel: function cancel() {
            _message2.default.info("用户拒绝授权");
          },
          fail: function fail(res) {// message.info(JSON.stringify(res));
          }
        });
      } else if ((0, _util.isLark)()) {// do nothing
      } else {
        recorder.start();
        setTimeout(function () {
          recorder.stop();
        }, 500);
      }
    } catch (error) {
      _message2.default.error("无法打开录音设备，请确保浏览器权限设置正确");
    }
  };

  var startRecording = function startRecording() {
    if (isRecording) return;
    setIsRecording(true);

    try {
      onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart();

      if ((0, _util.isWeixin)()) {
        // 微信环境
        _weixinJsSdk.default.startRecord();
      } else if ((0, _util.isLark)()) {
        var recorderManager = window.tt.getRecorderManager();
        recorderManager.onStop(function (res) {
          // message.info("录音结束");
          var tempFilePath = res.tempFilePath;
          var fileSystemManager = window.tt.getFileSystemManager();
          fileSystemManager.readFile({
            filePath: tempFilePath,
            success: function success(fileRes) {
              // message.info("文件上传中");
              try {
                var formData = new FormData();
                formData.append("voice", new Blob([new Uint8Array(fileRes.data).buffer], {
                  type: (0, _util.isIOS)() ? "audio/aac" : "audio/wav"
                }));
                formData.append("ua", navigator.userAgent);
                (0, _zeroetpApiSdk.voice)(formData).then(function (voiceRes) {
                  if (voiceRes.result.length > 0) {
                    setVoiceText(voiceRes.result);
                  }
                }).catch(function (error) {
                  return _message2.default.error(error.message);
                });
              } catch (eee) {
                _message2.default.error(eee.message);
              }
            },
            fail: function fail(failRes) {
              _message2.default.error("\u5F55\u97F3\u6587\u4EF6\u8BFB\u53D6\u9519\u8BEF\uFF1A" + JSON.stringify(failRes));
            }
          });
        });
        recorderManager.onStart(function () {// message.info("录音开始");
        });
        recorderManager.onError(function (errMsg) {
          _message2.default.error(errMsg);
        });
        recorderManager.start({
          duration: 10000,
          sampleRate: 16000,
          numberOfChannels: 1
        });
      } else {
        recorder.start();
      }
    } catch (error) {
      _message2.default.error("无法打开录音设备，请确保浏览器权限设置正确");

      setIsRecording(false);
    }
  };

  var stopRecording = function stopRecording(endY) {
    if (!isRecording) return;
    setIsRecording(false);
    onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(); // @ts-ignore

    if ((0, _util.isWeixin)()) {
      _weixinJsSdk.default.stopRecord({
        success: function success(res) {
          var localId = res.localId;

          if (localId) {
            if ((0, _util.isWXWork)()) {
              _weixinJsSdk.default.uploadVoice({
                localId: localId,
                isShowProgressTips: 0,
                success: function success(res2) {
                  var serverId = res2.serverId;
                  var formData = new FormData();
                  formData.append("platform", "wxwork");
                  formData.append("media_id", serverId);
                  (0, _request.requestSuggestByVoice)(formData).then(function (res) {
                    setVoiceText(res.result); // console.log("l666", res.result);
                    // message.info(res.result);
                  }).catch(function (e) {// message.error(e.message);
                  });
                },
                fail: function fail(res2) {// message.error(JSON.stringify(res2));
                }
              });
            } else {
              _weixinJsSdk.default.translateVoice({
                localId: localId,
                isShowProgressTips: 1,
                success: function success(res2) {
                  setVoiceText(res2.translateResult);
                },
                fail: function fail(r) {
                  _message2.default.error(JSON.stringify(r));
                }
              });
            }
          } else {
            _message2.default.error("未获取到录音文件，可能是录音权限被关闭");
          }
        },
        fail: function fail(res) {// message.info(JSON.stringify(res));
        }
      });
    } else if ((0, _util.isLark)()) {
      var recorderManager = window.tt.getRecorderManager();
      recorderManager.stop();
    } else {
      recorder.stop(function (blob) {
        var formData = new FormData();
        formData.append("voice", blob);
        (0, _zeroetpApiSdk.voice)(formData).then(function (res) {
          if (res.result.length > 0) {
            setVoiceText(res.result);
          }
        }).catch(function (error) {
          return _message2.default.error(error.message);
        });
      });
    }
  };

  var onInputChange = function onInputChange(v) {
    setSuggestions([]);
    v.trim().length > 0 && getSuggestions(v.trim());
    setValue(v);
  };

  var submit = function submit() {
    saveValueToHistory();

    if (value && value.trim().length > 0) {
      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(value.trim());
    }
  };

  var renderDropdownContent = function renderDropdownContent(menu) {
    if (suggestions.length > 0 || cursorText) {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, suggestions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
        style: {
          marginBottom: 12
        }
      }, /*#__PURE__*/_react.default.createElement("p", {
        className: "ze-search-bar-history-pop-content-title"
      }, t("nlq.hot")), menu), cursorText && /*#__PURE__*/_react.default.createElement(_AutoKeywords.default, {
        question: cursorText,
        onClick: function onClick(w) {
          onInputChange(getNewWord(w));
        }
      }));
    }

    return /*#__PURE__*/_react.default.createElement(_ZEHistory.default, {
      onClick: function onClick(q) {
        setOpen(false);
        setValue(q);
        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(q);
      }
    });
  };

  var placeholder = t("nlq.searchbar.placeholder");

  if (srcPlaceholder) {
    placeholder = srcPlaceholder;
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "inputBarContainer",
    ref: popRef
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: "icon",
    src: mode === "voice" ? _keyboardIcon.default : _voiceIcon.default,
    onClick: function onClick() {
      if (mode.startsWith("text")) {
        setVoiceText(undefined);
        setMode("voice");
        localStorage.setItem("inputMode", "voice");
      } else {
        setMode("text");
        localStorage.setItem("inputMode", "text");
      }
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "input"
  }, mode === "text" && /*#__PURE__*/_react.default.createElement(_autoComplete.default, {
    open: open,
    dropdownRender: renderDropdownContent,
    backfill: true,
    allowClear: true,
    options: suggestions.length > 0 ? suggestions.map(function (s) {
      return {
        label: s,
        value: s
      };
    }) : // placeholder，用来触发popup展示，因为默认options为空时不会触发popup
    [{
      label: "@@@@",
      value: "@@@@"
    }],
    getPopupContainer: function getPopupContainer() {
      return popRef.current;
    },
    dropdownMatchSelectWidth: false,
    value: value,
    popupClassName: "ze-search-bar-history-pop-content",
    onChange: function onChange(v, option) {
      // option选中时
      if (!Array.isArray(option) && (option === null || option === void 0 ? void 0 : option.value)) {
        setSuggestions([]);
        setValue(v);
      }
    },
    onSearch: onInputChange,
    onDropdownVisibleChange: setOpen
  }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
    ref: inputRef,
    style: {
      height: "100%"
    },
    placeholder: placeholder,
    onSearch: function onSearch() {
      return submit();
    },
    onKeyUp: onCursorChange,
    onMouseUp: onCursorChange
  })), mode === "voice" && /*#__PURE__*/_react.default.createElement("div", {
    ref: recordingButton,
    className: "recordingButton",
    onTouchStart: function onTouchStart(e) {
      setPosStart(e.targetTouches[0].pageY);
      startRecording();
    },
    onTouchEnd: function onTouchEnd(e) {
      // setPosEnd(e.changedTouches[0].pageY);
      stopRecording(e.changedTouches[0].pageY);
    },
    // onTouchMove={(e) => { // 用来改UI上面的文案的，暂时不调了
    // }}
    onMouseDown: function onMouseDown() {
      startRecording();
    },
    onMouseUp: function onMouseUp() {
      stopRecording();
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "text"
  }, isRecording ? "松开 结束" : "按住 说话"))), /*#__PURE__*/_react.default.createElement(_button.default, {
    loading: loading,
    type: "primary",
    className: "sendButton",
    onClick: function onClick() {
      submit();
    }
  }, "\u53D1\u9001"));
};

var _default = InputBar;
exports.default = _default;