CHANGELOG.md

@@ -80,8 +80,3 @@ Tested in JS and React. Errors in work in React applications are revealed.
 ##### 04.03.2023 - fix 0.3.1
 
 - Fixed import select.
-
-##### 04.03.2023 - fix 0.3.12
-
-- Optimized code.
-- Added error messages when using public methods.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.3.12
+## version ~ 0.3.11
 
 <a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
 
@@ -75,39 +75,6 @@ const dropdown = new CGSelect({
 });
 ```
 
-### An example of initialization a CGSelect in React.
-
-```javascript
-import { useEffect } from 'react';
-import CGSelect from 'cg-select';
-
-const App = () => {
-  useEffect(() => {
-    const drop = new CGSelect({
-      selector: '.cg-dropdown_selector',
-      placeholder: 'Выберите авто',
-      items: [
-        'BMW',
-        {
-          id: '213sade',
-          title: 'Opel',
-          value: 1,
-        },
-        'Mersedes',
-        'MAN',
-        'Ferari',
-      ],
-    });
-  }, []);
-
-  return (
-    <div className="App">
-      <button className="cg-dropdown cg-dropdown_selector"></button>
-    </div>
-  );
-};
-```
-
 ## Example of different selects
 
 <a href="https://cg-select.itguild.info/">View live example</a>
@@ -132,8 +99,8 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
 
 | Application Compatibility |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
 | ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
-| CG-SELECT                 | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> |
+| CG-SELECT                 | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> |
-| Comment                   |                 Tested in Js applications and it works.                  |                                                The select is initiated inside the `useEffect() `hook                                                |                            not yet available                            |                            not yet available                            |
+| Comment                   |                 Tested in Js applications and it works.                  |                                               Works only with a crutch in the form `setTimeout()`                                                |                            not yet available                            |                            not yet available                            |
 
 ## History
 

READMERU.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## Версия ~ 0.3.12
+## Версия ~ 0.3.11
 
 <a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
 
@@ -76,39 +76,6 @@ const dropdown = new CGSelect({
 });
 ```
 
-### Пример инициализации CGSelect в React.
-
-```javascript
-import { useEffect } from 'react';
-import CGSelect from 'cg-select';
-
-const App = () => {
-  useEffect(() => {
-    const drop = new CGSelect({
-      selector: '.cg-dropdown_selector',
-      placeholder: 'Выберите авто',
-      items: [
-        'BMW',
-        {
-          id: '213sade',
-          title: 'Opel',
-          value: 1,
-        },
-        'Mersedes',
-        'MAN',
-        'Ferari',
-      ],
-    });
-  }, []);
-
-  return (
-    <div className="App">
-      <button className="cg-dropdown cg-dropdown_selector"></button>
-    </div>
-  );
-};
-```
-
 ## Примеры различных вариантов выбора.
 
 <a href="https://cg-select.itguild.info/">Рабочий пример</a>
@@ -129,8 +96,8 @@ const App = () => {
 
 | Совместимость в приложениях |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
 | --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
-| CG-SELECT                   | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/no.png"></img> |
+| CG-SELECT                   | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> <img src="src/images/no.png"></img>| <img src="src/images/no.png"></img> | <img src="src/images/no.png"></img> |
-| Комментарий                 |                     Протестировано в Js приложениях                      |                                                 Инициация селекта происходит внутри хука `useEffect()`                                                 |                             пока недоступно                             |                             пока недоступно                             |
+| Комментарий                 |                     Протестировано в Js приложениях                      |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                             пока недоступно                             |
 
 ## История
 

docs/index.html

@@ -62,7 +62,7 @@
           </a>
 
           <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
-            <h2>version ~ 0.3.12</h2>
+            <h2>version ~ 0.3.1</h2>
           </a>
           <p>
             This component allows you to create a custom select. It offers more flexible

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cg-select",
-  "version": "0.3.12",
+  "version": "0.3.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cg-select",
-      "version": "0.3.12",
+      "version": "0.3.11",
       "license": "ISC",
       "devDependencies": {
         "@babel/core": "^7.21.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.3.12",
+  "version": "0.3.11",
   "source": "index.js",
   "main": "dist/main.js",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",

src/cg-select.ts

@@ -664,7 +664,7 @@ export default class CGSelect implements ICgSelect {
   private selectMode(nativeSelectMode: boolean) {
     let win = window.outerWidth;
 
-    if (nativeSelectMode) {
+    if (nativeSelectMode === true) {
       const select = this.element!.querySelector('.cg-select');
       const list = this.element!.querySelector('.list');
       const nativeSelect = this.element!.querySelector('.nativeSelect');
@@ -796,12 +796,11 @@ export default class CGSelect implements ICgSelect {
       const textNoRezult = this.element!.querySelector('.noRezult');
       const textNode = document.createTextNode(textInListSearch);
 
+      search!.setAttribute('placeholder', placeholder);
       search!.setAttribute('placeholder', placeholder);
 
       textNoRezult!.textContent = '';
       textNoRezult!.appendChild(textNode);
-    } else {
-      throw new Error('You cannot change the language if it is not enabled searchMode!');
     }
   }
 
@@ -812,21 +811,20 @@ export default class CGSelect implements ICgSelect {
    * @method buttonControl
    */
   public buttonControl(button: Element, method: string) {
-    if (!this.listDisplayMode) {
+    if (this.listDisplayMode) {
-      this.buttonAction = button!;
+      return;
-      button.addEventListener('click', () => {
-        switch (method.toLowerCase()) {
-          case 'open':
-            this.open(true);
-            break;
-          case 'close':
-            this.close();
-            break;
-        }
-      });
-    } else {
-      throw new Error('Sheet display enabled in listDisplayMode!');
     }
+
+    this.buttonAction = button!;
+    button.addEventListener('click', () => {
+      if (method.toLowerCase() === 'open') {
+        this.open(true);
+      } else if (method.toLowerCase() === 'close') {
+        this.close();
+      } else {
+        return;
+      }
+    });
   }
 
   /**
@@ -838,7 +836,7 @@ export default class CGSelect implements ICgSelect {
     const select = this.element!.querySelector('.cg-select');
     const nativeSelect = this.element!.querySelector('.nativeSelect');
 
-    if (value) {
+    if (value === true) {
       this.element!.setAttribute('disabled', 'true');
       nativeSelect!.setAttribute('disabled', 'true');
       select!.classList.add('disabled');
@@ -877,8 +875,10 @@ export default class CGSelect implements ICgSelect {
    */
   public deleteItem(index: number) {
     if (this.category) {
-      throw new Error('Unable to remove item from category!');
+      console.log('can`t add item to category');
+      return;
     }
+
     const item = this.items[index];
 
     this.items.splice(index, 1);
@@ -901,7 +901,8 @@ export default class CGSelect implements ICgSelect {
    */
   public selectIndex(index: number) {
     if (this.category) {
-      throw new Error('Unable to select item from category!');
+      console.log('can`t add item to category');
+      return;
     }
 
     const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;