react-core-ts - npm Package Compare versions

Comparing version 1.0.45 to 1.0.46

dist/AutoCompleteWithSelectedList.js

@@ -98,3 +98,3 @@ "use strict";
         return [2 /*return*/, []];
-    }); }); } : _b, _c = _a.data, data = _c === void 0 ? [] : _c, errors = _a.errors, _d = _a.required, required = _d === void 0 ? false : _d, name = _a.name, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, placeholder = _a.placeholder, id = _a.id, _f = _a.type, type = _f === void 0 ? "custom_select" : _f, _g = _a.selectedItems, propsSeelctedItems = _g === void 0 ? [] : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, value = _a.value, _k = _a.isMultiple, isMultiple = _k === void 0 ? false : _k, _l = _a.desc, desc = _l === void 0 ? "name" : _l, _m = _a.descId, descId = _m === void 0 ? "id" : _m, singleSelect = _a.singleSelect, className = _a.className, _o = _a.async, async = _o === void 0 ? false : _o, paginationEnabled = _a.paginationEnabled, _p = _a.initialLoad, initialLoad = _p === void 0 ? false : _p, actionLabel = _a.actionLabel, handleAction = _a.handleAction, nextBlock = _a.nextBlock, notDataMessage = _a.notDataMessage, initialDataMessage = _a.initialDataMessage, onFocus = _a.onFocus, _q = _a.expandable, expandable = _q === void 0 ? false : _q, _r = _a.textCount, textCount = _r === void 0 ? 10 : _r, _s = _a.itemCount, itemCount = _s === void 0 ? 1 : _s, scrollRef = _a.scrollRef, _t = _a.countOnly, countOnly = _t === void 0 ? true : _t, _u = _a.typeOnlyFetch, typeOnlyFetch = _u === void 0 ? false : _u, _v = _a.tab, tab = _v === void 0 ? [] : _v;
+    }); }); } : _b, _c = _a.data, data = _c === void 0 ? [] : _c, errors = _a.errors, _d = _a.required, required = _d === void 0 ? false : _d, name = _a.name, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, placeholder = _a.placeholder, id = _a.id, _f = _a.type, type = _f === void 0 ? "custom_select" : _f, _g = _a.selectedItems, propsSeelctedItems = _g === void 0 ? [] : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, value = _a.value, _k = _a.isMultiple, isMultiple = _k === void 0 ? false : _k, _l = _a.desc, desc = _l === void 0 ? "name" : _l, _m = _a.descId, descId = _m === void 0 ? "id" : _m, singleSelect = _a.singleSelect, className = _a.className, _o = _a.async, async = _o === void 0 ? false : _o, paginationEnabled = _a.paginationEnabled, _p = _a.initialLoad, initialLoad = _p === void 0 ? false : _p, actionLabel = _a.actionLabel, handleAction = _a.handleAction, nextBlock = _a.nextBlock, notDataMessage = _a.notDataMessage, initialDataMessage = _a.initialDataMessage, onFocus = _a.onFocus, _q = _a.expandable, expandable = _q === void 0 ? false : _q, _r = _a.textCount, textCount = _r === void 0 ? 10 : _r, _s = _a.itemCount, itemCount = _s === void 0 ? 1 : _s, scrollRef = _a.scrollRef, _t = _a.countOnly, countOnly = _t === void 0 ? true : _t, _u = _a.typeOnlyFetch, typeOnlyFetch = _u === void 0 ? false : _u, _v = _a.tab, tab = _v === void 0 ? [] : _v, _w = _a.clearTabSwitch, clearTabSwitch = _w === void 0 ? false : _w;
     var dropdownRef = (0, react_1.useRef)(null);
@@ -104,20 +104,21 @@ var dropdownSelectedRef = (0, react_1.useRef)(null);
     // State Hooks Section
-    var _w = (0, react_1.useState)(true), isInitialRender = _w[0], setIsInitialRender = _w[1];
-    var _x = (0, react_1.useState)(value), inputValue = _x[0], setInputValue = _x[1];
-    var _y = (0, react_1.useState)(""), searchValue = _y[0], setSearchValue = _y[1];
-    var _z = (0, react_1.useState)(""), searchOldValue = _z[0], setSearchOldValue = _z[1];
-    var _0 = (0, react_1.useState)(1), nextPage = _0[0], setNextPage = _0[1];
-    var _1 = (0, react_1.useState)(false), dropOpen = _1[0], setDropOpen = _1[1];
-    var _2 = (0, react_1.useState)([]), selectedItems = _2[0], setSelectedItems = _2[1];
-    var _3 = (0, react_1.useState)(false), showAllSelected = _3[0], setShowAllSelected = _3[1];
-    var _4 = (0, react_1.useState)(0), activeTab = _4[0], setActiveTab = _4[1];
+    var _x = (0, react_1.useState)(true), isInitialRender = _x[0], setIsInitialRender = _x[1];
+    var _y = (0, react_1.useState)(value), inputValue = _y[0], setInputValue = _y[1];
+    var _z = (0, react_1.useState)(""), searchValue = _z[0], setSearchValue = _z[1];
+    var _0 = (0, react_1.useState)(""), searchOldValue = _0[0], setSearchOldValue = _0[1];
+    var _1 = (0, react_1.useState)(1), nextPage = _1[0], setNextPage = _1[1];
+    var _2 = (0, react_1.useState)(false), dropOpen = _2[0], setDropOpen = _2[1];
+    var _3 = (0, react_1.useState)([]), selectedItems = _3[0], setSelectedItems = _3[1];
+    var _4 = (0, react_1.useState)(false), showAllSelected = _4[0], setShowAllSelected = _4[1];
+    var _5 = (0, react_1.useState)(0), activeTab = _5[0], setActiveTab = _5[1];
     // API call for suggestions through a custom hook
     var inputRef = (0, react_1.useRef)(null);
     var dropRef = (0, react_1.useRef)(null);
+    var inputSearchRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
-    var _5 = (0, react_1.useState)({
+    var _6 = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 200,
-    }), dropdownStyle = _5[0], setDropdownStyle = _5[1];
+    }), dropdownStyle = _6[0], setDropdownStyle = _6[1];
     var adjustDropdownPosition = function () {
@@ -162,5 +163,5 @@ var _a, _b;
     }, [dropOpen, selectedItems]);
-    var _6 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    var _7 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
     // nextBlock
-    ), suggestions = _6.suggestions, isLoading = _6.isLoading, handlePickSuggestions = _6.handlePickSuggestions;
+    ), suggestions = _7.suggestions, isLoading = _7.isLoading, handlePickSuggestions = _7.handlePickSuggestions;
     // Handling the selection of a suggestion
@@ -327,4 +328,12 @@ var handleSuggestionClick = (0, react_1.useCallback)(function (suggestion) {
     var onInputFocus = function () {
-        if (inputRef.current)
-            inputRef.current.focus();
+        if (countOnly) {
+            setTimeout(function () {
+                if (inputSearchRef.current)
+                    inputSearchRef.current.focus();
+            }, 10);
+        }
+        else {
+            if (inputRef.current)
+                inputRef.current.focus();
+        }
         handleOnClick();
@@ -351,2 +360,13 @@ };
     };
+    var handleTabClick = function (index) {
+        if (activeTab !== index) {
+            if (clearTabSwitch) {
+                handleClearSelected();
+                setSearchValue("");
+                setInputValue("");
+                handlePickSuggestions("", 1);
+            }
+            setActiveTab(index);
+        }
+    };
     var getSelectedItems = function (dropdown) {
@@ -382,6 +402,4 @@ return (react_1.default.createElement(react_1.default.Fragment, null,
         return (react_1.default.createElement("ul", { className: "qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2", ref: tabRef }, tab.map(function (item, idx) { return (react_1.default.createElement("li", { className: "qbs-flex-1 qbs-tab-items", key: "tab-".concat(idx) },
-            react_1.default.createElement("span", { className: "qbs-inline-block qbs-tab-item qbs-text-sm qbs-cursor-pointer qbs-w-full qbs-text-center qbs-p-1 qbs-border-b-2 ".concat(activeTab === idx
-                    ? "qbs-tab-active-item"
-                    : ""), onClick: function () {
-                    setActiveTab(idx);
+            react_1.default.createElement("span", { className: "qbs-inline-block qbs-tab-item qbs-text-sm qbs-cursor-pointer qbs-w-full qbs-text-center qbs-p-1 qbs-border-b-2 ".concat(activeTab === idx ? "qbs-tab-active-item" : ""), onClick: function () {
+                    handleTabClick(idx);
                 } }, item.label))); })));
@@ -400,3 +418,3 @@ };
         react_1.default.createElement("div", { className: "qbs-relative  qbs-autocomplete-selected-comp ".concat(expandable ? "qbs-expandable-container" : "qbs-container") },
-            (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, !countOnly ? (getSelectedItems(false)) : (react_1.default.createElement("div", { className: "selected-items-container qbs-text-sm qbs-gap-1" },
+            (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null, !countOnly ? (getSelectedItems(false)) : (react_1.default.createElement("div", { className: "selected-items-container qbs-text-sm qbs-gap-1", onClick: function () { return onInputFocus(); } },
                 react_1.default.createElement("span", { className: "badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6" }, selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
@@ -423,3 +441,3 @@ "Item",
                             react_1.default.createElement(icons_1.Search, null)),
-                        react_1.default.createElement("input", { className: "dropdown-search-input", onChange: handleSuggestionChange, value: searchValue, placeholder: "Search" }))),
+                        react_1.default.createElement("input", { className: "dropdown-search-input", onChange: handleSuggestionChange, value: searchValue, placeholder: "Search", ref: inputSearchRef }))),
                     react_1.default.createElement("div", { className: "qbs-autocomplete-suggestions-sub " },
@@ -426,0 +444,0 @@ (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? (filteredData.map(function (suggestion, idx) { return (react_1.default.createElement(DropdownList_1.default, { idx: idx, suggestion: suggestion, isSelected: isSelected, handleSuggestionClick: handleSuggestionClick, handleMultiSelect: handleMultiSelect, selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, desc: desc, key: suggestion[descId] })); })) : (react_1.default.createElement(react_1.default.Fragment, null, isLoading ||

dist/commontypes.d.ts

@@ -50,2 +50,3 @@ /// <reference types="react" />
     tab?: TabPops[];
+    clearTabSwitch?: boolean;
 }

dist/utilities/autosuggestions.js

@@ -104,3 +104,4 @@ "use strict";
                     (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0)) {
-                handlePickSuggestions("", paginationEnabled ? 1 : undefined);
+                if (!typeOnlyFetch && !inputValue)
+                    handlePickSuggestions("", paginationEnabled ? 1 : undefined);
             }
@@ -107,0 +108,0 @@ }

package.json

 {
   "name": "react-core-ts",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "React Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -154,2 +154,3 @@ # AutoComplete Component
 - **tab** _(Array)_:  Local data source for tabs, format should be `{id: nummber | string, label: string }`
+- **clearTabSwitch** _(boolean)_: If true, clear all search results, selected items and search key when tab is switching.
 
@@ -156,0 +157,0 @@ ## Contribution

src/commontypes.ts

@@ -22,3 +22,7 @@ export type ValueProps = {
   placeholder?: string;
-  getData?: (key?: string, nextBlock?: number, tabValue?: number | string) => any;
+  getData?: (
+    key?: string,
+    nextBlock?: number,
+    tabValue?: number | string
+  ) => any;
   errors?: any;
@@ -41,3 +45,3 @@ name: string;
   notDataMessage?: string;
-  initialDataMessage?:string;
+  initialDataMessage?: string;
   selectedItems?: any[];
@@ -55,2 +59,3 @@ onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
   tab?: TabPops[];
+  clearTabSwitch?: boolean;
 }

src/utilities/autosuggestions.ts

@@ -8,3 +8,7 @@ import { useEffect, useState } from "react";
 type UseSuggestionsType = (
-  getData: (key?: string, next?: number, tabValue?: number | string) => Promise<ValueProps[]>,
+  getData: (
+    key?: string,
+    next?: number,
+    tabValue?: number | string
+  ) => Promise<ValueProps[]>,
   initialData?: ValueProps[],
@@ -19,3 +23,3 @@ dropOpen?: boolean,
   selectedItems?: any[],
-  initialLoad?: boolean,
+  initialLoad?: boolean
 ) => {
@@ -28,3 +32,3 @@ suggestions: ValueProps[];
     next?: number,
-    append?: boolean, 
+    append?: boolean,
     tabValue?: string | number
@@ -53,3 +57,3 @@ ) => Promise<void>;
     nextPage?: number,
-    appendData?: boolean, 
+    appendData?: boolean,
     tabValue?: string | number
@@ -87,3 +91,4 @@ ) => {
       ) {
-        handlePickSuggestions("", paginationEnabled ? 1 : undefined);
+        if (!typeOnlyFetch && !inputValue)
+          handlePickSuggestions("", paginationEnabled ? 1 : undefined);
       }
@@ -90,0 +95,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

376583

increased by0.68%

Lines of code

7447

increased by0.94%

Number of lines in readme file

160

increased by0.63%

No dependency changes