ze-react-component-library
Version:
ZeroETP React Component Library
260 lines (219 loc) • 9.24 kB
JavaScript
;
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 = exports.useSuggestions = void 0;
require("antd/lib/auto-complete/style");
var _autoComplete = _interopRequireDefault(require("antd/lib/auto-complete"));
require("antd/lib/input/style");
var _input = _interopRequireDefault(require("antd/lib/input"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@umijs/hooks");
var _VoiceRecorder = require("./VoiceRecorder");
var _request = require("../request");
require("./index.less");
var _MobileInputBar = _interopRequireDefault(require("./MobileInputBar"));
var _useLocale = _interopRequireDefault(require("../hooks/useLocale"));
var _AutoKeywords = _interopRequireWildcard(require("./AutoKeywords"));
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 Search = _input.default.Search;
var useSuggestions = function useSuggestions() {
var _a = (0, _react.useState)([]),
suggestions = _a[0],
setSuggestions = _a[1];
var _b = (0, _hooks.useRequest)(_request.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
};
};
exports.useSuggestions = useSuggestions;
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 = (0, _useLocale.default)().t;
var _d = (0, _react.useState)(false),
isRecording = _d[0],
setIsRecording = _d[1];
var _e = (0, _react.useState)(initialValue || ""),
askString = _e[0],
setAskString = _e[1];
var _f = (0, _AutoKeywords.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 = (0, _react.useRef)(null);
var ask = function ask(v) {
onSearch === null || onSearch === void 0 ? void 0 : onSearch(v);
};
(0, _react.useEffect)(function () {
if ((initialValue === null || initialValue === void 0 ? void 0 : initialValue.trim().length) > 0) {
setAskString(initialValue);
ask(initialValue);
}
}, [initialValue]);
(0, _react.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.default.createElement(_react.default.Fragment, null, (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) > 0 ? menu : null, cursorText && /*#__PURE__*/_react.default.createElement(_AutoKeywords.default, {
question: cursorText,
onClick: function onClick(w) {
onInputChange(getNewWord(w));
}
}));
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "ze-search-bar " + (isMobile ? "ze-search-bar-mobile" : "") + " " + className,
style: style
}, !isMobile && !hide && /*#__PURE__*/_react.default.createElement(_autoComplete.default, {
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.default.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.default.createElement("div", {
className: "ze-search-bar-pop-wrapper " + (showDropdown ? "ze-search-bar-pop-wrapper-open" : ""),
ref: popDivRef
}), isMobile && !hide && /*#__PURE__*/_react.default.createElement("div", {
className: "ze-search-bar-mobile-input-bar-wrapper"
}, /*#__PURE__*/_react.default.createElement(_MobileInputBar.default, {
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.default.createElement("div", {
className: "ze-search-bar-mobile-recording-mask"
}, /*#__PURE__*/_react.default.createElement(_VoiceRecorder.RecordLoading, {
color: "white"
}, "\u677E\u5F00\u7ED3\u675F")));
};
var _default = ZESearchBar;
exports.default = _default;