From 2f69e4fbbf17253cccc5850309d1e76546e2e0f4 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 24 Apr 2023 20:24:32 +0300 Subject: [PATCH] Update 0.3.12 --- CHANGELOG.md | 5 +++++ README.md | 43 ++++++++++++++++++++++++++++++++++++++----- READMERU.md | 43 ++++++++++++++++++++++++++++++++++++++----- docs/index.html | 2 +- package-lock.json | 4 ++-- package.json | 2 +- src/cg-select.ts | 41 ++++++++++++++++++++--------------------- 7 files changed, 105 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dce04eb..3fa8776 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -80,3 +80,8 @@ 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. diff --git a/README.md b/README.md index 69c75b6..8badcaa 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.3.11 +## version ~ 0.3.12 ЧИТАТЬ НА РУССКОМ @@ -75,6 +75,39 @@ 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 ( +
+ +
+ ); +}; +``` + ## Example of different selects View live example @@ -95,10 +128,10 @@ All documentation on CG-SELECT is located in the folder of the same name. The do ## Compatibility -| Application Compatibility | JS | React | Angular | Vue | -| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | -| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | -| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available | +| Application Compatibility | JS | React | Angular | Vue | +| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | +| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | +| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | not yet available | ## History diff --git a/READMERU.md b/READMERU.md index 3111cd4..948ef68 100644 --- a/READMERU.md +++ b/READMERU.md @@ -1,6 +1,6 @@ # CG-SELECT -## Версия ~ 0.3.11 +## Версия ~ 0.3.12 English README @@ -76,6 +76,39 @@ 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 ( +
+ +
+ ); +}; +``` + ## Примеры различных вариантов выбора. Рабочий пример @@ -94,10 +127,10 @@ const dropdown = new CGSelect({ ## Совместимость -| Совместимость в приложениях | JS | React | Angular | Vue | -| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | -| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | -| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно | +| Совместимость в приложениях | JS | React | Angular | Vue | +| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | +| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | +| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно | ## История diff --git a/docs/index.html b/docs/index.html index e9f2010..e45e997 100644 --- a/docs/index.html +++ b/docs/index.html @@ -62,7 +62,7 @@ -

version ~ 0.3.1

+

version ~ 0.3.12

This component allows you to create a custom select. It offers more flexible diff --git a/package-lock.json b/package-lock.json index a1482d6..c3eab51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cg-select", - "version": "0.3.11", + "version": "0.3.12", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cg-select", - "version": "0.3.11", + "version": "0.3.12", "license": "ISC", "devDependencies": { "@babel/core": "^7.21.4", diff --git a/package.json b/package.json index 8aeeed6..9ae5d9e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.3.11", + "version": "0.3.12", "source": "index.js", "main": "dist/main.js", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", diff --git a/src/cg-select.ts b/src/cg-select.ts index aa40242..eec9fb0 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -664,7 +664,7 @@ export default class CGSelect implements ICgSelect { private selectMode(nativeSelectMode: boolean) { let win = window.outerWidth; - if (nativeSelectMode === true) { + if (nativeSelectMode) { const select = this.element!.querySelector('.cg-select'); const list = this.element!.querySelector('.list'); const nativeSelect = this.element!.querySelector('.nativeSelect'); @@ -796,11 +796,12 @@ 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!'); } } @@ -811,20 +812,21 @@ export default class CGSelect implements ICgSelect { * @method buttonControl */ public buttonControl(button: Element, method: string) { - if (this.listDisplayMode) { - return; + if (!this.listDisplayMode) { + this.buttonAction = button!; + 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; - } - }); } /** @@ -836,7 +838,7 @@ export default class CGSelect implements ICgSelect { const select = this.element!.querySelector('.cg-select'); const nativeSelect = this.element!.querySelector('.nativeSelect'); - if (value === true) { + if (value) { this.element!.setAttribute('disabled', 'true'); nativeSelect!.setAttribute('disabled', 'true'); select!.classList.add('disabled'); @@ -875,10 +877,8 @@ export default class CGSelect implements ICgSelect { */ public deleteItem(index: number) { if (this.category) { - console.log('can`t add item to category'); - return; + throw new Error('Unable to remove item from category!'); } - const item = this.items[index]; this.items.splice(index, 1); @@ -901,8 +901,7 @@ export default class CGSelect implements ICgSelect { */ public selectIndex(index: number) { if (this.category) { - console.log('can`t add item to category'); - return; + throw new Error('Unable to select item from category!'); } const options = this.element!.querySelectorAll('.list__item') as NodeListOf;