@tripian/react 9.1.52 → 9.1.53

package/components/PoiSearchAutoComplete/PoiSearchAutoComplete.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import Model from '@tripian/model';
 import { RSelectOption } from '../base/RSelect/RSelect';
 interface IPoiSearchAutoComplete {
     inputValue: string;
@@ -11,6 +12,7 @@ interface IPoiSearchAutoComplete {
     placeHolder?: string;
     isDisabled?: boolean;
     isLoading?: boolean;
+    t: (value: Model.TranslationKey) => string;
 }
 declare const PoiSearchAutoComplete: React.FC<IPoiSearchAutoComplete>;
 export default PoiSearchAutoComplete;

package/index.js

@@ -19864,7 +19864,7 @@ var index_641ee5b8_esm = __webpack_require__(8);
 // EXTERNAL MODULE: ./node_modules/@emotion/react/dist/emotion-react.esm.js
 var emotion_react_esm = __webpack_require__(5);
 
-// EXTERNAL MODULE: ./node_modules/memoize-one/dist/memoize-one.esm.js
+// EXTERNAL MODULE: ./node_modules/react-select/node_modules/memoize-one/dist/memoize-one.esm.js
 var memoize_one_esm = __webpack_require__(123);
 
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js + 1 modules
@@ -87671,23 +87671,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable import/no-extraneous-dependencies */
 const react_1 = __importStar(__webpack_require__(0));
 const creatable_1 = __importDefault(__webpack_require__(1112));
 const PoiSearchAutoComplete_scss_1 = __importDefault(__webpack_require__(1020));
-const PoiSearchAutoComplete = ({ inputValue, options, selectedOptionValues, onSelectedOptionChange, onInputChange, onKeyDown, onCreateOption, placeHolder, isDisabled = false, isLoading = false }) => {
+const ITEM_HEIGHT = 35;
+const WINDOW_SIZE = 10;
+const BUFFER_SIZE = Math.ceil(WINDOW_SIZE * 0.5);
+const VirtualizedMenuList = ({ children: childrenProp, maxHeight }) => {
+    const menuRef = (0, react_1.useRef)(null);
+    const [scrollTop, setScrollTop] = react_1.default.useState(0);
+    const children = react_1.default.Children.toArray(childrenProp);
+    const handleScroll = (0, react_1.useCallback)((e) => {
+        setScrollTop(e.currentTarget.scrollTop);
+    }, []);
+    const isNoOptionsMessage = (child) => {
+        if (!react_1.default.isValidElement(child) || !('props' in child))
+            return false;
+        const props = child.props;
+        return Array.isArray(props.options) && props.options.length === 0;
+    };
+    const totalHeight = children.length * ITEM_HEIGHT;
+    const startIndex = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_SIZE);
+    const endIndex = Math.min(startIndex + WINDOW_SIZE + BUFFER_SIZE * 2, children.length);
+    const visibleChildren = children.slice(startIndex, endIndex);
+    const offsetY = startIndex * ITEM_HEIGHT;
+    if (children.length === 1 && isNoOptionsMessage(children[0])) {
+        return (react_1.default.createElement("div", { ref: menuRef, style: {
+                maxHeight: 300,
+                height: 'auto',
+                overflow: 'auto',
+                position: 'relative',
+            } }, children));
+    }
+    return (react_1.default.createElement("div", { ref: menuRef, style: {
+            height: children.length === 1 && isNoOptionsMessage(children[0]) ? 'auto' : maxHeight,
+            overflow: 'auto',
+            position: 'relative',
+            margin: children.length === 1 && isNoOptionsMessage(children[0]) ? '0' : '1rem 0',
+        }, onScroll: handleScroll },
+        react_1.default.createElement("div", { style: { height: totalHeight, position: 'relative' } },
+            react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    top: offsetY,
+                    left: 0,
+                    right: 0,
+                } },
+                react_1.default.createElement("div", { className: "visible-children" }, visibleChildren)))));
+};
+const PoiSearchAutoComplete = ({ inputValue, options, selectedOptionValues, onSelectedOptionChange, onInputChange, onKeyDown, onCreateOption, placeHolder, isDisabled = false, isLoading = false, t }) => {
     const [localOptions, setLocalOptions] = react_1.default.useState([]);
     (0, react_1.useEffect)(() => {
         if (Array.isArray(options) && options.length > 0) {
             setLocalOptions(options);
         }
     }, [options]);
-    const selectedOptions = (0, react_1.useMemo)(() => localOptions.filter((option) => selectedOptionValues.includes(option.value)), [selectedOptionValues, localOptions]);
-    const availableOptions = (0, react_1.useMemo)(() => localOptions.filter((option) => !selectedOptionValues.includes(option.value)), [localOptions, selectedOptionValues]);
-    const handleChange = (newSelectedOptions) => {
+    const selectedOptions = (0, react_1.useMemo)(() => {
+        if (!selectedOptionValues.length)
+            return [];
+        return localOptions.filter((option) => selectedOptionValues.includes(option.value));
+    }, [selectedOptionValues, localOptions]);
+    const availableOptions = (0, react_1.useMemo)(() => {
+        if (!selectedOptionValues.length)
+            return localOptions;
+        return localOptions.filter((option) => !selectedOptionValues.includes(option.value));
+    }, [localOptions, selectedOptionValues]);
+    const handleChange = (0, react_1.useCallback)((newSelectedOptions) => {
         onSelectedOptionChange(newSelectedOptions);
-    };
+    }, [onSelectedOptionChange]);
     return (react_1.default.createElement("div", { className: PoiSearchAutoComplete_scss_1.default.poiSearchAutoComplete },
-        react_1.default.createElement(creatable_1.default, { className: "trpReactCreatableSelectMulti", classNamePrefix: "trpReactCreatableSelectMulti", onCreateOption: onCreateOption, isMulti: true, options: availableOptions, value: selectedOptions, isClearable: false, isSearchable: true, onChange: handleChange, controlShouldRenderValue: false, inputValue: inputValue || '', placeholder: placeHolder, onInputChange: onInputChange, formatCreateLabel: (userInput) => userInput, onKeyDown: onKeyDown, isDisabled: isDisabled, isLoading: isLoading, loadingMessage: () => 'Yükleniyor...', noOptionsMessage: () => 'Sonuç bulunamadı' })));
+        react_1.default.createElement(creatable_1.default, { className: "trpReactCreatableSelectMulti", classNamePrefix: "trpReactCreatableSelectMulti", onCreateOption: onCreateOption, isMulti: true, options: availableOptions, value: selectedOptions, isClearable: false, isSearchable: true, onChange: handleChange, controlShouldRenderValue: false, inputValue: inputValue || '', placeholder: placeHolder, onInputChange: onInputChange, formatCreateLabel: (userInput) => userInput, onKeyDown: onKeyDown, isDisabled: isDisabled, isLoading: isLoading, loadingMessage: () => `${t('trips.myTrips.itinerary.offers.qrWriter.loading')}...`, noOptionsMessage: () => react_1.default.createElement("div", { "data-no-options-message": true }, t('trips.myTrips.exploreMore.noResultsFound')), maxMenuHeight: 300, menuPlacement: "bottom", menuShouldScrollIntoView: true, menuShouldBlockScroll: true, components: { MenuList: VirtualizedMenuList } })));
 };
 exports.default = PoiSearchAutoComplete;