@tripian/react 8.0.2 → 8.0.4

package/components/PoiSearchAutoComplete/PoiSearchAutoComplete.d.ts

@@ -8,6 +8,7 @@ interface IPoiSearchAutoComplete {
     onInputChange?: (input: string) => void;
     onCreateOption: (input: string) => void;
     placeHolder?: string;
+    isDisabled?: boolean;
 }
 declare const PoiSearchAutoComplete: React.FC<IPoiSearchAutoComplete>;
 export default PoiSearchAutoComplete;

package/components/base/RSelectMultiCustom/RSelectMultiCustom.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { InputActionMeta } from 'react-select';
 import { RSelectOption } from '../RSelect/RSelect';
 interface IRSelectMultiCustom {
     options: RSelectOption[];
     selectedOptionValues: string[];
     onSelectedOptionChange: (selectedOptions: RSelectOption[]) => void;
-    onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+    isSelectAll: boolean;
     placeHolder?: string;
     disabled?: boolean;
     onFocus?: () => void;

package/components/base/RSelectMultiCustomTT/RSelectMultiCustom.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { InputActionMeta } from 'react-select';
+import { RSelectOption } from '../RSelect/RSelect';
+interface IRSelectMultiCustom {
+    options: RSelectOption[];
+    selectedOptionValues: string[];
+    onSelectedOptionChange: (selectedOptions: RSelectOption[]) => void;
+    onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+    placeHolder?: string;
+    disabled?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+declare const RSelectMultiCustom: React.FC<IRSelectMultiCustom>;
+export default RSelectMultiCustom;

package/index.js

@@ -78399,7 +78399,7 @@ var PoiCategories = function (_a) {
     var selectedOptionValues = selectedPoiCategoryIndexes.map(function (x) { return x.toString(); });
     var callBackRSelect = function (selectedOptions) { return setSelectedPoiCategoryIndexes(selectedOptions.map(function (selectedOption) { return Number(selectedOption.value); })); };
     return (react_1.default.createElement("div", { className: PoiCategories_scss_1.default.poiCategories },
-        react_1.default.createElement(RSelectMultiCustom_1.default, { options: poiCategoryOptions, selectedOptionValues: selectedOptionValues, onSelectedOptionChange: callBackRSelect, placeHolder: "Select Category" })));
+        react_1.default.createElement(RSelectMultiCustom_1.default, { options: poiCategoryOptions, selectedOptionValues: selectedOptionValues, onSelectedOptionChange: callBackRSelect, placeHolder: "Select Category", isSelectAll: true })));
 };
 exports.default = PoiCategories;
 
@@ -78455,23 +78455,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable prefer-const */
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable prefer-const */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 var react_1 = __importStar(__webpack_require__(0));
 var react_select_1 = __importStar(__webpack_require__(78));
-var model_1 = __webpack_require__(6);
-var Icons_1 = __webpack_require__(24);
 var RSelectMultiCustom_scss_1 = __importDefault(__webpack_require__(831));
+var Icons_1 = __webpack_require__(24);
 var ValueContainer = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     var _b = children, values = _b[0], input = _b[1];
@@ -78492,24 +78499,65 @@ var ValueContainer = function (_a) {
             values,
             input)));
 };
-var Option = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(react_select_1.components.Option, __assign({}, props),
-        react_1.default.createElement("div", { className: RSelectMultiCustom_scss_1.default.customContainer },
-            react_1.default.createElement("input", { type: "checkbox", checked: props.isSelected, className: RSelectMultiCustom_scss_1.default.checkbox }),
-            children)));
-};
 var RSelectMultiCustom = function (_a) {
-    var options = _a.options, selectedOptionValues = _a.selectedOptionValues, onSelectedOptionChange = _a.onSelectedOptionChange, onInputChange = _a.onInputChange, _b = _a.placeHolder, placeHolder = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var options = _a.options, selectedOptionValues = _a.selectedOptionValues, onSelectedOptionChange = _a.onSelectedOptionChange, isSelectAll = _a.isSelectAll, /* onInputChange */ _b = _a.placeHolder, /* onInputChange */ placeHolder = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var _d = (0, react_1.useState)(''), selectInput = _d[0], setSelectInput = _d[1];
+    var isAllSelected = (0, react_1.useRef)(false);
+    var allOption = { value: '*', label: 'All' };
+    var comparator = function (v1, v2) { return Number(v1.value) - Number(v2.value); };
     var selectedOptions = (0, react_1.useMemo)(function () { return options.filter(function (option) { return selectedOptionValues.includes(option.value); }); }, [selectedOptionValues, options]);
+    var filterOptions = function (opts, input) { return opts === null || opts === void 0 ? void 0 : opts.filter(function (_a) {
+        var label = _a.label;
+        return label.toLowerCase().includes(input.toLowerCase());
+    }); };
+    var filteredOptions = filterOptions(options, selectInput);
+    var filteredSelectedOptions = filterOptions(selectedOptions, selectInput);
+    var Option = function (_a) {
+        var children = _a.children, props = __rest(_a, ["children"]);
+        return (react_1.default.createElement(react_select_1.components.Option, __assign({}, props),
+            react_1.default.createElement("div", { className: RSelectMultiCustom_scss_1.default.customContainer },
+                react_1.default.createElement("input", { type: "checkbox", checked: props.isSelected || isAllSelected.current, className: RSelectMultiCustom_scss_1.default.checkbox, onChange: function () { } }),
+                children)));
+    };
+    var customFilterOption = function (_a, input) {
+        var value = _a.value, label = _a.label;
+        return (value !== '*' && label.toLowerCase().includes(input.toLowerCase())) || (value === '*' && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0);
+    };
+    var onInputChange = function (inputValue, event) {
+        if (event.action === 'input-change')
+            setSelectInput(inputValue);
+        else if (event.action === 'menu-close' && selectInput !== '')
+            setSelectInput('');
+    };
+    var onKeyDown = function (e) {
+        if ((e.key === ' ' || e.key === 'Enter') && !selectInput)
+            e.preventDefault();
+    };
     var handleChange = function (newSelectedOptions) {
-        onSelectedOptionChange(newSelectedOptions);
+        if (newSelectedOptions.length > 0 &&
+            !isAllSelected.current &&
+            (newSelectedOptions[newSelectedOptions.length - 1].value === allOption.value || JSON.stringify(filteredOptions) === JSON.stringify(newSelectedOptions.sort(comparator))))
+            return onSelectedOptionChange(__spreadArray(__spreadArray([], (selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : []), true), options.filter(function (_a) {
+                var label = _a.label;
+                return label.toLowerCase().includes(selectInput === null || selectInput === void 0 ? void 0 : selectInput.toLowerCase()) && (selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : []).filter(function (opt) { return opt.label === label; }).length === 0;
+            }), true).sort(comparator));
+        if (newSelectedOptions.length > 0 && newSelectedOptions[newSelectedOptions.length - 1].value !== allOption.value && JSON.stringify(newSelectedOptions.sort(comparator)) !== JSON.stringify(filteredOptions))
+            return onSelectedOptionChange(newSelectedOptions);
+        return onSelectedOptionChange(__spreadArray([], selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter(function (_a) {
+            var label = _a.label;
+            return !label.toLowerCase().includes(selectInput === null || selectInput === void 0 ? void 0 : selectInput.toLowerCase());
+        }), true));
     };
-    var customFilter = function (option, searchText) { return model_1.helper.toEngChars(option.label).toLowerCase().includes(model_1.helper.toEngChars(searchText).toLowerCase()); };
-    return (react_1.default.createElement(react_select_1.default, { value: selectedOptions, onChange: handleChange, onInputChange: onInputChange, options: options, filterOption: customFilter, isMulti: true, isSearchable: true, placeholder: placeHolder, isDisabled: disabled, isClearable: false, className: "trpReactSelectMulti", classNamePrefix: "trpReactSelectMulti", closeMenuOnSelect: false, hideSelectedOptions: false, components: {
+    if (isSelectAll && options.length !== 0) {
+        isAllSelected.current = JSON.stringify(filteredSelectedOptions) === JSON.stringify(filteredOptions);
+        return (react_1.default.createElement(react_select_1.default, { value: selectedOptions, onChange: handleChange, onInputChange: onInputChange, options: __spreadArray([allOption], options, true), filterOption: customFilterOption, isMulti: true, isSearchable: false, placeholder: placeHolder, isDisabled: disabled, isClearable: false, className: "trpReactSelectMulti", classNamePrefix: "trpReactSelectMulti", closeMenuOnSelect: false, components: {
+                ValueContainer: ValueContainer,
+                Option: Option,
+            }, onFocus: function () { return onFocus && onFocus(); }, onBlur: function () { return onBlur && onBlur(); }, inputValue: selectInput, onKeyDown: onKeyDown, tabSelectsValue: false, backspaceRemovesValue: false, hideSelectedOptions: false, blurInputOnSelect: false }));
+    }
+    return (react_1.default.createElement(react_select_1.default, { inputValue: selectInput, onInputChange: onInputChange, filterOption: customFilterOption, components: {
             ValueContainer: ValueContainer,
-            Option: Option,
-        }, onFocus: function () { return onFocus && onFocus(); }, onBlur: function () { return onBlur && onBlur(); } }));
+        }, onKeyDown: onKeyDown, tabSelectsValue: false, hideSelectedOptions: true, backspaceRemovesValue: false, blurInputOnSelect: true }));
 };
 exports.default = RSelectMultiCustom;
 
@@ -78943,24 +78991,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var react_1 = __importStar(__webpack_require__(0));
+var model_1 = __webpack_require__(6);
 var creatable_1 = __importDefault(__webpack_require__(923));
 var react_select_1 = __webpack_require__(78);
-var model_1 = __webpack_require__(6);
 var PoiSearchAutoComplete_scss_1 = __importDefault(__webpack_require__(853));
-var ValueContainer = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var _b = children, values = _b[0], input = _b[1];
-    return react_1.default.createElement(react_select_1.components.ValueContainer, __assign({}, props), input);
-};
 var PoiSearchAutoComplete = function (_a) {
-    var inputValue = _a.inputValue, options = _a.options, selectedOptionValues = _a.selectedOptionValues, onSelectedOptionChange = _a.onSelectedOptionChange, onInputChange = _a.onInputChange, onCreateOption = _a.onCreateOption, placeHolder = _a.placeHolder;
+    var inputValue = _a.inputValue, options = _a.options, selectedOptionValues = _a.selectedOptionValues, onSelectedOptionChange = _a.onSelectedOptionChange, onInputChange = _a.onInputChange, onCreateOption = _a.onCreateOption, placeHolder = _a.placeHolder, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b;
     var selectedOptions = (0, react_1.useMemo)(function () { return options.filter(function (option) { return selectedOptionValues.includes(option.value); }); }, [selectedOptionValues, options]);
     var handleChange = function (newSelectedOptions) {
         onSelectedOptionChange(newSelectedOptions);
     };
     var customFilter = function (option, searchText) { return model_1.helper.toEngChars(option.label).toLowerCase().includes(model_1.helper.toEngChars(searchText).toLowerCase()); };
+    var ValueContainer = function (_a) {
+        var children = _a.children, props = __rest(_a, ["children"]);
+        var _b = children, values = _b[0], input = _b[1];
+        return (react_1.default.createElement(react_select_1.components.ValueContainer, __assign({}, props),
+            react_1.default.createElement("div", { className: PoiSearchAutoComplete_scss_1.default.customContainer }, input)));
+    };
+    var Input = function (props) { return react_1.default.createElement(react_select_1.components.Input, __assign({}, props, { autoComplete: "off", placeholder: placeHolder })); };
     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: options, value: selectedOptions, filterOption: customFilter, isClearable: false, isSearchable: true, inputValue: inputValue, onChange: handleChange, onInputChange: onInputChange, placeholder: placeHolder, components: { ValueContainer: ValueContainer }, formatCreateLabel: function (userInput) { return userInput; } })));
+        react_1.default.createElement(creatable_1.default, { className: "trpReactCreatableSelectMulti", classNamePrefix: "trpReactCreatableSelectMulti", onCreateOption: onCreateOption, isMulti: true, options: options, value: selectedOptions, filterOption: customFilter, isClearable: false, isSearchable: true, inputValue: inputValue, onChange: handleChange, onInputChange: onInputChange, components: { ValueContainer: ValueContainer, Input: Input }, formatCreateLabel: function (userInput) { return userInput; }, isDisabled: isDisabled })));
 };
 exports.default = PoiSearchAutoComplete;