92631.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. exports.id = 92631;
  3. exports.ids = [92631];
  4. exports.modules = {
  5. /***/ 92631:
  6. /***/ ((module, __webpack_exports__, __webpack_require__) => {
  7. __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
  8. /* harmony export */ __webpack_require__.d(__webpack_exports__, {
  9. /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
  10. /* harmony export */ });
  11. /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997);
  12. /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
  13. /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689);
  14. /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
  15. /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003);
  16. /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
  17. /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(71853);
  18. /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_router__WEBPACK_IMPORTED_MODULE_3__);
  19. /* harmony import */ var _SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(45515);
  20. /* harmony import */ var _SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8__);
  21. /* harmony import */ var _dls_Link_Link__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(61239);
  22. /* harmony import */ var _hooks_useScrollToElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(56748);
  23. /* harmony import */ var _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3050);
  24. /* harmony import */ var _utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(55943);
  25. var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__]);
  26. _utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
  27. const ScrollableSelection = ({ items , searchPlaceholder , renderItem , getHref , isJuz =true , selectedItem , })=>{
  28. const { 0: searchQuery , 1: setSearchQuery } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("");
  29. const router = (0,next_router__WEBPACK_IMPORTED_MODULE_3__.useRouter)();
  30. const filteredItems = items.filter((item)=>item.value.toString().startsWith(searchQuery) || item.label.toString().startsWith(searchQuery));
  31. (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
  32. if (!filteredItems.length) {
  33. (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__/* .logEmptySearchResults */ .Dy)({
  34. query: searchQuery,
  35. source: isJuz ? _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationJuzsList */ .Z.SidebarNavigationJuzsList : _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationPagesList */ .Z.SidebarNavigationPagesList
  36. });
  37. } else {
  38. (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_7__/* .logTextSearchQuery */ .tL)(searchQuery, isJuz ? _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationJuzsList */ .Z.SidebarNavigationJuzsList : _types_SearchQuerySource__WEBPACK_IMPORTED_MODULE_6__/* ["default"].SidebarNavigationPagesList */ .Z.SidebarNavigationPagesList);
  39. }
  40. }, [
  41. searchQuery,
  42. filteredItems,
  43. isJuz
  44. ]);
  45. const [scroll, selectedItemRef] = (0,_hooks_useScrollToElement__WEBPACK_IMPORTED_MODULE_5__/* .useScrollToElement */ .Oz)(_hooks_useScrollToElement__WEBPACK_IMPORTED_MODULE_5__/* .SCROLL_TO_NEAREST_ELEMENT */ .lT);
  46. (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
  47. scroll();
  48. }, [
  49. selectedItem,
  50. scroll
  51. ]);
  52. // handle when user press `Enter` in input box
  53. const handleInputSubmit = (e)=>{
  54. e.preventDefault();
  55. const firstFilteredItem = filteredItems[0];
  56. if (filteredItems) {
  57. const href = getHref(firstFilteredItem.value);
  58. router.push(href);
  59. }
  60. };
  61. return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
  62. className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().scrollableSectionContainer),
  63. children: [
  64. /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("form", {
  65. onSubmit: handleInputSubmit,
  66. children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
  67. className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().searchInput),
  68. value: searchQuery,
  69. onChange: (e)=>setSearchQuery(e.target.value),
  70. placeholder: searchPlaceholder
  71. })
  72. }),
  73. /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
  74. className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().listContainer),
  75. children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
  76. className: (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().list),
  77. children: filteredItems.map((item)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Link_Link__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
  78. href: getHref(item.value),
  79. shouldPrefetch: false,
  80. children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
  81. ref: item.value === selectedItem ? selectedItemRef : null,
  82. className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().listItem), item.value === selectedItem && (_SidebarNavigation_module_scss__WEBPACK_IMPORTED_MODULE_8___default().selectedItem)),
  83. children: renderItem(item)
  84. })
  85. }, item.value))
  86. })
  87. })
  88. ]
  89. });
  90. };
  91. /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ScrollableSelection);
  92. __webpack_async_result__();
  93. } catch(e) { __webpack_async_result__(e); } });
  94. /***/ }),
  95. /***/ 3050:
  96. /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  97. /* harmony export */ __webpack_require__.d(__webpack_exports__, {
  98. /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
  99. /* harmony export */ });
  100. var SearchQuerySource;
  101. (function(SearchQuerySource) {
  102. SearchQuerySource["CommandBar"] = "command_bar";
  103. SearchQuerySource["SearchDrawer"] = "search_drawer";
  104. SearchQuerySource["SearchPage"] = "search_page";
  105. SearchQuerySource["TranslationSettingsDrawer"] = "settings_drawer_translation";
  106. SearchQuerySource["TafsirSettingsDrawer"] = "settings_drawer_tafsir";
  107. SearchQuerySource["ReciterPageChapterList"] = "reciter_page_chapter_list";
  108. SearchQuerySource["Tarteel"] = "tarteel";
  109. SearchQuerySource["SidebarNavigationChaptersList"] = "sidebar_navigation_chapter_list";
  110. SearchQuerySource["SidebarNavigationVersesList"] = "sidebar_navigation_verse_list";
  111. SearchQuerySource["SidebarNavigationJuzsList"] = "sidebar_navigation_juz_list";
  112. SearchQuerySource["SidebarNavigationPagesList"] = "sidebar_navigation_page_list";
  113. })(SearchQuerySource || (SearchQuerySource = {}));
  114. /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SearchQuerySource);
  115. /***/ })
  116. };
  117. ;
  118. //# sourceMappingURL=92631.js.map