Merge pull request #22 from apuc/fix-function-clearSelect

Finish fixed clearSelect

src/cg-dropdown.js

@@ -575,12 +575,15 @@ export class DropDown {
    * @method #addOptionsBehaviour
    */
   #addOptionsBehaviour() {
-    const { multiselect, placeholder, selected, multiselectTag, searchMode, closeOnSelect } =
+    const {
-      this.#options;
+      multiselect,
-    const dataSelectText = {
+      placeholder,
-      placeholder: placeholder,
+      selected,
-      selected: selected,
+      multiselectTag,
-    };
+      searchMode,
+      closeOnSelect,
+      darkTheme,
+    } = this.#options;
 
     const options = this.#element.querySelectorAll('.list__item');
     const select = this.#element.querySelector('.selected');
@@ -599,6 +602,15 @@ export class DropDown {
 
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
+        const dataSelectText = {
+          placeholder,
+          selected,
+          selectedItems: this.#selectedItems,
+          indexes: this.#indexes,
+          darkTheme,
+          multiselectTag,
+        };
+
         const item = this.#items[index];
 
         if (closeOnSelect == false || (multiselect && multiselect == true)) {
@@ -643,6 +655,7 @@ export class DropDown {
                 const tagItem = document.getElementById(`tag-${index}-${item.id}`);
                 ulMultipul.removeChild(tagItem);
               }
+
               this.#indexes.splice(checkIndex, 1);
               this.#selectedItems.splice(checkIndex, 1);
               nativOptionMultiple(nativOption, item.title, false);
@@ -661,7 +674,7 @@ export class DropDown {
         } else {
           select.innerText = item.title;
           this.#selectedItems = item;
-          clearSelect(select, this.#element, dataSelectText);
+
           nativOptionOrdinary(nativOption, item.title);
 
           options.forEach((option) => {
@@ -669,6 +682,8 @@ export class DropDown {
           });
           option.classList.add('active');
         }
+
+        clearSelect(select, this.#element, dataSelectText);
       });
     });
   }

src/components/utils.js

@@ -172,10 +172,14 @@ export function nativOptionMultiple(element, item, condition) {
  * @param {object} dataSelectText текст который отрисовывается в селекте.
  */
 export function clearSelect(select, element, dataSelectText) {
+  const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
+
   const options = element.querySelectorAll('.list__item');
+  const ulMultiSelect = element.querySelector('.multiselect-tag');
   const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const checkBox = element.querySelectorAll('li input');
 
   svgIcon.setAttribute('viewBox', '0 0 10 10');
   path1.setAttribute('d', 'M2,8 L8,2');
@@ -183,6 +187,20 @@ export function clearSelect(select, element, dataSelectText) {
   svgIcon.appendChild(path1);
   svgIcon.appendChild(path2);
 
+  if (multiselectTag && multiselectTag == true) {
+    return;
+  }
+
+  if (darkTheme === true || !darkTheme) {
+    path1.classList.add('pathWhite');
+    path2.classList.add('pathWhite');
+  }
+
+  if (darkTheme === false) {
+    path1.classList.add('pathBlack');
+    path2.classList.add('pathBlack');
+  }
+
   svgIcon.classList.add('svg-icon');
   svgIcon.classList.add('svg-clear');
 
@@ -190,6 +208,16 @@ export function clearSelect(select, element, dataSelectText) {
 
   svgIcon.addEventListener('click', () => {
     select.innerText = '';
+
+    if (Array.isArray(selectedItems)) {
+      selectedItems.splice(0);
+      indexes.splice(0);
+    }
+
+    checkBox.forEach((item) => {
+      item.checked = false;
+    });
+
     getSelectText(dataSelectText, select);
 
     options.forEach((option) => {

src/index.js

@@ -77,17 +77,17 @@ const dropdown4 = new DropDown({
       categoryItems: ['Paris'],
     },
   ],
-  styles: {
+  // styles: {
-    head: {
+  //   head: {
-      background: 'red',
+  //     background: 'red',
-    },
+  //   },
-    list: {
+  //   list: {
-      background: 'green',
+  //     background: 'green',
-    },
+  //   },
-    chips: {
+  //   chips: {
-      background: 'blue',
+  //     background: 'blue',
-    },
+  //   },
-  },
+  // },
   multiselect: true,
   multiselectTag: true,
 });

src/style/svgStyle.scss

@@ -33,4 +33,8 @@
   position: absolute;
   right: 36px;
   background-color: transparent;
+
+  &:hover {
+    background-color: transparent;
+  }
 }

src/style/whiteTheme.scss

@@ -11,3 +11,11 @@
   color: black !important;
   background-color: white !important;
 }
+
+.pathWhite {
+  color: white !important;
+}
+
+.pathBlack {
+  color: black !important;
+}