Changed the theme selection function

CHANGELOG.md

@@ -29,3 +29,7 @@ Tested in JS and React. Errors in work in React applications are revealed.
 ### 24.01.2023 - fix 0.2.2
 
 - Fixed documentation etc.
+
+### 27.01.2023 - fix 0.2.3
+
+- Changed the theme selection function.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.2
+## version ~ 0.2.3
 
 This component allows you to create a custom select. It offers more flexible customization and use of select.
 Customization, multi-selection and live search by elements are available.

example/index.js

@@ -25,7 +25,6 @@ const dropdown = new CGSelect({
       width: '824px',
     },
   },
-  theme: 'dark'
 });
 
 // ------------------------------NativeSelect-----------------------

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cg-select",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cg-select",
-      "version": "0.2.2",
+      "version": "0.2.3",
       "license": "ISC",
       "dependencies": {
         "@parcel/optimizer-css": "^2.8.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",

src/cg-select.ts

@@ -24,6 +24,7 @@ import { ru, en } from './language/language';
 import { ILanguage } from './interfaces/language.interface';
 
 import './main.scss';
+import { changeTheme } from './components/theme/theme';
 
 /**
  * @class Class Description ICgSelect
@@ -36,7 +37,6 @@ export class CGSelect implements ICgSelect {
   selected?: string;
   placeholder?: string;
   items?: IItems[] | string[] | any;
-  darkTheme?: boolean;
   theme?: string;
   searchMode?: boolean;
   closeOnSelect?: boolean;
@@ -107,7 +107,7 @@ export class CGSelect implements ICgSelect {
       placeholder: '...',
       lable: '...'
       items: [string|number|object],
-      darkTheme: true/false,
+      theme: string,
       searchMode: true/false,
       closeOnSelect:  true/false,
       nativeSelectMode: true/false,
@@ -175,7 +175,6 @@ export class CGSelect implements ICgSelect {
           'MAN',
           'max',
         ],
-        darkTheme: true,
         multiselect: true,
         multiselectTag: true,
       }
@@ -190,13 +189,13 @@ export class CGSelect implements ICgSelect {
       listDisplayMode,
       nativeSelectMode,
       searchMode,
-      darkTheme,
       language,
       styles,
       lable,
       event,
       selected,
-      placeholder, theme
+      placeholder,
+      theme,
     } = setting;
 
     this.options = setting;
@@ -207,7 +206,6 @@ export class CGSelect implements ICgSelect {
     this.selector = selector;
     this.items = items;
     this.searchMode = searchMode;
-    this.darkTheme = darkTheme;
     this.language = language;
     this.nativeSelectMode = nativeSelectMode;
     this.listDisplayMode = listDisplayMode;
@@ -289,6 +287,7 @@ export class CGSelect implements ICgSelect {
     this.randomId = random;
 
     ulList.classList.add('list');
+    ulList!.classList.add('classicList');
 
     if (this.styles) {
       customStylesFormat(this.styles.list!, ulList);
@@ -357,10 +356,9 @@ export class CGSelect implements ICgSelect {
     this.list = this.element!.querySelector('.list');
     this.caret = this.element!.querySelector('.caret');
 
-    if (this.darkTheme == false) {
+    if (this.theme) {
-      this.checkTheme();
+      changeTheme(this.element!, this.theme!);
     }
-    this.themeCheck();
 
     if (this.nativeSelectMode === true) {
       this.selectMode(this.nativeSelectMode);
@@ -543,6 +541,7 @@ export class CGSelect implements ICgSelect {
     let selectedItemsClear: ISelectedItems = {
       placeholder: this.placeholder!,
       selected: this.selected!,
+      theme: this.theme,
     };
 
     const ulMultipul = document.createElement('ul');
@@ -565,7 +564,6 @@ export class CGSelect implements ICgSelect {
             selected: this.selected!,
             selectedItems: this.selectedItems,
             indexes: this.indexes,
-            darkTheme: this.darkTheme,
             multiselectTag: this.multiselectTag,
           };
         }
@@ -657,54 +655,6 @@ export class CGSelect implements ICgSelect {
     });
   }
 
-  /**
-   * @private
-   * @method checkTheme
-   * @description Changes the color scheme from dark to light.
-   */
-  private checkTheme(): void {
-    const select = this.element!.querySelector('.cg-select');
-    const caret = this.element!.querySelector('.caret');
-    const list = this.element!.querySelector('ul.list');
-    const search = this.element!.querySelector('.inputSearch');
-
-    if (this.darkTheme == false) {
-      select!.classList.add('selectWhite');
-      caret!.classList.add('caretWhite');
-      list!.classList.add('listWhite');
-
-      if (this.searchMode == true) {
-        search!.classList.add('inputWhite');
-      }
-    } else if (this.darkTheme == true) {
-      return;
-    } else {
-      throw new Error('Styles error or invalid value entered!');
-    }
-  }
-
-  private themeCheck(): void{
-    const select = this.element!.querySelector('.cg-select');
-    const caret = this.element!.querySelector('.caret');
-    const list = this.element!.querySelector('ul.list');
-    const search = this.element!.querySelector('.inputSearch');
- 
-    switch (this.theme) {
-      case 'classic':
-        console.log('sss');
-        break;
-      case 'dark':
-        console.log('dark');
-        break;
-      case 'white':
-        console.log('white');
-        break;
-        
-      default:
-        break;
-    }
-  }
-
   /**
    * @private
    * @param {boolean} nativeSelectMode parameter responsible for adding native select.

src/components/theme/theme.json

@@ -1,11 +0,0 @@
-[
-    {
-        "type": "classic"
-    },
-    {
-        "type": "dark"
-    },
-    {
-        "type": "white"
-    }
-]

src/components/theme/theme.ts

@@ -0,0 +1,40 @@
+export function changeTheme(element: Element, theme: string) {
+  const select = element!.querySelector('.cg-select');
+  const caret = element!.querySelector('.caret');
+  const list = element!.querySelector('ul.list');
+  const search = element!.querySelector('.inputSearch');
+  const path = element.querySelectorAll('.pathWhite');
+
+  switch (theme) {
+    case 'dark':
+      select!.classList.remove('classicSelect');
+      select!.classList.add('selectDark');
+      list!.classList.add('listDark');
+      list!.classList.remove('classicList');
+      path.forEach((elem) => {
+        elem.classList.remove('pathBlack');
+        elem.classList.add('pathWhite');
+      });
+      break;
+    case 'white':
+      select!.classList.remove('classicSelect');
+      select!.classList.add('selectWhite');
+      caret!.classList.add('caretWhite');
+      list!.classList.add('listWhite');
+      list!.classList.remove('classicList');
+      path.forEach((elem) => {
+        elem.classList.add('pathBlack');
+        elem.classList.remove('pathWhite');
+      });
+
+      if (search!) {
+        search!.classList.add('inputWhite');
+      }
+      break;
+
+    default:
+      select!.classList.add('classicSelect');
+      list!.classList.add('classicList');
+      break;
+  }
+}

src/components/utils/urils.interface.ts

@@ -55,5 +55,5 @@ export interface ISelectedItems {
    * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
    * @type {boolean}
    */
-  darkTheme?: boolean;
+  theme?: string;
 }

src/components/utils/utils.ts

@@ -77,6 +77,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty
   const caret = document.createElement('div');
 
   select.classList.add('cg-select');
+  select.classList.add('classicSelect');
   selected.classList.add('selected');
   caret.classList.add('caret');
 
@@ -103,7 +104,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty
  * @param {ISelectedItems} dataSelectText the text that is rendered in the select.
  */
 export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
-  const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
+  const { selectedItems, indexes, theme, multiselectTag } = dataSelectText;
 
   const options = element.querySelectorAll('.list__item');
   const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
@@ -122,14 +123,19 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
     return;
   }
 
-  if (darkTheme === true || !darkTheme) {
+  switch (theme) {
-    path1.classList.add('pathWhite');
+    case 'dark':
-    path2.classList.add('pathWhite');
+      path1.classList.add('pathWhite');
-  }
+      path2.classList.add('pathWhite');
-
+      break;
-  if (darkTheme === false) {
+    case 'white':
-    path1.classList.add('pathBlack');
+      path1.classList.add('pathBlack');
-    path2.classList.add('pathBlack');
+      path2.classList.add('pathBlack');
+      break;
+    default:
+      path1.classList.add('pathWhite');
+      path2.classList.add('pathWhite');
+      break;
   }
 
   svgIcon.classList.add('svg-icon');

src/interfaces/cg-select.interface.ts

@@ -26,10 +26,9 @@ export interface ICgSelect {
    */
   items?: IItems[] | string[] | any;
   /**
-   * An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).
+   * An optional parameter responsible for switching between different themes, the classic theme is set by default.
-   * @type {boolean}
+   * @type {string}
    */
-  darkTheme?: boolean;
   theme?: string;
   /**
    * An optional parameter that adds a live search on the select elements.

src/style/classicTheme.scss

@@ -1,14 +1,22 @@
-.cg-select{
+.classicSelect {
-    color: #fff;
+  color: #fff;
-    background: #2a2f3b;
+  background: #2a2f3b;
 
-    &:hover {   
+  &:hover {
-        background: #394050;
+    background: #394050;
-      }
+  }
 }
 
-.list {
+.classicList {
-    color: white;
+  color: white;
-    background: #2a2f3b;
+  background: #2a2f3b;
-    border: 1px #0a0b0e solid;
+  border: 1px #0a0b0e solid;
+}
+
+.pathWhite {
+  color: white !important;
+}
+
+.pathBlack {
+  color: black;
 }

src/style/darkTheme.scss

@@ -1,32 +1,17 @@
 .selectDark {
-    background: rgb(29, 29, 29) !important;
+  background: rgb(29, 29, 29);
-  }
+  color: white;
+}
 
-//   .selectDark,
+.caretWhite {
-//   .listDark,
+  border-top: 6px solid black !important;
-//   .inputWhite,
+}
-//   .pathBlack,
-//   .selectWhite {
-//     color: black !important;
-//   }
 
-  .caretWhite {
+.listDark {
-    border-top: 6px solid black !important;
+  background: rgb(29, 29, 29);
-  }
+  color: white;
-  
+}
-  .listWhite {
-    background-color: white !important;
-  }
-  
-  .inputWhite {
-    border-bottom: 1px solid black !important;
-  }
-  
-  .pathWhite {
-    color: white !important;
-  }
-  
-  .pathBlack {
-    color: black !important;
-  }
 
+.inputDark {
+  border-bottom: 1px solid black !important;
+}

src/style/whiteTheme.scss

@@ -1,5 +1,5 @@
 .selectWhite {
-  background: rgb(248, 248, 248) !important;
+  background: rgb(248, 248, 248);
 }
 
 .selectWhite,
@@ -7,25 +7,18 @@
 .inputWhite,
 .pathBlack,
 .selectWhite {
-  color: black !important;
+  color: black;
 }
 
 .caretWhite {
-  border-top: 6px solid black !important;
+  border-top: 6px solid black;
 }
 
 .listWhite {
-  background-color: white !important;
+  background-color: white;
 }
 
 .inputWhite {
   border-bottom: 1px solid black !important;
-}
-
-.pathWhite {
-  color: white !important;
-}
-
-.pathBlack {
   color: black !important;
 }