From 102fb5a7b15f4174410fe771e29a6be1605274b1 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Thu, 26 Jan 2023 19:06:17 +0300
Subject: [PATCH] Added new theme fn

---
 example/index.js                      |  1 +
 src/cg-select.ts                      | 27 +++++++++++++++++++++-
 src/components/theme/theme.json       | 11 +++++++++
 src/interfaces/cg-select.interface.ts |  1 +
 src/main.scss                         | 10 ++-------
 src/style/classicTheme.scss           | 14 ++++++++++++
 src/style/darkTheme.scss              | 32 +++++++++++++++++++++++++++
 7 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 src/components/theme/theme.json
 create mode 100644 src/style/classicTheme.scss
 create mode 100644 src/style/darkTheme.scss

diff --git a/example/index.js b/example/index.js
index 55d9aaa..131eaa1 100644
--- a/example/index.js
+++ b/example/index.js
@@ -25,6 +25,7 @@ const dropdown = new CGSelect({
       width: '824px',
     },
   },
+  theme: 'dark'
 });
 
 // ------------------------------NativeSelect-----------------------
diff --git a/src/cg-select.ts b/src/cg-select.ts
index 37319d4..d45a1f2 100644
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@@ -37,6 +37,7 @@ export class CGSelect implements ICgSelect {
   placeholder?: string;
   items?: IItems[] | string[] | any;
   darkTheme?: boolean;
+  theme?: string;
   searchMode?: boolean;
   closeOnSelect?: boolean;
   nativeSelectMode?: boolean;
@@ -195,7 +196,7 @@ export class CGSelect implements ICgSelect {
       lable,
       event,
       selected,
-      placeholder,
+      placeholder, theme
     } = setting;
 
     this.options = setting;
@@ -215,6 +216,7 @@ export class CGSelect implements ICgSelect {
     this.event = event;
     this.selected = selected;
     this.placeholder = placeholder;
+    this.theme = theme;
 
     const elem = document.querySelector(this.selector!);
     this.element = elem;
@@ -358,6 +360,7 @@ export class CGSelect implements ICgSelect {
     if (this.darkTheme == false) {
       this.checkTheme();
     }
+    this.themeCheck();
 
     if (this.nativeSelectMode === true) {
       this.selectMode(this.nativeSelectMode);
@@ -680,6 +683,28 @@ export class CGSelect implements ICgSelect {
     }
   }
 
+  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.
diff --git a/src/components/theme/theme.json b/src/components/theme/theme.json
new file mode 100644
index 0000000..01d7937
--- /dev/null
+++ b/src/components/theme/theme.json
@@ -0,0 +1,11 @@
+[
+    {
+        "type": "classic"
+    },
+    {
+        "type": "dark"
+    },
+    {
+        "type": "white"
+    }
+]
\ No newline at end of file
diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts
index a7788b3..012d1e5 100644
--- a/src/interfaces/cg-select.interface.ts
+++ b/src/interfaces/cg-select.interface.ts
@@ -30,6 +30,7 @@ export interface ICgSelect {
    * @type {boolean}
    */
   darkTheme?: boolean;
+  theme?: string;
   /**
    * An optional parameter that adds a live search on the select elements.
    * @type {boolean}
diff --git a/src/main.scss b/src/main.scss
index 6a42d86..cd51e94 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -3,6 +3,8 @@
 @import './style/svgStyle.scss';
 @import './style/whiteTheme.scss';
 @import './style/displayMode.scss';
+@import './style/classicTheme.scss';
+@import './style/darkTheme.scss';
 
 // ----Layout----
 .cg-dropdown {
@@ -26,7 +28,6 @@
   flex-grow: 1;
 
   min-height: 50px;
-  color: #fff;
   padding: 5px;
 
   display: -webkit-box;
@@ -42,7 +43,6 @@
   align-items: center;
 
   text-overflow: ellipsis;
-  background: #2a2f3b;
 
   border: none;
   cursor: pointer;
@@ -70,8 +70,6 @@
     -moz-transition: 0.5s;
     -ms-transition: 0.5s;
     -o-transition: 0.5s;
-
-    background: #394050;
   }
 }
 
@@ -114,10 +112,6 @@
   margin-top: -0.2px;
   list-style: none;
 
-  color: white;
-  background: #2a2f3b;
-  border: 1px #0a0b0e solid;
-
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
diff --git a/src/style/classicTheme.scss b/src/style/classicTheme.scss
new file mode 100644
index 0000000..13dbb9f
--- /dev/null
+++ b/src/style/classicTheme.scss
@@ -0,0 +1,14 @@
+.cg-select{
+    color: #fff;
+    background: #2a2f3b;
+
+    &:hover {   
+        background: #394050;
+      }
+}
+
+.list {
+    color: white;
+    background: #2a2f3b;
+    border: 1px #0a0b0e solid;
+}
\ No newline at end of file
diff --git a/src/style/darkTheme.scss b/src/style/darkTheme.scss
new file mode 100644
index 0000000..bec07f8
--- /dev/null
+++ b/src/style/darkTheme.scss
@@ -0,0 +1,32 @@
+.selectDark {
+    background: rgb(29, 29, 29) !important;
+  }
+  
+//   .selectDark,
+//   .listDark,
+//   .inputWhite,
+//   .pathBlack,
+//   .selectWhite {
+//     color: black !important;
+//   }
+  
+  .caretWhite {
+    border-top: 6px solid black !important;
+  }
+  
+  .listWhite {
+    background-color: white !important;
+  }
+  
+  .inputWhite {
+    border-bottom: 1px solid black !important;
+  }
+  
+  .pathWhite {
+    color: white !important;
+  }
+  
+  .pathBlack {
+    color: black !important;
+  }
+  
\ No newline at end of file