bug fixes and new features

sa-si-dev · Sep 25, 2022 · cadeeb8 · cadeeb8
1 parent e25de63
commit cadeeb8
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 96 deletions.
diff --git a/docs/methods.md b/docs/methods.md
@@ -5,6 +5,7 @@
 - [reset()](#reset)
 - [setOptions()](#setoptions)
 - [setDisabledOptions()](#setdisabledoptions)
+- [setEnabledOptions()](#setenabledoptions)
 - [toggleSelectAll()](#toggleselectall)
 - [isAllSelected()](#isallselected)
 - [addOption()](#addoption)
@@ -82,6 +83,22 @@ document.querySelector('#sample-select').setDisabledOptions(disabledOptions);
 document.querySelector('#sample-select').setDisabledOptions(true);
 ```
 
+### setEnabledOptions()
+
+**Arguments:**
+
+- enabledOptions - list of enabled option's values or `true` to enable all options
+- keepValue - set true to keep selected value
+
+```js
+var enabledOptions = [2, 6, 9];
+
+document.querySelector('#sample-select').setEnabledOptions(enabledOptions);
+
+/** to enable all options */
+document.querySelector('#sample-select').setEnabledOptions(true);
+```
+
 ### toggleSelectAll()
 
 **Arguments:**

diff --git a/docs/properties.md b/docs/properties.md
@@ -8,6 +8,7 @@
 | options[].alias | String \| Array | | Alternative labels to use on search.<br/>Array of string or comma separated string. |
 | options[].options | Array | | List of options for option group |
 | options[].description | String | | Text to show along with label |
+| options[].classNames | String | | Additional class names to customize specific option |
 | options[].customData | Any | | Any custom data to store with the options and it would be available with getSelectedOptions() result. |
 | valueKey | String | value | Object key to use to get value from options array |
 | labelKey | String | label | Object key to use to get label from options array |
@@ -43,6 +44,7 @@
 | name | String | | Name attribute for hidden input<br>It would be useful for form submit to server |
 | keepAlwaysOpen | Boolean | false | Keep dropbox always open with fixed height |
 | maxValues | Number | 0 | Maximum no.of options allowed to choose in multiple select<br>0 - for no limit |
+| minValues | Number | | Minimum no.of options should be selected to succeed required validation |
 | additionalClasses | String | | Additional classes for wrapper element |
 | showDropboxAsPopup | Boolean | true | Show dropbox as popup on small screen like mobile |
 | popupDropboxBreakpoint | String | 576px | Maximum screen width that allowed to show dropbox as popup |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "virtual-select-plugin",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "A javascript plugin for dropdown with virtual scroll",
   "scripts": {
     "start": "webpack --mode development --watch",
@@ -34,7 +34,7 @@
     "eslint-plugin-import": "^2.26.0",
     "filemanager-webpack-plugin": "^7.0.0",
     "mini-css-extract-plugin": "^2.6.1",
-    "popover-plugin": "^1.0.10",
+    "popover-plugin": "^1.0.11",
     "postcss-loader": "^7.0.1",
     "sass": "^1.53.0",
     "sass-loader": "^13.0.2",

diff --git a/src/virtual-select.js b/src/virtual-select.js
@@ -1,3 +1,4 @@
+/** cSpell:ignore nocheck, Labelledby, vscomp, tabindex, combobox, haspopup, listbox, activedescendant */
 /* eslint-disable class-methods-use-this */
 // @ts-nocheck
 import { Utils, DomUtils } from './utils';
@@ -41,6 +42,7 @@ const dataProps = [
   'markSearchResults',
   'maxValues',
   'maxWidth',
+  'minValues',
   'moreText',
   'noOfDisplayValues',
   'noOptionsText',
@@ -277,6 +279,10 @@ export class VirtualSelect {
       const isSelected = convertToBoolean(d.isSelected);
       let ariaDisabledText = '';
 
+      if (d.classNames) {
+        optionClasses += ` ${d.classNames}`;
+      }
+
       if (d.isFocused) {
         optionClasses += ' focused';
       }
@@ -583,7 +589,6 @@ export class VirtualSelect {
 
     /** using setTimeout to fix the issue of dropbox getting closed on select */
     setTimeout(() => {
-      this.isClearingSearchValue = true;
       this.setSearchValue('');
       this.focusSearchInput();
     }, 0);
@@ -651,13 +656,11 @@ export class VirtualSelect {
   }
 
   afterSetSearchValue() {
-    if (this.hasServerSearch && !this.isClearingSearchValue) {
+    if (this.hasServerSearch) {
       this.serverSearch();
     } else {
       this.setVisibleOptionsCount();
     }
-
-    this.isClearingSearchValue = false;
 
     if (this.selectAllOnlyVisible) {
       this.toggleAllOptionsClass();
@@ -763,6 +766,7 @@ export class VirtualSelect {
     this.noOfDisplayValues = parseInt(options.noOfDisplayValues);
     this.zIndex = parseInt(options.zIndex);
     this.maxValues = parseInt(options.maxValues);
+    this.minValues = parseInt(options.minValues);
     this.name = this.secureText(options.name);
     this.additionalClasses = options.additionalClasses;
     this.popupDropboxBreakpoint = options.popupDropboxBreakpoint;
@@ -783,7 +787,6 @@ export class VirtualSelect {
     this.tooltipEnterDelay = 200;
     this.searchValue = '';
     this.searchValueOriginal = '';
-    this.isClearingSearchValue = false;
     this.isAllSelected = false;
 
     if ((options.search === undefined && this.multiple) || this.allowNewOption || this.showOptionsOnlyOnSearch) {
@@ -889,6 +892,7 @@ export class VirtualSelect {
     $ele.setValue = VirtualSelect.setValueMethod;
     $ele.setOptions = VirtualSelect.setOptionsMethod;
     $ele.setDisabledOptions = VirtualSelect.setDisabledOptionsMethod;
+    $ele.setEnabledOptions = VirtualSelect.setEnabledOptionsMethod;
     $ele.toggleSelectAll = VirtualSelect.toggleSelectAll;
     $ele.isAllSelected = VirtualSelect.isAllSelected;
     $ele.addOption = VirtualSelect.addOptionMethod;
@@ -1072,6 +1076,55 @@ export class VirtualSelect {
     this.disabledOptions = disabledOptionsArr;
   }
 
+  setEnabledOptionsMethod(disabledOptions, keepValue = false) {
+    this.setEnabledOptions(disabledOptions);
+
+    if (!keepValue) {
+      this.setValueMethod(null);
+      this.toggleAllOptionsClass();
+    }
+
+    this.setVisibleOptions();
+  }
+
+  setEnabledOptions(enabledOptions) {
+    if (enabledOptions === undefined) {
+      return;
+    }
+
+    const disabledOptionsArr = [];
+
+    if (enabledOptions === true) {
+      this.options.forEach((d) => {
+        // eslint-disable-next-line no-param-reassign
+        d.isDisabled = false;
+
+        return d;
+      });
+    } else {
+      const enabledOptionsMapping = {};
+
+      enabledOptions.forEach((d) => {
+        enabledOptionsMapping[d] = true;
+      });
+
+      this.options.forEach((d) => {
+        const isDisabled = enabledOptionsMapping[d.value] !== true;
+
+        // eslint-disable-next-line no-param-reassign
+        d.isDisabled = isDisabled;
+
+        if (isDisabled) {
+          disabledOptionsArr.push(d.value);
+        }
+
+        return d;
+      });
+    }
+
+    this.disabledOptions = disabledOptionsArr;
+  }
+
   setOptions(options = []) {
     const preparedOptions = [];
     const hasDisabledOptions = this.disabledOptions.length;
@@ -1105,6 +1158,7 @@ export class VirtualSelect {
         isVisible: convertToBoolean(d.isVisible, true),
         isNew: d.isNew || false,
         isGroupTitle,
+        classNames: d.classNames,
       };
 
       if (!hasEmptyValueOption && value === '') {
@@ -1168,7 +1222,7 @@ export class VirtualSelect {
     const newOptions = this.options;
     let optionsUpdated = false;
 
-    /** merging already seleted options details with new options */
+    /** merging already selected options details with new options */
     if (selectedOptions.length) {
       const newOptionsValueMapping = {};
       optionsUpdated = true;
@@ -1178,7 +1232,7 @@ export class VirtualSelect {
       });
 
       selectedOptions.forEach((d) => {
-        if (newOptionsValueMapping[d.value] === false) {
+        if (newOptionsValueMapping[d.value] !== true) {
           // eslint-disable-next-line no-param-reassign
           d.isVisible = false;
           newOptions.push(d);
@@ -1398,7 +1452,7 @@ export class VirtualSelect {
 
               this.setValueTagAttr();
             } else {
-              /** replace comma delimitted list of selections with shorter text indicating selection count */
+              /** replace comma separated list of selections with shorter text indicating selection count */
               const optionsSelectedText = selectedLength === 1 ? this.optionSelectedText : this.optionsSelectedText;
               $valueText.innerHTML = `${countText} ${optionsSelectedText}`;
             }
@@ -2263,6 +2317,7 @@ export class VirtualSelect {
         }
 
         this.closeDropbox();
+        this.setSearchValue('');
       }
 
       this.lastSelectedOptionIndex = selectedIndex;
@@ -2740,8 +2795,13 @@ export class VirtualSelect {
     }
 
     let hasError = false;
+    const { selectedValues, minValues } = this;
 
-    if (this.required && Utils.isEmpty(this.selectedValues)) {
+    if (this.required &&
+      (Utils.isEmpty(selectedValues) ||
+      /** required minium options not selected */
+      (this.multiple && minValues && selectedValues.length < minValues))
+    ) {
       hasError = true;
     }
 
@@ -2984,6 +3044,10 @@ export class VirtualSelect {
     this.virtualSelect.setDisabledOptionsMethod(...params);
   }
 
+  static setEnabledOptionsMethod(...params) {
+    this.virtualSelect.setEnabledOptionsMethod(...params);
+  }
+
   static toggleSelectAll(isSelected) {
     this.virtualSelect.toggleAllOptions(isSelected);
   }