@atlaskit/help
Version:
A cross-product help component
132 lines (131 loc) • 6.27 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSearchContext = exports.SearchContextProvider = exports.CtxProvider = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _Requests = require("../../model/Requests");
var _ctx = require("../../util/hooks/ctx");
var _constants = require("../constants");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var _createCtx = (0, _ctx.createCtx)(),
_createCtx2 = (0, _slicedToArray2.default)(_createCtx, 2),
useSearchContext = exports.useSearchContext = _createCtx2[0],
CtxProvider = exports.CtxProvider = _createCtx2[1];
var SearchContextProvider = exports.SearchContextProvider = function SearchContextProvider(_ref) {
var onSearch = _ref.onSearch,
onSearchInputChanged = _ref.onSearchInputChanged,
onSearchInputCleared = _ref.onSearchInputCleared,
onSearchResultItemClick = _ref.onSearchResultItemClick,
onSearchExternalUrlClick = _ref.onSearchExternalUrlClick,
searchExternalUrl = _ref.searchExternalUrl,
children = _ref.children,
openExternalSearchUrlInNewTab = _ref.openExternalSearchUrlInNewTab,
searchOnEnterKeyPress = _ref.searchOnEnterKeyPress;
// Search
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
searchValue = _useState2[0],
setSearchValue = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
searchResult = _useState4[0],
setSearchResult = _useState4[1];
var _useState5 = (0, _react.useState)(_Requests.REQUEST_STATE.done),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
searchState = _useState6[0],
setSearchState = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
searchResultsVisible = _useState8[0],
setSearchResultsVisible = _useState8[1];
var doSearch = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var value,
results,
_args = arguments;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
value = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
if (!onSearch) {
_context.next = 16;
break;
}
_context.prev = 2;
_context.next = 5;
return onSearch(value);
case 5:
results = _context.sent;
setSearchResult(results);
setSearchState(_Requests.REQUEST_STATE.done);
_context.next = 14;
break;
case 10:
_context.prev = 10;
_context.t0 = _context["catch"](2);
setSearchResult([]);
setSearchState(_Requests.REQUEST_STATE.error);
case 14:
_context.next = 17;
break;
case 16:
setSearchState(_Requests.REQUEST_STATE.error);
case 17:
case "end":
return _context.stop();
}
}, _callee, null, [[2, 10]]);
})), [onSearch]);
var debouncedDoSearch = (0, _debounce.default)(doSearch, 500);
var search = onSearch && function (newSearchValue) {
if (newSearchValue !== searchValue) {
if (newSearchValue.length >= _constants.MIN_CHARACTERS_FOR_SEARCH && !searchOnEnterKeyPress) {
try {
setSearchState(_Requests.REQUEST_STATE.loading);
debouncedDoSearch(newSearchValue);
} catch (error) {
setSearchState(_Requests.REQUEST_STATE.error);
setSearchResult([]);
}
setSearchResultsVisible(true);
} else if (newSearchValue.length === 0) {
// If the search input is empty, the search results should be empty and
setSearchState(_Requests.REQUEST_STATE.done);
setSearchResult(null);
setSearchResultsVisible(false);
}
setSearchValue(newSearchValue);
} else {
setSearchState(_Requests.REQUEST_STATE.loading);
debouncedDoSearch(newSearchValue);
setSearchResultsVisible(true);
}
};
var searchResultItemClick = function searchResultItemClick(event, analyticsEvent, articleData) {
if (onSearchResultItemClick) {
onSearchResultItemClick(event, analyticsEvent, articleData);
}
};
return /*#__PURE__*/_react.default.createElement(CtxProvider, {
value: {
onSearch: search,
onSearchInputChanged: onSearchInputChanged,
onSearchInputCleared: onSearchInputCleared,
onSearchResultItemClick: searchResultItemClick,
onSearchExternalUrlClick: onSearchExternalUrlClick,
isSearchResultVisible: searchResultsVisible,
searchExternalUrl: searchExternalUrl,
searchResult: searchResult,
searchState: searchState,
searchValue: searchValue,
openExternalSearchUrlInNewTab: openExternalSearchUrlInNewTab
}
}, children);
};