Merge pull request #18 from apuc/add-default-style

Added default styles(White/Dark) theme

src/cg-dropdown.js

@@ -350,7 +350,7 @@ export class DropDown {
    * @description Рендер елементов в селекте.
    */
   #render(select) {
-    const { styles, multiselect, searchMode, multiselectTag } = this.#options;
+    const { styles, multiselect, searchMode, multiselectTag, darkTheme } = this.#options;
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -362,16 +362,15 @@ export class DropDown {
 
     const ulList = document.createElement('ul');
     const intputSearch = createInputSearch(random);
-    this.random = random;
-
     const nativSelect = createNativeSelect();
-
-    ulList.classList.add('list');
+    this.random = random;
 
     if (searchMode) {
       ulList.appendChild(intputSearch);
     }
 
+    ulList.classList.add('list');
+
     if (styles) {
       const { list } = styles;
       customStylesFormat(list, ulList);
@@ -426,9 +425,33 @@ export class DropDown {
       return item;
     });
 
+    if (darkTheme == false) {
+      this.checkTheme();
+    }
+
     this.#addOptionsBehaviour();
   }
 
+  checkTheme() {
+    const { darkTheme } = this.#options;
+
+    const select = this.#element.querySelector('.cg-select');
+    const caret = this.#element.querySelector('.caret');
+    const list = this.#element.querySelector('ul.list');
+    const listItem = this.#element.querySelectorAll('.list__item');
+
+    console.log(list);
+    if (darkTheme == false) {
+      select.classList.add('selectWhite');
+      caret.classList.add('caretWhite');
+      list.classList.add('listWhite');
+    } else if (darkTheme == true || !darkTheme) {
+      return;
+    } else {
+      throw new Error('Styles error or invalid value entered!');
+    }
+  }
+
   /**
    * Приватный метод рендера экземпляра класса DropDown
    *@protected

src/components/create-element.js

@@ -42,6 +42,7 @@ export function createBreadcrumb(data, title, index, id) {
   }
 
   svgIcon.addEventListener('click', (event) => {
+    event.preventDefault();
     event.stopPropagation();
     nativOptionMultiple(nativOption, title, false);
 

src/index.js

@@ -5,6 +5,7 @@ const dropdown = new DropDown({
   selector: '.cg-dropdown_one',
   placeholder: 'Выберите авто',
   lable: 'Выбор лучшего авто!',
+  darkTheme: false,
   items: [
     'BMW',
     {
@@ -15,6 +16,8 @@ const dropdown = new DropDown({
     'Mersedes',
     'MAN',
     'Ferari',
+    'Ferari',
+    'Ferari',
   ],
   styles: {
     lable: {
@@ -23,7 +26,8 @@ const dropdown = new DropDown({
       borderRadius: '5px',
     },
   },
-  // multiselect: true,
+  multiselect: true,
+  multiselectTag: true,
 });
 
 // ------------------------------URL--------------------
@@ -92,6 +96,7 @@ const dropdownBtn = new DropDown({
   selector: '.cg-dropdown_usedBtn',
   placeholder: 'Выберите авто',
   searchMode: true,
+  darkTheme: true,
   items: [
     'BMW',
     {

src/style/main.scss

@@ -1,4 +1,7 @@
 @import 'src/style/nativSelect.scss';
+@import './scrolbar.scss';
+@import './whiteTheme.scss';
+@import './svgStyle.scss';
 
 * {
   font-size: 14px;
@@ -166,28 +169,6 @@ input[type='checkbox'] {
   margin: 0 5px 0 0;
 }
 
-// --------SVG--------
-.svg-icon {
-  width: 16px;
-  margin-left: 3px;
-  background-color: #bebebc;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: 1s;
-
-  &:hover {
-    transition: 1s;
-    background-color: #ffffff;
-  }
-}
-
-.svg-icon path {
-  color: black;
-  stroke: currentcolor;
-  transition: 0.2s;
-  stroke-width: 0.5;
-}
-
 .label {
   color: white;
 }
@@ -220,19 +201,6 @@ input[type='checkbox'] {
   display: none;
 }
 
-// ------SCROLLBAR------
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: #d1d1d19d;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #4d4d4d;
-}
-
 @media (max-width: 425px) {
   .list {
     display: none !important;

src/style/scrolbar.scss

@@ -0,0 +1,12 @@
+// ------SCROLLBAR------
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #d1d1d19d;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #4d4d4d;
+}

src/style/svgStyle.scss

@@ -0,0 +1,21 @@
+// --------SVG--------
+.svg-icon {
+  width: 16px;
+  margin-left: 3px;
+  background-color: #bebebc;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 1s;
+
+  &:hover {
+    transition: 1s;
+    background-color: #ffffff;
+  }
+}
+
+.svg-icon path {
+  color: black;
+  stroke: currentcolor;
+  transition: 0.2s;
+  stroke-width: 0.5;
+}

src/style/whiteTheme.scss

@@ -0,0 +1,13 @@
+.selectWhite {
+  color: black !important;
+  background: rgb(248, 248, 248) !important;
+}
+
+.caretWhite {
+  border-top: 6px solid black !important;
+}
+
+.listWhite {
+  color: black !important;
+  background-color: white !important;
+}